/* READY-MADE TARGETS, redone as a storefront (Steven 2026-10-05: "dude,
   this sucks"). One file for every place they draw:
     - the home card "Need ideas?" (feed/_need_ideas_card.html), under the
       hero on /start and the Toll Bench homepage: since Steven 2026-10-13
       the trending banner, the quiet proof row, the squares (the intro
       video first) and their pop-up cards (the last section of this file);
     - the proceed screen (targets/ready_target.html);
     - the paid rows on the shop's Toll Bench Certified shelf
       (feed/_recipes_shelf.html) and the starting-odds pill on the Free
       Assistance shelf (feed/_free_assistance_shelf.html).
   Markup: feed/_ready_target_row.html. The card's yellow tag is the intro
   card's own (.start-intro-card__pills / __tag in start-home.css).

   The look: a record sleeve for the paid song (Post My Want purple with
   pressed grooves, the highlighter-yellow glyph, a neon sticker), the agent
   speaking for itself on the free row (its letter-eye face and its ask in
   the serif italic, in a speech bubble), and the odds in THE green, the want
   card's own pill (.start-card__odds-pill: --accent-primary, black words,
   heading font at 800). Design tokens only; phone first, then the card's
   own width decides (container queries), so the same block fits the home
   card and the proceed screen. */

/* ── Shared atoms ───────────────────────────────────────────────────────── */

/* The odds pill: "95%" big, the small word after it. */
.rt-odds {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--accent-primary);
  color: var(--color-black);
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}
.rt-odds__n { font-size: var(--text-lg); font-weight: 800; font-variant-numeric: tabular-nums; }
.rt-odds__word { font-size: var(--text-xs); font-weight: var(--font-bold); }

/* The Toll Bench Certified stamp: THE certification badge
   (components/_certified_badge.html, certified-badge.css) in a plain
   wrapper that keeps its hook. */
.rt-stamp {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-width: 0;
}

/* "N people helped": a quiet line, always there, zero included. */
.rt-helped {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  line-height: 1.4;
}
.rt-helped iconify-icon { font-size: var(--text-sm); }

/* The record sleeve: purple, pressed grooves, the yellow glyph, and a neon
   sticker on the corner. */
.rt-art {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: var(--radius-lg);
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 5px, color-mix(in srgb, var(--color-white) 8%, transparent) 5px 6px),
    var(--tb-brand-purple);
  color: var(--highlight-yellow);
}
.rt-art__glyph { display: block; }
/* The tile's picture (Steven 2026-10-06: Song for us shows a picture, not
   the glyph): cover-fit at the sleeve's own size and radius. The tile keeps
   overflow visible so the corner badge still sits over its edge. */
.rt-art--photo { background: var(--surface-secondary); }
.rt-art__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.rt-art__badge {
  position: absolute;
  top: calc(var(--space-2) * -1);
  right: calc(var(--space-2) * -1);
  display: grid;
  place-items: center;
  width: var(--size-8);
  height: var(--size-8);
  border-radius: var(--radius-full);
  background: var(--accent-primary);
  color: var(--color-black);
  font-size: var(--text-lg);
  box-shadow: 0 0 0 3px var(--feed-card-bg);
}

/* ── The home card ──────────────────────────────────────────────────────── */
.start-ideas-card {
  position: relative;
  display: grid;
  gap: var(--space-5);
  padding: var(--space-8) var(--space-5) var(--space-5);
  border: var(--feed-card-border);
  border-radius: var(--feed-card-radius);
  background: var(--feed-card-bg);
  box-shadow: var(--tb-card-shadow);
  container: ideas / inline-size;
}
.start-ideas-card__part { min-width: 0; }
/* No rule between the parts (Steven 2026-10-13 evening, his shot of the
   line between the banner's dots and "Additional ideas": "is supposed to be
   gone"); the space stays. */
.start-ideas-card__part + .start-ideas-card__part { padding-top: var(--space-5); }
.start-ideas-card__empty {
  margin: 0;
  color: var(--text-secondary);
  font-family: var(--font-serif);
  font-size: var(--text-base);
  font-style: italic;
  line-height: 1.5;
}
.start-ideas-card__all {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-10);
  color: var(--tb-brand-purple, var(--accent-tertiary));
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  text-decoration: none;
}
.start-ideas-card__all--end { justify-self: end; }
.start-ideas-card__all:hover { text-decoration: underline; }
.start-ideas-card__all:focus-visible { outline: 3px solid var(--highlight-yellow); outline-offset: 2px; border-radius: var(--radius-sm); }

/* ONE ITEM, paid or free, in one shape: the picture, the words, the deal
   (price, odds, the tap), the proof. */
.rt-item {
  display: grid;
  grid-template-columns: var(--size-24) minmax(0, 1fr);
  grid-template-areas:
    "art  body"
    "deal deal"
    "proof proof";
  align-items: start;
  column-gap: var(--space-4);
  row-gap: var(--space-3);
  min-width: 0;
  color: var(--text-primary);
  text-decoration: none;
}
a.rt-item:focus-visible { outline: 3px solid var(--highlight-yellow); outline-offset: var(--space-2); border-radius: var(--radius-md); }
.rt-item__art { grid-area: art; }
.rt-item--buy .rt-item__art { width: var(--size-24); height: var(--size-24); }
.rt-item--buy .rt-art__glyph { font-size: var(--text-5xl); }
.rt-item__body { grid-area: body; display: grid; gap: var(--space-1); min-width: 0; align-self: center; }
.rt-item__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 800;
  line-height: var(--leading-tight);
  overflow-wrap: anywhere;
}
.rt-item__line { color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.45; }
.rt-item__by { color: var(--text-muted); font-size: var(--text-xs); font-weight: var(--font-semibold); }
.rt-item__deal { grid-area: deal; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
.rt-item__price {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
/* "+ fees" beside a paid price (Steven 2026-10-14 ~12:50: "we should
   always put the little '+ fees', like they do with plus tax";
   deal_funding.FEES_WORD): small and quiet, the money words' tone, never
   on "Free". The row's price, the idea tile's, the proceed screen's
   budget. */
.rt-fees {
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  letter-spacing: normal;
  white-space: nowrap;
}
.start-ideas-tile__price .rt-fees { font-size: var(--text-xs); }
/* Get this sits at the RIGHT edge of the deal line, sized to its words,
   about 44px tall, the price at the left (Steven 2026-10-13 evening, the
   Need ideas row with Get this stretched beside "Free": "Make the purple
   button right-aligned and a little smaller"). The same on every surface
   that draws the agent row; the shelf keeps no size of its own. */
.rt-item__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: calc(var(--size-10) + var(--space-1));
  margin-left: auto;
  padding: 0 var(--space-5);
  border: 2px solid var(--tb-brand-purple, var(--accent-tertiary));
  border-radius: var(--radius-full);
  background: var(--tb-brand-purple, var(--accent-tertiary));
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  white-space: nowrap;
  transition: background var(--start-motion-normal, 350ms) ease, border-color var(--start-motion-normal, 350ms) ease, color var(--start-motion-normal, 350ms) ease;
}
.rt-item__cta--soft { background: transparent; color: var(--tb-brand-purple, var(--accent-tertiary)); }
a.rt-item:hover .rt-item__cta { background: var(--tb-brand-purple-hover, var(--accent-tertiary)); border-color: var(--tb-brand-purple-hover, var(--accent-tertiary)); color: var(--color-white); }

/* TWO TAPS ON ONE ROW (Steven 2026-10-13: "Get should take you right to the
   purchase, immediately"; "Clicking Details gives all of the information").
   The title is the row's Details link, stretched over the whole row; Get
   this is its own button above it, posting the purchase
   (feed/_ready_target_row.html). */
.rt-item--tap { position: relative; }
.rt-item__link { color: inherit; text-decoration: none; }
.rt-item__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-md); }
.rt-item__link:focus-visible { outline: none; }
.rt-item__link:focus-visible::after { outline: 3px solid var(--highlight-yellow); outline-offset: var(--space-2); }
.rt-item__get { display: contents; }
.rt-item__get .rt-item__cta { position: relative; z-index: 1; cursor: pointer; line-height: 1; appearance: none; }
.rt-item__get .rt-item__cta:hover,
.rt-item__get .rt-item__cta:focus-visible { background: var(--tb-brand-purple-hover, var(--accent-tertiary)); border-color: var(--tb-brand-purple-hover, var(--accent-tertiary)); color: var(--color-white); }
.rt-item__get .rt-item__cta:focus-visible { outline: 3px solid var(--highlight-yellow); outline-offset: 2px; }
.rt-item__proof { grid-area: proof; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-width: 0; }

/* The free row: the agent's own face where the sleeve goes, and its ask
   said in its own voice. */
.rt-face {
  justify-self: center;
  display: block;
  width: var(--size-20);
  height: var(--size-20);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.rt-face > img,
.rt-face > svg { display: block; width: 100%; height: 100%; }
.rt-item--ask .rt-item__body { gap: var(--space-2); }
.rt-item__who { font-family: var(--font-heading); font-size: var(--text-base); font-weight: 800; line-height: var(--leading-snug); overflow-wrap: anywhere; }
/* The handle drops to its own line whole ("@SF-Founder-House"), never split at a hyphen. */
.rt-item__handle { display: inline-block; max-width: 100%; color: var(--text-muted); font-family: var(--font-body); font-weight: var(--font-normal); }
.rt-item__said {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-xs) var(--radius-md) var(--radius-md) var(--radius-md);
  background: var(--surface-secondary);
  color: var(--text-primary);
  font-family: var(--font-serif);
  font-size: var(--text-base);
  font-style: italic;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.rt-item--ask .rt-helped { font-weight: var(--font-medium); }

/* ALSO FOR SALE: a sideways strip, edge to edge of the card, snapping a
   tile at a time. THE TILE (feed/_idea_tile.html idea_tile, Steven
   2026-10-13 evening: "all of these little mini cards we have are the same
   in the shop also") is the strip's and the shop's catalog shelves' alike:
   one size (--idea-tile), the picture filling its square, the title and
   the price under it. */
.start-ideas-strip__list,
.idea-tiles { --idea-tile: calc(var(--size-24) + var(--space-2)); }
.start-ideas-strip { display: grid; gap: var(--space-2); }
.start-ideas-strip__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.start-ideas-strip__label { margin: 0; font-family: var(--font-heading); font-size: var(--text-base); font-weight: 800; line-height: var(--leading-snug); color: var(--text-primary); }
.start-ideas-strip__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--idea-tile);
  gap: var(--space-3);
  margin: 0 calc(var(--space-5) * -1);
  padding: 0 var(--space-5) var(--space-1);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--space-5);
  scrollbar-width: none;
}
.start-ideas-strip__list::-webkit-scrollbar { display: none; }
.start-ideas-strip__item { min-width: 0; scroll-snap-align: start; }
.start-ideas-tile { display: grid; gap: var(--space-1); color: var(--text-primary); text-decoration: none; }
.start-ideas-tile:focus-visible { outline: 3px solid var(--highlight-yellow); outline-offset: 2px; border-radius: var(--radius-md); }
.start-ideas-tile__art {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  margin-bottom: var(--space-1);
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface-secondary);
  color: var(--tb-brand-purple, var(--accent-tertiary));
  font-size: var(--text-4xl);
}
.start-ideas-tile__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.start-ideas-tile__art iconify-icon { display: block; }
/* Each kind keeps one color, so a glance says song, harness, paper or
   thesis (Steven 2026-10-06: the "Soon" video, photo and plan tiles are off
   the strip; the free reading and the harness took their color pairs). The
   book and the stay wear their own covers. */
.start-ideas-tile__art--song { background: var(--tb-brand-purple, var(--accent-tertiary)); color: var(--highlight-yellow); }
.start-ideas-tile__art--harness { background: var(--accent-dark); color: var(--accent-primary); }
.start-ideas-tile__art--paper { background: var(--highlight-yellow); color: var(--color-black); }
.start-ideas-tile__art--thesis { background: var(--accent-primary); color: var(--color-black); }
.start-ideas-tile__name {
  display: -webkit-box;
  overflow: hidden;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  line-height: var(--leading-snug);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.start-ideas-tile__price { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 800; font-variant-numeric: tabular-nums; }
.start-ideas-tile__note { display: block; color: var(--text-muted); font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--font-semibold); }
a.start-ideas-tile:hover .start-ideas-tile__name { text-decoration: underline; }
/* A house item's rating under its price (house_item_badge): its own link,
   to its own page; the stars in the text colour. */
.start-ideas-tile__rating {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--size-6);
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  line-height: 1;
  text-decoration: none;
}
.start-ideas-tile__rating:hover .start-ideas-tile__rating-n { text-decoration: underline; }
.start-ideas-tile__rating:focus-visible { outline: 3px solid var(--highlight-yellow); outline-offset: 2px; border-radius: var(--radius-sm); }
.start-ideas-tile__stars { display: inline-flex; gap: 1px; color: var(--text-primary); }
.start-ideas-tile__stars iconify-icon { display: block; }
/* The shop's catalog shelves (feed/shop.html): the same tiles, the same
   size, wrapping in rows. */
.idea-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--idea-tile));
  gap: var(--space-4) var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  .idea-tiles { --idea-tile: calc(var(--size-24) + var(--space-8)); }
}

/* The card at tablet and desktop width: the deal moves to the right of the
   words, the sleeve grows, the tiles grow. */
@container ideas (min-width: 520px) {
  .start-ideas-card .rt-item {
    grid-template-columns: calc(var(--size-16) * 2) minmax(0, 1fr) auto;
    grid-template-areas:
      "art body  deal"
      "art proof deal";
    row-gap: var(--space-2);
  }
  .start-ideas-card .rt-item--ask { grid-template-columns: calc(var(--size-16) * 2) minmax(0, 1fr) auto; }
  .start-ideas-card .rt-item--buy .rt-item__art { width: calc(var(--size-16) * 2); height: calc(var(--size-16) * 2); }
  .start-ideas-card .rt-item--buy .rt-art__glyph { font-size: calc(var(--size-16) + var(--space-2)); }
  .start-ideas-card .rt-item__body { align-self: end; }
  .start-ideas-card .rt-item__proof { align-self: start; }
  .start-ideas-card .rt-item__deal { flex-direction: column; flex-wrap: nowrap; align-items: flex-end; align-self: center; }
  .start-ideas-card .rt-item__cta { flex: 0 0 auto; margin-left: 0; padding: 0 var(--space-5); }
  .start-ideas-card .rt-item__price { font-size: var(--text-4xl); }
  .start-ideas-card .rt-item__title { font-size: var(--text-2xl); }
  .start-ideas-card .rt-face { width: var(--size-24); height: var(--size-24); }
  .start-ideas-strip__list { --idea-tile: calc(var(--size-24) + var(--space-8)); }
}
@media (max-width: 767px) {
  .start-ideas-card { padding: var(--space-8) var(--space-4) var(--space-5); }
  .start-ideas-strip__list { margin: 0 calc(var(--space-4) * -1); padding: 0 var(--space-4) var(--space-1); scroll-padding-inline: var(--space-4); }
}

/* ── The proceed screen (targets/ready_target.html): the ready-made card at
   full width, its agent, one sentence, ONE control. ─────────────────────── */
.ready-target { display: grid; gap: var(--space-5); width: 100%; max-width: var(--feed-card-max-width); margin: var(--space-6) auto var(--space-10); }
.ready-target .start-ideas-card { gap: var(--space-5); }
.ready-target__agent { display: flex; align-items: center; gap: var(--space-3); min-width: 0; padding-top: var(--space-5); border-top: 1px solid var(--border-default); }
.ready-target__face { flex: 0 0 auto; display: inline-flex; width: var(--size-12); height: var(--size-12); border-radius: var(--radius-full); overflow: hidden; }
.ready-target__agent-text { display: grid; gap: 2px; min-width: 0; }
.ready-target__agent-label { color: var(--text-secondary); font-size: var(--text-xs); font-weight: var(--font-semibold); }
.ready-target__agent-name { color: var(--text-primary); font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 800; line-height: var(--leading-snug); text-decoration: none; overflow-wrap: anywhere; }
a.ready-target__agent-name:hover { text-decoration: underline; }
.ready-target__budget { margin: 0; color: var(--text-primary); font-size: var(--text-base); line-height: 1.5; }
.ready-target__sentence { margin: 0; color: var(--text-primary); font-family: var(--font-serif); font-size: var(--text-lg); line-height: 1.45; }
.ready-target__note { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-secondary); color: var(--text-primary); font-size: var(--text-sm); line-height: 1.5; }
.ready-target__note a { color: var(--tb-brand-purple, var(--accent-tertiary)); font-weight: var(--font-bold); }
.ready-target__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin: 0; }
.ready-target__go { display: inline-flex; align-items: center; justify-content: center; min-height: var(--size-12); padding: 0 var(--space-8); border: 0; border-radius: var(--radius-full); background: var(--tb-brand-purple, var(--accent-tertiary)); color: var(--color-white); font-family: var(--font-heading); font-size: var(--text-base); font-weight: var(--font-bold); text-decoration: none; cursor: pointer; transition: background var(--start-motion-normal, 350ms) ease; }
.ready-target__go:hover { background: var(--tb-brand-purple-hover, var(--accent-tertiary)); }
.ready-target__go:focus-visible { outline: 3px solid var(--highlight-yellow); outline-offset: 2px; }
.ready-target__back { color: var(--text-secondary); font-size: var(--text-sm); font-weight: var(--font-semibold); text-decoration: none; }
.ready-target__back:hover { color: var(--text-primary); text-decoration: underline; }
@media (max-width: 767px) {
  .ready-target { width: calc(100% - (var(--feed-card-gutter-mobile) * 2)); margin-top: var(--space-8); }
  .ready-target__actions { flex-direction: column; align-items: stretch; }
  .ready-target__actions > form,
  .ready-target__go { width: 100%; }
  .ready-target__back { align-self: center; }
}

/* ── The shop: the paid rows on the Toll Bench Certified shelf (the shelf's
   own .toll-row, shop.css) and the starting odds on Free Assistance. ───── */
.toll-row--ready { align-items: flex-start; }
.toll-row--ready .rt-art--row {
  border-radius: var(--radius-md);
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 4px, color-mix(in srgb, var(--color-white) 8%, transparent) 4px 5px),
    var(--tb-brand-purple);
  color: var(--highlight-yellow);
  overflow: visible;
}
.toll-row--ready .rt-art--row.rt-art--photo { background: var(--surface-secondary); }
.toll-row--ready .rt-art--row .rt-art__badge {
  top: calc(var(--space-1) * -1);
  right: calc(var(--space-1) * -1);
  width: var(--size-5);
  height: var(--size-5);
  font-size: var(--text-xs);
  box-shadow: 0 0 0 2px var(--surface-primary);
}
.rt-row__proof { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: 2px 0; }
.rt-row__proof .rt-odds__n { font-size: var(--text-base); }
.rt-row__price {
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.toll-row--ready .toll-row__want-right { align-self: center; gap: var(--space-2); }
.fa-row__odds { display: inline-flex; margin: 2px 0; }
.fa-row__odds .rt-odds__n { font-size: var(--text-base); }

/* THE DETAILS SHEET off the /home deck (Steven 2026-10-13: "Clicking Details
   gives all of the information"): the step cards' sheet frame
   (step-cards.css .sc-sheet), drawn by static/js/pages/ready-sheet.js with
   the product page's parts inside (targets/_ready_sheet.html). Its head
   stays at the top while the body scrolls under it, as on /home. */
.ready-sheet .sc-sheet__panel {
  max-width: 720px;
  height: 90vh;
  height: 90dvh;
  max-height: 90vh;
  max-height: 90dvh;
  padding: 0 var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
}
.ready-sheet__top {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 0 calc(-1 * var(--space-5));
  padding: var(--space-3) var(--space-5) var(--space-2);
  background: inherit;
  cursor: grab;
  touch-action: none;
}
.ready-sheet__top .sc-sheet__grab { margin-bottom: var(--space-2); }
.ready-sheet.is-dragging .sc-sheet__panel { animation: none; transition: none; }
.ready-sheet.is-settling .sc-sheet__panel { transition: transform 0.2s ease-out; }
.ready-sheet .want-detail { max-width: none; padding: 0 0 var(--space-6); }

/* GET THIS, posted for the person (targets/ready_go.html): a blank page for
   the moment the form takes to post; the button only shows when it waits. */
.ready-go-page { margin: 0; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; background: var(--surface-primary); color: var(--text-primary); font-family: var(--font-body); }
.ready-go { display: grid; justify-items: center; gap: var(--space-4); padding: var(--space-6); text-align: center; }
.ready-go__line { margin: 0; font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--font-bold); }
.ready-go__btn {
  min-height: var(--size-12);
  padding: 0 var(--space-8);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--tb-brand-purple, var(--accent-tertiary));
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  cursor: pointer;
}

/* ── THE LANDING'S "NEED IDEAS?" CARD, Steven 2026-10-13 morning ─────────────
   (feed/_need_ideas_card.html, static/js/pages/need-ideas.js)
     1. the quiet proof row: the Toll Bench target and "Certified", the
        people icon and the number ("N people served" on hover), the odds in
        plain words; one line;
     2. the banner: one row per kind of outcome, turning by itself, swipe or
        the dots by hand;
     3. the squares, the intro video first, each popping its card up over
        the page (the proposal mini cards' layered card: the X top left, the
        dark around it, a swipe down closes). */

/* 1. The quiet proof row. */
.rt-proof {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  line-height: 1.4;
  white-space: nowrap;
}
.rt-proof > * { display: inline-flex; align-items: center; gap: var(--space-1); flex: none; }
.rt-proof > * + *::before { content: "\00B7"; margin-right: var(--space-1); color: var(--text-muted); font-weight: var(--font-normal); }
/* the certification badge leads the row (certified-badge.css draws it) */
.rt-proof__cert { color: var(--text-primary); }
.rt-proof__served { position: relative; z-index: 1; cursor: default; border-radius: var(--radius-xs); }
.rt-proof__served iconify-icon { font-size: var(--text-sm); }
.rt-proof__n { font-variant-numeric: tabular-nums; }
.rt-proof__served::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  bottom: calc(100% + var(--space-2));
  z-index: 2;
  padding: var(--ds-tooltip-padding);
  border-radius: var(--ds-tooltip-radius);
  background: var(--ds-tooltip-bg);
  color: var(--ds-tooltip-color);
  font-size: var(--text-xs);
  font-weight: var(--ds-tooltip-font-weight);
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transform: translateY(var(--space-1));
  transition: opacity var(--duration-fast) var(--ease-default), transform var(--duration-fast) var(--ease-default);
}
.rt-proof__served:hover::after,
.rt-proof__served:focus::after { opacity: 1; transform: none; }
.rt-proof__served:focus:not(:focus-visible) { outline: none; }
.rt-proof__served:focus-visible { outline: 3px solid var(--highlight-yellow); outline-offset: 2px; }
.rt-proof__odds { color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* Get this as a link (a kit agent's free offer opens /start with the want
   written), above the row's stretched link like the posted button. */
.rt-item__cta--go { position: relative; z-index: 1; text-decoration: none; line-height: 1; }
.rt-item__cta--go:hover,
.rt-item__cta--go:focus-visible { background: var(--tb-brand-purple-hover, var(--accent-tertiary)); border-color: var(--tb-brand-purple-hover, var(--accent-tertiary)); color: var(--color-white); }
.rt-item__cta--go:focus-visible { outline: 3px solid var(--highlight-yellow); outline-offset: 2px; }
/* A row with no Details page pops its card from a button (scripts only). */
.rt-item__link--btn { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }

/* A kit agent with no picture yet wears its starfield, as its offer card. */
.rt-art--stars { overflow: hidden; background: var(--accent-dark); }
.rt-art--stars > .agent-art { position: absolute; inset: 0; display: block; }
.rt-art--stars > .agent-art > :is(svg, img, video) { display: block; width: 100%; height: 100%; object-fit: cover; }

/* THE AGENT EARNING ITS CERTIFICATE: its picture (the agent at work, else
   its own) in the row's big picture box, SQUARE like every other row's
   since Steven 2026-10-13 evening (THE BIG PICTURE, the end of this file).
   The at-work picture is drawn 3:4 and some carry a light band along their
   foot (from about 84% down): the square crop sits a quarter of the way
   down (it shows 6% to 81% of the height), so the faces stay in and the
   band never shows. */
.rt-portrait {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--accent-dark);
}
.rt-portrait > .agent-art,
.rt-portrait > .agent-art > :is(svg, img, video, picture),
.rt-portrait__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.rt-portrait__img { object-position: 50% 25%; }
.rt-face--earning { width: var(--size-24); height: var(--size-24); }
.rt-face.rt-portrait--photo { position: relative; }

/* CONDENSED (Steven 2026-10-13: "Let's get this piece of the page
   condensed"): the picture, the title, the pitch on two lines, the price and
   Get this, the proof line with the dots right under it, the label and the
   squares; no empty band. Every compact row is the same height (the
   picture sets it), so the banner never jumps as it turns. */
.start-ideas-card[data-need-ideas] { gap: var(--space-4); padding-bottom: var(--space-4); }
.start-ideas-card[data-need-ideas] .start-ideas-card__part + .start-ideas-card__part { padding-top: var(--space-4); }
.rt-item--compact { row-gap: var(--space-3); }
.rt-item--compact .rt-item__body { gap: var(--space-1); }
.rt-item--compact .rt-item__title { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rt-item--compact .rt-item__line {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* "Paid" and "Free" beside the tag: the tag's own pill shape, a label and a
   filter (a tap jumps the banner to that group). */
.ni-pill {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-6);
  margin: 0;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  background: var(--feed-card-bg);
  color: var(--text-secondary);
  font: var(--font-bold) var(--text-xs)/1 var(--font-mono);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  transition: background var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default);
}
.ni-pill:hover { color: var(--text-primary); border-color: var(--tb-brand-purple, var(--accent-tertiary)); }
.ni-pill[aria-pressed="true"] { border-color: var(--tb-brand-purple, var(--accent-tertiary)); background: var(--tb-brand-purple, var(--accent-tertiary)); color: var(--color-white); }
.ni-pill:focus-visible { outline: 3px solid var(--highlight-yellow); outline-offset: 2px; }

/* 2. THE BANNER: one slide per kind of outcome, a slide at a time; the dots
   close under the proof line. */
.ni-banner { display: grid; gap: var(--space-2); }
.ni-banner__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  align-items: start;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.ni-banner__track::-webkit-scrollbar { display: none; }
.ni-banner__slide { min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.ni-banner__dots { display: flex; justify-content: center; gap: 0; }
.ni-banner__dot {
  display: inline-grid;
  place-items: center;
  width: var(--size-6);
  height: var(--space-4);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.ni-banner__dot::before {
  content: "";
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--border-default);
  transition: width var(--duration-normal) var(--ease-default), background var(--duration-normal) var(--ease-default);
}
.ni-banner__dot[aria-current="true"]::before { width: var(--space-5); background: var(--tb-brand-purple, var(--accent-tertiary)); }
.ni-banner__dot:focus-visible { outline: 3px solid var(--highlight-yellow); outline-offset: -2px; border-radius: var(--radius-full); }

/* 3. THE SQUARES under "Additional ideas", See all at its right. */
.start-ideas-card[data-need-ideas] .start-ideas-strip__head .start-ideas-card__all { min-height: var(--size-8); }
.ni-tile__art--video { position: relative; background: var(--color-black); }
.ni-tile__art--video img { object-position: 12% 58%; }
.ni-tile__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: var(--size-10);
  height: var(--size-10);
  border-radius: var(--radius-full);
  background: var(--tb-brand-purple, var(--accent-tertiary));
  box-shadow: var(--shadow-md);
  transform: translate(-50%, -50%);
}
.ni-tile__play::before { content: ""; margin-left: var(--space-1); border-style: solid; border-width: var(--space-2) 0 var(--space-2) var(--space-3); border-color: transparent transparent transparent var(--color-white); }
a.start-ideas-tile:hover .ni-tile__play { background: var(--tb-brand-purple-hover, var(--accent-tertiary)); }

/* THE POP-UP LAYER (need-ideas.js draws it once on <body>): the card over
   the page, the dark around it; under the Details sheet (.sc-sheet, 2400),
   as the proposal cards' .pcard-full. The card runs from the top of the
   screen (the safe area only) and its round X sits in its top-right corner
   (Steven 2026-10-13 evening: no "vacant space at the top", no X top-left
   over the dimmed header). */
body.ni-lock { overflow: hidden; }
.ni-pop {
  position: fixed;
  inset: 0;
  z-index: 2300;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top, 0px) var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: color-mix(in srgb, var(--color-gray-900) 94%, transparent);
  animation: ni-pop-in var(--duration-slow) var(--ease-spring);
}
.ni-pop[hidden] { display: none; }
@keyframes ni-pop-in { from { opacity: 0; transform: translateY(var(--space-6)); } to { opacity: 1; transform: none; } }
/* THE POPPED CARD'S X, the landing's (.ni-pop__x) and the Want Market's
   shelf's (.wm-full__x, shop-shelf-cards.css): the Want Market's own round
   X (.drawer-x, layout.css: 40px, the 2px glass ring, the white cross),
   on a dark glass disc so it reads over a light picture, in the card's
   top-right corner, riding the card when it is swiped down. */
.ni-pop__x,
.wm-full__x {
  position: absolute;
  z-index: 3;
  top: var(--space-5);
  right: var(--space-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-10);
  height: var(--size-10);
  padding: 0;
  border: 2px solid var(--btn-glass-border);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-gray-900) 45%, transparent);
  color: var(--color-white);
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.ni-pop__x svg,
.wm-full__x svg { width: var(--size-6); height: var(--size-6); }
.ni-pop__x:hover,
.wm-full__x:hover { border-color: var(--btn-glass-border-hover); }
.ni-pop__x:focus-visible,
.wm-full__x:focus-visible { outline: 3px solid var(--highlight-yellow); outline-offset: 2px; }
.ni-pop__card {
  position: relative;
  flex: 1 0 auto;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  transition: transform var(--duration-normal) var(--ease-out);
  --tb-card-full-h: calc(100vh - var(--space-3) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}
@supports (height: 100dvh) {
  .ni-pop__card { --tb-card-full-h: calc(100dvh - var(--space-3) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
}
.ni-pop__card .tb-card--full { min-height: 0; }
/* The video as a card: the player is the card, edge to edge, centered in
   the layer, the yellow tag on its top edge like the card it came from. */
.ni-pop--video .ni-pop__card { display: flex; flex-direction: column; justify-content: center; }
/* The video's X stands over the player's top-right corner. */
.ni-pop--video .ni-pop__x { position: static; align-self: flex-end; margin-bottom: var(--space-3); }
.ni-video {
  position: relative;
  border: var(--feed-card-border);
  border-radius: var(--feed-card-radius);
  background: var(--color-black);
  box-shadow: var(--tb-card-shadow);
}
.ni-video__tag {
  position: absolute;
  z-index: 2;
  top: 0;
  left: var(--space-6);
  display: inline-flex;
  align-items: center;
  min-height: var(--size-6);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--highlight-yellow);
  color: var(--color-black);
  font: var(--font-bold) var(--text-xs)/1 var(--font-mono);
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateY(-50%);
  pointer-events: none;
}
.ni-video__player { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: inherit; background: var(--color-black); }
.ni-video__poster,
.ni-video__player iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; object-fit: cover; }
.ni-video__player iframe { z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .ni-pop, .ni-pop__card { animation: none; transition: none; }
  .ni-banner__dot::before, .rt-proof__served::after, .ni-pill { transition: none; }
}

/* ── THE AGENT'S ROW, Steven 2026-10-13 afternoon ───────────────────────────
   (feed/_ready_target_row.html agent_row; app/services/ready_targets.py,
   THE AGENT'S ROW) on the landing's banner, the /home entry card, the
   shop's Certified shelf and its Free Assistance shelf:
     - under the title the "with" line: the agent's small round face (no
       ring), "with <name> · [maker's mark] Opus";
     - the agent's own line under it;
     - the Cert seal on the row's top-right corner, small;
     - the proof line: the people served in the line's own size, the odds,
       the notes. */

/* THE BIG PICTURE, SQUARE ON EVERY ROW (Steven 2026-10-13 evening, his shot
   of the landing's "Find Customers" row, Julian at a market stall in a ROUND
   picture where the paid rows show a square one: "I don't know why this is
   circular and then it's square sometimes. I want it to be square all the
   time on this card, and fill it in as much as I can; I want to see these
   images"). The round one was the row of an agent earning its certificate
   (.rt-item--earning, its picture the .rt-portrait). Now every row's
   picture (the Flux outcome picture, the target's own, its starfield, the
   agent at work) is ONE box: square, the tokens' rounded corners
   (--radius-lg, the paid rows' own), the same size on every row of a
   surface (--rt-pic), the picture covering it edge to edge, no inner
   padding. At phone width the box runs down the row's left side from the
   title to the price and Get this, the words taking the rest of the width,
   the proof line under both. As large as the row allows: up to 148px
   (--rt-pic), never leaving the words less than 188px (--rt-words: "$9.99"
   beside Get this on one line, and a sealed title beside its Cert seal).
   At 390 wide that is 148px on the landing card (its row is 350px; "Find
   Customers" in the shelf's title size fits beside the seal), a little
   less on the /home entry card (a narrower row) and on a shelf
   (.rt-row--shelf, below: its row is a card inside the shelf, and its
   "Coming soon" and "Get free help" are wider). A narrower phone shrinks
   the box, never the words; every row of one surface has the one size.
   The seal keeps the row's top-right corner; the small round face in the
   "with" line stays round. At the landing card's own wide width and on a
   wide shelf the deal moves to the right and the box spans the row's
   height (the container queries). */
.rt-row {
  --rt-pic: calc(var(--size-32) + var(--space-5));
  --rt-words: calc(var(--size-32) + var(--size-12) + var(--space-3));
  position: relative;
  grid-template-columns: min(var(--rt-pic), 100% - var(--space-3) - var(--rt-words)) minmax(0, 1fr);
  grid-template-areas:
    "art   body"
    "art   deal"
    "proof proof";
  column-gap: var(--space-3);
  row-gap: var(--space-2);
}
.rt-row > .rt-item__art {
  align-self: start;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.rt-row .rt-art__glyph { font-size: calc(var(--size-16) + var(--space-2)); }
/* the words from the top, the price and Get this along the picture's foot
   (:where keeps these under the wide card's own placements) */
:where(.rt-row) > .rt-item__body { align-self: start; }
:where(.rt-row) > .rt-item__deal { align-self: end; }
:where(.rt-row) .rt-item__title { font-size: var(--text-lg); }

.rt-item__seal {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: inline-flex;
  line-height: 1;
}
.rt-row--sealed .rt-item__title { padding-right: calc(var(--size-10) + var(--space-1)); }

.rt-with {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  line-height: 1.3;
}
/* The face: round, cropped to the face, no ring (Steven: "The round agent
   picture: no ring around it"). */
.rt-with__face {
  position: relative;
  flex: none;
  display: block;
  width: var(--size-6);
  height: var(--size-6);
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--surface-secondary);
}
.rt-with__face > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.rt-with__face > .agent-art,
.rt-with__face > .agent-art > :is(svg, img, video, span) { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.rt-with__words { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rt-with__name { color: var(--text-primary); font-weight: var(--font-bold); }
.rt-with__dot { color: var(--text-muted); font-weight: var(--font-normal); }
.rt-with__mark { margin-right: var(--space-1); color: var(--text-primary); font-size: var(--text-sm); vertical-align: -0.2em; }
.rt-with__model { color: var(--text-primary); }

/* The big picture keeps no rim either: the box crops it. */
.rt-portrait { border: 0; box-shadow: none; }

/* The proof line's notes (a recipe's testing progress, the free spots). */
.rt-proof__note { color: var(--text-muted); }

/* ON A SHELF (the shop): the row is a card of its own (its picture still
   square, still the row's left side from the title to Get this, its words
   asking 208px for "$9.99" beside "Coming soon"), the proof line free to
   wrap. */
.rt-rows { container-type: inline-size; }
.rt-row--shelf {
  --rt-words: calc(var(--size-32) + var(--size-20));
  row-gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  background: var(--surface-primary);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-fast) var(--ease-default);
}
.rt-row--shelf:hover { box-shadow: var(--shadow-md); }
.rt-row--shelf .rt-item__seal { top: var(--space-3); right: var(--space-3); }
.rt-row--shelf .rt-item__body { align-self: start; }
.rt-row--shelf .rt-item__title { font-size: var(--text-lg); }
.rt-row--shelf .rt-item__link::after { border-radius: var(--radius-xl); }
.rt-row--shelf .rt-item__line {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.rt-row--shelf .rt-item__price { font-size: var(--text-2xl); }
.rt-row--shelf .rt-proof { flex-wrap: wrap; white-space: normal; row-gap: var(--space-1); }
.rt-row--shelf .rt-proof > * { flex: 0 1 auto; }
.rt-item__cta.rt-item__cta--soft,
.rt-item__cta--go.rt-item__cta--soft:hover,
.rt-item__cta--go.rt-item__cta--soft:focus-visible { border-color: var(--border-default); background: var(--surface-secondary); color: var(--text-muted); }

/* A wide shelf: the price and Get this at the right, as the landing card at
   its own width. */
@container (min-width: 560px) {
  .rt-row--shelf {
    grid-template-columns: var(--rt-pic) minmax(0, 1fr) auto;
    grid-template-areas:
      "art body  deal"
      "art proof deal";
    row-gap: var(--space-2);
  }
  .rt-row--shelf .rt-item__deal { flex-direction: column; flex-wrap: nowrap; align-items: flex-end; align-self: end; }
  .rt-row--shelf .rt-item__cta { flex: 0 0 auto; margin-left: 0; }
  .rt-row--shelf.rt-row--sealed .rt-item__deal { padding-top: var(--space-8); }
}
@container ideas (min-width: 520px) {
  .start-ideas-card .rt-row--sealed .rt-item__deal { padding-top: var(--space-8); }
}