/* ══════════════════════════════════════════════════════ product page ══
   One product, for members, on the frame's sheet (frame.css), which holds
   the padding; the heading is the frame's .head. The chart is the shared
   LineChart, styled by lines.css with the tokens site.css maps for it. The
   pricing page loads this sheet too, for its sample product.               */
.product { max-width: 60rem; }

/* A product's figures, shared with /pricing's sample. */
.chart-row { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .3rem; }
.now { font-weight: 650; font-size: 1.65rem; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.chart-cap { font-size: var(--t-micro); color: var(--ink-faint); }
.first-seen { font-size: var(--t-micro); color: var(--ink-faint); margin-top: .75rem; }

.plats { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .9rem; }
.plat {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: var(--t-micro);
  padding: .2rem .6rem .2rem .48rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  white-space: nowrap;
  color: var(--ink-soft);
}
.plat i { width: 7px; height: 7px; border-radius: 999px; background: var(--dot); flex: none; }
.plat b { font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Over the heading, as the admin's crumb sits over its own. */
.product-back { margin: 0 0 10px; font-size: var(--t-small); }
.product-back a { color: var(--ink-soft); text-decoration: none; }
.product-back a:hover { color: var(--ink); }

/* The one line to /categories, the heading's last. */
.product-cat { font-size: var(--t-small); }
.product-cat a { color: var(--ink); font-weight: 600; }

.product-card { padding: clamp(1.1rem, 2.5vw, 1.75rem); margin-bottom: 2rem; }
.product-card .now { font-size: 2.6rem; }

/* LineChart draws its gridlines as <i>; the admin host resets the italic, this site does not. */
.lc-grid { font-style: normal; }

.product-h {
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -.01em;
  margin: 1.75rem 0 0.75rem;
}

.product-note { color: var(--ink-soft); font-size: var(--t-small); max-width: 60ch; text-wrap: pretty; }
.product-note b { color: var(--ink); font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════════════════ saturation ══
   How crowded its advertising is (SaturationSection.razor). No accent:
   teal means grew and nothing else (site.css), so the runtime groups
   are one ink ramp, longest-lived strongest. The bar is wiped in whole,
   never grown per segment, so its proportions are true at every frame;
   site.css switches the motion off under reduced motion.                 */
.sat-h {
  font-family: var(--display);
  font-size: var(--t-h3);
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-wrap: balance;
  margin: 0 0 .35rem;
}
/* .first-seen's look, with room below. */
.sat-scope { margin: 0 0 1.25rem; }

.sat-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 1.25rem var(--gap);
  margin: 0 0 1.5rem;
}
.sat-stat, .sat-stat dd { display: flex; flex-direction: column; gap: .3rem; margin: 0; }
.sat-stat dt, .sat-stat dd span { font-size: var(--t-small); color: var(--ink-soft); }
/* "Not looked at twice" sits under the figures it qualifies, clear of the bar. */
.sat-stats + .product-note { margin: -.5rem 0 1.25rem; }
.sat-stat b {
  font-weight: 650;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

/* One tone per group, read by its segment and its key swatch alike. */
.b-run,  .k-run  { --tone: var(--ink); }
.b-long, .k-long { --tone: color-mix(in srgb, var(--ink) 58%, transparent); }
.b-mid,  .k-mid  { --tone: color-mix(in srgb, var(--ink) 34%, transparent); }
.b-week, .k-week { --tone: color-mix(in srgb, var(--ink) 16%, transparent); }

.sat-bar {
  display: flex;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--tint);
  margin-bottom: .75rem;
  animation: sat-wipe .9s var(--ease) .15s both;
}
.sat-bar i { width: var(--w); min-width: 3px; background: var(--tone); transition: opacity .2s var(--ease); }
/* A 2px gap inside each width, so the gaps cost no proportion. */
.sat-bar i + i { border-left: 2px solid transparent; background-clip: padding-box; }

.sat-key {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.1rem;
  padding: 0;
  margin: 0 0 1.25rem;
  font-size: var(--t-small);
  color: var(--ink-soft);
}
.sat-key li { display: inline-flex; align-items: center; gap: .45rem; transition: color .2s var(--ease); }
.sat-key li i { width: 9px; height: 9px; border-radius: 3px; background: var(--tone); flex: none; }
.sat-key b { font-family: var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }

/* Point at a group in either place and the other lights up with it. */
.sat:has(.sat-key li:hover) .sat-bar i,
.sat-bar:hover i:not(:hover) { opacity: .25; }
/* .sat-bar i. keeps these above the dimming rule's specificity. */
.sat:has(.k-run:hover) .sat-bar i.b-run, .sat:has(.k-long:hover) .sat-bar i.b-long,
.sat:has(.k-mid:hover) .sat-bar i.b-mid, .sat:has(.k-week:hover) .sat-bar i.b-week { opacity: 1; }
.sat-key li:hover,
.sat:has(.b-run:hover) .k-run, .sat:has(.b-long:hover) .k-long,
.sat:has(.b-mid:hover) .k-mid, .sat:has(.b-week:hover) .k-week { color: var(--ink); }

.sat-live { display: inline-flex; align-items: center; gap: .45rem; }
.sat-live i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--ink);
  animation: sat-pulse 1.8s var(--ease) .6s 3;
}

/* ══════════════════════════════════════════════════════ standing ══
   Where a figure sits among every product (StandingStrip.razor), after
   the bullet graph: one ink ramp, the middle half shaded, a tick for the
   typical product, a dot for this one. The track is rank order, so the
   band never moves and only the dot does — gliding in from the typical
   tick, measured in the track's own width (cqw). Thinner than .sat-bar
   below it, so a place never reads as a proportion.                       */
.st {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 .6rem;
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--ink-faint);
}
.st-track {
  position: relative;
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--tint);
  container-type: inline-size;
}
.st-mid { position: absolute; inset: 0 25%; background: color-mix(in srgb, var(--ink) 34%, transparent); }
.st-typ {
  position: absolute;
  left: 50%;
  top: -5px;
  bottom: -5px;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--ink) 58%, transparent);
}
.st-at {
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 999px;
  background: var(--ink);
  box-shadow: 0 0 0 3px var(--raise);
  transform: translateX(calc(var(--r) * 100cqw));
  animation: st-glide .45s var(--ease) .25s both;
}
.st-said { font-size: var(--t-small); max-width: 60ch; margin: 0 0 1.5rem; text-wrap: pretty; }

/* ══════════════════════════════════════════════════════════ rules ══
   Severity by weight, never colour: this host has no negative colour, and
   a red/amber/green ramp failed the colour-blind check (docs/design).
   Filled for approval, ringed for paperwork, nothing for light. Sentence
   case and never a link on its own — a tag states, it does not press.    */
.rules-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
}
.rules-top .sat-h { margin: 0; }
.rules-tag {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: var(--t-small);
  color: var(--ink-soft);
  white-space: nowrap;
}
.rules-tag i { width: 9px; height: 9px; border-radius: 999px; flex: none; }
.rules-gate { color: var(--ink); font-weight: 700; }
.rules-gate i { background: var(--ink); }
.rules-cost { color: var(--ink); font-weight: 600; }
.rules-cost i { box-shadow: inset 0 0 0 2px var(--ink); }
.rules-low i { display: none; }
.rules .rules-tag { padding: .3rem .75rem; border-radius: 999px; background: var(--tint); }
.rules-said { font-size: var(--t-body); max-width: 60ch; margin: .9rem 0 .6rem; text-wrap: pretty; }

/* ═════════════════════════════════════════════════════ at a glance ══
   The row under the title: each card's answer, linking down to it. These
   are links, so they look pressable — a border that brightens on hover, a
   nudge on press — unlike the static tag inside the rules card.          */
.glance {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: 0;
  margin: 0 0 2rem;
}
.glance a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.5rem;
  padding: .35rem .85rem;
  border: 1px solid var(--stroke);
  border-radius: 999px;
  color: var(--ink);
  font-size: var(--t-small);
  text-decoration: none;
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.glance a::after {
  content: "↓";
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--ink-faint);
  transition: transform .2s var(--ease);
}
.glance a:hover { border-color: var(--stroke-hi); background: var(--tint); }
.glance a:hover::after { transform: translateY(2px); }
.glance a:active { transform: scale(.97); }
.glance a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ══════════════════════════════════════════════════════════ the margin ══
   Is there money in it (MoneySection.razor). The boxes and the bars are
   Seenpeek.Screens' costs.css, the admin host's too; this places them.
   No colour for a loss — it is said in words, as on the admin host.      */
.money-lead { margin: 0 0 1rem; max-width: 62ch; }
.money .amount-boxes { margin-top: 0; }
.money .amount-more { margin-top: 1rem; }
.money .amount-more > summary { cursor: pointer; font-size: var(--t-small); color: var(--ink); }
.amount-summary { color: var(--ink-soft); }
.money-go { margin-top: 1rem; }
/* With money.js answering as you type, the button has nothing left to do. */
.money-form.live .money-go { display: none; }

.money-verdict {
  font-family: var(--display);
  font-size: var(--t-h3);
  letter-spacing: -0.02em;
  line-height: 1.25;
  text-wrap: balance;
  margin: 1.5rem 0 .35rem;
}
.money-verdict strong { font-variant-numeric: tabular-nums; }
.money-caveat {
  display: inline-block;
  margin-left: .5rem;
  font-family: inherit;
  font-size: var(--t-small);
  color: var(--ink-soft);
  letter-spacing: 0;
}
.money-ours { color: var(--ink); white-space: nowrap; }
.money-how { margin-top: .75rem; }
.money-how > summary { cursor: pointer; font-size: var(--t-small); color: var(--ink-soft); }

@keyframes st-glide {
  from { transform: translateX(50cqw); }
}
@keyframes sat-wipe {
  from { clip-path: inset(0 100% 0 0 round 999px); }
  to   { clip-path: inset(0 0 0 0 round 999px); }
}
@keyframes sat-pulse {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ink) 50%, transparent); }
  to   { box-shadow: 0 0 0 8px transparent; }
}