._panel_1thba_1 {
  border: 1px solid #e5e7eb;
  border-radius: 40px;
  background: #fff;
  margin: 24px 0 0;
  padding: 24px 23px;
  overflow: hidden;
}

/* The pill chrome lives in pill.css (.heading, on the inner span — real
   heading text stays in the markup, the uppercase is cosmetic). This block
   only spaces the heading, since inline boxes can't carry vertical margin. */
._title_1thba_13 {
  margin: 0 0 12px;
}

._subtitle_1thba_17 {
  font-size: 13px;
  font-weight: 500;
  color: #6b7380;
  margin: 0 0 8px;
}

/* ── Below-the-gate text states (stage 7) ────────── */

._stateLead_1thba_26 {
  font-size: 16px;
  font-weight: 700;
  color: #0f1114;
  margin: 8px 0 6px;
}

._stateFact_1thba_33 {
  font-size: 14px;
  font-weight: 500;
  color: #333840;
  line-height: 1.6;
  margin: 0 0 4px;
  max-width: 620px;
}

._chartWrap_1thba_42 {
  margin-bottom: 8px;
}

._divider_1thba_46 {
  height: 1px;
  background: #e8ebf0;
  margin: 0 0 20px;
}

/* ── KPI row ─────────────────────────────────────── */

._kpiRow_1thba_54 {
  display: flex;
  align-items: flex-start;
  margin-bottom: 0px;
}

._kpi_1thba_54 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
  padding-right: 24px;
}

._kpiSep_1thba_69 {
  width: 1px;
  height: 44px;
  background: #e8ebf0;
  flex-shrink: 0;
  margin-right: 24px;
}

._kpiLabel_1thba_77 {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: #8c949e;
  text-transform: uppercase;
}

._kpiValue_1thba_85 {
  font-size: 16px;
  font-weight: 700;
  color: #0f1114;
}

/* ── Legend ──────────────────────────────────────── */

._legendRow_1thba_93 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

._legendItems_1thba_100 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 16px;
  row-gap: 6px;
}

/* One swatch+label pair — never breaks internally; the row wraps between
   pairs (2×2 on narrow screens). */
._legendItem_1thba_100 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

._swatch_1thba_117 {
  display: inline-block;
  width: 14px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

._legendText_1thba_125 {
  font-size: 11px;
  font-weight: 500;
  color: #6b7380;
}

/* One label per breakpoint (Nick 2026-07-28). Wide is the default so any
   context without the media query gets the fuller wording. */
._narrow_1thba_133 {
  display: none;
}

@media (max-width: 640px) {
  ._wide_1thba_138 {
    display: none;
  }

  ._narrow_1thba_133 {
    display: inline;
  }
}

/* ── Responsive ─────────────────────────────────── */

@media (max-width: 900px) {
  ._panel_1thba_1 {
    margin-top: 16px;
    padding: 16px 15px;
  }

  ._kpiRow_1thba_54 {
    flex-wrap: wrap;
    gap: 16px;
  }

  ._kpiSep_1thba_69 {
    display: none;
  }

  ._kpi_1thba_54 {
    flex: 0 0 calc(50% - 8px);
    padding-right: 0;
  }
}

@media (max-width: 640px) {
  ._panel_1thba_1 {
    border-radius: 24px;
  }

  ._kpi_1thba_54 {
    flex: 0 0 100%;
  }

  /* The legend stays a single inline row on the phone too (Nick 2026-07-28) —
     it used to turn into a column, which cost three lines. The shortened
     labels are what let the three items sit on one or two. */
  ._legendItems_1thba_100 {
    column-gap: 12px;
  }
}
._wrap_1imw0_1 {
  position: relative;
  width: 100%;
  overflow: visible;
}

._svg_1imw0_7 {
  display: block;
}

/* The chart is one tab stop and the arrows walk it (C9), so it needs to look
   focused. focus-visible only: clicking a bar focuses the svg too, and a ring
   round the whole chart on every click would be noise. */
._svg_1imw0_7:focus {
  outline: none;
}

._svg_1imw0_7:focus-visible {
  outline: 2px solid #0062ff;
  outline-offset: 3px;
  border-radius: 6px;
}

/* Spoken, never shown — the arrow-key readout of the focused week (C9). */
._srOnly_1imw0_25 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Hover tooltip — stage-4 design: small boxed-grid micro-table, value-first.
   Label left / value right; the hovered week's Performance leads. Positioned
   absolutely inside the chart wrap and clamped to it (solid-ux-tidy
   2026-07-22) — it can never hang outside the container. */
._tip_1imw0_41 {
  position: absolute;
  pointer-events: none;
  z-index: 20;
  /* Mount-only fade: while sliding across bars the element stays mounted
     (only position/content update), so this plays once on appear and never
     replays mid-slide. Hide stays instant so it can't trail the pointer. */
  animation: _tipIn_1imw0_1 0.1s ease-out;
  background: #fff;
  border: 1px solid #e7e9ee;
  border-radius: 11px;
  box-shadow: 0 5px 20px rgba(15, 17, 20, 0.1);
  max-width: 260px;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}

._tt_1imw0_58 {
  font-size: 11px;
  line-height: 1.3;
  color: #333840;
}

._ttWk_1imw0_64 {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #9aa1aa;
  padding: 5px 10px 2px;
}

._ttRow_1imw0_73 {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 10px;
  border-bottom: 1px solid #eef0f3;
}

._ttRow_1imw0_73:last-child {
  border-bottom: none;
}

._ttHead_1imw0_85 {
  background: #f6f7f9;
}

._ttHead_1imw0_85 ._ttL_1imw0_89 {
  font-weight: 700;
  color: #333840;
}

._ttHead_1imw0_85 ._ttV_1imw0_94 {
  font-size: 12px;
}

._ttL_1imw0_89 {
  color: #6b7380;
  font-weight: 500;
}

._ttV_1imw0_94 {
  color: #0f1114;
  font-weight: 700;
}

/* The bottom "✓ Worked at X checkouts" line — green, full-width statement. */
._ttWork_1imw0_109 {
  color: #0f9a4c;
  font-weight: 700;
}

@keyframes _tipIn_1imw0_1 {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  ._tip_1imw0_41 { animation: none; }
}
._burst_1k98d_1 {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}

._bit_1k98d_10 {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  opacity: 0;
  animation: _fling_1k98d_1 700ms ease-out forwards;
}

@keyframes _fling_1k98d_1 {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(var(--cx), var(--cy)) scale(0.5) rotate(200deg);
  }
}
/* The table's own layout is overridden throughout (flex here, grid on the
   phone row). That is deliberate and safe only because every element carries an
   explicit ARIA role — see the comment on <tbody> in coupon.jsx. */
._row_1s0u2_4 {
  display: flex;
  align-items: center;
  min-height: 60px;
  padding: 12px 23px;
  transition: background 0.1s;
}

/* ── Column headers (moved here from slug.css so they sit beside the cells
      they label) ─────────────────────────────────────── */

/* Subtle inset grey strip (Nick's pick, 2026-07-23): the 12px side margin +
   12px inner padding line the labels up with the rows' 24px edge. */
._tableHead_1s0u2_17 {
  display: block;
  margin: 8px 12px 0;
  padding: 8px 11px;
  background: #f7f8fa;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #9ca3af;
}

._tableHeadRow_1s0u2_30 {
  display: flex;
  align-items: center;
}

._tableHead_1s0u2_17 ._tableHeadRow_1s0u2_30 > th {
  font: inherit;
  color: inherit;
  text-align: left;
  padding: 0;
}

._colDiscount_1s0u2_42 {
  flex: 1;
  min-width: 0;
}

._colLastVerified_1s0u2_47,
._colVotes_1s0u2_48 {
  width: 150px;
  flex-shrink: 0;
}

._colCode_1s0u2_53 {
  width: 180px;
  flex-shrink: 0;
}

/* Kept in the accessibility tree, taken off the screen. Used for the try-next
   chain (no visible header) and for every viewport below 900px. */
._tableHeadHidden_1s0u2_60 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

._row_1s0u2_4:hover {
  background: #fafafa;
}

/* The whole row copies (N5, Nick 2026-07-28), so the whole row says so. The
   hover tint above already implied it; this is the half that was missing. */
._rowClickable_1s0u2_78 {
  cursor: pointer;
}

/* Text for screen readers only — carries what a visual-only cue conveys
   (e.g. that a shown code is truncated). Never a claim the page doesn't
   also make visibly. */
._srOnly_1s0u2_85 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Wraps a row + its expandable performance chart; transparent so the row list
   reads exactly as before when collapsed. */
._rowWrap_1s0u2_99 {
  display: block;
}

/* The expandable chart is its own row inside the same row group. */
._expandRow_1s0u2_104 {
  display: block;
}

/* The copied → vote state replaces all four columns with one spanning cell,
   and takes over the flex duty the row used to do for those children. */
._voteCell_1s0u2_110 {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  /* The copied hint and the thanks are separate statements and must not run
     together — with no gap they touched at 390px (B6, 2026-07-28). The hint is
     the element that gives way here: it ellipsises, the code beside it never
     does, and the thanks keeps its full wording. */
  gap: 10px;
}

/* The dashed separator sits at the BOTTOM of the expanded block (Sharif,
   ruled 2026-07-22) so the chart reads as attached to its own row, not the
   row below it. */
._expand_1s0u2_104 {
  /* C10 overrode `display` on every other element in this table but left this
     one <td> at the UA's table-cell. A lone table-cell inside a display:block
     row gets an anonymous table wrapper and SHRINK-TO-FITS its content, so the
     chart was laid out in 348px of a 1006px row (300px wide, 47px tall) at
     desktop — the whole reason the per-code chart looked tiny there. Block
     makes it fill the row; role="cell" in the markup keeps the semantics. */
  display: block;
  padding: 8px 23px 24px;
  background: #fcfcfd;
  border-bottom: 1px dashed #e8ebf0;
  animation: _copiedIn_1s0u2_1 0.28s ease-out;
}

._expandTitle_1s0u2_139 {
  font-size: 12px;
  font-weight: 700;
  color: #0f1114;
  padding: 12px 0 4px;
}

/* Simple shimmer skeleton while the code's full series is fetched on expand.
   Sized by the strip chart's own aspect ratio so the swap can't shift layout. */
._chartPlaceholder_1s0u2_148 {
  aspect-ratio: 960 / 150;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: 12px;
  font-weight: 500;
  border-radius: 12px;
  background: linear-gradient(90deg, #f6f7f9 25%, #eef0f3 37%, #f6f7f9 63%);
  background-size: 400% 100%;
  animation: _chartShimmer_1s0u2_1 1.2s ease-in-out infinite;
}

@keyframes _chartShimmer_1s0u2_1 {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/* (Reduced-motion for all flow animations lives in ONE block at the end of
   this file — it must come after every animated rule to win the cascade.) */
@media (prefers-reduced-motion: reduce) {
  ._chartPlaceholder_1s0u2_148 { animation: none; }
}

._chartMsg_1s0u2_173 {
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: 12.5px;
  font-weight: 500;
}

/* ── Discount ───────────────────────────────────── */

/* The browser's own <td> padding, 1px, which C10 inherited the moment these
   became real tables. It sat between the row's inset and the first thing in
   the cell, so the rank number missed the page's text column by exactly that
   (Nick, 2026-07-29: compress the cluster to one edge). Same class of thing as
   the unreset body margin B11 removed: a UA default nobody chose. */
._row_1s0u2_4 > td {
  padding: 0;
}

._discountCol_1s0u2_194 {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
}

/* Reads as the lead-in to the description on the same line ("1. 10% off"),
   not as its own indented column (Nick 2026-07-27). Quieter than the
   description it labels — L2, ruled after seeing it at three weights — and a
   fixed size regardless of the description's register, so the numbers stay one
   consistent voice down the list. aria-hidden: the row's position is already
   conveyed by the list order itself. */
._rankNum_1s0u2_210 {
  font-size: 13.5px;
  font-weight: 600;
  color: #c3c8cf;
  letter-spacing: -0.2px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* May carry a full description when no value parsed — truncate, never wrap. */
._dealValue_1s0u2_220 {
  font-size: 18px;
  font-weight: 700;
  color: #0f1114;
  letter-spacing: -0.3px;
  flex-shrink: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A row with no scraped discount amount names itself instead: "Coupon code:
   NICK10" (W1, Nick 2026-07-27). One register for the whole phrase, the code
   a shade darker and letter-spaced so it still reads as a code. It ellipsises
   as one string, which means on a long code the LABEL survives and the code is
   what gets cut — the right way round, because the code box on the same row
   carries it in full. */
._dealCodeLabel_1s0u2_238 {
  font-size: 16px;
  font-weight: 600;
  color: #6b7380;
  letter-spacing: -0.1px;
}

._dealCodeLabel_1s0u2_238 b {
  font-weight: 700;
  color: #333845;
  letter-spacing: 0.5px;
}

/* ── Source ─────────────────────────────────────── */

._sourceCol_1s0u2_253 {
  width: 180px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

._sourceName_1s0u2_261 {
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  white-space: nowrap;
}

/* ── Last Verified ──────────────────────────────── */

._lastUsedCol_1s0u2_270 {
  width: 150px;
  flex-shrink: 0;
}

._lastUsedText_1s0u2_275 {
  font-size: 12px;
  font-weight: 500;
  color: #8ebb1c;
  white-space: nowrap;
}

/* ── Votes ──────────────────────────────────────── */

._votesCol_1s0u2_284 {
  width: 150px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
}

/* ── Performance micro-chart button (ADR 2026-07-20) ── */
._perfBtn_1s0u2_295 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 4px 8px;
  cursor: pointer;
  font-family: inherit;
}

._perfBtn_1s0u2_295:hover {
  border-color: #d4d7dc;
  background: #fcfcfd;
}

._perfPct_1s0u2_312 {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

._perfState_1s0u2_318 {
  font-size: 12px;
  font-weight: 600;
  color: #8c949e;
}

._chevron_1s0u2_324 {
  flex-shrink: 0;
  transition: transform 0.2s;
}

._chevronUp_1s0u2_329 {
  transform: rotate(180deg);
}

/* Success-column quiet register (ADR 2026-07-20, Direction C; revised
   2026-07-22 — NEW moved out into its own pill, so the column now reads in
   three registers: the interactive perf pill, the NEW pill, and this quiet
   text for a thin % or the no-signal dash). */
._successQuiet_1s0u2_337 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #8c949e;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* NEW pill — same chrome as the performance pill so the Success column's
   badges read as one family (Nick's ruling 2026-07-22); static, not
   interactive. The % keeps its band colour inline. */
._newPill_1s0u2_349 {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #6b7380;
  font-variant-numeric: tabular-nums;
  white-space: pre;
}

/* ── Code ───────────────────────────────────────── */

._codeCol_1s0u2_366 {
  width: 180px;
  flex-shrink: 0;
}

._codeWrap_1s0u2_371 {
  display: flex;
  align-items: stretch;
  gap: 6px;
}

._codeText_1s0u2_377 {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  background: #f4f5f7;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #333845;
}

/* text-overflow needs a non-flex text box — on the flex container the
   ellipsis silently never renders and long codes hard-clip mid-glyph
   (Sharif's "ellipsis at the edge", ruled 2026-07-22). */
._codeText_1s0u2_377 > span {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A code that's meant to be readable (no reveal gate) never ellipsises —
   it wraps instead. The shopper must be able to SEE the code, not just copy
   it (F17, solid-design-pass 2026-07-27). */
._codeText_1s0u2_377 > ._codeFull_1s0u2_404 {
  white-space: normal;
  overflow-wrap: anywhere;
  text-overflow: clip;
}

._copyBtn_1s0u2_410 {
  position: relative;
  background: #00a6ff;
  color: #fff;
  border: 2px solid #0062ff;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: inherit;
  box-shadow: 2px 2px 0 0 #0062ff;
  transition: transform 0.1s, box-shadow 0.1s;
}

._copyBtn_1s0u2_410:hover {
  background: #00aaff;
}

._copyBtn_1s0u2_410:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 0 #0062ff;
}

._dealTag_1s0u2_436 {
  display: inline-block;
  background: #f4f5f7;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  color: #9ca3af;
}

/* ── Copied message ──────────────────────────────── */

/* Slides in with the house motion (solid-ux-tidy 2026-07-22). Pure CSS on
   mount — the clipboard write has already fired by the time this renders, so
   the animation can never delay it. */
._copiedMessage_1s0u2_451 {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  animation: _copiedIn_1s0u2_1 0.28s ease-out;
}

@keyframes _copiedIn_1s0u2_1 {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* The thanks line fades in when it replaces the vote buttons. Declared
   before .leaving so the exit still wins when both classes are present. */
._thanksIn_1s0u2_469 {
  animation: _copiedIn_1s0u2_1 0.18s ease-out;
}

/* Exit mirror of copiedIn — the JSX holds the copied/thanks UI through a
   ~0.2s 'leaving' beat before swapping back, so it fades out instead of
   vanishing. Declared after the entry classes so its animation wins. */
._leaving_1s0u2_468 {
  animation: _copiedOut_1s0u2_1 0.2s ease-in forwards;
}


@keyframes _copiedOut_1s0u2_1 {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-4px); }
}

/* The returning normal row fades back in (class added at the swap). */
._rowReturn_1s0u2_487 {
  animation: _rowFadeIn_1s0u2_1 0.18s ease-out;
}

/* Quick fade for the lazy-loaded chart arriving over the shimmer. */
._chartIn_1s0u2_492 {
  animation: _rowFadeIn_1s0u2_1 0.18s ease-out;
}

@keyframes _rowFadeIn_1s0u2_1 {
  from { opacity: 0; }
  to { opacity: 1; }
}

._copiedCode_1s0u2_501 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #00a6ff;
  flex-shrink: 0;
}

._copiedText_1s0u2_509 {
  font-size: 14px;
  font-weight: 600;
  color: #0f1114;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Below the width where the code, the hint and the thanks all fit, the hint
   is the one that goes — and only after the vote, when it has already been
   read. The code never gives way, at any width. */
@media (max-width: 640px) {
  ._copiedVoted_1s0u2_521 ._copiedText_1s0u2_509 {
    display: none;
  }
}

/* ── Vote prompt ─────────────────────────────────── */

._votePanel_1s0u2_528 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

._votePrompt_1s0u2_535 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  min-width: 0;
}

._voteQuestion_1s0u2_543 {
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  white-space: nowrap;
}

._voteSubtext_1s0u2_550 {
  font-size: 10.5px;
  font-weight: 500;
  color: #9ca3af;
  white-space: nowrap;
}

._voteButtons_1s0u2_557 {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

._voteBtn_1s0u2_563 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid transparent;
  color: #fff;
  font-family: inherit;
  transition: transform 0.1s, box-shadow 0.1s, opacity 0.1s;
}

._voteBtnYes_1s0u2_579 {
  background: #21c766;
  border-color: #16ad55;
  box-shadow: 2px 2px 0 0 #16ad55;
}

._voteBtnYes_1s0u2_579:hover { opacity: 0.9; }

._voteBtnYes_1s0u2_579:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 0 #16ad55;
}

._voteBtnNo_1s0u2_592 {
  background: #ff095c;
  border-color: #d60c50;
  box-shadow: 2px 2px 0 0 #d60c50;
}

._voteBtnNo_1s0u2_592:hover { opacity: 0.9; }

._voteBtnNo_1s0u2_592:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 0 #d60c50;
}

/* ── Vote thanks ─────────────────────────────────── */

._voteThanks_1s0u2_607 {
  /* relative: anchors the confetti burst on a yes-vote */
  position: relative;
  font-size: 12px;
  font-weight: 600;
  color: #9ca3af;
  white-space: nowrap;
  text-align: right;
  flex-shrink: 0;
}

/* ── Tried badge (stage 3) ───────────────────────── */

/* Lands with a tiny scale-pop; the badge is keyed on its outcome so the pop
   replays as • becomes ✓/✗ (solid-ux-tidy, Nick 2026-07-22). */
._triedBadge_1s0u2_622 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  background: #eef0f3;
  color: #8c949e;
  flex-shrink: 0;
  animation: _badgePop_1s0u2_1 0.15s ease-out;
}

@keyframes _badgePop_1s0u2_1 {
  from { transform: scale(0.85); opacity: 0.5; }
  to { transform: scale(1); opacity: 1; }
}

/* Scheme green/red (ruling 2026-07-22), pale circle tinted from the same hue. */
._triedYes_1s0u2_643 {
  background: #e4f8ed;
  color: #21c766;
}

._triedNo_1s0u2_648 {
  background: #ffe6ef;
  color: #ff095c;
}

/* ── Responsive ─────────────────────────────────── */

/* The two-line row (H1, Nick 2026-07-27). Below 900px the columns used to
   simply vanish, taking recency, the chance signal AND the only route to the
   per-code chart with them — a phone saw a label, a code and a button. Now the
   row places its four cells on two lines instead of shedding two of them.
   Grid, not wrapped flex: the placement is declared rather than emergent, so
   no spacer element is needed to force the break (C10 — a table row should not
   carry a cell that exists only to wrap) and each cell's line is stated
   outright rather than implied by an `order` number. */
@media (max-width: 900px) {
  ._row_1s0u2_4 {
    /* B11: 8 vertical keeps the two-line row dense, 15 horizontal puts its
       text on the page's column (16 minus the table card's 1px border). */
    padding: 8px 15px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'deal chance'
      'code used';
    align-items: center;
    row-gap: 9px;
    column-gap: 10px;
  }

  /* A two-line row needs telling apart from the next one (P1, Nick
     2026-07-27). Hairline only — the rows carry their own weight. */
  ._rowWrap_1s0u2_99 + ._rowWrap_1s0u2_99 > ._row_1s0u2_4 {
    border-top: 1px solid #f0f1f3;
  }

  /* …except straight after an expanded chart, which already closes itself
     with a dashed rule; two lines together read as a mistake. */
  ._rowWrap_1s0u2_99:has(._expand_1s0u2_104) + ._rowWrap_1s0u2_99 > ._row_1s0u2_4 {
    border-top: 0;
  }

  /* The description truncates (it already has min-width:0 + ellipsis) rather
     than pushing the chance chip onto a line of its own. */
  ._discountCol_1s0u2_194 {
    grid-area: deal;
    min-width: 0;
  }

  /* Restored — this column carries the chart button. */
  ._votesCol_1s0u2_284 {
    grid-area: chance;
    display: flex;
    width: auto;
    justify-content: flex-end;
  }

  ._codeCol_1s0u2_366 {
    grid-area: code;
    width: auto;
    max-width: 260px;
  }

  /* Restored, and pushed to the far edge of its line. */
  ._lastUsedCol_1s0u2_270 {
    grid-area: used;
    display: block;
    width: auto;
    justify-self: end;
  }

  /* The vote state is one cell, so it spans both grid columns. */
  ._voteCell_1s0u2_110 {
    grid-column: 1 / -1;
  }

  /* Below this width the strip labels columns that are no longer laid out as
     columns — but it stays in the accessibility tree so every cell keeps its
     header (that association is the whole point of C10). */
  /* The expanded chart shares its row's inset. Without this it kept the
     desktop value on a phone — missed in the B11 build because the probe
     measured the row's text and never opened the chart under it. */
  ._expand_1s0u2_104 {
    padding: 4px 15px 16px;
  }

  ._tableHead_1s0u2_17 {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    background: none;
  }
}

@media (max-width: 640px) {
  /* The buttons carry the question ("It worked / It didn't"), so the prompt
     text can drop out entirely when the row gets tight — nothing orphans. */
  ._votePrompt_1s0u2_535 {
    display: none;
  }
}

/* ── Reduced motion ──────────────────────────────── */

/* Kept LAST so it out-cascades every animated rule above (same specificity,
   source order decides). */
@media (prefers-reduced-motion: reduce) {
  ._copiedMessage_1s0u2_451,
  ._expand_1s0u2_104,
  ._leaving_1s0u2_468,
  ._thanksIn_1s0u2_469,
  ._rowReturn_1s0u2_487,
  ._chartIn_1s0u2_492,
  ._triedBadge_1s0u2_622 { animation: none; }
}
._banner_1qhye_1 {
  width: 100%;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

._inner_1qhye_7 {
  width: 100%;
  max-width: 1008px;
  margin: 0 auto;
  padding: 12px 24px;
  box-sizing: border-box;
}

._text_1qhye_15 {
  margin: 0;
  font-family: 'General Sans', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.5;
  color: #6b7280;
}

/* The free-page line leads on the good news, so it gets the only emphasis in
   the strip (E1, Nick 2026-07-28). */
._strong_1qhye_26 {
  font-weight: 650;
  color: #0f1114;
}

._link_1qhye_31 {
  color: #0f1114;
  text-decoration: underline;
  white-space: nowrap;
}

._link_1qhye_31:hover {
  color: #6b7280;
}

@media (max-width: 1040px) {
  ._inner_1qhye_7 {
    padding: 12px 48px;
  }
}

@media (max-width: 900px) {
  ._inner_1qhye_7 {
    padding: 8px 28px;
  }
}
._page_1gd98_1 {
  display: flex;
  flex-direction: column;
  background: #fff;
  min-height: 100vh;
  font-family: 'General Sans', sans-serif;
}

._main_1gd98_9 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 72px 24px 96px;
  box-sizing: border-box;
}

/* ── Clipped coupon graphic ────────────────────────────────── */

._coupon_1gd98_21 {
  position: relative;
  border: 3px dashed hsl(252, 69%, 60%);
  border-radius: 20px;
  padding: 14px 54px 22px;
  transform: rotate(-2deg);
  background: hsl(252, 69%, 97%);
}

._code_1gd98_30 {
  font-size: 108px;
  font-weight: 700;
  line-height: 1;
  color: hsl(252, 69%, 60%);
  letter-spacing: 0.02em;
}

._scissors_1gd98_38 {
  position: absolute;
  top: -15px;
  left: 32px;
  font-size: 26px;
  transform: rotate(90deg);
}

/* ── Copy ──────────────────────────────────────────────────── */

._headline_1gd98_48 {
  font-weight: 700;
  font-size: 42px;
  line-height: 1.05;
  color: #0f1114;
  margin: 8px 0 0;
  text-align: center;
  max-width: 620px;
}

._body_1gd98_58 {
  color: #3f4650;
  font-size: 17px;
  line-height: 1.55;
  text-align: center;
  max-width: 460px;
  margin: 0;
}

._searchWrap_1gd98_67 {
  width: 100%;
  max-width: 480px;
}

._homeLink_1gd98_72 {
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

._homeLink_1gd98_72:hover {
  color: #0f1114;
}

@media (max-width: 640px) {
  ._headline_1gd98_48 {
    font-size: 30px;
  }

  ._code_1gd98_30 {
    font-size: 76px;
  }

  ._coupon_1gd98_21 {
    padding: 12px 40px 18px;
  }
}
._card_1a9mm_1 {
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 40px;
  padding: 22.5px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Flat variant — same content layout, but the border/radius/background belong to
   the parent group so the Best-available card can extend down over the try-next
   chain as a single panel (stage 3). */
/* B11 follow-up (Nick, 2026-07-29: "a cluster of edges that should probably be
   compressed to one"). A card's own border sits between the page's gutter and
   the card's padding, so 16px of padding inside a 1.5px border put that card's
   text 1.5px off the column the bands, the paragraph and the trust section sit
   on. The padding is the page's value MINUS the border it sits behind, which
   is why these read 14.5 and 15 rather than 16. */
/* B11: card padding is the page's, not this component's — see the table at the
   top of slug.css. The phone step is in the 900 block at the foot of this
   file. .cardFlat renders inside .bestGroup, whose border is the 1.5px being
   subtracted here. */
._cardFlat_1a9mm_22 {
  background: transparent;
  padding: 22.5px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── Top row ─────────────────────────────────────── */

._topRow_1a9mm_34 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

._topLeft_1a9mm_41 {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* This visit's tried ✓/✗ mark — same treatment as the table rows', scheme
   green/red (ruling 2026-07-22), sized up a touch for the hero. Lands with a
   tiny scale-pop, keyed on the outcome so it replays as • becomes ✓/✗. */
._triedBadge_1a9mm_50 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  background: #eef0f3;
  color: #8c949e;
  flex-shrink: 0;
  animation: _badgePop_1a9mm_1 0.15s ease-out;
}

@keyframes _badgePop_1a9mm_1 {
  from { transform: scale(0.85); opacity: 0.5; }
  to { transform: scale(1); opacity: 1; }
}

._triedYes_1a9mm_70 {
  background: #e4f8ed;
  color: #21c766;
}

._triedNo_1a9mm_75 {
  background: #ffe6ef;
  color: #ff095c;
}

/* Chrome comes from pill.css's .badge; only the flex behaviour is local. */
._badge_1a9mm_80 {
  flex-shrink: 0;
}

._sourceInfo_1a9mm_85 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

._sourceText_1a9mm_92 {
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  white-space: nowrap;
}

/* ── Discount ────────────────────────────────────── */

._discount_1a9mm_101 {
  font-size: 52px;
  font-weight: 700;
  color: #0f1114;
  letter-spacing: -0.5px;
  line-height: 1;
}

/* ── Code row ────────────────────────────────────── */

._codeRow_1a9mm_111 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* min-width floor keeps the wrap-first behaviour: when code + button don't
   fit (mobile), the box takes its own full line before any truncation — the
   ellipsis only appears for codes longer than a whole line. */
._codeInput_1a9mm_121 {
  /* Clicking the box copies, same as the button (N5, Nick 2026-07-28). */
  cursor: pointer;
  /* grow:100 lets the box take nearly all shared-line space so the button stays
     content-width; when the button wraps below (mobile) it's alone on its line
     and its own grow fills it edge-to-edge (see .copyBtn). */
  flex: 100 1 0;
  min-width: min(220px, 100%);
  background: #f4f5f7;
  border: 1.5px solid #e5e7eb;
  padding: 13px 18px;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: #0f1114;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._copyBtn_1a9mm_126 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #00a6ff;
  color: #fff;
  border: 2px solid #0062ff;
  padding: 13px 24px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  /* grow:1 so that when the button wraps under the code box it fills the whole
     line; on a shared line .codeInput's grow:100 keeps it near content width. */
  flex: 1 0 auto;
  font-family: inherit;
  box-shadow: 3px 3px 0 0 #0062ff;
  transition: transform 0.1s, box-shadow 0.1s;
}

._copyBtn_1a9mm_126:hover {
  background: #00aaff;
}

._copyBtn_1a9mm_126:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 0 #0062ff;
}

/* ── Copied code display ─────────────────────────── */

/* Slides in with the house motion (solid-ux-tidy 2026-07-22); the clipboard
   write fires before this renders, so the animation never delays it. */
/* Same min-width floor as `.codeInput` above, and for the same reason: when
   the box and the message beside it don't both fit, the box takes its own
   line instead of being crushed. Without it the row's non-shrinking sibling
   won all the width and the code itself was sheared mid-word — a harder
   failure than the ellipsis F17 already banned (B6, 2026-07-28). */
._codeDisplay_1a9mm_183 {
  animation: _copiedIn_1a9mm_1 0.28s ease-out;
  flex: 1;
  min-width: min(220px, 100%);
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1.5px solid #f5f5f5;
  padding: 13px 18px;
  border-radius: 16px;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
}

._codeDisplayCode_1a9mm_199 {
  font-weight: 700;
  letter-spacing: 2.5px;
  color: #00a6ff;
  flex-shrink: 0;
}

._codeDisplayMsg_1a9mm_206 {
  font-weight: 600;
  color: #0f1114;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Inline vote question ────────────────────────── */

._votePrompt_1a9mm_215 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  flex-shrink: 1;
  min-width: 0;
}

._voteQuestion_1a9mm_225 {
  font-size: 16px;
  font-weight: 600;
  color: #0f1114;
  white-space: nowrap;
  flex-shrink: 0;
  margin: 0;
}

._voteSubtext_1a9mm_234 {
  font-size: 12px;
  font-weight: 500;
  color: #9ca3af;
  white-space: nowrap;
}

._voteButtons_1a9mm_241 {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

._voteBtn_1a9mm_247 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 48px;
  padding: 13px 24px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: 2px solid transparent;
  font-family: inherit;
  color: #fff;
  transition: transform 0.1s, box-shadow 0.1s, opacity 0.1s;
}

._voteBtnYes_1a9mm_264 {
  background: #21c766;
  border-color: #16ad55;
  box-shadow: 3px 3px 0 0 #16ad55;
}

._voteBtnYes_1a9mm_264:hover { opacity: 0.9; }

._voteBtnYes_1a9mm_264:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 0 #16ad55;
}

._voteBtnNo_1a9mm_277 {
  background: #ff095c;
  border-color: #d60c50;
  box-shadow: 3px 3px 0 0 #d60c50;
}

._voteBtnNo_1a9mm_277:hover { opacity: 0.9; }

._voteBtnNo_1a9mm_277:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 0 #d60c50;
}

/* ── Inline thanks ───────────────────────────────── */

._voteThanks_1a9mm_292 {
  /* relative: anchors the confetti burst on a yes-vote */
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
}

._voteThanksText_1a9mm_301 {
  font-size: 16px;
  font-weight: 700;
  color: #0f1114;
  white-space: nowrap;
}

/* ── Trust signals ───────────────────────────────── */

._trustSignals_1a9mm_310 {
  background: #f9fafb;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

._trustRow_1a9mm_319 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

._trustLeft_1a9mm_326 {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}

._testPassedChip_1a9mm_333 {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f9ffea;
  border: 1px solid #b7ff00;
  border-radius: 8px;
  padding: 4px 10px;
  height: 24px;
  font-size: 11px;
  font-weight: 600;
  color: #21c766;
  white-space: nowrap;
  flex-shrink: 0;
}

._testPassedDot_1a9mm_349 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #21c766;
  flex-shrink: 0;
}

._metaItem_1a9mm_357 {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  white-space: nowrap;
}

._metaLabel_1a9mm_365 {
  font-weight: 500;
  color: #9ca3af;
}

._metaValue_1a9mm_370 {
  font-weight: 600;
  color: #374151;
}

/* ── Performance button ──────────────────────────── */

._performanceBtn_1a9mm_377 {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 4px 10px;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}

._performanceBtnLabel_1a9mm_390 {
  font-size: 12px;
  font-weight: 500;
  color: #000;
  white-space: nowrap;
}

._chevron_1a9mm_397 {
  flex-shrink: 0;
  transition: transform 0.2s;
}

._chevronUp_1a9mm_402 {
  transform: rotate(180deg);
}

/* ── Expanded chart section ──────────────────────── */

._expandedSection_1a9mm_408 {
  background: #fff;
  border-radius: 20px;
  padding: 16px;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: _copiedIn_1a9mm_1 0.28s ease-out;
}

@keyframes _copiedIn_1a9mm_1 {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* The thanks block fades in when it replaces the vote buttons. Declared
   before .leaving so the exit still wins when both classes are present. */
._thanksIn_1a9mm_426 {
  animation: _copiedIn_1a9mm_1 0.18s ease-out;
}

/* Exit mirror of copiedIn — plays through the 'leaving' phase before the
   card swaps back. Declared after the entry classes so its animation wins. */
._leaving_1a9mm_425 {
  animation: _copiedOut_1a9mm_1 0.2s ease-in forwards;
}


@keyframes _copiedOut_1a9mm_1 {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-4px); }
}

/* The returning code + button fade back in (class added at the swap). */
._rowReturn_1a9mm_443 {
  animation: _rowFadeIn_1a9mm_1 0.18s ease-out;
}

/* Quick fade for the lazy-loaded chart arriving over the shimmer. */
._chartIn_1a9mm_448 {
  animation: _rowFadeIn_1a9mm_1 0.18s ease-out;
}

@keyframes _rowFadeIn_1a9mm_1 {
  from { opacity: 0; }
  to { opacity: 1; }
}

._chartHeader_1a9mm_457 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._chartTitle_1a9mm_463 {
  font-size: 18px;
  font-weight: 700;
  color: #0f1114;
  line-height: 24px;
  margin: 0;
}

._chartSubtitle_1a9mm_471 {
  font-size: 12px;
  font-weight: 600;
  color: #6b7380;
  line-height: 16px;
  margin: 0;
}

/* Shimmer skeleton while the code's full series is fetched on expand.
   Sized by the strip chart's own aspect ratio so the swap can't shift layout. */
._chartPlaceholder_1a9mm_481 {
  aspect-ratio: 960 / 150;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: 12px;
  font-weight: 500;
  border-radius: 12px;
  background: linear-gradient(90deg, #f6f7f9 25%, #eef0f3 37%, #f6f7f9 63%);
  background-size: 400% 100%;
  animation: _featChartShimmer_1a9mm_1 1.2s ease-in-out infinite;
}

@keyframes _featChartShimmer_1a9mm_1 {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  ._chartPlaceholder_1a9mm_481,
  ._codeDisplay_1a9mm_183,
  ._expandedSection_1a9mm_408,
  ._leaving_1a9mm_425,
  ._thanksIn_1a9mm_426,
  ._rowReturn_1a9mm_443,
  ._chartIn_1a9mm_448,
  ._triedBadge_1a9mm_50 { animation: none; }
}

/* ── Responsive ──────────────────────────────────── */

@media (max-width: 900px) {
  ._card_1a9mm_1,
  ._cardFlat_1a9mm_22 {
    padding: 14.5px;
    gap: 16px;
  }
}

@media (max-width: 640px) {
  ._card_1a9mm_1 {
    border-radius: 24px;  }

  ._discount_1a9mm_101 {
    font-size: 36px;
  }

  ._trustLeft_1a9mm_326 {
    gap: 14px;
  }

  /* The trust row wraps so the Performance button gets its own full-width
     line instead of clipping off the card edge (solid-ux-tidy 2026-07-22). */
  ._trustRow_1a9mm_319 {
    flex-wrap: wrap;
  }

  ._performanceBtn_1a9mm_377 {
    width: 100%;
    justify-content: center;
    padding: 8px 10px;
  }

  ._voteButtons_1a9mm_241 {
    flex: 1;
  }

  ._voteBtn_1a9mm_247 {
    flex: 1;
    width: auto;
  }

  /* The buttons carry the question at this width; the supporting line goes. */
  ._voteSubtext_1a9mm_234 {
    display: none;
  }
}

/* Text for screen readers only — carries what a visual-only cue conveys
   (e.g. that a shown code is truncated). Never a claim the page doesn't
   also make visibly. */
._srOnly_1a9mm_563 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
._footer_xcdim_1 {
  width: 100%;
}

._divider_xcdim_5 {
  height: 1px;
  background: #eaecef;
  max-width: 960px;
  margin: 0 auto;
}

/* Not space-between: the nav, the separator and the icons travel together on
   the right, so the nav claims the slack instead of the gaps doing it. */
._inner_xcdim_14 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px 24px;
  flex-wrap: wrap;
  max-width: 1008px;
  margin: 0 auto;
  padding: 24px 24px;
}

@media (max-width: 1040px) {
  ._inner_xcdim_14 {
    padding: 24px 48px;
  }
}

@media (max-width: 900px) {
  ._inner_xcdim_14 {
    padding: 16px 28px;
  }
}

._logoLink_xcdim_37 {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

._logo_xcdim_37 {
  height: 22px;
  width: auto;
  opacity: 0.5;
}

._nav_xcdim_50 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-left: auto;
}

._link_xcdim_58 {
  font-size: 12px;
  font-weight: 500;
  color: #9ca3af;
  text-decoration: none;
}

._link_xcdim_58:hover {
  color: #6b7280;
}

._separator_xcdim_69 {
  width: 1px;
  height: 14px;
  background: #e5e7eb;
  flex: none;
}

/* The tap target is built out of padding on each link, then pulled back by an
   equal negative margin here — so the glyphs still line up optically with the
   container edge while the hit area is far bigger than the 17px they show. */
._social_xcdim_79 {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: -8px;
}

._socialLink_xcdim_86 {
  display: flex;
  padding: 8px;
  color: #9ca3af;
  text-decoration: none;
  transition: color 0.16s ease;
}

/* Each platform's own colour, set per link in footer.jsx. */
._socialLink_xcdim_86:hover {
  color: var(--glyph-hover, #0f1114);
}

/* Instagram resolves to its real gradient instead of the flat pink. The id is
   INSTAGRAM_GRADIENT_ID in social_icons.jsx, which renders the <defs>. */
._socialLink_xcdim_86[data-icon='instagram']:hover svg {
  fill: url(#wethrift-instagram-gradient);
}

._link_xcdim_58:focus-visible,
._socialLink_xcdim_86:focus-visible {
  outline: 2px solid #0f1114;
  outline-offset: 2px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  ._socialLink_xcdim_86 {
    transition: none;
  }
}

/* The footer's first mobile pass — it had no media query at all before this.
   Left to itself the row wrapped wherever the words ran out, dropping the
   icons into whatever slot was left over.

   960px, not the site's usual 640px, because that's where this row actually
   breaks: measured 2026-07-27, one clean line needs ~902px (logo 91 + nav 583
   + icons 107 + separator + 72 gap + 48 padding), so at 640 the 641–900px band
   kept the bug. 960 rather than 902 leaves headroom — those widths are text
   measurements, and they move if General Sans is slow or falls back.

   Glyphs grow to 20px, which with the padding above makes a 44px tap target. */
@media (max-width: 960px) {
  ._inner_xcdim_14 {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 24px 20px;
  }

  ._nav_xcdim_50 {
    justify-content: center;
    gap: 12px 18px;
    margin-left: 0;
  }

  ._separator_xcdim_69 {
    display: none;
  }

  ._social_xcdim_79 {
    --glyph-size: 20px;
    margin: -12px;
  }

  ._socialLink_xcdim_86 {
    padding: 12px;
  }
}

/* The homepage closes inside the cyan story rather than returning to the
   generic white utility footer. Other page types retain the compact footer
   above unchanged. */
._homeFooter_xcdim_160 {
  position: relative;
  overflow: hidden;
  background: transparent;
}

._homeFooter_xcdim_160 ._divider_xcdim_5 {
  display: none;
}

._homeFooter_xcdim_160 ._inner_xcdim_14 {
  max-width: 1368px;
  padding-top: 18px;
  padding-bottom: 42px;
}

._homeFooter_xcdim_160 ._logo_xcdim_37 {
  height: 31px;
  opacity: 1;
}

._homeFooter_xcdim_160 ._link_xcdim_58,
._homeFooter_xcdim_160 ._socialLink_xcdim_86 {
  color: rgba(8, 16, 20, .8);
  font-weight: 650;
}

._homeFooter_xcdim_160 ._link_xcdim_58 {
  font-size: max(13px, calc(var(--home-type-ui, 16px) * .82));
}

._homeFooter_xcdim_160 ._link_xcdim_58:hover,
._homeFooter_xcdim_160 ._socialLink_xcdim_86:hover {
  color: #0b0c0e;
}

._homeFooter_xcdim_160 ._separator_xcdim_69 {
  display: none;
}

@media (max-width: 1040px) {
  ._homeFooter_xcdim_160 ._inner_xcdim_14 {
    padding-top: 12px;
    padding-bottom: 34px;
  }
}
/* No bottom edge on the band. B12 shipped one and Nick removed it on seeing it
   built (2026-07-29): the only grey line wanted at the top of the page is the
   one under the monetisation disclosure, which `disclosure_banner.css` owns.

   Known and accepted: a store page is the only page type with that strip, so
   on the other six (home, about, terms, privacy, how-we-make-money,
   how-we-find-coupons) the header has no edge and meets the page white on
   white. Deliberate, not an oversight. Do not add a border here. */
._header_qri67_9 {
  width: 100%;
  background: #fff;
}

._inner_qri67_14 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1008px;
  margin: 0 auto;
  padding: 24px 24px;
}

._logoLink_qri67_23 {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

._logo_qri67_23 {
  height: 38px;
  width: auto;
}

._nav_qri67_35 {
  display: flex;
  align-items: center;
  gap: 32px;
}

/* Ink, not grey (B12 treatment A). The one link in the header was the palest
   text on the page and read as disabled. */
._navLink_qri67_43 {
  font-size: 14px;
  font-weight: 500;
  color: #0f1114;
  text-decoration: none;
}

/* Resting is now the darkest ink we have, so hover cannot go darker. It
   underlines instead, which is also the only affordance a plain ink link has
   left once the colour shift is spent. Nick ruled against a resting underline
   (option C), not against one on hover. */
._navLink_qri67_43:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* The house ring, same as the chart's (B7/C9). The link had no focus style. */
._navLink_qri67_43:focus-visible {
  outline: 2px solid #0062ff;
  outline-offset: 3px;
  border-radius: 6px;
}

/* The bands carry gutter plus card padding so their content sits on the same
   text column as the cards below them (B11). */
@media (max-width: 1040px) {
  ._inner_qri67_14 {
    padding: 24px 48px;
  }
}

@media (max-width: 900px) {
  ._inner_qri67_14 {
    padding: 16px 28px;
  }
}

/* Deliberate, not an oversight: the phone header is the wordmark alone (B12,
   Nick's ruling). It was put to him as its own question with both states
   rendered, and the link fits at 390 with room to spare, so this is a choice
   about what the phone header is for and not a width problem. Leave it. */
@media (max-width: 640px) {
  ._navLink_qri67_43 {
    display: none;
  }
}
/* The one pill definition — every capsule on the site draws from here
   (B1 of solid-design-pass, Nick's rulings 2026-07-27). Section headings
   wear the pale lime and wrap one capsule per line; only the two act-here
   badges — BEST CODE RIGHT NOW and Try this next — keep the bright lime. */

._pill_1dhcq_6 {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #000;
  padding: 5px 14px;
  border-radius: 20px;
}

._badge_1dhcq_16 {
  display: inline-flex;
  width: fit-content;
  background: #b7ff00;
  white-space: nowrap;
}

/* inline + clone = one capsule per line, so no heading can widen the layout
   viewport on a phone (this was the site-wide +96px horizontal scroll).
   The line-height is the gap between capsules. Vertical margins don't apply
   to inline boxes — spacing around a heading belongs to its block parent. */
._heading_1dhcq_28 {
  display: inline;
  background: #e6ff96;
  white-space: normal;
  max-width: 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  line-height: 2.35;
}

/* The static pages' hero eyebrow, same family, smaller voice.

   ONE user left: savvy.jsx. Nick removed it from about, terms, privacy,
   how-we-make-money and how-we-find-coupons on 2026-07-29, having seen it
   built. On /about it was the plainest case, reading "ABOUT WETHRIFT" directly
   above an h1 reading "About Wethrift", but the call covers the others too.
   Kept here rather than deleted because savvy still wears one; if that goes,
   this rule and the pages' `pill` imports go with it. */
._eyebrow_1dhcq_47 {
  display: inline-flex;
  width: fit-content;
  background: #e6ff96;
  color: #0f1114;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1.5px;
  padding: 4px 12px;
  border-radius: 20px;
}
/* ── Related stores ──────────────────────────────── */

._section_1w4oi_3 {
  padding: 56px 0 0;
}

/* On the text column, like the codes-table heading it matches — the tiles
   below are the cards here, so the heading is inset from them exactly as the
   table's title is inset from its card (B11; it used to sit flush at 2px,
   which was the page's eleventh left edge). */
._label_1w4oi_11 {
  padding-left: 24px;
  margin-bottom: 24px;
}

._grid_1w4oi_16 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

/* ── Tile ────────────────────────────────────────── */

._tile_1w4oi_24 {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #e5e5e5;
  border-radius: 16px;
  padding: 4px;
  text-decoration: none;
  overflow: hidden;
  transition: background 0.1s;
}

._tile_1w4oi_24:hover {
  background: #fafafa;
}

/* Logo styles live in store_logo.css — shared with the page header. */

._textGroup_1w4oi_42 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  letter-spacing: -0.5px;
}

._name_1w4oi_51 {
  font-size: 18px;
  font-weight: 700;
  color: #0f1114;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._domain_1w4oi_60 {
  font-size: 10px;
  font-weight: 300;
  color: #0f1114;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Responsive ──────────────────────────────────── */

@media (max-width: 900px) {
  ._section_1w4oi_3 {
    padding: 40px 0 0;
  }

  ._label_1w4oi_11 {
    padding-left: 16px;
    margin-bottom: 16px;
  }

  ._grid_1w4oi_16 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  ._grid_1w4oi_16 {
    grid-template-columns: 1fr;
  }
}
/* The glyph takes its colour from whatever links it — `fill: currentColor` —
   so a consumer only ever sets `color`, never touches the SVG. */
._glyph_xnnok_3 {
  width: var(--glyph-size, 17px);
  height: var(--glyph-size, 17px);
  fill: currentColor;
  display: block;
}

/* Carries the shared <defs> only; nothing to paint. */
._defs_xnnok_11 {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
/* ── Store logo frame ────────────────────────────── */

/* The stored logos share no format — dark full-bleed squares, white JPGs,
   wide wordmarks, transparent marks. The frame is what's uniform: a fixed
   white plate with a hairline edge, and the whole logo shown inside it —
   contain, never cover, so nothing is cropped mid-word (F7). */

._box_18db8_8 {
  width: 40px;
  height: 40px;
  padding: 3px;
  border-radius: 12px;
  flex-shrink: 0;
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(15, 17, 20, 0.08);
}

._img_18db8_19 {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Full-bleed square marks keep the frame's silhouette */
  border-radius: 8px;
}

._placeholder_18db8_28 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f5f7;
  color: #9ca3af;
  font-size: 18px;
  font-weight: 700;
  border-radius: 8px;
}
._wrapper_1mjx8_1 {
  position: relative;
  width: 560px;
  max-width: 100%;
}

._searchBar_1mjx8_7 {
  display: flex;
  align-items: center;
  background: #fff;
  border: 9.5px solid #b7ff00;
  border-radius: 28px;
  padding: 8px 8px 8px 24px;
  gap: 12px;
}

._searchInputShell_1mjx8_17 {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
}

._searchInput_1mjx8_17 {
  flex: 1;
  width: 100%;
  border: none;
  outline: none;
  font-family: 'General Sans', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #0f1114;
  background: transparent;
  min-width: 0;
}

._searchInput_1mjx8_17::placeholder {
  color: #9ca3af;
}

._searchButton_1mjx8_41 {
  background: #00a6ff;
  color: #fff;
  font-family: 'General Sans', sans-serif;
  font-weight: 600;
  font-size: 16px;
  border: none;
  border-radius: 24px;
  padding: 8px 24px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

._searchButton_1mjx8_41:hover {
  background: #0095e6;
}

._searchButton_1mjx8_41:focus-visible,
._searchInput_1mjx8_17:focus-visible {
  outline: 3px solid #0062ff;
  outline-offset: 2px;
}

._searchInput_1mjx8_17:focus-visible {
  border-radius: 6px;
}

._wrapperHero_1mjx8_69 {
  width: 100%;
}

._wrapperHero_1mjx8_69 ._searchBar_1mjx8_7 {
  min-height: 68px;
  border-radius: 11px;
  box-shadow: 0 16px 40px rgba(15, 17, 20, 0.1);
}

._wrapperHero_1mjx8_69 ._searchInput_1mjx8_17 {
  font-size: 18px;
}

._wrapperHero_1mjx8_69 ._searchButton_1mjx8_41 {
  padding: 15px 20px;
}

._searchLeadingIcon_1mjx8_87 {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
  margin-right: 13px;
  flex: 0 0 24px;
  color: currentColor;
}

._searchLeadingIcon_1mjx8_87::before {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border: 2.5px solid currentColor;
  border-radius: 50%;
  content: '';
}

._searchLeadingIcon_1mjx8_87::after {
  position: absolute;
  top: 15px;
  left: 14px;
  width: 8px;
  height: 2.5px;
  background: currentColor;
  border-radius: 999px;
  content: '';
  transform: rotate(45deg);
  transform-origin: left center;
}

._searchArrow_1mjx8_121 {
  display: grid;
  width: 28px;
  height: 28px;
  margin-left: 1px;
  place-items: center;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
}

._searchBoxPink_1mjx8_132 ._searchBar_1mjx8_7 {
  gap: 8px;
  padding: 7px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease,
    transform 0.16s ease;
}

._searchBoxPink_1mjx8_132 ._searchInputShell_1mjx8_17 {
  min-height: 54px;
  padding: 0 15px;
  border-radius: 14px;
}

._searchBoxPink_1mjx8_132 ._searchButton_1mjx8_41 {
  display: flex;
  min-height: 54px;
  padding: 0 11px 0 20px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 15px;
  transition: background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

._searchBoxPink_1mjx8_132 ._searchInput_1mjx8_17:focus-visible {
  outline: none;
}

._searchBoxPink_1mjx8_132:focus-within ._searchBar_1mjx8_7 {
  outline: 3px solid rgba(255, 255, 255, 0.92);
  outline-offset: 3px;
}

/* Homepage search: a calm input space with a confident Wethrift-pink action. */
._searchBoxPink_1mjx8_132 ._searchBar_1mjx8_7 {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.96);
  border-radius: 22px;
  box-shadow: 0 0 0 1px rgba(0, 89, 129, 0.12),
    0 22px 48px rgba(0, 68, 100, 0.18);
  backdrop-filter: blur(8px);
}

._searchBoxPink_1mjx8_132 ._searchInputShell_1mjx8_17 {
  background: #eaf9ff;
  color: #075cff;
}

._searchBoxPink_1mjx8_132 ._searchInput_1mjx8_17 {
  font-size: calc(var(--home-type-ui, 16px) * 1.1);
}

._searchBoxPink_1mjx8_132 ._searchInput_1mjx8_17::placeholder {
  color: #66737f;
}

._searchBoxPink_1mjx8_132 ._searchButton_1mjx8_41 {
  background: #e20a55;
  border-radius: 14px;
  color: #fff;
  font-size: var(--home-type-ui, 16px);
}

._searchBoxPink_1mjx8_132 ._searchButton_1mjx8_41 ._searchArrow_1mjx8_121 {
  background: rgba(255, 255, 255, 0.18);
}

._searchBoxPink_1mjx8_132 ._searchButton_1mjx8_41:hover {
  background: #d90048;
}

._searchBoxPink_1mjx8_132 ._results_1mjx8_203 {
  border: 1px solid #cfd2cd;
  border-radius: 12px;
  box-shadow: 0 18px 45px rgba(15, 17, 20, 0.14);
}

._searchBoxPink_1mjx8_132 ._resultItem_1mjx8_209:hover,
._searchBoxPink_1mjx8_132 ._resultItemActive_1mjx8_210 {
  background: #f2f3ef;
}

._results_1mjx8_203 {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 200;
  background: #fff;
  border-radius: 28px;
  border: 1.2px solid #e5e7eb;
  box-shadow: 0 7.2px 20.4px rgba(0, 0, 0, 0.08);
  padding: 8px;
}

@keyframes _pulse_1mjx8_1 {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

._skeletonItem_1mjx8_237 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
}

._skeletonImg_1mjx8_244 {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #e9eaee;
  flex-shrink: 0;
  animation: _pulse_1mjx8_1 1.4s ease-in-out infinite;
}

._skeletonText_1mjx8_253 {
  height: 14px;
  border-radius: 4px;
  background: #e9eaee;
  width: 153px;
  animation: _pulse_1mjx8_1 1.4s ease-in-out infinite;
  animation-delay: 75ms;
}

._noResults_1mjx8_262 {
  padding: 16px;
  font-family: 'General Sans', sans-serif;
  font-size: 14px;
  color: #9ca3af;
  text-align: center;
}

._resultItem_1mjx8_209 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 20px;
  text-decoration: none;
  color: #0a0a0f;
  cursor: pointer;
  transition: background 0.1s;
}

._resultItem_1mjx8_209:hover,
._resultItemActive_1mjx8_210 {
  background: #f6f6f6;
}

._resultImg_1mjx8_287 {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  object-fit: contain;
  flex-shrink: 0;
  background: #f3f4f6;
}

._resultName_1mjx8_296 {
  font-family: 'General Sans', sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: #0a0a0f;
}

@media (max-width: 520px) {
  ._wrapperHero_1mjx8_69 ._searchBar_1mjx8_7 {
    min-height: 62px;
    padding: 6px 6px 6px 14px;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(15, 17, 20, 0.1);
  }

  ._wrapperHero_1mjx8_69 ._searchInput_1mjx8_17 {
    font-size: 15px;
  }

  ._wrapperHero_1mjx8_69 ._searchButton_1mjx8_41 {
    padding: 12px 13px;
    border-radius: 12px;
    font-size: 0;
  }

  ._wrapperHero_1mjx8_69 ._searchButton_1mjx8_41::after {
    content: 'Search';
    font-size: 12px;
  }

  ._searchBoxPink_1mjx8_132 ._searchBar_1mjx8_7 {
    min-height: 64px;
    padding: 6px;
    gap: 5px;
  }

  ._searchBoxPink_1mjx8_132 ._searchBar_1mjx8_7 {
    border-radius: 19px;
  }

  ._searchBoxPink_1mjx8_132 ._searchInputShell_1mjx8_17 {
    min-height: 50px;
    padding: 0 10px;
    border-radius: 12px;
  }

  ._searchLeadingIcon_1mjx8_87 {
    width: 21px;
    height: 21px;
    margin-right: 8px;
    flex-basis: 21px;
    transform: scale(0.88);
  }

  ._searchBoxPink_1mjx8_132 ._searchButton_1mjx8_41 {
    min-width: 58px;
    min-height: 50px;
    padding: 0 8px;
    border-radius: 12px;
  }

  ._searchBoxPink_1mjx8_132 ._searchButton_1mjx8_41::after {
    display: none;
    content: none;
  }

  ._searchBoxPink_1mjx8_132 ._searchArrow_1mjx8_121 {
    margin: 0;
  }

  ._wrapperHero_1mjx8_69 ._results_1mjx8_203 {
    border-radius: 10px;
    box-shadow: 0 16px 40px rgba(15, 17, 20, 0.14);
  }

  ._wrapperHero_1mjx8_69 ._resultName_1mjx8_296 {
    font-size: 16px;
  }
}

/* Figma homepage search treatment. These selectors are only enabled by the
   homepage-specific variants, so store-page search remains unchanged. */
._searchBoxFigma_1mjx8_378 {
  position: relative;
  z-index: 1;
  width: 100%;
}

._searchBoxFigma_1mjx8_378:focus-within {
  z-index: 500;
}

._searchBoxFigma_1mjx8_378:focus-within ._searchInputShell_1mjx8_17 {
  border-color: #7bf2ff;
}

._searchBoxFigmaCta_1mjx8_392 ._searchInputShell_1mjx8_17 {
  border-color: #ff095c;
}

._searchBoxFigmaCta_1mjx8_392:focus-within ._searchInputShell_1mjx8_17 {
  border-color: #ff090d;
}

._searchBoxFigma_1mjx8_378 ._searchBar_1mjx8_7 {
  min-height: 54px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 32px;
  box-shadow: none;
}

._searchBoxFigma_1mjx8_378 ._searchInputShell_1mjx8_17 {
  min-height: 54px;
  padding: 0 25px;
  background: #fff;
  border: 3px solid #dbfbff;
  border-radius: 32px;
}

._searchBoxFigma_1mjx8_378 ._searchInput_1mjx8_17 {
  color: #0f1114;
  font-size: 16px;
  font-weight: 500;
}

._searchBoxFigma_1mjx8_378 ._searchInput_1mjx8_17::placeholder {
  color: #aeaeae;
  opacity: 1;
}

._searchBoxFigma_1mjx8_378 ._searchButton_1mjx8_41 {
  display: none;
}

._searchBoxFigma_1mjx8_378 ._searchInput_1mjx8_17:focus-visible {
  outline: none;
}

._searchBoxFigma_1mjx8_378 ._results_1mjx8_203 {
  z-index: 1000;
  top: calc(100% + 10px);
  max-height: 360px;
  overflow-y: auto;
  border-radius: 20px;
  box-shadow: 0 18px 45px rgba(15, 17, 20, 0.14);
}

@media (max-width: 520px) {
  ._searchBoxFigma_1mjx8_378 ._searchBar_1mjx8_7 {
    min-height: 50px;
    padding: 0;
    border-radius: 28px;
    box-shadow: none;
  }

  ._searchBoxFigma_1mjx8_378 ._searchInputShell_1mjx8_17 {
    min-height: 50px;
    padding: 0 16px;
    border-radius: 28px;
  }

  ._searchBoxFigma_1mjx8_378 ._searchInput_1mjx8_17 {
    font-size: 16px;
  }

  ._searchBoxFigma_1mjx8_378 ._results_1mjx8_203 {
    max-height: min(320px, calc(100vh - 160px));
    overscroll-behavior: contain;
  }
}
/* Trust section (B10 / N6) — one story, told top to bottom.

   TYPE IS ANCHORED TO .pageAnswer (Nick, 2026-07-28). The paragraph at the top
   of the store page ("There's a moderate chance you'll find a working Nike
   promo code right now...") is this page's prose voice, so every paragraph in
   here is that exact style, and the headings step up proportionally from it.

     30px/700  section heading   (24px on a phone)
     22px/700  group heading     (20px on a phone) = slug.css .storeName
     24px/500  the quote
     16px/1.5  body              = slug.css .pageAnswer, weight and colour too
     14px      small grey        = slug.css/coupon.css secondary text
     11px/700  micro uppercase   = code_history_panel.css .legendText scale

   Do NOT anchor the body to .stateFact (14px) — that is the small print inside
   the chart panel, not the page's prose, and using it made this whole section
   read a size too small.

   No clamp(), no fractional sizes, no fifth heading style. If something needs
   emphasis it takes weight or colour, not a new size.

   NO max-width AND NO text-wrap: balance on any text in here (Nick,
   2026-07-28). Headings and paragraphs run the full width of the column they
   sit in; a measure cap or a balanced wrap left them short of the main column
   and made the section look like an inset.

   IT SITS BELOW THE LINE (Nick, 2026-07-29). This is secondary content and has
   to look it. On a store page everything primary is a white card with a
   hairline; everything uncarded is the page speaking in its own voice, which is
   why this section used to read as page-level prose. The fix is one rule across
   the column with a lot of air above it, and a four-word label naming what
   follows. No tint, no card, no inset: colour and containers were both on the
   table (options A, B and D of the 2026-07-29 sheet) and neither was chosen.

   That rule is the only one in here. The hairlines that used to sit between
   the groups came out with it, because a page with four rules has no line that
   means "everything under this is annex".

   Everything else is one value: one radius (20px), one hairline (#e5e7eb, the
   codes table's own), one rhythm (96px between groups, 18px inside them).

   There is no illustration lane and no opening paragraph. The placeholder
   styles, the two-column split that held them, and the .intro rule for the
   paragraph that briefly replaced them were all removed 2026-07-29. The
   heading runs straight into the first group. */

/* The rule spans the section's whole box, so it lines up with the edges of the
   codes-table card directly above rather than with the text inside it. #e5e7eb
   is that card's own border colour, not a new grey. */
/* B11: the outer gap and the side padding are the page's; the rhythm INSIDE
   this section (96/72 between groups, 18 within) is B10's ruling and is left
   alone. */
._section_1osq2_53 {
  margin-top: 56px;
  padding: 36px 24px 0;
  border-top: 1px solid #e5e7eb;
}

/* ── the type scale, all four styles ─────────────── */

/* Four words in the small uppercase register (.stateTag and .bylineRole use it
   too), naming the section before the heading does. The only copy the
   below-the-line treatment added. */
._kicker_1osq2_64 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #6b7280;
  margin: 0 0 12px;
}

._sectionTitle_1osq2_73 {
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.7px;
  font-weight: 700;
  color: #0f1114;
  margin: 0;
}

._h3_1osq2_82 {
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.4px;
  font-weight: 700;
  color: #0f1114;
  margin: 0 0 14px;
}

/* slug.css .pageAnswer, exactly. */
._body_1osq2_92 {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 450;
  color: #545b64;
  margin: 0;
}

/* ── rhythm ──────────────────────────────────────── */

/* No rule here, on purpose: the section's own top border is the page's only
   one and stays that way. Air does the separating, at the same 96px the rule
   and its padding used to occupy. */
._group_1osq2_105 {
  margin-top: 96px;
}

/* The heading belongs to the group under it, so it sits closer than the groups
   sit to each other. At the full 96px it read as a fourth group of its own,
   floating with nothing beneath it — which the removed hairline used to hide. */
._sectionTitle_1osq2_73 + ._group_1osq2_105 {
  margin-top: 48px;
}

/* Anything stacked inside a group sits on the one gap. */
._group_1osq2_105 > * + * {
  margin-top: 18px;
}

/* A heading owns the gap to its own paragraph, so it must not take the group
   gap as well. */
._group_1osq2_105 > ._h3_1osq2_82 + * {
  margin-top: 0;
}

/* ── the full-width scale ────────────────────────── */

/* 52 bars, halving to 26 below 900px — the same week count the store chart
   shows on a phone (B4). CSS-only, so nothing settles after hydration.
   Decorative: the meaning is in the labels below, which are real text. */
._scaleBars_1osq2_132 {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 76px;
}

._scaleBars_1osq2_132 > span {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 5px 5px 0 0;
}

._scaleLabels_1osq2_145 {
  display: flex;
  gap: 14px;
  margin-top: 10px;
}

._scaleLabels_1osq2_145 > span {
  flex: 1 1 0;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
  color: #6b7280;
}

._scaleLabels_1osq2_145 > span:nth-child(2) {
  text-align: center;
}

._scaleLabels_1osq2_145 > span:last-child {
  text-align: right;
}

/* ── the two example answers ─────────────────────── */

._states_1osq2_169 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

._state_1osq2_15 {
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: 16px 18px;
  margin: 0;
}

._stateGood_1osq2_182 {
  background: #fbfffa;
}

._stateLow_1osq2_186 {
  background: #fffbfc;
}

._stateTag_1osq2_61 {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #6b7280;
  margin: 0 0 10px;
}

._stateVerdict_1osq2_200 {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  font-size: 20px;
  letter-spacing: -0.3px;
  font-weight: 700;
  color: #0f1114;
  margin: 0;
}

._chip_1osq2_212 {
  font-size: 14px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
}

._chipGood_1osq2_219 {
  background: rgba(33, 199, 102, 0.15);
  color: #0f9a4c;
}

._chipLow_1osq2_224 {
  background: rgba(255, 9, 92, 0.11);
  color: #c2185b;
}

._miniBars_1osq2_229 {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 42px;
  margin-top: 12px;
}

._miniBars_1osq2_229 > span {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 5px 5px 0 0;
}

/* ── the signed quote ────────────────────────────── */

._quoteFig_1osq2_245 {
  margin: 0;
}

._quoteMark_1osq2_249 {
  display: block;
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
  color: #b7ff00;
  margin: 0 0 4px;
}

._quote_1osq2_245 {
  margin: 0;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: -0.4px;
  font-weight: 500;
  color: #0f1114;
  max-width: none;
}

._byline_1osq2_61 {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 16px;
}

._avatar_1osq2_275 {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: #eef0f3;
}

._bylineName_1osq2_284 {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #0f1114;
}

._bylineRole_1osq2_61 {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #6b7280;
  margin-top: 2px;
}

/* ── the two deep links ──────────────────────────── */

._links_1osq2_303 {
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
}

._link_1osq2_303 {
  color: #0f1114;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: #b7ff00;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

._link_1osq2_303:hover,
._link_1osq2_303:focus-visible {
  background: #f6ffe0;
}

._linkSep_1osq2_323 {
  padding: 0 8px;
}

/* ── narrow ──────────────────────────────────────── */

/* 900: the chart's own phone threshold, so the scale halves its bars in step
   with the chart above it. */
@media (max-width: 900px) {
  ._scaleBars_1osq2_132 > span:nth-child(even) {
    display: none;
  }

  ._section_1osq2_53 {
    margin-top: 40px;
    padding: 32px 16px 0;
  }
}

/* 640: where two of anything stops fitting. */
@media (max-width: 640px) {
  /* Side padding tracks .pageAnswer at every width — 24 here, 16 on a phone
     (the 900 block above). Setting it independently, as an earlier pass tried
     with 18px, is what put this section proud of the column. */

  ._sectionTitle_1osq2_73 {
    font-size: 24px;
  }

  ._h3_1osq2_82 {
    font-size: 20px;
  }

  ._quote_1osq2_245 {
    font-size: 20px;
  }

  ._group_1osq2_105 {
    margin-top: 72px;
  }

  ._states_1osq2_169 {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  ._scaleLabels_1osq2_145 {
    flex-direction: column;
    gap: 6px;
  }

  ._scaleLabels_1osq2_145 > span,
  ._scaleLabels_1osq2_145 > span:nth-child(2),
  ._scaleLabels_1osq2_145 > span:last-child {
    text-align: left;
  }
}
._page_10zns_1 {
  display: flex;
  flex-direction: column;
  background: #fff;
  min-height: 100vh;
  font-family: 'General Sans', sans-serif;
}

._bar_10zns_9 {
  padding: 22px 32px;
  border-bottom: 1px solid #f0f0f0;
}

._logo_10zns_14 {
  height: 28px;
  display: block;
}

._main_10zns_19 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 64px 24px 96px;
  text-align: center;
}

._kicker_10zns_30 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: hsl(252, 69%, 60%);
}

._headline_10zns_37 {
  font-weight: 700;
  font-size: 42px;
  line-height: 1.05;
  color: #0f1114;
  margin: 0;
}

._body_10zns_45 {
  color: #3f4650;
  font-size: 17px;
  line-height: 1.55;
  max-width: 420px;
  margin: 0;
}

._retry_10zns_53 {
  background: #0f1114;
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  padding: 13px 34px;
  cursor: pointer;
  margin-top: 6px;
}

._retry_10zns_53:hover {
  background: hsl(252, 69%, 40%);
}

._homeLink_10zns_70 {
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

._homeLink_10zns_70:hover {
  color: #0f1114;
}

@media (max-width: 640px) {
  ._headline_10zns_37 {
    font-size: 30px;
  }
}
/* ── Page shell ──────────────────────────────────────────── */
._page_ijemv_2 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: #fff;
  min-height: 100vh;
  font-family: 'General Sans', sans-serif;
}

/* Centered content column, matching header/footer inner width */
._section_ijemv_12 {
  width: 100%;
  max-width: 1008px;
  margin: 0 auto;
  padding: 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._sectionLabel_ijemv_23 {
  margin: 0;
  padding-left: 24px;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1px;
  color: #9ca3af;
}

/* ── Hero ────────────────────────────────────────────────── */
._hero_ijemv_33 {
  gap: 20px;
  padding-top: 72px;
  padding-bottom: 24px;
  align-items: flex-start;
}

._heroTitle_ijemv_40 {
  margin: 0;
  max-width: 784px;
  font-weight: 700;
  font-size: 52px;
  line-height: 1.05;
  letter-spacing: -1px;
  color: #0f1114;
}

._heroSubtitle_ijemv_50 {
  margin: 0;
  max-width: 640px;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  color: #6b7280;
}

/* ── How Wethrift is different ───────────────────────────── */
._promiseGrid_ijemv_60 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

._promiseCard_ijemv_66 {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 24px;
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 28px;
}

._promiseText_ijemv_76 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._promiseTitle_ijemv_82 {
  margin: 0;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.3px;
  color: #0f1114;
}

._promiseBody_ijemv_90 {
  margin: 0;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.6;
  color: #6b7280;
}

/* ── Our story ───────────────────────────────────────────── */
._storyCard_ijemv_99 {
  display: flex;
  gap: 48px;
  padding: 32px;
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 40px;
}

._storyTitle_ijemv_108 {
  margin: 0;
  width: 300px;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.3px;
  color: #0f1114;
}

._storyCopy_ijemv_118 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  min-width: 0;
}

._storyCopy_ijemv_118 p {
  margin: 0;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.6;
  color: #6b7280;
}

/* ── Meet the team ───────────────────────────────────────── */
._teamList_ijemv_135 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._teamCard_ijemv_141 {
  display: flex;
  align-items: flex-start;
  padding: 8px;
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 40px;
}

._avatar_ijemv_150 {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 160px;
  height: 160px;
  flex-shrink: 0;
  border-radius: 32px;
  overflow: hidden;
}

._avatarImg_ijemv_161 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

._teamContent_ijemv_167 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  flex: 1;
  min-width: 0;
}

._teamHeading_ijemv_176 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._teamName_ijemv_182 {
  margin: 0;
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  letter-spacing: -0.3px;
  color: #0f1114;
}

._teamRole_ijemv_191 {
  margin: 0;
  font-weight: 700;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 1px;
  color: #9ca3af;
}

._teamBio_ijemv_200 {
  margin: 0;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.6;
  color: #6b7280;
}

/* ── What shoppers say ───────────────────────────────────── */
._reviewRow_ijemv_209 {
  display: flex;
  gap: 16px;
}

._reviewCard_ijemv_214 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  background: #f9fafb;
  border-radius: 40px;
}

._stars_ijemv_225 {
  margin: 0;
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  color: #f5ba21;
}

._reviewTitle_ijemv_233 {
  margin: 0;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.3px;
  color: #0f1114;
}

._reviewQuote_ijemv_241 {
  margin: 0;
  flex: 1;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.6;
  color: #6b7280;
}

._reviewMeta_ijemv_250 {
  margin: 0;
  font-weight: 500;
  font-size: 11px;
  color: #9ca3af;
}

/* ── Company ─────────────────────────────────────────────── */
._infoRow_ijemv_258 {
  display: flex;
  gap: 16px;
}

._infoCard_ijemv_263 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 28px;
}

._infoTitle_ijemv_275 {
  margin: 0;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.3px;
  color: #0f1114;
}

._infoBody_ijemv_283 {
  margin: 0;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.6;
  color: #6b7280;
}

._infoBody_ijemv_283 p {
  margin: 0 0 8px;
}

._infoBody_ijemv_283 p:last-child {
  margin-bottom: 0;
}

._infoLink_ijemv_299 {
  color: #6b7280;
  text-decoration: underline;
}

._infoLink_ijemv_299:hover {
  color: #0f1114;
}

/* ── Follow ──────────────────────────────────────────────── */
._socialChips_ijemv_309 {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* The handle does the work here — it's what tells the two TikTok accounts
   apart, and it's the accessible name of the link. */
._socialChip_ijemv_309 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* 12px vertical, not 11: it takes the chip to 45px so the whole thing
     clears the 44px touch target. At 11px it measured 43. */
  padding: 12px 18px 12px 15px;
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 999px;
  text-decoration: none;
  color: #6b7280;
  --glyph-size: 18px;
  transition: border-color 0.16s ease, color 0.16s ease;
}

._socialChip_ijemv_309:hover {
  border-color: #d1d5db;
  color: var(--glyph-hover, #0f1114);
}

/* Same gradient the footer uses — defined once in social_icons.jsx. */
._socialChip_ijemv_309[data-icon='instagram']:hover svg {
  fill: url(#wethrift-instagram-gradient);
}

._socialChip_ijemv_309:focus-visible {
  outline: 2px solid #0f1114;
  outline-offset: 2px;
}

._socialChipText_ijemv_348 {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

._socialChipPlatform_ijemv_354 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: #0f1114;
}

._socialChipHandle_ijemv_361 {
  font-size: 12px;
  font-weight: 500;
  color: #9ca3af;
}

@media (prefers-reduced-motion: reduce) {
  ._socialChip_ijemv_309 {
    transition: none;
  }
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  ._reviewRow_ijemv_209,
  ._infoRow_ijemv_258 {
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  ._section_ijemv_12 {
    padding: 20px;
  }

  ._hero_ijemv_33 {
    padding-top: 48px;
  }

  ._heroTitle_ijemv_40 {
    font-size: 34px;
    letter-spacing: -0.5px;
  }

  ._promiseGrid_ijemv_60 {
    grid-template-columns: 1fr;
  }

  ._storyCard_ijemv_99 {
    flex-direction: column;
    gap: 20px;
    padding: 24px;
    border-radius: 32px;
  }

  ._storyTitle_ijemv_108 {
    width: auto;
  }

  ._teamCard_ijemv_141 {
    flex-direction: column;
    align-items: stretch;
  }

  ._avatar_ijemv_150 {
    width: 100%;
    height: 200px;
  }
}
._page_tvgtc_1,
._page_tvgtc_1 * {
  box-sizing: border-box;
}

._page_tvgtc_1 {
  --content-width: 1000px;
  min-height: 100vh;
  overflow: hidden;
  background: #fff;
  color: #0f1114;
  font-family: 'General Sans', system-ui, sans-serif;
}

._header_tvgtc_15 a,
._page_tvgtc_1 main a {
  color: inherit;
  text-decoration: none;
}

._page_tvgtc_1 a:focus-visible {
  outline: 3px solid #0062ff;
  outline-offset: 3px;
}

._header_tvgtc_15 {
  width: 100%;
  background: #fff;
}

._headerInner_tvgtc_31 {
  display: flex;
  width: var(--content-width);
  max-width: calc(100% - 48px);
  margin: 0 auto;
  padding: 32px 0;
  align-items: center;
  justify-content: space-between;
}

._logoLink_tvgtc_41 {
  display: flex;
  width: 154px;
  height: 38px;
  flex: 0 0 auto;
  align-items: center;
}

._logoLink_tvgtc_41 img {
  display: block;
  width: 100%;
  height: 100%;
}

._headerNav_tvgtc_55 {
  display: flex;
  gap: 32px;
  align-items: center;
  color: #454a54;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

._headerNav_tvgtc_55 a:hover {
  color: #0f1114;
}

._hero_tvgtc_69 {
  --hero-art-gap: 0px;
  --hero-headline-half-width: 320px;
  --hero-left-visible-right: 836.6px;
  --hero-right-visible-left: 120.75px;
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  min-height: 662px;
  padding: 120px 220px;
  flex-direction: column;
  gap: 48px;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

._heroArt_tvgtc_87 {
  position: absolute;
  top: 50%;
  overflow: hidden;
  pointer-events: none;
  transform: translateY(-50%);
}

._heroArtLeft_tvgtc_95 {
  left: calc(
    50% - var(--hero-headline-half-width) - var(--hero-art-gap) -
      var(--hero-left-visible-right)
  );
  width: 938px;
  height: 542px;
}

._heroArtRight_tvgtc_104 {
  left: calc(
    50% + var(--hero-headline-half-width) + var(--hero-art-gap) -
      var(--hero-right-visible-left)
  );
  width: 860px;
  height: 497px;
}

._heroPieceCanvas_tvgtc_113 {
  position: absolute;
  left: 0;
  width: 3312px;
  height: 2480px;
  transform-origin: top left;
}

._heroArtLeft_tvgtc_95 ._heroPieceCanvas_tvgtc_113 {
  top: -54.3084px;
  transform: scale(0.2832125604, 0.2831294355);
}

._heroArtRight_tvgtc_104 ._heroPieceCanvas_tvgtc_113 {
  top: -104.4197px;
  transform: scale(0.2596618357, 0.2599430242);
}

._heroPiece_tvgtc_113 {
  position: absolute;
  display: block;
  max-width: none;
  pointer-events: auto;
  transform: rotate(0);
  transform-origin: center;
  user-select: none;
  -webkit-user-drag: none;
}

._heroPieceSwap_tvgtc_142 {
  object-fit: contain;
}

@media (hover: hover) and (pointer: fine) {
  ._heroPiece_tvgtc_113 {
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  }

  ._heroPiece_tvgtc_113:hover {
    z-index: 1;
    transform: rotate(var(--hover-rotation));
    transition-duration: 0.36s;
    transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  }
}

._heroCopy_tvgtc_159 {
  position: relative;
  z-index: 1;
  display: flex;
  width: 640px;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  text-align: center;
}

._heroCopy_tvgtc_159 h1 {
  width: 100%;
  margin: 0;
  font-size: 72px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.1;
}

._heroCopy_tvgtc_159 p {
  width: 456px;
  margin: 0;
  color: #6b7280;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
}

._heroSearch_tvgtc_188 {
  position: relative;
  z-index: 3;
  width: 674px;
}

._mobileHeroArtwork_tvgtc_194 {
  display: none;
}

._difference_tvgtc_198 {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  padding: 80px 0;
  flex-direction: column;
  gap: 120px;
  align-items: center;
  overflow: hidden;
}

._promiseRow_tvgtc_210 {
  display: grid;
  width: var(--content-width);
  max-width: calc(100% - 48px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

._promiseCard_tvgtc_219 {
  min-width: 0;
  overflow: hidden;
  border: 2px solid;
  border-radius: 28px;
  padding: 24px;
}

._promiseCardBlue_tvgtc_227 {
  border-color: #eaf9ff;
  background: linear-gradient(180deg, #f4feff 49.944%, #b1e9ff 100%);
}

._promiseCardPink_tvgtc_232 {
  border-color: #ffe8f2;
  background: linear-gradient(180deg, #fff4f9 50.04%, #ff9ebf 100%);
}

._promiseCardInner_tvgtc_237 {
  display: flex;
  height: 100%;
  min-height: 415px;
  padding: 20px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}

._promiseCardInner_tvgtc_237 > div {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 20px;
}

._promiseCard_tvgtc_219 h2,
._sectionHeading_tvgtc_255 h2,
._payoff_tvgtc_256 h2 {
  margin: 0;
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -1px;
  line-height: 1.1;
}

._promiseCard_tvgtc_219 p,
._sectionHeading_tvgtc_255 p,
._payoff_tvgtc_256 p {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
}

._detailLink_tvgtc_273,
._outlineLink_tvgtc_274 {
  display: inline-flex;
  min-height: 36px;
  padding: 8px 16px;
  align-items: center;
  justify-content: center;
  border: 1.5px solid;
  border-radius: 12px;
  background: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
}

._promiseCardBlue_tvgtc_227 ._detailLink_tvgtc_273 {
  border-color: #b1e9ff;
  color: #387790;
}

._promiseCardPink_tvgtc_232 ._detailLink_tvgtc_273 {
  border-color: #ffaed3;
  color: #b0537e;
}

._detailLink_tvgtc_273:hover,
._outlineLink_tvgtc_274:hover {
  transform: translateY(-1px);
}

._promiseVisual_tvgtc_304 {
  min-width: 0;
  overflow: hidden;
  border-radius: 28px;
}

._promiseVisual_tvgtc_304 img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

._evidence_tvgtc_317,
._trust_tvgtc_318 {
  display: flex;
  width: var(--content-width);
  max-width: calc(100% - 48px);
  flex-direction: column;
  gap: 40px;
  align-items: center;
}

._sectionHeading_tvgtc_255 {
  display: flex;
  width: 686px;
  max-width: 100%;
  padding: 20px;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  text-align: center;
}

._evidenceGrid_tvgtc_338,
._trustGrid_tvgtc_339 {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

._infoCard_tvgtc_346,
._trustCard_tvgtc_347 {
  min-width: 0;
  overflow: hidden;
  border: 1.5px solid #e5e7eb;
  border-radius: 28px;
  background: #fff;
}

._infoCard_tvgtc_346 {
  display: flex;
  min-height: 236px;
  padding: 24px;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

._evidenceIcon_tvgtc_364 {
  position: relative;
  width: 112px;
  height: 112px;
  flex: 0 0 112px;
  overflow: hidden;
}

._evidenceIcon_tvgtc_364 img {
  position: absolute;
  top: -14%;
  left: -14%;
  width: 128%;
  height: 128%;
  max-width: none;
  object-fit: cover;
}

._infoCard_tvgtc_346 h3,
._trustCard_tvgtc_347 h3 {
  margin: 0;
  color: #0f1114;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}

._infoCard_tvgtc_346 p,
._trustCard_tvgtc_347 p {
  margin: 0;
  color: #666;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
}

._trust_tvgtc_318 {
  gap: 68px;
}

._trustHeading_tvgtc_404 {
  width: 528px;
  padding: 20px;
}

._trustHeading_tvgtc_404 h2 {
  line-height: 1;
}

._trustGrid_tvgtc_339 {
  height: 420px;
}

._trustCard_tvgtc_347 {
  display: flex;
  height: 100%;
  padding: 24px;
  flex-direction: column;
  gap: 36px;
  align-items: flex-start;
}

._trustIcon_tvgtc_426 {
  position: relative;
  height: 116px;
  flex: 0 0 116px;
  overflow: hidden;
}

._trustIcon_tvgtc_426 img {
  position: absolute;
  max-width: none;
}

._trustIconGlobe_tvgtc_438 {
  width: 116px;
}

._trustIconGlobe_tvgtc_438 img {
  top: -25%;
  left: -30%;
  width: 158%;
  height: 158%;
}

._trustIconBubbles_tvgtc_449 {
  width: 131px;
}

._trustIconBubbles_tvgtc_449 img {
  top: -1%;
  left: -53%;
  width: 207%;
  height: 100%;
}

._trustIconMoney_tvgtc_460 {
  width: 134px;
}

._trustIconMoney_tvgtc_460 img {
  top: -4%;
  left: -2%;
  width: 101%;
  height: 117%;
}

._trustCardBody_tvgtc_471 {
  display: flex;
  width: 100%;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
}

._trustCardBody_tvgtc_471 > div {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._outlineLink_tvgtc_274 {
  width: max-content;
  border-color: #e5e7eb;
  background: transparent;
  color: #666;
}

._payoff_tvgtc_256 {
  position: relative;
  display: flex;
  width: var(--content-width);
  max-width: calc(100% - 48px);
  min-height: 554px;
  padding: 56px 100px;
  flex-direction: column;
  gap: 44px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px solid #fff2c8;
  border-radius: 28px;
  background: #9fffff;
}

._payoffBackground_tvgtc_510 {
  position: absolute;
  top: -699px;
  left: 50%;
  width: 2076px;
  height: 1652px;
  max-width: none;
  transform: translateX(-50%);
}

._diamond_tvgtc_520 {
  position: relative;
  width: 268px;
  height: 269px;
  flex: 0 0 auto;
}

._diamondFloat_tvgtc_527 {
  position: absolute;
  inset: 0;
  animation: _diamondBreath_tvgtc_1 4.8s ease-in-out infinite;
  will-change: transform;
}

@keyframes _diamondBreath_tvgtc_1 {
  0%,
  100% {
    transform: translateY(5px);
  }

  50% {
    transform: translateY(-5px);
  }
}

._diamondGlow_tvgtc_545 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 578px;
  height: 500px;
  max-width: none;
  transform: translate(-50%, -50%);
}

._diamondArt_tvgtc_555 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 418px;
  height: 367px;
  max-width: none;
  object-fit: contain;
  transform: translate(-50%, -50%);
}

._payoffCopy_tvgtc_566 {
  position: relative;
  display: flex;
  width: 100%;
  padding: 20px;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  text-align: center;
}

._payoffCopy_tvgtc_566 h2 {
  line-height: 1;
}

._payoffCopy_tvgtc_566 p {
  width: 390px;
  max-width: 100%;
}

._recommendation_tvgtc_586 {
  display: flex;
  width: var(--content-width);
  max-width: calc(100% - 48px);
  margin: 0 auto;
  padding: 24px 0;
  align-items: center;
  justify-content: center;
}

._finalCta_tvgtc_596 {
  position: relative;
  display: flex;
  width: 100%;
  padding: 20px 0 40px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px solid #ea004f;
  border-radius: 40px;
  background: linear-gradient(180deg, #ff095c 50%, #ff090d 100%),
    linear-gradient(180deg, #ff75a4 49.939%, #ff6c36 100%);
  transition: padding-bottom 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

._finalCta_tvgtc_596:focus-within {
  padding-bottom: 380px;
}

._finalCta_tvgtc_596 h2 {
  width: 100%;
  margin: 0;
  padding: 40px;
  color: #fff;
  font-size: 108px;
  font-weight: 700;
  letter-spacing: -3px;
  line-height: 0.9;
  text-align: center;
  text-transform: uppercase;
}

._finalSearch_tvgtc_629 {
  position: relative;
  z-index: 2;
  width: 686px;
  max-width: calc(100% - 40px);
  padding: 20px;
}

@media (max-width: 900px) {
  ._headerInner_tvgtc_31 {
    padding: 24px 0;
  }

  ._hero_tvgtc_69 {
    min-height: 640px;
    padding: 104px 40px;
  }

  ._heroCopy_tvgtc_159 h1 {
    font-size: 64px;
  }

  ._difference_tvgtc_198 {
    gap: 88px;
    padding: 64px 0;
  }

  ._promiseCard_tvgtc_219 {
    padding: 18px;
  }

  ._promiseCardInner_tvgtc_237 {
    min-height: 370px;
    padding: 14px;
  }

  ._promiseCard_tvgtc_219 h2,
  ._sectionHeading_tvgtc_255 h2,
  ._payoff_tvgtc_256 h2 {
    font-size: 38px;
  }

  ._trustGrid_tvgtc_339 {
    height: auto;
  }

  ._trustCard_tvgtc_347 {
    min-height: 400px;
    padding: 20px;
  }

  ._payoff_tvgtc_256 {
    padding-right: 48px;
    padding-left: 48px;
  }

  ._finalCta_tvgtc_596 h2 {
    font-size: 78px;
  }
}

@media (max-width: 720px) {
  ._headerInner_tvgtc_31 {
    width: 100%;
    max-width: none;
    min-height: 0;
    padding: 32px 40px;
    justify-content: center;
  }

  ._logoLink_tvgtc_41 {
    width: 185px;
    height: auto;
  }

  ._headerNav_tvgtc_55 {
    display: none;
  }

  ._hero_tvgtc_69 {
    min-height: 0;
    padding: 72px 40px 0;
    gap: 28px;
    overflow: hidden;
    justify-content: flex-start;
    background: #fff;
  }

  ._heroArt_tvgtc_87 {
    display: none;
  }

  ._heroCopy_tvgtc_159 {
    width: 100%;
    gap: 28px;
  }

  ._heroCopy_tvgtc_159 h1 {
    max-width: none;
    font-size: 40px;
    letter-spacing: -1px;
    line-height: 1.1;
  }

  ._heroCopy_tvgtc_159 p {
    width: min(100%, 444px);
    font-size: 14px;
    line-height: 1.6;
  }

  ._heroSearch_tvgtc_188 {
    width: 100%;
  }

  ._mobileHeroArtwork_tvgtc_194 {
    display: block;
    width: 100vw;
    height: auto;
    margin-top: -28px;
    margin-inline: calc(50% - 50vw);
    aspect-ratio: 524 / 403;
    overflow: hidden;
    flex: 0 0 auto;
  }

  ._mobileHeroArtwork_tvgtc_194 img {
    display: block;
    width: 100%;
    height: 100%;
  }

  ._difference_tvgtc_198 {
    gap: 64px;
    padding: 16px 0 0;
    overflow: visible;
  }

  ._promiseRow_tvgtc_210 {
    max-width: calc(100% - 32px);
    grid-template-columns: 1fr;
    gap: 10px;
  }

  ._honestRow_tvgtc_772 ._promiseVisual_tvgtc_304 {
    order: 2;
  }

  ._honestRow_tvgtc_772 ._promiseCard_tvgtc_219 {
    order: 1;
  }

  ._promiseCardInner_tvgtc_237 {
    min-height: 0;
    padding: 10px;
    gap: 40px;
  }

  ._promiseVisual_tvgtc_304 {
    aspect-ratio: 988 / 934;
    overflow: visible;
    border-radius: 24px;
  }

  ._honestRow_tvgtc_772 ._promiseVisual_tvgtc_304 {
    aspect-ratio: 988 / 1184;
  }

  ._promiseVisual_tvgtc_304 img {
    object-fit: contain;
  }

  ._detailLink_tvgtc_273,
  ._outlineLink_tvgtc_274 {
    min-height: 44px;
    padding: 10px 16px;
  }

  ._evidence_tvgtc_317,
  ._trust_tvgtc_318,
  ._payoff_tvgtc_256 {
    max-width: calc(100% - 32px);
  }

  ._sectionHeading_tvgtc_255 {
    padding: 12px 6px;
    align-items: flex-start;
    text-align: left;
  }

  ._evidence_tvgtc_317 {
    gap: 20px;
  }

  ._promiseCard_tvgtc_219 h2,
  ._sectionHeading_tvgtc_255 h2,
  ._payoff_tvgtc_256 h2 {
    font-size: 34px;
  }

  ._evidenceGrid_tvgtc_338,
  ._trustGrid_tvgtc_339 {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    grid-template-columns: none;
    grid-auto-columns: minmax(270px, 88%);
    grid-auto-flow: column;
    gap: 10px;
    padding: 0 16px 8px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 16px;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  ._evidenceGrid_tvgtc_338::-webkit-scrollbar,
  ._trustGrid_tvgtc_339::-webkit-scrollbar {
    display: none;
  }

  ._infoCard_tvgtc_346 {
    min-height: 260px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  ._infoCard_tvgtc_346,
  ._trustCard_tvgtc_347 {
    padding: 22px;
  }

  ._evidenceIcon_tvgtc_364 {
    width: 96px;
    height: 96px;
    flex-basis: 96px;
  }

  ._trust_tvgtc_318 {
    gap: 32px;
  }

  ._trustCard_tvgtc_347 {
    min-height: 400px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  ._trustCardBody_tvgtc_471 {
    min-height: 240px;
  }

  ._payoff_tvgtc_256 {
    min-height: 430px;
    padding: 40px 24px;
    gap: 16px;
  }

  ._diamond_tvgtc_520 {
    width: 210px;
    height: 210px;
    transform: none;
  }

  ._recommendation_tvgtc_586 {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: none;
    padding: 16px 16px 32px;
  }

  ._finalCta_tvgtc_596 {
    padding: 12px 0 24px;
    overflow: visible;
    border-radius: 24px;
  }

  ._finalCta_tvgtc_596:focus-within {
    padding-bottom: 24px;
  }

  ._finalCta_tvgtc_596 h2 {
    padding: 28px 18px 20px;
    font-size: clamp(42px, 13vw, 58px);
    letter-spacing: -1.5px;
  }

  ._finalSearch_tvgtc_629 {
    max-width: 100%;
    padding: 12px;
  }
}

@media (max-width: 460px) {
  ._headerInner_tvgtc_31 {
    padding: 20px;
  }

  ._logoLink_tvgtc_41 {
    width: 185px;
  }

  ._hero_tvgtc_69 {
    padding: 56px 20px 0;
  }

  ._heroCopy_tvgtc_159 h1 {
    font-size: 38px;
  }
}

@media (max-width: 420px) {
  ._hero_tvgtc_69 {
    padding-top: 52px;
  }

  ._promiseCard_tvgtc_219 {
    padding: 16px;
  }

  ._promiseCardInner_tvgtc_237 {
    min-height: 0;
    padding: 4px;
  }

  ._promiseCard_tvgtc_219 h2,
  ._sectionHeading_tvgtc_255 h2 {
    font-size: 25px;
  }

  ._promiseCard_tvgtc_219 p,
  ._sectionHeading_tvgtc_255 p {
    font-size: 12px;
  }

  ._payoff_tvgtc_256 h2 {
    font-size: 31px;
  }

  ._payoff_tvgtc_256 p {
    font-size: 15px;
  }

  ._infoCard_tvgtc_346,
  ._trustCard_tvgtc_347 {
    border-radius: 22px;
  }

  ._payoff_tvgtc_256 {
    border-radius: 24px;
  }

  ._diamond_tvgtc_520 {
    width: 190px;
    height: 190px;
    transform: none;
  }

  ._finalCta_tvgtc_596 h2 {
    font-size: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  ._diamondFloat_tvgtc_527 {
    animation: none;
    transform: none;
  }

  ._heroPiece_tvgtc_113,
  ._heroPiece_tvgtc_113:hover {
    animation: none;
    transition: none;
    transform: none;
  }

  ._finalCta_tvgtc_596 {
    transition: none;
  }

  ._detailLink_tvgtc_273:hover,
  ._outlineLink_tvgtc_274:hover {
    transform: none;
  }
}
/* ── Page shell ──────────────────────────────────────────── */
._page_1q5q6_2 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: #fff;
  min-height: 100vh;
  font-family: 'General Sans', sans-serif;
}

/* Centered content column, matching header/footer inner width */
._section_1q5q6_12 {
  width: 100%;
  max-width: 1008px;
  margin: 0 auto;
  padding: 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Hero ────────────────────────────────────────────────── */
._hero_1q5q6_24 {
  gap: 20px;
  padding-top: 72px;
  padding-bottom: 24px;
  align-items: flex-start;
}

._heroTitle_1q5q6_31 {
  margin: 0;
  max-width: 784px;
  font-weight: 700;
  font-size: 52px;
  line-height: 1.05;
  letter-spacing: -1px;
  color: #0f1114;
}

/* ── Body copy ───────────────────────────────────────────── */
._content_1q5q6_42 {
  gap: 0;
  max-width: 720px;
}

/* Paragraph (system <span>) and H2 (system <div>) render as bare
   elements, so target them by element under the scoped .content class. */
._content_1q5q6_42 > div {
  margin: 32px 0 12px;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.3px;
  color: #0f1114;
}

._content_1q5q6_42 > span,
._content_1q5q6_42 > p {
  display: block;
  margin: 0 0 16px;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.7;
  color: #6b7280;
}

._content_1q5q6_42 > span:last-child,
._content_1q5q6_42 > p:last-child {
  margin-bottom: 0;
}

._content_1q5q6_42 > ul {
  margin: 0 0 16px;
  padding-left: 22px;
}

._content_1q5q6_42 > ul > li {
  margin: 0 0 8px;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.7;
  color: #6b7280;
}

._content_1q5q6_42 strong {
  font-weight: 700;
  color: #0f1114;
}

._content_1q5q6_42 a {
  color: #0f1114;
  text-decoration: underline;
}

._content_1q5q6_42 a:hover {
  color: #6b7280;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 640px) {
  ._section_1q5q6_12 {
    padding: 20px;
  }

  ._hero_1q5q6_24 {
    padding-top: 48px;
  }

  ._heroTitle_1q5q6_31 {
    font-size: 34px;
    letter-spacing: -0.5px;
  }

  ._content_1q5q6_42 > div {
    font-size: 20px;
  }
}
/* ── Page shell ──────────────────────────────────────────── */
._page_1c33y_2 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: #fff;
  min-height: 100vh;
  font-family: 'General Sans', sans-serif;
}

/* Centered content column, matching header/footer inner width */
._section_1c33y_12 {
  width: 100%;
  max-width: 1008px;
  margin: 0 auto;
  padding: 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Hero ────────────────────────────────────────────────── */
._hero_1c33y_24 {
  gap: 20px;
  padding-top: 72px;
  padding-bottom: 24px;
  align-items: flex-start;
}

._heroTitle_1c33y_31 {
  margin: 0;
  max-width: 784px;
  font-weight: 700;
  font-size: 52px;
  line-height: 1.05;
  letter-spacing: -1px;
  color: #0f1114;
}

/* ── Body copy ───────────────────────────────────────────── */
._content_1c33y_42 {
  gap: 0;
  max-width: 720px;
}

/* Paragraph (system <span>) and H2 (system <div>) render as bare
   elements, so target them by element under the scoped .content class. */
._content_1c33y_42 > div {
  margin: 32px 0 12px;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.3px;
  color: #0f1114;
}

._content_1c33y_42 > span,
._content_1c33y_42 > p {
  display: block;
  margin: 0 0 16px;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.7;
  color: #6b7280;
}

._content_1c33y_42 > span:last-child,
._content_1c33y_42 > p:last-child {
  margin-bottom: 0;
}

._content_1c33y_42 strong {
  font-weight: 700;
  color: #0f1114;
}

._content_1c33y_42 a {
  color: #0f1114;
  text-decoration: underline;
}

._content_1c33y_42 a:hover {
  color: #6b7280;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 640px) {
  ._section_1c33y_12 {
    padding: 20px;
  }

  ._hero_1c33y_24 {
    padding-top: 48px;
  }

  ._heroTitle_1c33y_31 {
    font-size: 34px;
    letter-spacing: -0.5px;
  }

  ._content_1c33y_42 > div {
    font-size: 20px;
  }
}
/* ── Page shell ──────────────────────────────────────────── */
._page_1pehk_2 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: #fff;
  min-height: 100vh;
  font-family: 'General Sans', sans-serif;
}

/* Centered content column, matching header/footer inner width */
._section_1pehk_12 {
  width: 100%;
  max-width: 1008px;
  margin: 0 auto;
  padding: 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Hero ────────────────────────────────────────────────── */
._hero_1pehk_24 {
  gap: 20px;
  padding-top: 72px;
  padding-bottom: 24px;
  align-items: flex-start;
}

._heroTitle_1pehk_31 {
  margin: 0;
  max-width: 784px;
  font-weight: 700;
  font-size: 52px;
  line-height: 1.05;
  letter-spacing: -1px;
  color: #0f1114;
}

._heroSubtitle_1pehk_41 {
  margin: 0;
  max-width: 640px;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  color: #6b7280;
}

/* ── Body copy ───────────────────────────────────────────── */
._content_1pehk_51 {
  gap: 0;
}

._updated_1pehk_55 {
  margin: 0 0 24px;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1px;
  color: #9ca3af;
}

/* Paragraph (system <span>) and H2 (system <div>) render as bare
   elements, so target them by element under the scoped .content class. */
._content_1pehk_51 > div {
  margin: 32px 0 12px;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.3px;
  color: #0f1114;
}

._content_1pehk_51 > span,
._content_1pehk_51 > p {
  display: block;
  margin: 0 0 16px;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.7;
  color: #6b7280;
}

._content_1pehk_51 > span:last-child,
._content_1pehk_51 > p:last-child {
  margin-bottom: 0;
}

._content_1pehk_51 > ul {
  margin: 0 0 16px;
  padding-left: 22px;
}

._content_1pehk_51 > ul > li {
  margin: 0 0 8px;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.7;
  color: #6b7280;
}

._content_1pehk_51 strong {
  font-weight: 700;
  color: #0f1114;
}

._content_1pehk_51 a {
  color: #0f1114;
  text-decoration: underline;
}

._content_1pehk_51 a:hover {
  color: #6b7280;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 640px) {
  ._section_1pehk_12 {
    padding: 20px;
  }

  ._hero_1pehk_24 {
    padding-top: 48px;
  }

  ._heroTitle_1pehk_31 {
    font-size: 34px;
    letter-spacing: -0.5px;
  }

  ._content_1pehk_51 > div {
    font-size: 20px;
  }
}
/* Shared styling for the Savvy pages (landing / installed / uninstall /
   install). Built on the About page's design tokens (General Sans, 1008px
   column, rounded 1.5px-bordered cards, #0f1114 / #6b7280 / #9ca3af text) so
   the ported pages read as part of the current theme. The designer will do a
   proper pass once these are working — keep changes here, not scattered. */

/* ── Page shell ──────────────────────────────────────────── */
._page_2uag6_8 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: #fff;
  min-height: 100vh;
  font-family: 'General Sans', sans-serif;
}

._section_2uag6_17 {
  width: 100%;
  max-width: 1008px;
  margin: 0 auto;
  padding: 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._sectionLabel_2uag6_28 {
  margin: 0;
  padding-left: 24px;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1px;
  color: #9ca3af;
}

/* ── Hero ────────────────────────────────────────────────── */
._hero_2uag6_38 {
  gap: 20px;
  padding-top: 72px;
  padding-bottom: 24px;
  align-items: flex-start;
}

._heroTitle_2uag6_45 {
  margin: 0;
  max-width: 784px;
  font-weight: 700;
  font-size: 52px;
  line-height: 1.05;
  letter-spacing: -1px;
  color: #0f1114;
}

._heroSubtitle_2uag6_55 {
  margin: 0;
  max-width: 640px;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  color: #6b7280;
}

/* ── Buttons ─────────────────────────────────────────────── */
._cta_2uag6_65 {
  display: inline-block;
  padding: 14px 24px;
  background: #5439bd;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  border: none;
  border-radius: 30px;
  text-decoration: none;
  cursor: pointer;
}

._cta_2uag6_65:hover {
  background: #4830a3;
}

._ctaSecondary_2uag6_82 {
  display: inline-block;
  padding: 14px 24px;
  background: #fff;
  color: #0f1114;
  font-weight: 700;
  font-size: 15px;
  border: 1.5px solid #e5e7eb;
  border-radius: 30px;
  text-decoration: none;
  cursor: pointer;
}

._ctaSecondary_2uag6_82:hover {
  border-color: #0f1114;
}

._ctaCenter_2uag6_99 {
  display: flex;
  justify-content: center;
  padding: 8px 24px 24px;
}

/* ── Feature rows (landing + installed) ──────────────────── */
._featureRow_2uag6_106 {
  display: flex;
  gap: 48px;
  align-items: center;
  padding: 32px;
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 40px;
}

._featureRow_2uag6_106:nth-child(even) {
  flex-direction: row-reverse;
}

._featureText_2uag6_120 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

._featureTitle_2uag6_128 {
  margin: 0;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.3px;
  color: #0f1114;
}

._featureBody_2uag6_136 {
  margin: 0;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.6;
  color: #6b7280;
}

._featureList_2uag6_144 {
  margin: 0;
  padding-left: 16px;
  border-left: 2px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  color: #6b7280;
}

._featureMedia_2uag6_157 {
  flex: 1;
  min-width: 0;
  line-height: 0;
}

._mediaImg_2uag6_163 {
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid #ededed;
}

/* ── Logo grid ───────────────────────────────────────────── */
._centerTitle_2uag6_171 {
  margin: 0;
  text-align: center;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.3px;
  color: #0f1114;
}

._logoGrid_2uag6_180 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  justify-items: center;
  align-items: center;
  padding: 32px 0;
}

._logoImg_2uag6_189 {
  width: 100px;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

/* ── Reviews ─────────────────────────────────────────────── */
._reviewRow_2uag6_197 {
  display: flex;
  gap: 16px;
}

._reviewCard_2uag6_202 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  background: #f9fafb;
  border-radius: 40px;
}

._stars_2uag6_213 {
  margin: 0;
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  color: #f5ba21;
}

._reviewTitle_2uag6_221 {
  margin: 0;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.3px;
  color: #0f1114;
}

._reviewQuote_2uag6_229 {
  margin: 0;
  flex: 1;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.6;
  color: #6b7280;
}

/* ── Savvy logo lockup ───────────────────────────────────── */
._logoLockup_2uag6_239 {
  display: flex;
  justify-content: center;
  padding: 16px 0;
}

._savvyLogo_2uag6_245 {
  height: 64px;
  width: auto;
}

/* ── Uninstall feedback form ─────────────────────────────── */
._formCard_2uag6_251 {
  display: flex;
  gap: 48px;
  padding: 32px;
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 40px;
}

._formIntro_2uag6_260 {
  flex: 1;
  min-width: 0;
}

._formIntroTitle_2uag6_265 {
  margin: 0 0 10px;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.3px;
  color: #0f1114;
}

._formIntroBody_2uag6_273 {
  margin: 0;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.6;
  color: #6b7280;
}

._form_2uag6_251 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._checkRow_2uag6_289 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 14px;
  color: #0f1114;
}

._textarea_2uag6_298 {
  width: 100%;
  height: 100px;
  margin-top: 8px;
  padding: 12px;
  box-sizing: border-box;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
}

._textarea_2uag6_298:disabled {
  background: #f9fafb;
  color: #9ca3af;
}

._submitRow_2uag6_316 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

._thanks_2uag6_323 {
  margin: 0;
  font-weight: 500;
  font-size: 14px;
  color: #6b7280;
}

/* ── Install flow (iOS enable / permissions) ─────────────── */
._installWrap_2uag6_331 {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 48px 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

._installTitle_2uag6_344 {
  margin: 0;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.3px;
  color: #0f1114;
}

._stepList_2uag6_353 {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._step_2uag6_353 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 40px;
  text-align: left;
  font-size: 16px;
  color: #0f1114;
  opacity: 0.5;
  transform: scale(0.98);
  transition: all 0.2s ease-in-out;
}

._stepHighlighted_2uag6_377 {
  opacity: 1;
  transform: scale(1);
  background: linear-gradient(to right, #eee, #fff);
}

._stepDot_2uag6_383 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 100px;
  background: lightgrey;
  color: #333;
  font-weight: 600;
  font-size: 14px;
}

._stepHighlighted_2uag6_377 ._stepDot_2uag6_383 {
  background: #333;
  color: #fff;
}

._stepImg_2uag6_402 {
  display: block;
  width: 85%;
  margin: 0 0 16px auto;
  border-radius: 15px;
  box-shadow: 5px 5px 8px 1px rgba(128, 128, 128, 0.12);
}

._inlineIcon_2uag6_410 {
  width: 26px;
  height: 26px;
  padding: 4px;
  background: #eee;
  border-radius: 6px;
  vertical-align: middle;
  box-sizing: border-box;
}

._installNote_2uag6_420 {
  margin: 0;
  font-size: 18px;
  color: #6b7280;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  ._reviewRow_2uag6_197 {
    flex-direction: column;
  }

  ._logoGrid_2uag6_180 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  ._section_2uag6_17 {
    padding: 20px;
  }

  ._hero_2uag6_38 {
    padding-top: 48px;
  }

  ._heroTitle_2uag6_45 {
    font-size: 34px;
    letter-spacing: -0.5px;
  }

  ._featureRow_2uag6_106,
  ._featureRow_2uag6_106:nth-child(even),
  ._formCard_2uag6_251 {
    flex-direction: column;
    gap: 20px;
    padding: 24px;
    border-radius: 32px;
  }

  ._featureTitle_2uag6_128 {
    font-size: 20px;
  }
}
/* This file already carries the site's only global rules — every CSS module is
   concatenated into one styles.css served on every page, and element selectors
   are not scoped by postcss-modules — so the body reset belongs beside them
   rather than in a new file nothing else would import.

   B11 (N18): the browser's default 8px body margin had never been reset, so
   every band on every page sat 8px in from the screen edge. It was invisible
   (white on white) and cost 16px of a 390px phone. */
* {
  font-family: 'General Sans', system-ui, -apple-system, sans-serif;
  box-sizing: border-box;
}

body {
  margin: 0;
}

._page_1e8s3_18 {
  min-height: 100vh;
  background: #fff;
  display: flex;
  flex-direction: column;
}

/* ── Store toolbar ───────────────────────────────── */

._toolbar_1e8s3_27 {
  background: #fff;
  width: 100%;
}

._toolbarInner_1e8s3_32 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1008px;
  margin: 0 auto;
  padding: 24px 24px;
  gap: 16px;
}

._storeLeft_1e8s3_42 {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* .storeLink went with the H1's outbound link (C11, Nick 2026-07-28).
   .storeLogo moved to store_logo.css — one frame shared with the
   related-store tiles (B8). */

._storeName_1e8s3_52 {
  font-size: 22px;
  font-weight: 700;
  color: #0f1114;
  margin: 0;
  letter-spacing: -0.5px;
  white-space: nowrap;
}

._storeMeta_1e8s3_61 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* N3 (Nick 2026-07-28): the count is plain ink and the date carries the green.
   Inventory is a boast anyone can make; a recent check is the claim that's
   ours, so it gets the line's only emphasis. */
._activeCount_1e8s3_71 {
  font-size: 12px;
  font-weight: 500;
  color: #4b5563;
  text-underline-offset: 3px;
}

._metaDot_1e8s3_78 {
  color: #bfc4cc;
  font-size: 13px;
}

._metaText_1e8s3_83 {
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
}

/* Only while the snapshot is inside the seven-day window — a green that never
   switches off would stop meaning anything. */
._metaFresh_1e8s3_91 {
  font-weight: 700;
  color: #3e8b17;
}

/* ── Main content ────────────────────────────────── */

/* ── The spacing system (B11, N18, ruled 2026-07-29) ──────────────────
   Two numbers per width run this page. Everything below is one of them.

              gutter   card padding   between blocks   before an annex
     ≤900       12          16              16                40
     901-1040   24          24              24                56
     ≥1041       0          24              24                56

   The gutter is the screen edge to every band and every card edge; card
   padding is the card edge to its text. Text therefore lands on gutter plus
   padding at every width, and the page furniture (logo, store name, count
   line, footer) sits on that same text column rather than on the gutter, so
   the whole page reads down two lines instead of eleven.

   Above 1040 the 1008px box is the gutter, which is why the column's own
   padding goes to 0 there and the bands step back to the card padding.

   Two deliberate exceptions, both ruled: the trust section's internal rhythm
   (96/72 between groups, 18 inside) is B10's and is untouched, and the annex
   gap is its own step because an annex has to read as separate. */
._content_1e8s3_118 {
  max-width: 1008px;
  margin: 0 auto;
  padding: 0 0 56px;
  width: 100%;
}

/* The page's opening paragraph (B5, ruled 2026-07-28). One element at one
   size, carrying two sentences: the verdict, then what's on the page and what
   to do. It replaces `.pageVerdict` (a pill) and `.pageLede` (a paragraph)
   which used to stack here and say the same thing twice.

   The pill went with them. A capsule is a chip treatment, and four lines of
   prose in a capsule is exactly the "no design at all" N2 was naming; the
   hanging dot does the marking the pill was reaching for, and leaves both
   sentences sharing one left edge so the whole thing reads as prose. */
/* Indented to the sections' own inner column, not to their outer edge (Nick
   2026-07-28). `.content` positions the card borders; the things a reader
   actually lines up against sit 24px inside those borders — the BEST CODE
   pill, the All-codes title, and on desktop the store logo. The paragraph
   carries the same 24px so it starts on that column too. The pills measure a
   further 1-1.5px right because their cards have a border and this has none. */
._pageAnswer_1e8s3_140 {
  margin: 0 0 24px;
  padding: 0 24px;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 450;
  color: #545b64;
}

/* Inline, not hanging (Nick 2026-07-28). A hanging dot put the paragraph's
   text 19px inside the content column while the dot sat out on the margin, so
   the one block of prose on the page was the only thing not sharing a left
   edge with the cards and the table below it. It now sits in the line it
   belongs to and every line, wrapped or not, starts where the page starts. */
._answerDot_1e8s3_154 {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 9px;
  vertical-align: middle;
}

/* Sentence one: the verdict itself. Weight and colour carry the split, never
   size — the paragraph is one size throughout (Nick 2026-07-28). */
._say_1e8s3_165 {
  font-weight: 700;
  color: #0f1114;
}

/* The code, back up in weight because most people scan this paragraph for it
   rather than reading to it. */
._answerCode_1e8s3_172 {
  font-weight: 650;
  color: #0f1114;
}

/* ── Best-available card + try-next chain (stage 3; re-cut 2026-07-22) ── */

/* The Best-available card owns its border/radius; FeaturedCoupon renders flat
   inside it. */
._bestGroup_1e8s3_181 {
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 40px;
  overflow: hidden;
}

/* The try-next chain — its OWN card below the hero, styled like the
   Best-available card with "Try this next" as its pill heading (solid-ux-tidy
   ruling 2026-07-22). Appears on the first copy, grows a row per try; the
   card itself slides in with the same motion as its rows. */
._chainGroup_1e8s3_192 {
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 40px;
  overflow: hidden;
  margin-top: 24px;
  animation: _chainIn_1e8s3_233 0.28s ease-out;
}

._chainHeader_1e8s3_201 {
  display: flex;
  align-items: center;
  padding: 24px 22.5px 8px;
}

/* The Try-this-next badge is pill.css's .badge — same bright-lime treatment
   as the featured card's BEST CODE RIGHT NOW. */

/* Enters with the chain card's motion — it appears at the same moment. */
._seeAllLink_1e8s3_211 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 24px 0 0 24px;
  background: none;
  border: none;
  padding: 4px 0;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: #00a6ff;
  cursor: pointer;
  animation: _chainIn_1e8s3_233 0.28s ease-out;
}

._seeAllLink_1e8s3_211:hover {
  text-decoration: underline;
}

/* Freshly-revealed chain rows slide in — page-movement discipline: motion only
   at the copy/return moment, and never for reduced-motion users. */
._chainIn_1e8s3_233 {
  animation: _chainIn_1e8s3_233 0.28s ease-out;
}

@keyframes _chainIn_1e8s3_233 {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  ._chainIn_1e8s3_233,
  ._chainGroup_1e8s3_192,
  ._seeAllLink_1e8s3_211 {
    animation: none;
  }
}

/* ── All codes ───────────────────────────────────── */

._table_1e8s3_258 {
  border: 1px solid #e5e7eb;
  border-radius: 32px;
  overflow: hidden;
  margin-top: 24px;
  padding-bottom: 12px;
}

/* Inside the bordered card; the text carries pill.css's .heading chrome
   (Nick 2026-07-22; hairline removed 2026-07-23 — separation duty moves to
   the header-row styling). */
._tableTitle_1e8s3_269 {
  padding: 24px 23px 16px;
}

/* The column-header strip moved to coupon.css (C10), so it sits beside the
   cells it labels and the two can't drift apart. */

/* Both code lists are real <table>s now; their layout is the rows' own, so the
   table element itself only has to stop imposing table sizing. */
._codeTable_1e8s3_278,
._chainTable_1e8s3_279 {
  display: block;
  width: 100%;
  border-collapse: collapse;
}

/* ── Empty ───────────────────────────────────────── */

._empty_1e8s3_287 {
  text-align: center;
  color: #9ca3af;
  padding: 56px 0;
  font-size: 14px;
}

/* ── Responsive ─────────────────────────────────── */

/* 901–1040px: the 1008px content column otherwise runs to within a few px of
   the screen edge — 40px-radius cards need breathing room (stage 8). The bands
   carry gutter plus card padding (24 + 24) so their text stays on the same
   column as the cards' (B11). */
@media (max-width: 1040px) {
  ._content_1e8s3_118 {
    padding-left: 24px;
    padding-right: 24px;
  }

  ._toolbarInner_1e8s3_32 {
    padding: 24px 48px;
  }
}

@media (max-width: 900px) {
  ._toolbarInner_1e8s3_32 {
    padding: 16px 28px;
  }

  ._content_1e8s3_118 {
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 40px;
  }

  ._pageAnswer_1e8s3_140 {
    margin-bottom: 16px;
    padding: 0 16px;
  }

  ._chainGroup_1e8s3_192 {
    margin-top: 16px;
  }

  ._chainHeader_1e8s3_201 {
    padding: 16px 14.5px 8px;
  }

  ._seeAllLink_1e8s3_211 {
    margin: 16px 0 0 16px;
  }

  ._table_1e8s3_258 {
    margin-top: 16px;
    padding-bottom: 8px;
  }

  ._tableTitle_1e8s3_269 {
    padding: 16px 15px 8px;
  }

  /* The header strip's mobile treatment now lives with it in coupon.css — it is
     hidden from view but kept in the accessibility tree (C10). */
}

@media (max-width: 640px) {
  ._toolbarInner_1e8s3_32 {
    flex-direction: column;
    align-items: flex-start;
  }

  ._storeName_1e8s3_52 {
    font-size: 18px;
    /* Long store names wrap instead of running off the toolbar on a phone. */
    white-space: normal;
    overflow-wrap: anywhere;
  }

  ._bestGroup_1e8s3_181 {
    border-radius: 24px;
  }
}
/* ── Page shell ──────────────────────────────────────────── */
._page_27igl_2 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: #fff;
  min-height: 100vh;
  font-family: 'General Sans', sans-serif;
}

/* Centered content column, matching header/footer inner width */
._section_27igl_12 {
  width: 100%;
  max-width: 1008px;
  margin: 0 auto;
  padding: 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Hero ────────────────────────────────────────────────── */
._hero_27igl_24 {
  gap: 20px;
  padding-top: 72px;
  padding-bottom: 24px;
  align-items: flex-start;
}

._heroTitle_27igl_31 {
  margin: 0;
  max-width: 784px;
  font-weight: 700;
  font-size: 52px;
  line-height: 1.05;
  letter-spacing: -1px;
  color: #0f1114;
}

._heroSubtitle_27igl_41 {
  margin: 0;
  max-width: 640px;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  color: #6b7280;
}

/* ── Body copy ───────────────────────────────────────────── */
._content_27igl_51 {
  gap: 0;
}

._updated_27igl_55 {
  margin: 0 0 24px;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1px;
  color: #9ca3af;
}

/* Paragraph (system <span>) and H2 (system <div>) render as bare
   elements, so target them by element under the scoped .content class. */
._content_27igl_51 > div {
  margin: 32px 0 12px;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.3px;
  color: #0f1114;
}

._content_27igl_51 > span,
._content_27igl_51 > p {
  display: block;
  margin: 0 0 16px;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.7;
  color: #6b7280;
}

._content_27igl_51 > span:last-child,
._content_27igl_51 > p:last-child {
  margin-bottom: 0;
}

._content_27igl_51 a {
  color: #0f1114;
  text-decoration: underline;
}

._content_27igl_51 a:hover {
  color: #6b7280;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 640px) {
  ._section_27igl_12 {
    padding: 20px;
  }

  ._hero_27igl_24 {
    padding-top: 48px;
  }

  ._heroTitle_27igl_31 {
    font-size: 34px;
    letter-spacing: -0.5px;
  }

  ._content_27igl_51 > div {
    font-size: 20px;
  }
}
._button_1ithf_1 {
  background-color: hsl(var(--h), var(--s), var(--l));
  color: white;
  padding: 10px;
  cursor: pointer;
  border-radius: 30px;
  border: none;
  margin-bottom: 4px;
}

._button_1ithf_1:hover {
  background-color: hsl(var(--h), var(--s), calc(70%));
}

._button_1ithf_1:active {
  background-color: hsl(var(--h), var(--s), calc(50%));
}
._component_root_1qzl0_1 {
  border: 1px solid #acacac;
  border-radius: 10px;
  padding: 6px;
}

._nested-2_1qzl0_7 {
  border-radius: 4px; /* Parent radius minus parent padding */
  padding: 4px;
}

._nested-3_1qzl0_12 {
  border-radius: 2px; /* Parent radius minus parent padding */
}
._h1_xwvmz_1 {
  font-size: 2em;
  font-weight: bold;
}
._h2_jsb36_1 {
  font-size: 1.5em;
  font-weight: bold;
}
._h3_eywzh_1 {
  font-size: 1.2em;
  font-weight: bold;
}
._link_1m0c4_1 {
  color: green;
}
._paragraph_eenj2_1 {
}
._span_1v3sq_1 {
}
._table_1fjq6_1 {
  border: 1px solid #ddd;
}