/* evaluator.ai — sage top bar (one step deeper than the mint content panels), light content, bottom legal strip */
:root {
  --header-bg: #deede4; /* a touch mintier than the sage it replaced (24 Sep 2026), and still one step deeper than --panel-muted so the nav reads as its own band */
  --header-text: #2a2a2a;
  --header-muted: rgba(42, 42, 42, 0.65);
  --page-bg: #ffffff;
  --panel-muted: #f0f5f0;
  --heading-accent: #2a2a2a;
  --subheading-accent: #6b5b7a;
  --text-body: #2a2a2a;
  --text-muted: #5c5c5c;
  --border-light: #e0e0dc;
  --accent-link: #6d98a8;
  --accent-link-hover: #5a8494;
  --launch-silver: #dcdfe4;
  --launch-orange: #c2410c;
  /* Badge fills. The one place saturated colour is allowed, and the rule is that colour is a
     label: each fill has one meaning, site-wide, and appears only as a small solid pill with
     white text (the tier badges on /buy-credits, the same badges wherever a tier is named).
     Bars, backgrounds, headings and body text never carry these. Named by meaning, not hue; a
     bundle tier's fill is named by its `badge` key in `stripe.bundles` (green, pro), never by its
     display label, so renaming a bundle does not touch this file. */
  --badge-green: #1e6b4a;
  --badge-gold: #cc8f0f;
  --badge-pro-a: #8a9199;
  --badge-pro-b: #b9c0c7;
  --badge-pro-c: #6f777f;
  --badge-business: #3d4a37;
  --badge-free: #55808f;
  /* Same hue as --launch-orange, so orange means "price" everywhere it appears: the launch
     banner, the doubled-credits figure, and the Pricing label on the landing page (3 Sep 2026). */
  --badge-pricing: #c2410c;
  --badge-neutral-bg: #c5d2bc;
  --badge-neutral-text: #3d4a37;
  --radius-panel: 10px;
  --radius-card: 12px;
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --max-width: 1180px;
  --shadow-soft: 0 4px 24px rgba(0, 0, 0, 0.06);
  --error: #b91c1c;
  --success-bg: #ecfdf5;
  --success-text: #047857;
  --success-border: #a7f3d0;
  --warning-bg: #fffbeb;
  --warning-text: #92400e;
  --warning-border: #fde68a;
  /* Space reserved so scrollable content clears the fixed bottom bar. Set to the bar's measured
     height by the script in the bar itself, which knows how many rows it wrapped to; this is the
     no-script fallback, sized for two rows. */
  --site-bottom-nav-reserve: 4.5rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-body);
  background: var(--page-bg);
}

a {
  color: var(--accent-link);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--accent-link-hover);
}

a:focus-visible {
  outline: 2px solid var(--accent-link);
  outline-offset: 2px;
}

/* ——— Top bar ——— */
.site-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  flex-shrink: 0;
  background: var(--header-bg);
  color: var(--header-text);
}

.site-header__bar {
  border-bottom: 1px solid var(--border-light);
}

.site-header__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0.85rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.site-brand {
  display: inline-flex;
  align-items: stretch;
  gap: 0.55rem;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--header-text) !important;
  flex-shrink: 0;
}

.site-brand__text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.site-brand__name {
  color: var(--text-muted);
  font-weight: 400;
}

.site-brand__credits {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid var(--header-text);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  align-self: flex-start;
}

.site-brand:hover {
  color: var(--header-text) !important;
  opacity: 0.88;
}

.site-brand__mark {
  width: 3rem;
  height: 3rem;
  border-radius: 6px;
  flex-shrink: 0;
  display: block;
}

/* Public header brand: round mark and wordmark on one line. The admin header keeps the stacked
   name-over-label form above. */
.site-brand--public {
  align-items: center;
  gap: 0.6rem;
  order: 0;
}

.site-brand--public .site-brand__mark {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
}

.site-brand__wordmark {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Signed-out sign-up pitch in the brand corner (31 Oct 2026): the name top-aligned with the mark and
   the grant in two small lines under it, sized so the header keeps its height. A phone gets one
   shorter line instead (below). */
.site-brand--pitch {
  align-items: flex-start;
}
.site-brand__pitch {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.site-brand--pitch .site-brand__wordmark {
  line-height: 1.05;
}
.site-brand__offer {
  display: flex;
  flex-direction: column;
  margin-top: 0.2rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.25;
  color: var(--header-text);
}
.site-brand__offer > span::before {
  content: "";
  display: inline-block;
  width: 0.3rem;
  height: 0.3rem;
  margin: 0 0.35rem 0.12rem 0;
  border-radius: 50%;
  background: var(--badge-free);
  vertical-align: middle;
}
.site-brand__offer--short {
  display: none;
}
/* Hover reads as a link by weight, not an underline (31 Oct 2026). */
.site-brand--pitch:hover .site-brand__offer {
  font-weight: 600;
}

/* Credits pill, right of the nav on desktop and beside the burger on mobile. */
.site-header__credits {
  order: 2;
  display: inline-flex;
  flex-shrink: 0;
  color: var(--header-text) !important;
  text-decoration: none;
}

.site-header__credits:hover {
  color: var(--header-text) !important;
  opacity: 0.88;
}

.site-header__credits .site-brand__credits {
  font-size: 0.75rem;
  padding: 0.15rem 0.6rem;
  white-space: nowrap;
}

.site-nav-main {
  order: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  flex-wrap: wrap;
  gap: 0.15rem 1.35rem;
}

.site-nav-main > a,
a.site-nav-main__auth {
  padding: 0.35rem 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--header-text) !important;
  white-space: nowrap;
}

.site-nav-main > a:hover,
a.site-nav-main__auth:hover {
  color: var(--header-muted) !important;
}

.site-nav-main a.is-active {
  color: var(--header-text) !important;
}

.site-nav-main__auth {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.site-nav-main__slash {
  color: var(--header-muted);
  font-size: 0.88rem;
  user-select: none;
}

.site-nav-logout-form {
  display: inline-flex;
  margin: 0;
  padding: 0;
}

.site-nav-logout-btn {
  padding: 0.35rem 0;
  margin: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  font-family: var(--font-sans);
  color: var(--header-text);
  cursor: pointer;
  text-decoration: none;
}

.site-nav-logout-btn:hover {
  color: var(--header-muted);
}

.site-nav-main__auth-slot {
  display: inline-flex;
  justify-content: flex-end;
  min-width: 4rem;
}

.site-header__cta {
  order: 3;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  flex-shrink: 0;
}

.site-header__cta-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--header-muted);
  margin-right: 0.25rem;
}

.site-header__cta-link {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--header-text) !important;
  text-decoration: none;
}

.site-header__cta-link:hover {
  color: var(--header-text) !important;
  font-weight: 500;
}

.site-header__cta-sep {
  color: var(--header-muted);
  font-size: 0.82rem;
}

/* ——— Burger button (hidden on desktop) ——— */
.site-nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  margin-left: auto;
  flex-shrink: 0;
}

.site-nav-burger span {
  display: block;
  width: 1.375rem;
  height: 2px;
  background: var(--header-text);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-header.is-open .site-nav-burger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-header.is-open .site-nav-burger span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.site-header.is-open .site-nav-burger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ——— Tablet: hide extension CTA ——— */
@media (max-width: 1024px) {
  .site-header__cta {
    display: none;
  }
}

/* ——— Mobile: burger nav ——— */
@media (max-width: 768px) {
  .site-header__inner {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .site-nav-burger {
    display: flex;
    order: 2;
  }

  /* Pill and burger share the right edge; the pill takes the auto margin so it is the one that
     pushes, and the burger follows it whether or not a pill rendered. */
  .site-header__credits {
    order: 1;
    margin-left: auto;
  }

  .site-header__credits + .site-nav-burger {
    margin-left: 0;
  }

  /* The phone's pitch: one short line, so the corner fits beside the burger at header height. */
  .site-brand__offer--full {
    display: none;
  }
  .site-brand__offer--short {
    display: flex;
  }

  .site-nav-main {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0.5rem 0 1rem;
  }

  .site-header.is-open .site-header__inner {
    flex-wrap: wrap;
  }

  .site-header.is-open .site-nav-main {
    display: flex;
  }

  .site-nav-main > a,
  a.site-nav-main__auth,
  .site-nav-logout-btn {
    padding: 0.65rem 0;
    font-size: 1rem;
    width: 100%;
  }

  .site-nav-main a.is-active {
    box-shadow: none;
    opacity: 0.6;
  }

  .site-nav-main__auth-slot {
    width: 100%;
    min-width: unset;
    justify-content: flex-start;
  }
}

/* ——— Small phones: mark, pill and burger do not fit beside the wordmark ———
   Signed in, the wordmark gives way to the pill (the mark still links home); signed out there is
   no pill and the wordmark stays. */
@media (max-width: 440px) {
  .site-header__inner:has(.site-header__credits) .site-brand__wordmark {
    display: none;
  }
}

/* ——— Main & cards ——— */
.site-main {
  flex: 1;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2rem 1.5rem
    calc(2.5rem + var(--site-bottom-nav-reserve) + env(safe-area-inset-bottom, 0px));
}

.site-main--center {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: none;
}

.site-main--landing {
  max-width: var(--max-width);
  padding-top: 2.25rem;
}

.card {
  background: var(--page-bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: 1.75rem 2rem;
}

.card--narrow {
  width: 100%;
  max-width: 420px;
}

.card--prose {
  width: 100%;
  max-width: 675px;
}

.card--prose-wide {
  width: 100%;
  max-width: 900px;
}

.card--hero {
  padding: 2rem 2rem 1.75rem;
}

@media (max-width: 640px) {
  .card {
    padding: 1.35rem 1.25rem;
  }

  /* On a phone the page is the card. Each frame costs its padding and border on both sides, and
     the result sat inside four of them (gutter, card, listing panel, assessment box): ~83px a side
     on a 414px screen before the text began (2 Nov 2026). The card is the same white as the page,
     so on a phone its frame only draws a line around the screen. The gutter narrows to the usual
     16px phone margin. The narrow form cards keep their frame. */
  .site-main {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .card--prose-wide {
    padding-left: 0;
    padding-right: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
}

/* ——— Supported-sites band ———
   One link, nine names, tracked caps in heading ink, on a full-width tinted band at the foot of
   the sticky header on every public page. The band is what gives the strip a place to belong:
   floating grey caps on white read as a footer (tried first). The separator is a middle dot drawn by CSS so the markup stays
   a list of names. Letter-spacing and small caps are what make the brands' mixed casings read as
   one row; do not restore per-name casing. Single accent: colour shifts to the teal on hover and
   nothing else changes. */
.site-strip-band {
  position: sticky;
  top: var(--site-header-height, 0px);
  z-index: 199;
  flex-shrink: 0;
  background: var(--panel-muted);
  border-bottom: 1px solid var(--border-light);
  padding: 0.7rem 1.5rem;
  display: flex;
  justify-content: center;
}

/* On a phone the band scrolls away with the page and only the header stays (2 Nov 2026): pinned,
   header and band together held ~140pt of a phone screen on every scroll. */
@media (max-width: 640px) {
  .site-strip-band {
    position: static;
  }
}

.site-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  max-width: var(--max-width);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--heading-accent);
  text-decoration: none;
  transition: color 0.15s ease;
}

.site-strip:hover {
  color: var(--accent-link-hover);
}

.site-strip__name {
  white-space: nowrap;
}

/* A sparkle at either end, in the accent: the strip is the one place on the page that is allowed
   to be a little pleased with itself. Sized to the cap height so it reads as punctuation. */
.site-strip__spark {
  width: 0.85em;
  height: 0.85em;
  flex-shrink: 0;
  align-self: center;
  color: var(--accent-link);
}

/* The strip's spark used inline in running text (the /get-started account line), one either
   side of a sentence. */
.inline-spark {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin: 0 0.5em;
  vertical-align: -0.05em;
  color: var(--accent-link);
}

.site-strip__spark:first-child {
  margin-right: 0.9em;
}

.site-strip__spark:last-child {
  margin-left: 0.9em;
}

.site-strip__name + .site-strip__name::before {
  content: "\00b7";
  margin: 0 0.5em;
  color: var(--text-muted);
  letter-spacing: 0;
}

/* The flyer reader's panel on /get-started (?promo=<key>): a thumb-sized sign-up button, its two
   terms, then a tinted callout saying the product needs Chrome on a computer, with the two steps
   that follow there. */
.get-started--flyer {
  padding-top: 2rem; /* the card's side padding, so the first panel sits evenly inside it */
}

.get-started--flyer .pricing-tiers {
  margin-top: 0;
}

@media (max-width: 640px) {
  .get-started--flyer {
    padding-top: 1.25rem;
  }
}

.flyer-start__cta {
  display: block;
  text-align: center;
  text-decoration: none;
}

.flyer-start__terms {
  margin: 0.85rem 0 0;
  text-align: center;
  line-height: 1.6;
}

.flyer-start__note {
  margin-top: 1.25rem;
  padding: 1rem 1.15rem;
  background: var(--panel-muted);
  border-radius: 10px;
}

.flyer-start__heads-up {
  margin: 0 0 0.6rem;
  font-weight: 600;
}

.flyer-start__note ul {
  margin: 0 0 0 1.25rem;
  padding: 0;
  line-height: 1.7;
}

/* ——— Landing two-panel hero ——— */
.landing-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: stretch;
  min-height: min(52vh, 520px);
}

@media (max-width: 768px) {
  .landing-panels {
    grid-template-columns: 1fr;
    min-height: unset;
  }
}

.landing-panel {
  border-radius: var(--radius-panel);
  overflow: hidden;
  min-height: 280px;
}

.landing-panel--text {
  background: var(--panel-muted);
  padding: 2.5rem 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.landing-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.landing-brand__mark {
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  background: linear-gradient(135deg, #7fb5c6 0%, #6d98a8 100%);
}

.landing-brand__text {
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--heading-accent);
}

.landing-headline {
  margin: 0 0 1rem;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.65rem, 2.8vw, 2.35rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--heading-accent);
}

.landing-body {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 36rem;
}

.landing-body--cta {
  margin-top: 1.25rem;
  font-size: 0.95rem;
}

.landing-panel--visual {
  background: var(--panel-muted);
  position: relative;
}

.landing-panel--visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 280px;
}

/* ——— Typography (inner pages) ——— */
.display {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
  color: var(--heading-accent);
}

.page-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.page-title-row .display {
  margin-bottom: 0;
}

.credits-remaining-banner {
  font-size: 0.98rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.credits-remaining-banner__count {
  font-weight: 600;
  margin-left: 0.25rem;
}

.lede {
  margin: 0 0 1.25rem;
  color: var(--text-muted);
  font-size: 0.98rem;
  max-width: 40rem;
}

.page-subheading {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  line-height: 1.25;
  margin: 2rem 0 0.75rem;
  color: var(--subheading-accent);
}

.section-title {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0 0 0.5rem;
}

.page-prose p {
  margin: 0 0 0.85rem;
  color: var(--text-body);
  max-width: 42rem;
}

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

.page-links {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.page-links a {
  font-weight: 500;
}

/* ——— Pricing ——— */
.pricing-tiers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 1.75rem;
}

.pricing-tiers--two-col {
  grid-template-columns: 1fr 1fr;
}

.pricing-tier--span-full {
  grid-column: 1 / -1;
}

@media (max-width: 600px) {
  .pricing-tiers--two-col {
    grid-template-columns: 1fr;
  }
}

.pricing-tier {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  padding: 1.5rem 1.35rem;
  background: #fff;
}

/* Tighter padding for the buy-credits bundle cards only; the base padding above is shared by the
   about/get-started/saved marketing tiers, so it must not be globally reduced. */
.pricing-tier--bundle {
  padding: 1rem;
}

.pricing-tier--highlight {
  background: var(--panel-muted);
  border-color: #c5cdd4;
}

/* The four index cells on the landing page. A modifier rather than an edit to .pricing-tier,
   which is shared with about, get-started, saved and buy-credits: at two columns the measure is
   about half the page width, and body copy at full size in a narrow column reads as a wall. */
.pricing-tier--index p {
  font-size: 0.9375rem;
}

.pricing-tier--index p:last-child {
  margin-bottom: 0;
}

/* Verbatim lines lifted from a real evaluation, shown in the landing page's What we do cell as
   blocks rather than inline sentences (2 Sep 2026). A friend's read of the page was a wall of
   copy; the findings are its most concrete content, and as objects they break the wall without
   a photograph. Tint only, no accent bar: with a scene on alternating sides the bar had to
   swap sides too, and Adam did not like either. Italic and quotation marks mark the sentence as
   the product's words rather than ours; the caption beneath is the attribution, linking to the
   evaluation the line came from. */
.finding {
  margin: 0.9rem 0;
  padding: 0.75rem 0.9rem;
  background: var(--panel-muted);
  border-radius: 8px;
}

.finding__quote {
  margin: 0;
  font-style: italic;
  font-size: 0.85rem;
  line-height: 1.5;
}

.finding__source {
  margin-top: 0.4rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* A finding with the friend's face beside it. The faces are circles cut to a square file, so the
   image column is fixed and the image shown whole; the two blocks align whatever the quote length,
   and the motors block mirrors the property block so the pair reads as a spread rather than a list. */
.finding--scene {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 0.9rem;
  align-items: center;
}

.finding--scene-right {
  grid-template-columns: minmax(0, 1fr) 128px;
}

.finding--scene-right .finding__scene {
  order: 2;
}

.finding__scene {
  width: 128px;
  height: auto;
  display: block;
}

/* The two findings side by side under "What we do", which spans the grid. The faces shrink to 96px
   so the quotes keep a readable measure at half width, and stay on a phone at 64px: the friend's
   reaction is the point of the block, not decoration to drop when space is short. */
.findings-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.findings-row .finding {
  margin: 0;
}

/* The line under the findings: the closing sentence under the first card, the samples link under
   the second, on the same column edges. */
.findings-row--after {
  margin-top: 0.9rem;
}

.findings-row--after p {
  margin: 0;
}

.findings-row .finding--scene {
  grid-template-columns: 96px minmax(0, 1fr);
}

.findings-row .finding--scene-right {
  grid-template-columns: minmax(0, 1fr) 96px;
}

.findings-row .finding__scene {
  width: 96px;
}

@media (max-width: 760px) {
  .findings-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .findings-row .finding--scene {
    grid-template-columns: 64px minmax(0, 1fr);
  }
  .findings-row .finding--scene-right {
    grid-template-columns: minmax(0, 1fr) 64px;
  }
  .findings-row .finding__scene {
    display: block;
    width: 64px;
  }
}

/* The flyer landing's findings (18 Oct 2026), inside the flyer panel: a grid on a computer, and on
   a phone one row the reader swipes through, each card snapping into place with the next one peeking
   in so the row reads as more to see. Never auto-advancing: every card is rendered and stays put.
   A grid item will not shrink below its content by default, so without the min-width the swipe
   row's overflow widened the panel, and with it the whole page, instead of scrolling inside it. */
.flyer-start,
.flyer-findings,
.flyer-findings .findings-row--swipe {
  min-width: 0;
}

/* Between the terms and the heads-up inside the flyer panel, spaced as the heads-up is. Scoped to
   the panel: the plain page's findings cell is a grid item, whose spacing is the grid's gap. */
.flyer-start .flyer-findings {
  margin-top: 1.25rem;
}

@media (max-width: 760px) {
  .findings-row--swipe {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 85%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    padding-bottom: 0.5rem;
  }
  .findings-row--swipe .finding {
    scroll-snap-align: start;
  }
  /* Face above the quote: beside it, at 85% of a phone's panel, the quote ran a few words a line. */
  .findings-row--swipe .finding--scene {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    align-content: start;
    gap: 0.5rem;
  }
  .findings-row--swipe .finding__scene {
    width: 56px;
  }
}

.pricing-tier--compact {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.store-link {
  text-decoration: none;
  color: var(--accent-link);
}

.store-link:hover {
  font-weight: 600;
}

.inline-btn-green {
  display: inline-block;
  background: var(--badge-neutral-bg);
  color: var(--badge-neutral-text);
  font-size: 0.88em;
  font-weight: 600;
  padding: 0.1em 0.55em 0.15em;
  border-radius: 5px;
  vertical-align: baseline;
  line-height: 1.4;
}

.pricing-tier--compact .pricing-tier__list {
  margin-top: 0;
}

.pricing-tier__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.5rem;
}

.pricing-tier__subhead {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* Two lists (Properties / Motors) mirroring the extension popup's own split. Replaced a
   three-column grid of per-site cards, which grew an uneven ragged edge as sites were added. */
.site-lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2.5rem;
  margin-top: 0.85rem;
}

@media (max-width: 600px) {
  .site-lists {
    grid-template-columns: 1fr;
    gap: 1.5rem 0;
  }
}

/* The linked site list on /supported-sites, sitting under the cards without a frame of its own. */
.site-coverage {
  margin-top: 1.75rem;
}

.site-coverage > p {
  font-size: 0.9375rem;
  margin: 0 0 0.25rem;
}

/* Column names are plain words since the per-column scenes went (Oct 2026): no accent bar
   (Adam disliked it on the list). */
.site-list__title {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 0.6rem;
  color: var(--heading-accent);
}

/* Entries are soft tinted rows, the same object as the landing page's finding blocks and its
   site band, so the list is a stack of even shapes rather than a column of teal text. The name
   is ink; teal is for hover, as everywhere. No accent bar. */
.site-list__links {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.35rem;
}

.site-list__links li {
  font-size: 0.85rem;
}

.site-list__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0.8rem;
  background: var(--panel-muted);
  border-radius: 6px;
  color: var(--text-body);
  font-weight: 500;
}

.site-list__links a::after {
  content: "\2197";
  font-size: 0.8em;
  color: var(--text-muted);
  flex-shrink: 0;
}

.site-list__links a:hover {
  color: var(--accent-link-hover);
}

.site-list__links a:hover::after {
  color: var(--accent-link-hover);
}

/* Every entry is a link; no per-site exceptions live here any more. */

/* Screen-reader-only text: a heading that must exist for the outline but not on the page. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ev-details-summary {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

/* Safari still paints the default disclosure marker without this. */
.ev-details-summary::-webkit-details-marker {
  display: none;
}

/* Stacked disclosures in a panel need breathing room; the summary's own
   margin-bottom sits inside the <details>, so it does not separate them. */
.pricing-tier details + details {
  margin-top: 1rem;
}

.ev-details-caret {
  display: inline-block;
  transition: transform 0.15s ease;
}

/* Disclosure summaries need a real focus ring. Several are laid out as flex rows, so the browser
   default draws an unstyled box across the full width of the row. */
summary:focus-visible {
  outline: 2px solid var(--accent-link);
  outline-offset: 3px;
  border-radius: 4px;
}

details[open] > summary .ev-details-caret {
  transform: rotate(90deg);
}

/* Framed block inside a sample card on /samples. */
.in-action-frame {
  margin-top: 0.75rem;
  padding: 1.25rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  background: var(--page-bg);
}

.why-us-open {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 1.75rem;
  align-items: start;
}

.why-us-open__copy p:first-child {
  margin-top: 0;
}

@media (max-width: 900px) {
  .why-us-open {
    grid-template-columns: 1fr;
  }
}

/* Same white-frame-on-mint treatment as the full samples in the Property tab,
   so the excerpt reads as genuine product output, not a marketing mock. */
.mini-verdict {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  background: var(--page-bg);
  padding: 1rem 1.1rem;
}

.mini-verdict__eyebrow {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.mini-verdict .assessment-body {
  margin-top: 0.6rem;
}

.mini-verdict__more {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.84rem;
}

/* One orchestrated moment: verdict, then red flag, then pros, then cons.
   Label and its list share a delay so each row lands as a unit. Runs when the
   panel first becomes visible (display:none defers CSS animations). */
@media (prefers-reduced-motion: no-preference) {
  .mini-verdict__body > * {
    opacity: 0;
    transform: translateY(6px);
    animation: mini-verdict-in 0.45s ease-out forwards;
  }
  .mini-verdict__body > *:nth-child(1) { animation-delay: 0.15s; }
  .mini-verdict__body > *:nth-child(2) { animation-delay: 0.3s; }
  .mini-verdict__body > *:nth-child(3) { animation-delay: 0.3s; }
  .mini-verdict__body > *:nth-child(4) { animation-delay: 0.45s; }
  .mini-verdict__body > *:nth-child(5) { animation-delay: 0.45s; }
  .mini-verdict__body > *:nth-child(6) { animation-delay: 0.6s; }
  .mini-verdict__body > *:nth-child(7) { animation-delay: 0.6s; }
}

@keyframes mini-verdict-in {
  to {
    opacity: 1;
    transform: none;
  }
}

.spot-cards {
  margin-top: 1.4rem;
}

.spot-cards__label {
  margin: 0 0 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.spot-cards__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (max-width: 720px) {
  .spot-cards__row {
    grid-template-columns: 1fr;
  }
}

/* Single teal accent bar, same as .site-list__links on /supported-sites — one accent colour site-wide. */
.spot-card {
  margin: 0;
  padding: 0.75rem 0.9rem;
  background: var(--page-bg);
  border: 1px solid var(--border-light);
  border-left-width: 3px;
  border-left-color: var(--accent-link);
  border-radius: 8px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-body);
}

.panel-divider {
  width: 75%;
  margin: 2rem auto 0;
  border: 0;
  border-top: 1px solid var(--border-light);
}

/* ——— Founder's note ———
   Sits inside the card directly under the h1, because it is the page's voice rather than one of
   its sections. A letter, not a callout (2 Sep 2026): the panel tint with no border separates it
   from the headline and the grid without making it one more boxed cell, and upright type at the
   cells' body size replaces the small italic that read as a wall. No colour of its own: a third
   accent would make it read as a testimonial pulled from elsewhere. The sign-off is its own
   paragraph, set apart by a little space rather than a rule. */
.founder-note {
  background: var(--panel-muted);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0.75rem 0 1.75rem;
}

.founder-note__title {
  font-style: normal;
  font-weight: 600;
  margin: 0 0 0.4rem;
}

.founder-note p {
  margin: 0 0 0.6rem;
}

.founder-note p:last-child {
  margin: 0.4rem 0 0;
}

/* ——— Home hero (5 Oct 2026) ———
   The founder's note beside the two friends at the laptop, so a visitor meets the friend before any
   copy. The picture replaced the faded street scene that sat behind the note. On a phone the
   picture goes first and the note follows it. */
.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
  margin: 0.75rem 0 0;
}

/* Text and picture at equal width, for a page whose left side is a heading and a lede rather
   than the longer founder's note. */
.home-hero--even {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-bottom: 1.5rem;
}

.home-hero--even .lede {
  margin-bottom: 0.75rem;
}

.home-hero .founder-note {
  margin: 0;
}

.home-hero__art {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-card);
}

@media (max-width: 760px) {
  .home-hero {
    grid-template-columns: 1fr;
  }
  .home-hero__art {
    order: -1;
  }
}

/* ——— About tabs ———
   All tabpanels are always in the server-rendered DOM; hiding is gated on .js-tabs, which
   about-tabs.js adds at runtime. Without JS the panels stack and stay visible (and crawlable). */
.about-tabs {
  margin-top: 1.75rem;
}

.about-tabs__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.about-tabs__tab {
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.35rem 1.1rem;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.about-tabs__tab:hover {
  color: var(--text-body);
}

.about-tabs__tab:focus-visible {
  outline: 2px solid var(--accent-link);
  outline-offset: 2px;
}

.about-tabs__tab[aria-selected="true"] {
  background: var(--panel-muted);
  color: var(--text-body);
  border-color: #c5cdd4;
}

/* No-JS fallback spacing between the stacked panels; with JS only one panel shows at a time. */
.about-tabs__panel + .about-tabs__panel {
  margin-top: 1.25rem;
}

.about-tabs.js-tabs .about-tabs__panel:not(.is-active) {
  display: none;
}

.in-action-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}

.in-action-grid img {
  display: block;
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

@media (max-width: 700px) {
  .in-action-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.pricing-tier__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.pricing-tier__head .tier-badge {
  margin-bottom: 0;
}

.pricing-tier__head form {
  margin: 0;
}

.pricing-tier__blurb {
  margin: 0.85rem 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-muted);
}

@media (max-width: 600px) {
  .pricing-tier__cols {
    grid-template-columns: 1fr;
  }
}

.tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.33rem 0.85rem 0.33rem 0.65rem;
  border-radius: 999px;
  font-size: 0.96rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.85rem;
  line-height: 1;
  /* Default colour so an unrecognised badge value still renders styled; --gold/--pro override below. */
  background: var(--badge-green);
  color: #fff;
}

/* The same badge at list-label size: leads a bullet, sits on the text baseline. */
.tier-badge--inline {
  font-size: 0.68rem;
  padding: 0.22rem 0.6rem 0.22rem 0.5rem;
  margin: 0 0.45rem 0 0;
  vertical-align: 0.1em;
}

.tier-badge__icon {
  width: 0.8em;
  height: 0.8em;
  flex-shrink: 0;
}

.tier-badge--green {
  background: var(--badge-green);
  color: #fff;
}

.tier-badge--gold {
  background: var(--badge-gold);
  color: #fff;
}

.tier-badge--pro {
  background: linear-gradient(135deg, var(--badge-pro-a) 0%, var(--badge-pro-b) 45%, var(--badge-pro-c) 100%);
  color: #fff;
}

.tier-badge--business {
  background: var(--badge-business);
  color: #fff;
}

/* The free grant, wherever it is named. Teal because it is the site's own colour, not a tier. */
.tier-badge--free {
  background: var(--badge-free);
  color: #fff;
}

/* Pricing, wherever it is labelled rather than a tier named. The launch-offer orange. */
.tier-badge--pricing {
  background: var(--badge-pricing);
  color: #fff;
}

/* A label with no meaning to colour: the sage of .inline-btn-green, ink text. */
.tier-badge--neutral {
  background: var(--badge-neutral-bg);
  color: var(--badge-neutral-text);
}

.pricing-tier__price-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem;
}

.pricing-tier__price-row .pricing-tier__price {
  margin-bottom: 0;
}

.pricing-tier__price-row .pricing-tier__sub {
  margin-bottom: 0.2rem;
}

.pricing-tier__title {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #3d4a37;
}

.pricing-tier__price {
  margin: 0 0 0.35rem;
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--heading-accent);
}

.pricing-tier__currency {
  font-size: 1.05rem;
  vertical-align: super;
  margin-right: 0.1rem;
}

.pricing-tier__usd {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}

.pricing-tier__sub {
  margin: 0 0 0.75rem;
  font-size: 1.32rem;
  font-weight: 600;
  color: var(--accent-link);
}

.pricing-tier__detail {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.pricing-tier__list {
  margin: 1rem 0 0;
  padding-left: 1.15rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.pricing-tier__list li {
  margin-bottom: 0.35rem;
}

.pricing-note {
  margin-top: 2rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 42rem;
}

.pricing-stripe {
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border-light);
  text-align: center;
}

.pricing-stripe__label {
  margin: 0 0 0.65rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.pricing-stripe__link {
  display: inline-block;
  line-height: 0;
}

.pricing-stripe__link:focus-visible {
  outline-offset: 4px;
}

.pricing-stripe__logo {
  height: 32px;
  width: auto;
  display: block;
}

/* Spans the full width of its card rather than sitting in a narrower centred column. On buy-credits it
   is a direct child of .card--prose-wide (900px), so the old 32rem cap left it visibly inset from the
   panel edges and out of line with the pricing grid above it. */
.pricing-stripe__fine,
.page-fine {
  margin: 1rem 0 0;
  max-width: none;
  font-size: 0.68rem;
  line-height: 1.45;
  color: #888;
}

/* ——— Bottom navigation (fixed: always visible above page scroll) ——— */
.site-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 190;
  padding: 0.65rem 1.25rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border-light);
  background: #fafaf9;
  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.06);
}

.site-bottom-nav__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.site-bottom-nav__inner a {
  font-weight: 500;
  color: var(--text-muted);
}

.site-bottom-nav__inner a:hover {
  color: var(--accent-link);
}

.site-bottom-nav__sep {
  color: #b4b4b0;
  user-select: none;
}

/* The UK route's flag, sized to the bar's 0.75rem text. */
.site-bottom-nav__uk {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.site-bottom-nav__flag {
  width: 1.1rem;
  height: 0.55rem;
  border-radius: 1px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

/* On a phone the bar wraps, and a separator then dangles at the end or start of a row. Spacing
   does the separating instead. */
@media (max-width: 600px) {
  .site-bottom-nav__sep {
    display: none;
  }

  .site-bottom-nav__inner {
    gap: 0.35rem 1.1rem;
  }
}

/* On /evaluate the flagged link points at the page it is on, and it was the item that wrapped the
   bar onto an extra row (2 Nov 2026), so that page drops it and its separator. The bar can then be
   a row shorter there than on other pages at some widths; accepted. */
.site-shell--evaluate .site-bottom-nav__uk,
.site-shell--evaluate .site-bottom-nav__sep--uk {
  display: none;
}

.site-bottom-nav__ext-label {
  color: #b4b4b0;
  user-select: none;
}

/* ——— Forms ——— */
.form-stack label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
}

.form-stack input[type="email"],
.form-stack input[type="password"],
.form-stack input[type="text"] {
  width: 100%;
  padding: 0.65rem 0.85rem;
  margin-bottom: 1rem;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--text-body);
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-stack .password-field {
  position: relative;
  margin-bottom: 1rem;
}

.form-stack .password-field input[type="password"],
.form-stack .password-field input[type="text"] {
  margin-bottom: 0;
  padding-right: 2.85rem;
}

.password-field__toggle {
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.password-field__toggle:hover {
  color: var(--accent-link);
  background: rgba(109, 152, 168, 0.08);
}

.password-field__toggle:focus-visible {
  outline: 2px solid var(--accent-link);
  outline-offset: 2px;
}

/* Stack both SVGs in the same spot; `display` toggles which one paints (`hidden` on <svg> is unreliable). */
.password-field__toggle .password-toggle__icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.password-field__toggle .password-toggle__icon--open {
  display: block;
}

.password-field__toggle .password-toggle__icon--shut {
  display: none;
}

.password-field__toggle[aria-pressed="true"] .password-toggle__icon--open {
  display: none;
}

.password-field__toggle[aria-pressed="true"] .password-toggle__icon--shut {
  display: block;
}

.form-stack input:focus {
  outline: none;
  border-color: var(--accent-link);
  box-shadow: 0 0 0 3px rgba(109, 152, 168, 0.15);
}

.form-stack .error {
  color: var(--error);
  font-size: 0.8rem;
  margin-top: -0.65rem;
  margin-bottom: 0.65rem;
}

.signup-paused {
  padding: 1.5rem 0 0.5rem;
  text-align: center;
  color: var(--text-body);
  line-height: 1.6;
}

.signup-paused a {
  color: var(--accent);
}

.btn-primary {
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.78rem 1.2rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  color: #3d4a37;
  background: linear-gradient(135deg, #c5d2bc 0%, #b7c6ac 100%);
  transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
  box-shadow: 0 2px 12px rgba(197, 210, 188, 0.35);
}

.btn-primary:hover {
  filter: brightness(1.05);
}

.btn-primary:active {
  transform: scale(0.99);
}

.btn-primary:focus-visible {
  outline: 2px solid var(--accent-link);
  outline-offset: 3px;
}

.btn-primary:disabled {
  background: linear-gradient(135deg, #b0c8d2 0%, #9ab5be 100%);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.6;
}

.flash-success {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  color: var(--success-text);
  font-size: 0.88rem;
  margin-bottom: 1rem;
}

.message-banner {
  padding: 0.85rem 1rem;
  border-radius: 8px;
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  color: var(--warning-text);
  font-size: 0.88rem;
  margin-bottom: 1rem;
}

.message-banner--error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}

.unverified-notice {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  pointer-events: none;
  z-index: 199;
}

.unverified-notice__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0.4rem 1.5rem 0;
  text-align: right;
  font-size: 0.82rem;
  color: #b91c1c;
  pointer-events: all;
}

.unverified-notice__link {
  color: #b91c1c;
  text-decoration: none;
}

.unverified-notice__link:hover {
  font-weight: bold;
  color: #b91c1c;
}

.launch-banner {
  background: var(--launch-silver);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 2px solid var(--launch-orange);
}

.launch-banner__inner {
  display: block;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0.6rem 1.5rem;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--launch-orange);
  text-decoration: none;
}

.launch-banner__inner:hover {
  color: var(--launch-orange);
  opacity: 0.82;
}

.launch-banner__star {
  width: 0.95em;
  height: 0.95em;
  vertical-align: -0.1em;
  flex-shrink: 0;
}

.launch-banner__star:first-child {
  margin-right: 0.6em;
}

.launch-banner__star:last-child {
  margin-left: 0.6em;
}

/* Struck-out base credits sit in the normal credits colour; the doubled value pops in the
   launch-banner orange so the 2x reads as the headline number. */
.pricing-tier__credits-was {
  text-decoration: line-through;
  color: var(--accent-link);
  font-weight: 600;
  margin-right: 0.3rem;
}

.pricing-tier__credits-now {
  color: var(--launch-orange);
}

.form-links {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.88rem;
  color: var(--text-muted);
}

/* ——— Listings table ——— */
.empty-state {
  color: var(--text-muted);
  font-size: 0.95rem;
  padding: 0.5rem 0;
}

.listings-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 0.5rem;
}

.listings-table tr.pair-top td {
  padding: 1rem 0 0.35rem;
  border-bottom: none;
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-body);
}

.listings-table .saved-date {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 2px;
}

.listings-table .listing-link {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--accent-link);
  margin-top: 3px;
  text-decoration: none;
}

.listings-table .listing-link:hover {
  text-decoration: underline;
}

.listings-table tr.pair-bottom td {
  padding: 0 0 1.25rem;
  vertical-align: top;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--border-light);
}

.listings-table details summary {
  cursor: pointer;
  color: var(--accent-link);
  font-weight: 600;
  font-size: 0.85rem;
  user-select: none;
  list-style: none;
}

.listings-table details summary::-webkit-details-marker {
  display: none;
}

.listings-table details summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform 0.15s ease;
}

.listings-table details[open] summary::before {
  transform: rotate(90deg);
}

.assessment-body {
  margin-top: 0.55rem;
  white-space: normal;
  word-break: break-word;
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 100%;
  padding: 0.75rem 0.9rem;
  border-radius: 8px;
  background: var(--panel-muted);
  border: 1px solid var(--border-light);
}

.btn-delete {
  padding: 0.4rem 0.7rem;
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn-delete:hover {
  background: #fee2e2;
}

.remove-form {
  display: inline-block;
  position: relative;
}

.remove-confirm {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  visibility: hidden;
}

.remove-confirm.is-visible {
  visibility: visible;
}

.remove-confirm__label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #b91c1c;
}

.btn-cancel,
.btn-share {
  padding: 0.4rem 0.7rem;
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn-cancel:hover,
.btn-share:hover {
  background: #e5e7eb;
}

/* ——— Saved listing: title row, price, image, expiry ——— */

.saved-title-text {
  display: block;
  font-weight: 600;
}

.saved-price-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 2px;
}

.saved-price {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent-link);
  white-space: nowrap;
}

.saved-meta-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 2px;
}

.saved-expiry {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.saved-expiry--warning {
  color: #b45309;
  font-weight: 600;
}

.saved-image-cell {
  width: 280px;
  min-width: 280px;
  vertical-align: top;
  padding-top: 1rem;
  padding-left: 1rem;
}

.saved-listing-image {
  display: block;
  width: 280px;
  height:180px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border-light);
}

@media (max-width: 600px) {
  .saved-image-cell {
    width: 140px;
    min-width: 140px;
  }

  .saved-listing-image {
    width: 140px;
    height: 90px;
  }
}

/* ——— Assessment structured layout (saved listings expand view) ——— */

.assessment-rating {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.assessment-rating--good_value { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.assessment-rating--fair       { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.assessment-rating--overpriced { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.assessment-rating--uncertain  { background: #f4f4f2; color: #5c5c5c; border: 1px solid #e0e0dc; }

.assessment-verdict {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-body);
  margin: 0 0 10px;
  line-height: 1.5;
}

/* Motors samples carry a spec line instead of a photo: a stock shot of a different car of the
   same model would undercut the claim that the evaluation text is reproduced verbatim, and the
   figures are what a buyer actually scans. Deliberately not pills, to stay with the flat
   assessment styling around it. */
/* On /samples each card's heading links to the card's own page. It keeps the heading's own colour and
   weight, and hovers by opacity like the other heading-style links: a navigational label, not body copy. */
.in-action-frame h3 a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.15s ease;
}
.in-action-frame h3 a:hover {
    color: inherit;
    opacity: 0.75;
}

.assessment-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-light);
  font-size: 0.78rem;
  color: var(--text-muted);
}

.assessment-spec b {
  font-weight: 600;
  color: var(--text-body);
  margin-right: 0.3rem;
}

.assessment-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 10px 0 4px;
}

.assessment-section-label--red-flags { color: #92400e; }
.assessment-section-label--pros      { color: #047857; }
.assessment-section-label--cons      { color: var(--text-muted); }

.assessment-list {
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
}

.assessment-list li {
  font-size: 0.82rem;
  line-height: 1.45;
  padding-left: 18px;
  position: relative;
  color: var(--text-muted);
  margin-bottom: 3px;
}

.assessment-list--red-flags { background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px; padding: 6px 8px 6px 0; }
.assessment-list--red-flags li::before { content: "→"; position: absolute; left: 4px; color: #92400e; font-size: 10px; top: 2px; }
.assessment-list--pros li::before      { content: "✓"; position: absolute; left: 0; color: #047857; font-weight: 700; }
.assessment-list--cons li::before      { content: "✗"; position: absolute; left: 0; color: #b91c1c; font-weight: 700; }

/* Shown in the Cons slot when an assessment has no cons (Constants.MSG_NO_CONS_SEE_QUESTIONS).
   Deliberately prose rather than a list item: it is our sentence, not one of the model's findings,
   and it must not read as a con with a tick or a cross against it. */
.assessment-no-cons {
  margin: 0 0 6px;
  color: var(--text-muted);
}

.assessment-analysis {
  border-top: 1px solid var(--border-light);
  padding-top: 8px;
  margin-top: 6px;
}

.assessment-analysis p {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0 0 8px;
}

.assessment-analysis p.assessment-analysis-heading {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-body);
  margin: 12px 0 4px;
  line-height: 1.4;
}

.assessment-analysis p.assessment-analysis-heading:first-child {
  margin-top: 0;
}

.assessment-disclaimer {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-style: italic;
  margin: 10px 0 0;
  line-height: 1.4;
  opacity: 0.75;
}

.assessment-section-label--ask-agent { color: #2563eb; }
.assessment-list--ask-agent { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 6px; padding: 6px 8px 6px 0; }
.assessment-list--ask-agent li::before { content: "?"; position: absolute; left: 4px; color: #2563eb; font-weight: 700; font-size: 10px; top: 2px; }
.assessment-section-label--ask-dealer { color: #2563eb; }
.assessment-list--ask-dealer { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 6px; padding: 6px 8px 6px 0; }
.assessment-list--ask-dealer li::before { content: "?"; position: absolute; left: 4px; color: #2563eb; font-weight: 700; font-size: 10px; top: 2px; }
/* A question is a ticked checkbox inside a label (2 Nov 2026): the box takes the "?" marker's place
   and the whole question is the tap target. An unticked question dims so the list shows at a
   glance what Copy and Draft will take, to a grey still readable on the blue panel (about 4.6:1),
   since the reader may want it back. No :has(): the item carries a class and the text follows the
   box as a sibling. */
.assessment-list li.assessment-question-item { padding-left: 0; }
.assessment-list li.assessment-question-item::before { display: none; }
.assessment-question { display: flex; align-items: flex-start; gap: 7px; padding-left: 6px; cursor: pointer; }
.assessment-question__pick { flex-shrink: 0; width: 14px; height: 14px; margin: 3px 0 0; accent-color: #2563eb; cursor: pointer; }
.assessment-question__pick:not(:checked) + .assessment-question__text { color: #707070; }
.assessment-draft-email-btn:disabled,
.assessment-copy-questions-btn:disabled { opacity: 0.45; cursor: default; background: none; }
.assessment-draft-email-btn,
.assessment-copy-questions-btn { display: inline-block; margin-top: 8px; margin-right: 6px; padding: 4px 10px; font-size: 0.75rem; font-weight: 600; background: none; border: 1px solid #93c5fd; border-radius: 6px; color: #2563eb; cursor: pointer; line-height: 1.4; }
.assessment-draft-email-btn:hover:not(:disabled),
.assessment-copy-questions-btn:hover:not(:disabled) { background: #dbeafe; }

/* The listing's own price history (PriceHistoryDisplay). Mirrors .ev-section--price-history in the
   extension's theme.css: a neutral panel, date | event | price, newest first. */
.assessment-section-label--price-history { color: var(--text-muted); }
/* Where the figures came from, as a note beside the heading rather than part of it. */
.price-history-source { font-size: 0.72rem; font-weight: 400; text-transform: none; letter-spacing: normal; margin-left: 4px; }
.assessment-list--price-history { background: var(--panel-muted); border: 1px solid var(--border-light); border-radius: 6px; padding: 6px 8px; }
.assessment-list--price-history li { padding-left: 0; display: grid; grid-template-columns: 9.5em 1fr auto; gap: 8px; font-size: 0.82rem; }
.assessment-list--price-history-no-event li { grid-template-columns: 9.5em auto; }
.assessment-list--price-history li::before { display: none; }
.price-history-date { color: var(--text-muted); }
.price-history-price { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.assessment-list--price-history-no-event .price-history-price { text-align: left; }
.price-history-note { font-size: 0.75rem; color: var(--text-muted); margin: 4px 0 0; }

.assessment-section-label--resources { color: var(--text-muted); }
.assessment-list--resources { background: var(--panel-muted); border: 1px solid var(--border-light); border-radius: 6px; padding: 6px 8px; }
.assessment-list--resources li { padding-left: 0; display: flex; flex-direction: column; gap: 1px; }
.assessment-list--resources li::before { display: none; }
.assessment-list--resources a { font-size: 0.82rem; color: var(--accent-link); font-weight: 500; }
.assessment-list--resources a:hover { text-decoration: underline; }
.assessment-resources-note { font-size: 0.75rem; color: var(--text-muted); }

.assessment-rating--worth_viewing   { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.assessment-rating--proceed_with_caution { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.assessment-rating--red_flags       { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }

.saved-red-flags-badge {
  display: inline-block;
  padding: 2px 8px;
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

/* --- Evaluation carousel --- */
/* ——— Spec table (evaluate page) ——— */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.25rem;
  font-size: 0.9rem;
}
.spec-table tr {
  border-bottom: 1px solid var(--border-light);
}
.spec-table tr:last-child {
  border-bottom: none;
}
.spec-table th {
  width: 38%;
  padding: 0.45rem 0.75rem 0.45rem 0;
  font-weight: 500;
  color: var(--text-muted);
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}
.spec-table td {
  padding: 0.45rem 0 0.45rem 0.5rem;
  color: var(--text-body);
  vertical-align: top;
  word-break: break-word;
}

/* ——— Inline / secondary buttons ——— */
.btn-inline {
  width: auto;
  margin-top: 0;
  white-space: nowrap;
  padding: 0.65rem 1.1rem;
  font-size: 0.9rem;
}
/* Inline buttons go full width on narrow screens. Global on purpose — it covers Evaluate, Save
   and the buy-credits buttons, not just the evaluate hero. */
@media (max-width: 560px) {
  .btn-inline {
    width: 100%;
    text-align: center;
  }
}
.btn-secondary {
  width: auto;
  margin-top: 0;
  white-space: nowrap;
  padding: 0.65rem 1rem;
  font-size: 0.9rem;
  background: var(--page-bg);
  color: var(--text-body);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.btn-secondary:hover {
  background: var(--panel-bg, #f5f7f9);
  border-color: #c5cdd4;
}
/* ——— Evaluate hero: the paste-a-link action ———
   The page has one job, so the input carries the visual weight and nothing else on the page
   competes with it. The submit is an arrow inset at the field's right edge, like a search bar
   (Adam, 2 Nov 2026): the full-width "Get listing data" button took a phone's whole second row,
   and the Paste button it replaced ended at the same iOS Paste bubble a long-press does. */
.ev-hero {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

/* The signed-out invitation under the field (18 Oct 2026): Mia's face and one line, on the same
   muted panel as the homepage quote cards so it reads as the friend talking, not as a banner. */
.ev-invite {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.9rem;
  padding: 0.6rem 0.9rem;
  background: var(--panel-muted);
  border-radius: 8px;
}

.ev-invite__face {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: block;
}

.ev-invite p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
}

.ev-hero__row {
  display: flex;
  gap: 0.6rem;
  align-items: stretch;
}
.ev-hero__field {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
}
.ev-hero__field input[type="text"] {
  flex: 1;
  min-width: 0;
  /* Right padding reserves the inset arrow's track (.ev-go: 2.6rem wide, 0.4rem from the edge). */
  padding: 0.85rem 3.6rem 0.85rem 0.95rem;
  font-size: 1rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-panel);
  font-family: inherit;
  background: var(--page-bg);
  color: var(--text-body);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ev-hero__field input[type="text"]::placeholder {
  color: #a3a3a0;
}
.ev-hero__field input[type="text"]:focus {
  border-color: var(--accent-link);
  box-shadow: 0 0 0 3px rgba(109, 152, 168, 0.15);
}
/* The submit. Square, inside the field, the same green as every primary action. .btn-primary's
   full width and top margin are undone here rather than by a second button class. */
.ev-hero__field .ev-go {
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  box-sizing: border-box;
  width: 2.6rem;
  height: 2.6rem;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ev-hero__field .ev-go:active {
  transform: translateY(-50%) scale(0.96);
}
/* Busy: the arrow gives way to a spinner in the same box. Not the grey-blue of .btn-primary:disabled,
   which would read as refused rather than working. */
.ev-hero__field .ev-go--busy:disabled {
  background: linear-gradient(135deg, #c5d2bc 0%, #b7c6ac 100%);
  opacity: 1;
  cursor: progress;
}
.ev-go__spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ev-go-spin 0.8s linear infinite;
}
.ev-go--busy .ev-go__arrow { display: none; }
.ev-go--busy .ev-go__spinner { display: block; }
@keyframes ev-go-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ev-go__spinner { animation-duration: 2.4s; }
}
/* The Shortcut offer under the field (evaluate.html #hero-shortcut-tip). */
.ev-hero__tip {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0.6rem 0 0;
}


/* ——— Evaluate: the scraped listing card ———
   One tinted card. Everything inside it is a plain section separated by a rule, never a box of
   its own: a white box inside a tinted card inverts the page's own nesting (white page, tinted
   panel) and reads as pasted on. Spacing is deliberately unequal so the blocks group — title and
   facts are one unit, the Evaluate action is a second, the record below is a third. */
.ev-listing {
  margin-top: 1.25rem;
}
/* On a phone the listing panel is the one frame around a result (/evaluate and /shared), so it
   keeps its outline with tighter padding, and the assessment box inside it drops its own: the
   red-flag and question callouts still mark the sections. See the .card--prose-wide note above. */
@media (max-width: 640px) {
  .ev-listing.pricing-tier,
  .shared-listing.pricing-tier {
    padding: 1.1rem 0.85rem;
  }

  .ev-listing .assessment-body,
  .shared-listing .assessment-body {
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
  }
}
.ev-listing__title {
  margin-bottom: 0.35rem;
}
/* Leads with the asking price, so it is set at body colour rather than muted: it was previously
   the same weight as "Freehold", and it is the most decision-relevant fact on the page. */
.ev-listing__facts {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text-body);
  margin: 0 0 1.5rem;
}
.ev-listing__action {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.ev-listing__action-wrap {
  margin-top: 1.5rem;
}
/* This is the button that spends a credit. It was rendering at btn-inline's size, alone on a
   tinted field, reading as less important than the photo above it. */
.ev-listing__action .ev-assess-btn {
  padding: 0.85rem 1.6rem;
  font-size: 1rem;
}
.ev-listing__progress {
  display: none; /* flipped to flex by startProgress() */
  flex: 1;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

/* A rule, not a border box — see the note at the top of this block. */
.ev-listing__data {
  margin-top: 1.75rem;
  border-top: 1px solid var(--border-light);
}
.ev-listing__data-summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.85rem 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  list-style: none;
}
.ev-listing__data-summary::-webkit-details-marker {
  display: none;
}
/* Capped width with a real aspect ratio. Full width with max-height: 240px made this roughly a
   6:1 window on a wide card, so object-fit: cover sliced a band out of the middle of the photo
   and cut the roofline and the front door off a house. The radius is one step below the card's
   own (--radius-panel vs --radius-card) so it reads as nested rather than coincident. */
.ev-listing__photo {
  display: block;
  width: 100%;
  max-width: 620px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-panel);
  margin: 0.25rem 0 1.5rem;
}
/* .spec-table carries a 1.25rem top margin for its other uses; inside this panel the photo above
   it already provides the gap, and with no photo the summary does. */
.ev-listing__data .spec-table {
  margin-top: 0;
}
.ev-listing__description {
  margin-top: 1.25rem;
  border-top: 1px solid var(--border-light);
}
.ev-listing__description-text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-body);
  margin-top: 0.25rem;
}

.ev-listing__assessment {
  margin-top: 1.5rem;
  border-top: 1px solid var(--border-light);
  padding-top: 1.25rem;
}
.ev-listing__save-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.ev-listing__save-row--top {
  margin-top: 0;
  margin-bottom: 1rem;
}

/* ——— Evaluate status banner ——— */
.ev-banner {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.9rem;
  line-height: 1.5;
}
.ev-banner--success {
  background: var(--success-bg, #f0fdf4);
  border: 1px solid var(--success-border, #bbf7d0);
  color: var(--success-text, #166534);
}
.ev-banner--error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}
.ev-banner--info {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
}

/* ——— Evaluate "How it works" ———
   Plain text, no panel and no border. It used to be the one highlighted block on the page, which
   put the emphasis on the instructions instead of the input. */
.ev-how {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
}
/* inline-flex, not flex: a full-width summary draws its focus ring around the whole row of empty
   space to the right of the label, which reads as a text field rather than a disclosure. */
.ev-how__summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  list-style: none;
  border-radius: 4px;
}
.ev-how__summary::-webkit-details-marker {
  display: none;
}
.ev-how__steps {
  margin: 0.75rem 0 0;
  padding-left: 1.25rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.7;
}
.ev-how__steps li {
  margin-bottom: 0.2rem;
}
/* The iOS Shortcut offer under an evaluation (evaluate.html #shortcut-tip). */
.ev-shortcut-tip {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 1rem 0 0;
}
.ev-shortcut-icon {
  vertical-align: -2px;
  margin-right: 0.35rem;
}

.ev-how__note {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-top: 0.75rem;
}

/* ——— Buy Credits button (red — mirrors extension btn-buy-credits) ——— */
.btn-buy-credits {
  display: inline-block;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.65rem 1.1rem;
  border-radius: 8px;
  border: 1px solid #b91c1c;
  background: #fef2f2;
  color: #b91c1c;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.12s ease;
  margin-top: 0;
}
.btn-buy-credits:hover {
  background: #fee2e2;
}

/* ——— /evaluate progress bar ——— */
.ev-bar-track {
  flex: 1;
  min-width: 0;
  height: 3px;
  background: var(--border-light);
  border-radius: 2px;
  overflow: hidden;
}
.ev-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: #6d98a8;
}
.ev-bar-fill--running {
  animation: ev-bar-progress 65s linear forwards;
}
@keyframes ev-bar-progress {
  0%   { width: 0%; }
  25%  { width: 22%; }
  50%  { width: 44%; }
  75%  { width: 63%; }
  90%  { width: 76%; }
  100% { width: 85%; }
}
/* The friend at the end of the progress bar, with the three "about to tell you something" lines
   from the illustrations lighting in turn. The face stays still; only the lines move. Mirrored in
   the extension's theme.css (.ev-popup .ev-thinking), so change the two together. */
.ev-thinking {
  position: relative;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}
.ev-thinking__face {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 28px;
}
.ev-thinking__lines {
  position: absolute;
  right: -4px;
  top: -4px;
  width: 16px;
  height: 16px;
  overflow: visible;
}
.ev-thinking__lines path {
  fill: none;
  stroke: var(--text-body);
  stroke-width: 2.2;
  stroke-linecap: round;
  opacity: 0.15;
  animation: ev-thinking-pulse 1.5s ease-in-out infinite;
}
.ev-thinking__lines path:nth-child(2) { animation-delay: 0.18s; }
.ev-thinking__lines path:nth-child(3) { animation-delay: 0.36s; }
@keyframes ev-thinking-pulse {
  0%, 100% { opacity: 0.15; }
  30%      { opacity: 1;    }
  60%      { opacity: 0.15; }
}
@media (prefers-reduced-motion: reduce) {
  .ev-thinking__lines path { animation: none; opacity: 0.6; }
}
.ev-assess-btn.ev-assess-btn--evaluating {
  background: #ffffff;
  color: #5a8494;
  box-shadow: 0 0 0 2px #6d98a8;
}

/* ——— Admin tables ——— */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.admin-table th {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 2px solid var(--border-light);
    color: var(--text-muted);
    font-weight: 600;
    white-space: nowrap;
}
.admin-table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}
.admin-table__row--disabled td {
    opacity: 0.5;
}
.admin-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    margin-left: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.admin-badge--admin { background: #dbeafe; color: #1e40af; }
.admin-badge--active { background: var(--success-bg); color: var(--success-text); }
.admin-badge--disabled { background: #fee2e2; color: #991b1b; }

/* The disclosure line under every rendered evaluation (Constants.EVALUATION_DISCLOSURE_*). Small and
   muted, but always present: it is what keeps the friend's face and first-person voice honest. */
.assessment-disclosure {
  margin: 1rem 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ——— Shared evaluation page (/shared/{token}, ADR-045) ——— */
.shared-intro {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-body);
}
.shared-intro img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--header-bg);
  flex: none;
}
.shared-listing {
  display: grid;
  gap: 1rem;
}
.shared-head {
  display: grid;
  gap: 1rem;
  align-items: start;
}
/* A computer: the photo beside the title and facts, so the evaluation starts high on the page. */
.shared-head--photo {
  grid-template-columns: minmax(0, 1fr) minmax(0, 38%);
}
.shared-head__text {
  min-width: 0;
}
.shared-head__title {
  margin: 0 0 0.35rem;
}
.shared-head__facts {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text-body);
}
.shared-photo {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border-light);
}
.shared-assessment {
  margin-top: 0;
}
/* The same size as the facts line, and the same gap above it as between the title and the facts. */
.shared-head__source {
  margin: 0.35rem 0 0;
  font-size: 1.05rem;
  font-weight: 500;
}
.shared-own {
  margin: 1.5rem 0 0;
}
/* The sign-up box: the flyers' "You need a Friend in the Know" panel. White inside a teal outline,
   the friend smiling on the right. */
.shared-invite {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.25rem;
  align-items: center;
  background: #ffffff;
  border: 2px solid var(--badge-free);
  border-radius: var(--radius-card);
  padding: 1.25rem 1.5rem;
}
.shared-invite__text {
  min-width: 0;
}
.shared-invite__title {
  margin: 0 0 0.6rem;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--text-body);
  text-wrap: balance;
}
.shared-invite__title strong {
  font-weight: 800;
}
.shared-invite__list {
  margin: 0 0 1rem;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.35rem;
  color: var(--text-body);
}
.shared-invite__list li::marker {
  color: var(--badge-free);
}
.shared-invite__face {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--header-bg);
  object-fit: cover;
}
/* A phone: one column, the photo full width under the facts, and the friend above the sign-up text. */
@media (max-width: 640px) {
  .shared-head--photo {
    grid-template-columns: minmax(0, 1fr);
  }
  .shared-invite {
    grid-template-columns: minmax(0, 1fr);
    padding: 1.1rem 1.1rem 1.25rem;
  }
  .shared-invite__face {
    order: -1;
    width: 84px;
    height: 84px;
  }
}