/* ==========================================================================
   Sections
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero

   Structure is the reference image's: airy text column left, dense product
   panel right bleeding off the frame, ambient bloom and a masked perspective
   grid behind. That density contrast IS the composition.
   -------------------------------------------------------------------------- */
.hero {
  padding-top: 8rem;
  padding-bottom: 5rem;
}

@media (min-width: 640px) {
  .hero {
    padding-top: 10rem;
  }
}

@media (min-width: 1024px) {
  .hero {
    padding-top: 12rem;
    padding-bottom: 9rem;
  }
}

.hero__grid {
  display: grid;
  gap: 3.5rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .hero__grid {
    /* 1.18fr against 1fr. Measured: "AI conversational" sets 529px at the H1
       size, and the old 1.05/1.1 split gave the text column only 512px - so the
       phrase broke and stranded "AI" alone on the line above. Widening the
       text column clears it. The product panel already bleeds off the right
       edge, so it absorbs the loss without being cropped further. */
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
    gap: 2.5rem;
  }
}

.hero__copy {
  max-width: 38rem;
}

.hero__title {
  margin-top: 1.75rem;
}

.hero__lede {
  margin-top: var(--sp-5);
  color: var(--fg-muted);
}

.hero__actions {
  margin-top: 2.25rem;
}

/* Bleeds off the right edge on large screens, per the reference image,
   rather than sitting politely inside the container. */
@media (min-width: 1024px) {
  .hero__panel {
    margin-right: -6rem;
  }
}

@media (min-width: 1280px) {
  .hero__panel {
    margin-right: -10rem;
  }
}

/* --------------------------------------------------------------------------
   Agent panel - product UI as the hero.

   Built as styled markup rather than a screenshot: sharp at every density,
   no image weight, recolours with the tokens, and can animate.
   -------------------------------------------------------------------------- */
.panel {
  position: relative;
}

.panel__glow {
  position: absolute;
  inset: -2rem;
  border-radius: 40px;
  background: radial-gradient(ellipse at 50% 40%, rgb(50 171 222 / 0.16), transparent 65%);
  pointer-events: none;
}

.panel__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-frame);
  border: 1px solid var(--glass-line-strong);
  background-color: var(--ink);
  box-shadow: 0 40px 120px -32px rgb(0 0 0 / 0.9);
  display: flex;
}

.panel__rail {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  width: 3.5rem;
  flex-shrink: 0;
  padding-block: var(--sp-4);
  border-right: 1px solid var(--glass-line);
  background-color: rgb(7 10 18 / 0.6);
}

@media (min-width: 640px) {
  .panel__rail {
    display: flex;
  }
}

/* The product's own mark at the top of the rail - the same bird artwork as
   the site header, so the dashboard reads as Blue Jay's app. */
.panel__rail-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2rem;
  margin-bottom: 0.75rem;
}

.panel__rail-logo img {
  display: block;
  width: 100%;
  height: auto;
}

.panel__rail-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  color: var(--fg-dim);
}

.panel__rail-icon svg {
  width: 18px;
  height: 18px;
}

.panel__rail-icon.is-active {
  background-color: rgb(255 255 255 / 0.1);
  color: var(--accent);
}

.panel__body {
  flex: 1;
  min-width: 0;
  padding: var(--sp-4);
}

@media (min-width: 640px) {
  .panel__body {
    padding: 1.25rem;
  }
}

/* --------------------------------------------------------------------------
   Homepage hero - the analytics dashboard

   Modelled on the product's own analytics screen: a date range, four stat
   cards, a session trend and recognition vs fallback. Figures match the
   Analytics section further down (same org, same 30 days), so the page
   never contradicts itself. The .panel rules above are the shared frame
   (window chrome, icon rail) this dashboard sits inside.

   Layout responds to the panel's own width, not the viewport: it is ~431px
   wide at a 1024px window and 641px from 1440, and the cards must fit
   whichever they get. Measured, not guessed: the longest label ("Total
   Interactions") sets 85px at 10.5px, and needs 105px with its icon. A
   card's content box is (body - 3 gaps) / 4 - 24px of padding and border.

     window   body   stats       charts         card icons
     1440+    551    4 across    side by side   shown
     1280     471    4 across    side by side   dropped (88px cards)
     1100     376    2 x 2       side by side   shown
     1024     341    2 x 2       stacked        shown
     phone    301    2 x 2       stacked        shown
   -------------------------------------------------------------------------- */

/* Overhangs the container like .hero__panel, but only as far as the window
   allows, so the right-hand cards are never cut off. Below 1440 that means a
   shallower overhang; from 1440 it is the full 10rem, as before. 100vw
   counts the scrollbar, so the 1rem margin also keeps clear of it. */
@media (min-width: 1024px) {
  .hero__panel--fit {
    margin-right: calc(-1 * min(10rem, max(0px, (100vw - var(--container)) / 2) + var(--gutter) - 1rem));
  }
}

/* 1rem rather than the older panel's 1.25rem: the 8px it buys is what lets
   four cards clear the longest label on a 1280px window. */
.panel__body--dash {
  container: pbody / inline-size;
  padding: var(--sp-4);
}

/* ---- The rail: the product's sidebar, collapsed ----
   Ten icons in five groups have to fit the panel's shortest height (496px
   from 1280 up). At the older rail's 36px cells they would need ~536px, so
   cells drop to 32px - the 18px icons are unchanged - which needs ~452px
   and leaves the slack above the settings group. */
.panel__rail--dash {
  gap: 0;
}

.panel__rail--dash .panel__rail-icon {
  width: 2rem;
  height: 2rem;
}

.panel__rail-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
}

/* Stands in for the product's section titles, which a rail this narrow
   would cut off mid-word. */
.panel__rail-group + .panel__rail-group {
  margin-top: 0.375rem;
  padding-top: 0.375rem;
  border-top: 1px solid var(--glass-line);
}

/* Settings sits at the foot of the rail, as in the product. */
.panel__rail-group.panel__rail-group--end {
  margin-top: auto;
}

/* ---- The date range and avatar, top right ---- */
.panel__top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.625rem;
}

/* An explicit height rather than padding, so the avatar beside it can match
   it exactly whatever the font's line metrics. */
.panel__date {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.125rem;
  padding: 0 0.75rem;
  border-radius: 0.625rem;
  border: 1px solid var(--glass-line);
  background-color: var(--glass);
  font-size: 0.75rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  white-space: nowrap;
}

.panel__date svg {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  color: var(--fg-muted);
}

/* Matches the date pill's 2.125rem. The gradient stays in the darker half
   of the brand blues: white measures 4.73:1 against its lightest end and
   5.77:1 against --brand, where the brand-to-accent gradient used elsewhere
   would fall to 2.62:1 under the letters. */
.panel__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: var(--radius-pill);
  background-image: linear-gradient(135deg, #2a72d2, var(--brand));
  box-shadow: 0 0 0 2px rgb(50 171 222 / 0.22);
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: var(--wdth-sub);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: #fff;
}

/* ---- Stat cards: 2x2 until there is room for the reference's single row ---- */
.panel__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.875rem;
  padding: 0;
  list-style: none;
}

/* 462px is where four cards each clear the 85px label. */
@container pbody (min-width: 462px) {
  .panel__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.pstat {
  container: pstat / inline-size;
  padding: 0.6875rem;
  border-radius: 0.75rem;
  border: 1px solid var(--glass-line);
  background-color: rgb(17 26 43 / 0.7);
}

.pstat__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.375rem;
}

/* --fg-muted, not --fg-dim: on this raised card --fg-dim is under 5:1. */
.pstat__label {
  min-width: 0;
  font-size: 0.65625rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Shown only where it fits beside the longest label. Four across on a
   1280-1439px window leaves each card ~88-98px, so the icon drops there
   rather than the label being cut. */
.pstat__icon {
  display: none;
  flex-shrink: 0;
  width: 0.8125rem;
  height: 0.8125rem;
  color: var(--fg-dim);
}

@container pstat (min-width: 105px) {
  .pstat__icon {
    display: block;
  }
}

.pstat__n {
  margin-top: 0.625rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: var(--wdth-sub);
  font-variant-numeric: tabular-nums;
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--fg);
}

/* All four move the right way (fallback falling counts as good), so all
   four take the Answered green from the Review log. */
.pstat__delta {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.65625rem;
  color: #5fd0a8;
  white-space: nowrap;
}

.pstat__delta svg {
  width: 0.75rem;
  height: 0.75rem;
  flex-shrink: 0;
}

/* ---- Charts: trend and donut side by side wherever the donut fits ----
   The donut column is fixed rather than a fraction: 9.25rem holds the 108px
   ring and the 105px "Recognition 87.1%" legend line, and every extra pixel
   goes to the trend. Fixed, it stays side by side down to a 1100px window,
   which keeps the panel about as tall as the headline beside it. */
.panel__charts {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

@container pbody (min-width: 370px) {
  .panel__charts {
    grid-template-columns: minmax(0, 1fr) 9.25rem;
  }
}

/* Where the trend can spare it, 12rem fits "Recognition vs Fallback"
   (155px) on one line, so the two card headers line up. 486px keeps the
   trend's plot above the 234px its five date labels need. */
@container pbody (min-width: 486px) {
  .panel__charts {
    grid-template-columns: minmax(0, 1fr) 12rem;
  }
}

.pcard {
  padding: 0.875rem;
  border-radius: 0.75rem;
  border: 1px solid var(--glass-line);
  background-color: rgb(17 26 43 / 0.7);
}

.pcard__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: var(--wdth-sub);
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--fg);
}

.pcard__sub {
  margin-top: 0.125rem;
  font-size: 0.65625rem;
  line-height: 1.4;
  color: var(--fg-muted);
}

/* ---- Session trend ----
   Axis labels sit outside the SVG, which is stretched to fit
   (preserveAspectRatio="none" + non-scaling strokes), so text never
   distorts. Each label is placed on its gridline or day, not spread evenly -
   Aug 22 is day 8 of 30, not a quarter of the way along. */
.ptrend {
  container: ptrend / inline-size;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.5rem;
  row-gap: 0.4375rem;
  margin-top: 0.875rem;
}

.ptrend__y {
  position: relative;
  grid-row: 1;
  grid-column: 1;
  width: 0.875rem;
  font-family: var(--font-mono);
  font-size: 0.59375rem;
  color: var(--fg-dim);
}

.ptrend__y span {
  position: absolute;
  right: 0;
  line-height: 1;
  transform: translateY(-50%);
}

.ptrend__plot {
  grid-row: 1;
  grid-column: 2;
  height: 13.5rem;
}

/* Stacked, the trend has the full width and doesn't need the height. */
@container pbody (max-width: 369px) {
  .ptrend__plot {
    height: 10rem;
  }
}

/* The smoothed line can overshoot its peak by a fraction of a unit. */
.ptrend__plot svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ptrend__x {
  position: relative;
  grid-row: 2;
  grid-column: 2;
  height: 0.625rem;
  font-family: var(--font-mono);
  font-size: 0.59375rem;
  color: var(--fg-dim);
}

.ptrend__x span {
  position: absolute;
  top: 0;
  line-height: 1;
  white-space: nowrap;
  transform: translateX(-50%);
}

.ptrend__x span:first-child {
  transform: none;
}

.ptrend__x span:last-child {
  transform: translateX(-100%);
}

/* Five 35px date labels need a ~234px plot before Aug 22 collides with
   Aug 15; narrower than that, keep the ends and the middle. */
@container ptrend (max-width: 255px) {
  .ptrend__x span:nth-child(2),
  .ptrend__x span:nth-child(4) {
    display: none;
  }
}

/* ---- Recognition vs fallback ---- */
.pdonut {
  container: pdonut / inline-size;
  display: flex;
  flex-direction: column;
}

.pdonut__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  margin-top: 0.875rem;
}

/* Stacked under the trend on a narrow panel, the card is wide and short, so
   the ring and legend sit side by side instead of stacking. */
@container pdonut (min-width: 15rem) {
  .pdonut__body {
    flex-direction: row;
    gap: 1.5rem;
  }
}

.pdonut__ring {
  flex-shrink: 0;
  width: 6.75rem;
  height: 6.75rem;
}

.pdonut__ring circle {
  fill: none;
  stroke-width: 15;
}

.pdonut__rec {
  stroke: var(--accent);
}

/* The amber the Review log uses for anything that needed a person. */
.pdonut__fb {
  stroke: #f0b45e;
}

.pdonut__legend {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
  padding: 0;
  list-style: none;
  font-size: 0.65625rem;
  font-variant-numeric: tabular-nums;
  color: var(--fg-muted);
}

.pdonut__legend li {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  white-space: nowrap;
}

.pdonut__key {
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-pill);
}

.pdonut__key--rec {
  background-color: var(--accent);
}

.pdonut__key--fb {
  background-color: #f0b45e;
}

/* --------------------------------------------------------------------------
   Proof strip
   -------------------------------------------------------------------------- */
.proof {
  padding-block: var(--sp-8);
}

@media (min-width: 768px) {
  .proof {
    padding-block: 5rem;
  }
}

.proof__grid {
  display: grid;
  gap: var(--sp-7);
}

@media (min-width: 640px) {
  .proof__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-6);
  }
}

/* --------------------------------------------------------------------------
   Final CTA
   -------------------------------------------------------------------------- */
.final-cta {
  border-top: 1px solid var(--glass-line);
  padding-block: 7rem;
}

@media (min-width: 768px) {
  .final-cta {
    padding-block: 9rem;
  }
}

.final-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 48rem;
  margin-inline: auto;
}

.final-cta__title {
  margin-top: 1.75rem;
}

.final-cta__lede {
  margin-top: var(--sp-5);
  max-width: 36rem;
  color: var(--fg-muted);
}

.final-cta__actions {
  margin-top: 2.5rem;
  width: 100%;
}

@media (min-width: 640px) {
  .final-cta__actions {
    width: auto;
  }
}

/* Homepage final CTA: tighter than the shared .final-cta, and the two lede
   paragraphs run wider so they take fewer lines. */
#start.final-cta {
  padding-block: 4.5rem;
}

@media (min-width: 768px) {
  #start.final-cta {
    padding-block: 5.5rem;
  }
}

#start .final-cta__title {
  margin-top: 1.25rem;
}

#start .final-cta__lede {
  max-width: 46rem;
  margin-top: 1rem;
}

#start .final-cta__actions {
  margin-top: 2rem;
}

#start .final-cta__points {
  margin-top: 1.5rem;
}

/* The homepage's closing beat: the hero's three verbs restated as what the
   agent does. Full-strength sans with accent check icons, not the hero's
   small dim reassurance line, so it reads as a conclusion, not fine print. */
.final-cta__points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.75rem;
  margin-top: var(--sp-6);
}

.final-cta__points li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--fg);
}

.final-cta__points svg {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   Testimonials - three quote cards before the final CTA

   Each card: rating, one result figure, the quote, then who said it with
   their organization's logo. Stars use the warm status gold (#f0b45e) rather
   than brand blue, so they read as a rating and not as another accent.
   -------------------------------------------------------------------------- */
.testimonials__grid {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-7);
}

@media (min-width: 900px) {
  .testimonials__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.quote-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.75rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--glass-line);
  background-color: var(--glass);
  backdrop-filter: blur(12px);
}

@media (min-width: 640px) {
  .quote-card {
    padding: 2rem;
  }
}

.quote-card__stars {
  display: flex;
  gap: 0.25rem;
  color: #f0b45e;
}

.quote-card__stars svg {
  width: 1.125rem;
  height: 1.125rem;
}

.quote-card__stat {
  margin-top: 1.5rem;
}

.quote-card__stat-value {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: var(--wdth-heading);
  font-size: 2.25rem;
  line-height: 1.1;
  color: var(--accent);
}

.quote-card__stat-label {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--fg-muted);
}

.quote-card__quote {
  flex: 1;
  margin-top: 1.25rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--fg);
}

.quote-card__person {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--glass-line);
}

/* Slot for the customer's logo; the dashed outline marks it as unfilled. */
.quote-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  border: 1px dashed var(--glass-line-strong);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.quote-card__name {
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--fg);
}

.quote-card__role {
  display: block;
  font-size: 0.8125rem;
  color: var(--fg-muted);
}

/* --------------------------------------------------------------------------
   Request pages: Get a Demo (demo/) and Talk to an expert (contact/)

   Both share this layout: text left, form card right from 1024px; stacked
   below with the text first.
   -------------------------------------------------------------------------- */
.request-page__grid {
  display: grid;
  gap: var(--sp-7);
  align-items: start;
}

@media (min-width: 1024px) {
  .request-page__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 32rem);
    gap: var(--sp-8);
  }
}

.request-page__intro {
  max-width: 36rem;
}

.request-page__list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: var(--sp-6);
}

.request-page__list li {
  display: flex;
  gap: 0.875rem;
}

.request-page__list svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.1875rem;
  color: var(--accent);
}

.request-page__list strong {
  display: block;
  font-weight: 500;
  color: var(--fg);
}

.request-page__list strong + span {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--fg-muted);
}

.request-page__call {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--glass-line);
  font-size: 0.9375rem;
  color: var(--fg-muted);
}

.request-page__call a,
.request-form__error a,
.request-done a:not(.btn) {
  font-weight: 500;
  color: var(--accent);
}

.request-page__call a:hover,
.request-form__error a:hover,
.request-done a:not(.btn):hover {
  text-decoration: underline;
}

.request-card {
  padding: var(--sp-5);
  border-radius: var(--radius-frame);
  border: 1px solid var(--glass-line-strong);
  background-color: rgb(17 26 43 / 0.72);
  box-shadow: 0 30px 70px -30px rgb(0 0 0 / 0.9);
  backdrop-filter: blur(12px);
}

@media (min-width: 640px) {
  .request-card {
    padding: var(--sp-6);
  }
}

.request-form {
  display: grid;
  gap: 1.125rem;
}

.request-form[hidden],
.request-done[hidden],
.request-form__error[hidden] {
  display: none;
}

.request-form__row {
  display: grid;
  gap: 1.125rem;
}

@media (min-width: 560px) {
  .request-form__row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
  min-width: 0;
}

.field__label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fg);
}

.field__opt {
  font-weight: 400;
  color: var(--fg-muted);
}

/* Required marker; the input's own `required` is what assistive tech reads. */
.field__req {
  color: var(--accent);
}

/* Fill sits darker than the card so --fg-dim placeholders keep ~5:1. */
.field__input {
  width: 100%;
  min-height: 2.875rem;
  padding: 0.625rem 0.875rem;
  border-radius: 0.75rem;
  border: 1px solid var(--glass-line-strong);
  background-color: rgb(7 10 18 / 0.7);
  font-size: 0.9375rem;
  color: var(--fg);
  transition: border-color 0.15s ease;
}

.field__input::placeholder {
  color: var(--fg-dim);
}

.field__input:hover {
  border-color: rgb(255 255 255 / 0.24);
}

.field__input:focus-visible {
  border-color: var(--accent);
  outline-offset: 2px;
}

/* A row of radio options drawn as buttons ("Best time to call"). The real
   radio stays in the tab order, just invisible, so arrow keys and screen
   readers treat the row as one radio group. */
.choice {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.choice .field__label {
  margin-bottom: 0.4375rem;
  padding: 0;
}

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

.choice__option {
  position: relative;
}

.choice__option input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.choice__option span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.875rem;
  padding-inline: 0.5rem;
  border-radius: 0.75rem;
  border: 1px solid var(--glass-line-strong);
  background-color: rgb(7 10 18 / 0.7);
  font-size: 0.9375rem;
  color: var(--fg-muted);
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.choice__option:hover span {
  border-color: rgb(255 255 255 / 0.24);
}

.choice__option input:checked + span {
  border-color: rgb(50 171 222 / 0.6);
  background-color: rgb(50 171 222 / 0.14);
  color: var(--fg);
}

.choice__option input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

textarea.field__input {
  min-height: 7rem;
  resize: vertical;
  line-height: 1.55;
}

select.field__input {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 1rem;
  cursor: pointer;
}

/* "Select..." reads as a placeholder until something is chosen. */
select.field__input:has(option[value='']:checked) {
  color: var(--fg-dim);
}

/* The open dropdown list is drawn by the OS; without these it can come up
   white with light text on Windows. */
select.field__input option {
  background-color: var(--ink);
  color: var(--fg);
}

.request-form__error {
  padding: 0.75rem 0.875rem;
  border-radius: 0.75rem;
  border: 1px solid rgb(243 138 157 / 0.35);
  background-color: rgb(243 138 157 / 0.1);
  font-size: 0.875rem;
  line-height: 1.55;
  color: #f38a9d;
}

.request-form__submit {
  width: 100%;
  margin-top: 0.25rem;
}

.request-form__submit:disabled {
  cursor: progress;
  filter: saturate(0.6);
}

.request-done {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
}

/* Focus lands here only so screen readers announce the result; it is not
   interactive, so no ring. */
.request-done:focus {
  outline: none;
}

.request-done__icon {
  width: 3rem;
  height: 3rem;
  color: #5fd0a8;
}

.request-done p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--fg-muted);
}

.request-done .btn {
  margin-top: 0.5rem;
}

/* --------------------------------------------------------------------------
   .cap-card - shared icon-well-plus-title-plus-body component

   Originally built for a "Capability cards" section (since removed) and now
   reused on its own: #response's cards use the full .cap-card, and
   #security's cards use only the .cap-card__icon tile. Kept deliberately
   minimal - .cap-grid and the eyebrow/divider/checklist parts that section
   alone used (cap-card__eyebrow, __divider, __list, __item, __check) were
   removed with it, since nothing else referenced them.
   -------------------------------------------------------------------------- */
.cap-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.75rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--glass-line);
  background-color: var(--glass);
  backdrop-filter: blur(12px);
  transition: border-color 0.2s ease;
}

@media (min-width: 640px) {
  .cap-card {
    padding: 2rem;
  }
}

.cap-card:hover {
  border-color: rgb(255 255 255 / 0.2);
}

/* Dot-matrix / grid-line texture, white marks at 0.13 (dots) and 0.075
   (lines) alpha. On the card's dark navy ground those land about 31/255
   above the fill: visible as texture, never loud enough to read as noise.

   Scoped to #response rather than .cap-card itself, since that class is also
   used bare for #security's icon tile (.cap-card__icon only, no card shell)
   - this must not reach that usage. */
#response .cap-card {
  position: relative;
  isolation: isolate;
}

#response .cap-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image: radial-gradient(rgb(255 255 255 / 0.13) 1.1px, transparent 1.1px);
  background-size: 13px 13px;
  -webkit-mask-image: linear-gradient(to bottom right, #000 10%, transparent 78%);
  mask-image: linear-gradient(to bottom right, #000 10%, transparent 78%);
}

#response .cap-card > * {
  position: relative;
  z-index: 1;
}

/* nth-child(even) checkerboards cleanly at the 4-across desktop breakpoint
   (dots, lines, dots, lines in one row) - this grid's primary view, per the
   comment on .resp__row below. */
#response .resp__row > li:nth-child(even) .cap-card::before {
  background-image:
    linear-gradient(to right, rgb(255 255 255 / 0.075) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / 0.075) 1px, transparent 1px);
  background-size: 26px 26px;
}

/* Icon well - rounded square, faint cyan wash, soft outer glow */
.cap-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 0.875rem;
  border: 1px solid rgb(50 171 222 / 0.25);
  background-color: rgb(50 171 222 / 0.08);
  box-shadow: 0 0 24px -6px rgb(50 171 222 / 0.35);
  color: var(--accent);
}

.cap-card__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.cap-card__title {
  margin-top: 0.75rem;
}

.cap-card__body {
  margin-top: 0.875rem;
  color: var(--fg-muted);
  font-size: 0.9375rem;
  flex: 1;
}

/* Light-band variant. #security is the only surface-light section that uses
   this component, and only the icon tile - bright cyan is 2.62:1 on white,
   so it drops to the darker accent-ink derivative there. */
.surface-light .cap-card__icon {
  border-color: rgb(23 107 138 / 0.25);
  background-color: rgb(23 107 138 / 0.08);
  box-shadow: none;
  color: var(--accent-ink);
}

/* #response sits on the light band (same ground as #security) but keeps its
   dark cards. On the old dark ground they composited to rgb(19 22 30) and
   read as grey; on the light band that value reads black, so the solid fill
   here is lifted to a slate grey that keeps the same impression. Title and icon are pulled back from their light-band
   variants. */
#response.surface-light .cap-card {
  background-color: rgb(36 42 54);
  color: var(--fg);
}

#response.surface-light .cap-card__title {
  color: var(--fg);
}

#response.surface-light .cap-card__icon {
  border-color: rgb(50 171 222 / 0.25);
  background-color: rgb(50 171 222 / 0.08);
  box-shadow: 0 0 24px -6px rgb(50 171 222 / 0.35);
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   Configure tabs - vertical tab list with a demo panel

   Adapted from a reference screenshot: tab rail on the left, one visual per
   tab on the right. Built on the WAI-ARIA tabs pattern rather than as
   click-only divs, so arrow keys move between tabs and the panel is properly
   associated with its control.
   -------------------------------------------------------------------------- */
.tabs {
  display: grid;
  gap: var(--sp-6);
  margin-top: 3.5rem;
  border-radius: var(--radius-frame);
  border: 1px solid var(--glass-line);
  background-color: rgb(17 26 43 / 0.45);
  overflow: hidden;
}

@media (min-width: 900px) {
  .tabs {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: 0;
  }
}

/* ---- Left rail ---- */
.tabs__list {
  display: flex;
  flex-direction: column;
}

@media (min-width: 900px) {
  .tabs__list {
    border-right: 1px solid var(--glass-line);
  }

  /* Let the tabs share the rail's full height rather than stopping short and
     leaving dead space under the last one, which is how the reference does
     it. Capped so a long panel cannot stretch them absurdly tall. */
  .tabs__tab {
    flex: 1 1 auto;
    max-height: 9rem;
    display: flex;
    align-items: center;
  }
}

.tabs__tab {
  position: relative;
  width: 100%;
  padding: 1.25rem 1.5rem;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: var(--wdth-sub);
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
  /* --fg-dim is 5.50:1 on the tab rail's ground - readable, but clearly
     recessive next to the selected tab's --fg. */
  color: var(--fg-dim);
  border-bottom: 1px solid var(--glass-line);
  transition: color 0.18s ease, background-color 0.18s ease;
}

.tabs__list .tabs__tab:last-child {
  border-bottom: none;
}

.tabs__tab:hover {
  color: var(--fg-muted);
  background-color: rgb(255 255 255 / 0.03);
}

/* The accent bar marking the selected tab. Uses the inline-start edge at all
   widths - the tabs stack rather than becoming horizontal on mobile, so the
   bar stays on the left and needs no responsive variant. */
.tabs__tab::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--accent);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.tabs__tab[aria-selected='true'] {
  color: var(--fg);
  background-color: rgb(255 255 255 / 0.06);
}

.tabs__tab[aria-selected='true']::before {
  opacity: 1;
}

/* ---- Right panel ---- */
.tabs__panels {
  padding: var(--sp-5);
}

@media (min-width: 640px) {
  .tabs__panels {
    padding: var(--sp-7);
  }
}

.tabs__panel[hidden] {
  display: none;
}

.tabs__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tabs__copy {
  margin-top: var(--sp-6);
  max-width: 34rem;
  text-align: center;
  color: var(--fg-muted);
  font-size: 0.9375rem;
}

/* The shared copy block and closer, inside a centred tab panel. The panel is a
   flex column with align-items:center, so an item shrinks to its own text -
   width:100% is what makes them hold the same 34rem measure as .tabs__copy
   rather than stopping short of it. */
.tabs__panel .copy-block,
.tabs__panel .copy-punch {
  width: 100%;
  max-width: 34rem;
  text-align: center;
}

/* Matches .tabs__copy rather than the block's own dark-section sizing, so a
   panel with two paragraphs reads the same as one with a single <p>. */
.tabs__panel .copy-block {
  margin-top: var(--sp-6);
  gap: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.65;
}

/* ---- The demo frame shared by all four panels ---- */
.demo {
  position: relative;
  width: 100%;
  max-width: 26rem;
  padding: 1.25rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--glass-line-strong);
  background-color: var(--ink);
  box-shadow: 0 24px 60px -28px rgb(0 0 0 / 0.9);
}

.demo__glow {
  position: absolute;
  inset: -1.5rem;
  border-radius: 32px;
  background: radial-gradient(ellipse at 50% 40%, rgb(50 171 222 / 0.14), transparent 65%);
  pointer-events: none;
}

.demo__label {
  color: var(--fg-dim);
}

.demo__rows {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.demo__row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.625rem;
  border: 1px solid var(--glass-line);
  background-color: var(--glass);
  font-size: 0.8125rem;
  color: var(--fg-muted);
}

.demo__row svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--accent);
}

.demo__row-meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--fg-dim);
}

/* Guardrails: the agent's numbered rules, each in a row like .demo__row,
   numbered in mono accent like the copy-steps elsewhere on the page. */
.demo__rules {
  counter-reset: rule;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0;
  list-style: none;
}

.demo__rules li {
  counter-increment: rule;
  display: flex;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.625rem;
  border: 1px solid var(--glass-line);
  background-color: var(--glass);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--fg-muted);
}

.demo__rules li::before {
  content: counter(rule);
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.65;
  color: var(--accent);
}

.demo__foot {
  margin-top: 1rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--glass-line);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--fg-dim);
}

.demo__foot--sync {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--fg-muted);
}

.demo__foot--sync svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: #5fd0a8;
}

/* Embed snippet, used by the website integration panel */
/* Wider than the shared 26rem card so the snippet holds to two lines. */
#panel-integration .demo {
  max-width: 36rem;
}

.demo__code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.demo__copy {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.625rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--glass-line-strong);
  font-size: 0.6875rem;
  color: var(--fg-muted);
}

.demo__copy svg {
  width: 0.75rem;
  height: 0.75rem;
}

.demo__code {
  margin-top: 1rem;
  padding: 0.875rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--glass-line);
  background-color: rgb(0 0 0 / 0.35);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--fg-muted);
  /* Broken by hand into two lines; scrolls sideways rather than rewrapping
     where the card is too narrow. */
  white-space: pre;
  overflow-x: auto;
}

.tok-tag { color: var(--accent); }
.tok-attr { color: var(--fg); }
.tok-str { color: #5fd0a8; }

/* Chat bubbles, used by the guardrails and fine-tune panels */
.demo__msg {
  padding: 0.75rem 0.875rem;
  border-radius: 0.875rem;
  font-size: 0.8125rem;
  line-height: 1.55;
}

.demo__msg--in {
  background-color: var(--glass);
  border: 1px solid var(--glass-line);
  color: var(--fg-muted);
}

.demo__msg--out {
  background-color: rgb(50 171 222 / 0.1);
  border: 1px solid rgb(50 171 222 / 0.25);
  color: var(--fg);
}

.demo__msg--user {
  align-self: flex-end;
  max-width: 80%;
  background-color: rgb(255 255 255 / 0.08);
  color: var(--fg);
}

.demo__msg--was {
  border-style: dashed;
  color: var(--fg-dim);
  text-decoration: line-through;
  text-decoration-color: rgb(255 255 255 / 0.25);
}

/* Tone swatches */
.demo__swatches {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.demo__swatch {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.375rem;
  border: 1px solid rgb(255 255 255 / 0.14);
}

.demo__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 1rem;
}

.demo__chip {
  padding: 0.3125rem 0.625rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--glass-line);
  font-size: 0.6875rem;
  color: var(--fg-dim);
}

.demo__chip--on {
  border-color: rgb(50 171 222 / 0.4);
  background-color: rgb(50 171 222 / 0.12);
  color: var(--accent);
}

/* A picture of a dropdown, not a control: no pointer cursor, so it does not
   promise a click that does nothing. */
.demo__chip--select {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.chip__caret {
  display: block;
  flex-shrink: 0;
  color: var(--fg-dim);
}

/* --------------------------------------------------------------------------
   Lead capture - header paired with the widget, table below

   The header and widget share a .split row (layout.css); the table keeps
   its original full-width slot underneath, on its own margin.
   -------------------------------------------------------------------------- */
.contacts {
  margin-top: var(--sp-6);
}

/* Shared long-copy block, used by #capture and #actions. Both carry more
   than the usual eyebrow-title-lede, and both sit inside .section-head so
   they inherit its 40rem measure rather than the full container width. */
.copy-block {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.25rem;
  /* 1rem rather than 0.9375: this is the only long-form prose on the page and
     it was set smaller than the copy it sits above. */
  font-size: 1rem;
  line-height: 1.75;
  color: var(--fg-muted);
}

/* The three things it does, lifted out of the paragraph they were buried in.
   Numbers are mono and accent-coloured, so the eye has three places to land
   before it commits to reading anything. */
.copy-steps {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-left: 0;
  list-style: none;
}

.copy-steps li {
  display: flex;
  align-items: baseline;
  gap: 0.875rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--fg);
}

.copy-step-n {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

/* The three-beat closer. Display face and full --fg so it lands as a
   statement rather than a third paragraph. */
.copy-punch {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--glass-line);
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: var(--wdth-sub);
  font-size: 1.0625rem;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--fg);
}

/* ---- The qualifying conversation ---- */
/* Wider than the shared 23rem widget: this conversation runs long, and
   the column beside the header has the room. */
#capture .widget {
  max-width: 30rem;
}

.widget {
  width: 100%;
  max-width: 23rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--glass-line-strong);
  background-color: var(--ink);
  box-shadow: 0 30px 70px -30px rgb(0 0 0 / 0.95);
  overflow: hidden;
}

.widget__bar {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  background-image: linear-gradient(100deg, var(--brand), var(--accent-deep));
  color: #fff;
}

.widget__bar-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-pill);
  background-color: rgb(255 255 255 / 0.2);
}

.widget__bar-mark svg {
  width: 1rem;
  height: 1rem;
}

.widget__bar-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: var(--wdth-sub);
  font-size: 0.9375rem;
}

.widget__body {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 1rem;
}

.widget__msg {
  max-width: 85%;
  padding: 0.625rem 0.75rem;
  border-radius: 0.875rem;
  font-size: 0.8125rem;
  line-height: 1.5;
}

.widget__msg--bot {
  align-self: flex-start;
  background-color: var(--glass);
  border: 1px solid var(--glass-line);
  color: var(--fg-muted);
}

.widget__msg--user {
  align-self: flex-end;
  background-image: linear-gradient(100deg, var(--brand), var(--accent-deep));
  color: #fff;
}

.widget__input {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 1rem 1rem;
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--glass-line);
  background-color: var(--glass);
  font-size: 0.8125rem;
  color: var(--fg-dim);
}

.widget__send {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-pill);
  background-image: linear-gradient(100deg, var(--brand), var(--accent-deep));
  color: #fff;
  flex-shrink: 0;
}

.widget__send svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* ---- The contacts table ---- */
.contacts {
  width: 100%;
  border-radius: var(--radius-card);
  border: 1px solid var(--glass-line);
  background-color: var(--ink);
  overflow: hidden;
}

.contacts__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--glass-line);
}

.contacts__search {
  flex: 1;
  min-width: 10rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--glass-line);
  background-color: var(--glass);
  font-size: 0.8125rem;
  color: var(--fg-dim);
}

.contacts__search svg {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

.contacts__scroll {
  overflow-x: auto;
}

.contacts__table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  text-align: left;
}

.contacts__table th {
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--glass-line);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.contacts__table td {
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.05);
  font-size: 0.8125rem;
  color: var(--fg-muted);
}

.contacts__table tbody tr:last-child td {
  border-bottom: none;
}

.contacts__name {
  color: var(--fg);
  font-weight: 500;
}

.contacts__mono {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--fg-dim);
}

/* Outcome badges. The reference used four unrelated hues; these stay inside
   the brand ramp so the table does not turn into a colour chart. */
.tag {
  display: inline-block;
  padding: 0.1875rem 0.5rem;
  border-radius: var(--radius-pill);
  font-size: 0.6875rem;
  white-space: nowrap;
  border: 1px solid transparent;
}

.tag--gift {
  background-color: rgb(50 171 222 / 0.14);
  border-color: rgb(50 171 222 / 0.3);
  color: var(--accent);
}

.tag--volunteer {
  background-color: rgb(31 97 204 / 0.18);
  border-color: rgb(31 97 204 / 0.4);
  /* #7FB0F0 rather than --brand: brand blue is 3.25:1 on ink and fails for
     text this size. This lightened tint measures 7.1:1. */
  color: #7fb0f0;
}

.tag--program {
  background-color: rgb(255 255 255 / 0.07);
  border-color: var(--glass-line-strong);
  color: var(--fg-muted);
}

.tag--none {
  background-color: transparent;
  border-color: var(--glass-line);
  color: var(--fg-dim);
}

/* --------------------------------------------------------------------------
   Actions - the configuration panel paired with what it produces

   A .split row (layout.css): the header and the panel share the main
   column, the chat is the pinned aside. The two halves have to read as cause
   and effect, and pinning keeps the chat beside the panel once the reader
   scrolls down to it. Below 1024px it stacks control-above-result.

   Contrast note. These rows sit on a raised surface, and --fg-dim measures
   4.56:1 on the selected row - passing, but with no margin. Sub-labels
   therefore use --fg-muted (6.40:1 at worst here); --fg-dim is kept for the
   unselected row names, which are 16px/700 and recessive by intent.
   -------------------------------------------------------------------------- */

/* ---- Left: the panel you configure ---- */
.actions__panel {
  /* The head ends on a closing line that needs air before the panel. */
  margin-top: 3.5rem;
  padding: var(--sp-5);
  border-radius: var(--radius-frame);
  border: 1px solid var(--glass-line);
  background-color: rgb(17 26 43 / 0.45);
}

.actions__panel-label {
  margin-bottom: var(--sp-4);
  color: var(--fg-muted);
}

.actions__list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.action {
  position: relative;
  display: flex;
  gap: 0.75rem;
  width: 100%;
  padding: 0.9375rem 1rem;
  text-align: left;
  border-radius: var(--radius-card);
  border: 1px solid var(--glass-line);
  background-color: rgb(255 255 255 / 0.02);
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.action:hover {
  background-color: rgb(255 255 255 / 0.05);
}

.action[aria-selected='true'] {
  border-color: rgb(50 171 222 / 0.45);
  background-color: rgb(255 255 255 / 0.06);
}

/* The tick. Decorative - it renders the product's checked state, while the
   accent border above carries which row is being previewed. Brand fill on
   this ground is 3.14:1, over the 3:1 bar for a non-text indicator. */
.action__box {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.125rem;
  border-radius: 6px;
  background-color: var(--brand);
  color: #fff;
}

.action__box svg {
  width: 0.8125rem;
  height: 0.8125rem;
}

.action__text {
  display: block;
  min-width: 0;
}

.action__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: var(--wdth-sub);
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--fg-dim);
  transition: color 0.18s ease;
}

.action[aria-selected='true'] .action__name {
  color: var(--fg);
}

/* The config field, revealed on the selected row only - the same behaviour as
   the reference panel, where the focused action expands to show its URL. */
.action__field {
  display: none;
  margin-top: 0.75rem;
}

.action[aria-selected='true'] .action__field {
  display: block;
}

.action__field-label {
  display: block;
  margin-bottom: 0.375rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.action__field-input {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 0.625rem;
  border: 1px solid var(--glass-line);
  background-color: rgb(0 0 0 / 0.3);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--fg-muted);
  overflow-wrap: anywhere;
}

.action__note {
  display: block;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--fg-muted);
}

.actions__foot {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--glass-line);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--fg-dim);
}

/* ---- Right: what the visitor gets ---- */
.actions__preview {
  display: flex;
  justify-content: center;
}

/* A fixed floor stops the column jumping as conversations of different
   lengths swap in. The widget is capped at 23rem wide, so its height does not
   change with the viewport above this breakpoint: the tallest of the four
   measures 365px, and 25rem clears it without leaving a visible void under
   the shortest. Below 900px the frame simply grows. */
@media (min-width: 900px) {
  .actions__preview {
    min-height: 25rem;
    align-items: flex-start;
  }
}

.actions__view[hidden] {
  display: none;
}

.actions__view {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* The CTA the agent drops into the conversation. A span, not a button - it is
   part of a mockup, and nothing here is clickable. */
.widget__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  margin-top: 0.25rem;
  padding: 0.5rem 0.9375rem;
  border-radius: var(--radius-pill);
  background-image: linear-gradient(100deg, var(--brand), var(--accent-deep));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: var(--wdth-sub);
  font-size: 0.8125rem;
  box-shadow: 0 8px 20px -8px rgb(50 171 222 / 0.6);
}

.widget__cta svg {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

.actions__breadth {
  margin-top: var(--sp-5);
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--fg-dim);
}

/* --------------------------------------------------------------------------
   Privacy - the reference's two-column security panel, on the light band

   Left column states the position, right column is one card divided into
   rows rather than four separate cards. The divided card is what makes the
   reference read as a single statement instead of a feature grid.

   Icons use the same .cap-card__icon tile as the "What it does" section
   rather than a treatment of their own, so the two read as one system. That
   class already carries a .surface-light variant, which is what keeps the
   colour honest here: --accent is 2.62:1 on white, so on this band the tile
   switches to --accent-ink at 5.99:1.
   -------------------------------------------------------------------------- */
.privacy {
  display: grid;
  gap: var(--sp-6);
}

@media (min-width: 900px) {
  .privacy {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    gap: var(--sp-7);
    align-items: start;
  }

  /* The card runs taller than the statement beside it. Sticky keeps the
     heading in view on short viewports instead of leaving it scrolled off
     while the reader is still working through the rows. */
  .privacy__intro {
    position: sticky;
    top: 6.5rem;
  }
}

.privacy__lede {
  margin-top: var(--sp-4);
  color: var(--body);
}

/* ---- The divided card ---- */
.privacy__card {
  border-radius: var(--radius-frame);
  border: 1px solid var(--glass-line);
  /* Same slate as #response's cards on this band. */
  background-color: rgb(36 42 54);
  /* Keeps the row hairlines inside the corner radius. */
  overflow: hidden;
}

.privacy__row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-bottom: 1px solid var(--glass-line);
}

/* Same dot / grid-line texture as #response's cards, alternating per row
   the way those alternate per card. */
.privacy__row {
  position: relative;
  isolation: isolate;
}

.privacy__row::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgb(255 255 255 / 0.13) 1.1px, transparent 1.1px);
  background-size: 13px 13px;
  -webkit-mask-image: linear-gradient(to bottom right, #000 10%, transparent 78%);
  mask-image: linear-gradient(to bottom right, #000 10%, transparent 78%);
}

.privacy__row:nth-child(even)::before {
  background-image:
    linear-gradient(to right, rgb(255 255 255 / 0.075) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / 0.075) 1px, transparent 1px);
  background-size: 26px 26px;
}

.privacy__card .privacy__row:last-child {
  border-bottom: none;
}

@media (min-width: 640px) {
  .privacy__row {
    padding: var(--sp-6);
  }
}

.privacy__copy {
  min-width: 0;
  flex: 1 1 auto;
}

.surface-light .privacy__title {
  color: var(--fg);
}

.privacy__text {
  margin-top: 0.625rem;
  max-width: 30rem;
  color: var(--fg-muted);
  font-size: 0.9375rem;
  line-height: 1.65;
}

/* ---- Icons ----
   The tile itself is .cap-card__icon, borrowed wholesale from "What it does"
   so the two sections share one icon language. Only the flex behaviour is
   specific to sitting at the head of a row rather than above a card.
   Decorative: every row reads with the icon removed. */
.surface-light .privacy__row .cap-card__icon {
  border-color: rgb(50 171 222 / 0.25);
  background-color: rgb(50 171 222 / 0.08);
  box-shadow: 0 0 24px -6px rgb(50 171 222 / 0.35);
  color: var(--accent);
}

.privacy__row .cap-card__icon {
  flex: 0 0 auto;
  /* Optically aligns the tile with the cap height of the title beside it. */
  margin-top: 0.125rem;
}

/* --------------------------------------------------------------------------
   Review - the conversation log, and the one row that needs a person

   Status hues deliberately leave the brand palette. A log is scanned, not
   read, and four states rendered in four shades of the same blue cannot be
   told apart at a glance. Each is checked against the row it sits on - the
   flagged row is the lightest ground at rgb(26,33,48), so that is the number
   quoted:

     #5FD0A8 answered      8.48:1
     #F0B45E needs review  8.72:1
     #F38A9D escalated     6.84:1
     #94A3B8 language      6.27:1

   --fg-dim measures 4.47:1 on that row, under the bar, so body text in here
   uses --fg-muted throughout.
   -------------------------------------------------------------------------- */

/* Centred rather than left-aligned, and wider than .section-head--center's
   default 40rem - at this row's 1088px, 40rem centred would still leave
   roughly a quarter of the row empty on each side. 54rem keeps a clear
   margin either side (~97px at this width) while still reading as "the
   header takes the space", including for copy-block's two paragraphs,
   which is the longest-line content in here. */
#review .section-head--center {
  max-width: 54rem;
}

.logs {
  margin-top: var(--sp-7);
  border-radius: var(--radius-frame);
  border: 1px solid var(--glass-line);
  background-color: rgb(17 26 43 / 0.45);
  overflow: hidden;
}

/* ---- Toolbar ---- */
.logs__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  padding: var(--sp-4);
  border-bottom: 1px solid var(--glass-line);
}

@media (min-width: 640px) {
  .logs__bar {
    padding: var(--sp-5);
  }
}

.logs__search {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 14rem;
  min-width: 0;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--glass-line);
  background-color: var(--glass);
  font-size: 0.8125rem;
  color: var(--fg-muted);
}

.logs__search svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* Pushed to its own line below 900px so the controls do not wrap raggedly. */
.logs__count {
  flex: 1 0 100%;
  font-size: 0.8125rem;
  color: var(--fg-muted);
}

.logs__count strong {
  color: var(--fg);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 900px) {
  .logs__count {
    flex: 0 0 auto;
    margin-inline-start: auto;
  }
}

/* ---- The table ---- */
.logs__scroll {
  overflow-x: auto;
  container-type: inline-size;
}

.logs__table {
  width: 100%;
  min-width: 44rem;
  border-collapse: collapse;
  text-align: left;
}

.logs__table th {
  padding: 0.75rem var(--sp-4);
  border-bottom: 1px solid var(--glass-line);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  white-space: nowrap;
}

.logs__table td {
  padding: 0.8125rem var(--sp-4);
  border-bottom: 1px solid rgb(255 255 255 / 0.05);
  font-size: 0.875rem;
  color: var(--fg-muted);
  vertical-align: middle;
}

.logs__table tbody tr:last-child td {
  border-bottom: none;
}

.logs__q {
  color: var(--fg);
}

.logs__mono {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  white-space: nowrap;
}

.logs__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.logs__none {
  color: var(--fg-muted);
}

.logs__row:hover td {
  background-color: rgb(255 255 255 / 0.02);
}

/* The one row the agent wants you in. Lit from the start so it reads as
   flagged before anyone hovers or clicks. */
.logs__row--flagged td {
  background-color: rgb(255 255 255 / 0.05);
}

.logs__row--flagged:hover td {
  background-color: rgb(255 255 255 / 0.07);
}

/* ---- The disclosure control ---- */
.logs__open {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fg);
}

.logs__open:hover {
  color: var(--accent);
}

.logs__chevron {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  color: var(--accent);
  transition: transform 0.18s ease;
}

.logs__open[aria-expanded='true'] .logs__chevron {
  transform: rotate(90deg);
}

/* A soft ring off the arrow until the row has been opened once
   (main.js sets data-seen on first click). */
.logs__open:not([data-seen]) .logs__chevron {
  border-radius: 50%;
  animation: logs-pulse 2.4s ease-out infinite;
}

@keyframes logs-pulse {
  0% {
    box-shadow: 0 0 0 0 rgb(50 171 222 / 0.5);
  }
  70%,
  100% {
    box-shadow: 0 0 0 0.5rem rgb(50 171 222 / 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .logs__open:not([data-seen]) .logs__chevron {
    animation: none;
  }
}

/* ---- Badges ---- */
.lang,
.sig {
  display: inline-block;
  padding: 0.1875rem 0.5rem;
  border-radius: var(--radius-pill);
  border: 1px solid;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.4;
  white-space: nowrap;
}

.lang {
  border-color: var(--glass-line-strong);
  color: var(--fg-muted);
}

.sig--completed {
  border-color: rgb(95 208 168 / 0.35);
  background-color: rgb(95 208 168 / 0.1);
  color: #5fd0a8;
}

.sig--abandoned {
  border-color: rgb(240 180 94 / 0.35);
  background-color: rgb(240 180 94 / 0.1);
  color: #f0b45e;
}

.sig--escalated {
  border-color: rgb(243 138 157 / 0.35);
  background-color: rgb(243 138 157 / 0.1);
  color: #f38a9d;
}

.sig--active {
  border-color: rgb(50 171 222 / 0.35);
  background-color: rgb(50 171 222 / 0.1);
  color: var(--accent);
}

.sig--fallback {
  border-color: rgb(251 146 60 / 0.35);
  background-color: rgb(251 146 60 / 0.1);
  color: #fb923c;
}

/* ---- The expanded conversation ----
   A row under the one clicked. The inner box is pinned to the scroller's
   visible width so on a phone it does not ride the table's sideways scroll. */
.logs__detail[hidden] {
  display: none;
}

.logs__table .logs__detail > td {
  padding: 0;
  border-bottom: 1px solid var(--glass-line);
  background-color: rgb(7 10 18 / 0.5);
}

.logs__detail-in {
  position: sticky;
  left: 0;
  width: 100cqi;
  padding: var(--sp-4);
}

@media (min-width: 640px) {
  .logs__detail-in {
    padding: var(--sp-5);
  }
}

.convo {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.convo__msg {
  width: 78%;
  padding: 0.625rem 0.875rem 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid transparent;
}

.convo__msg--user {
  align-self: flex-end;
  background-color: rgb(50 171 222 / 0.08);
}

.convo__msg--bot {
  align-self: flex-start;
  background-color: rgb(255 255 255 / 0.05);
}

.convo__msg--fallback {
  border-color: rgb(251 146 60 / 0.45);
  background-color: rgb(251 146 60 / 0.12);
}

.convo__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--fg-muted);
}

.convo__time {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}

.convo__meta .sig {
  padding: 0.0625rem 0.4375rem;
  font-size: 0.625rem;
}

.convo__text {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--fg);
}

/* ---- The correction ----
   Beside the thread once the scroller is wide enough for two columns
   (.logs__scroll is the query container); below it on a phone. */
.teach {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--glass-line);
}

@container (min-width: 46rem) {
  .logs__detail-in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
    gap: var(--sp-5);
    align-items: start;
  }

  .teach {
    margin-top: 0;
    padding: var(--sp-4);
    border: 1px solid var(--glass-line);
    border-radius: 0.75rem;
    background-color: var(--glass);
  }
}

.teach__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.teach__input {
  margin-top: 0.5rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.625rem;
  border: 1px solid var(--glass-line-strong);
  background-color: rgb(0 0 0 / 0.3);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--fg-muted);
}

.teach__note {
  margin-top: 0.625rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--fg-muted);
}

/* ---- Footer ---- */
.logs__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--glass-line);
  font-size: 0.8125rem;
  color: var(--fg-muted);
}

.logs__page {
  display: flex;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.logs__page-on {
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   Analytics - Top Questions, beside the text

   After the product's own Top Questions screen: ranked question cards with
   their ask counts and answer confidence, then the same questions as a
   frequency chart. The product sets the two side by side; in half a row
   they stack. The aside of a .split row (layout.css).

   Every text colour is --fg or --fg-muted on these raised cards; the only
   --fg-dim is the chart's axis numbers, 4.95:1 here.
   -------------------------------------------------------------------------- */
.tq {
  padding: 1.125rem;
  border-radius: var(--radius-frame);
  border: 1px solid var(--glass-line-strong);
  background-color: var(--ink);
  box-shadow: 0 40px 120px -32px rgb(0 0 0 / 0.9);
}

.tq__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: var(--wdth-sub);
  font-size: 1.125rem;
  line-height: 1.25;
  color: var(--fg);
}

.tq__sub {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--fg-muted);
}

/* ---- The ranked list ----
   A fixed window onto four cards: three in full, the fourth faded out under
   the mask. The scrollbar beside it is drawn - see the markup - and sits in
   the frame's padding, so the cards run the same width as the chart below. */
.tq__scroll {
  position: relative;
  margin-top: 0.875rem;
}

.tq__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 16.5rem;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.75rem), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 2.75rem), transparent);
}

/* flex-shrink: 0, or the fixed-height column squeezes every card to fit
   rather than letting the fourth run past the bottom. */
.tq__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  padding: 0.8125rem 0.9375rem;
  border-radius: 0.875rem;
  border: 1px solid var(--glass-line);
  background-color: rgb(17 26 43 / 0.7);
}

.tq__rank {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-pill);
  background-color: rgb(50 171 222 / 0.12);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--accent);
}

.tq__body {
  min-width: 0;
}

.tq__q {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--fg);
}

.tq__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.5rem;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  line-height: 1.4;
}

.tq__asks {
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-pill);
  background-color: rgb(255 255 255 / 0.08);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}

/* The Answered green from the Review log, which is what Confident means. */
.tq__conf {
  padding: 0.0625rem 0.5rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgb(95 208 168 / 0.35);
  background-color: rgb(95 208 168 / 0.1);
  font-weight: 500;
  color: #5fd0a8;
}

.tq__when {
  color: var(--fg-muted);
}

.tq__scrollbar {
  position: absolute;
  top: 0;
  right: -0.6875rem;
  bottom: 0;
  width: 0.25rem;
  border-radius: var(--radius-pill);
  background-color: rgb(255 255 255 / 0.06);
}

.tq__scrollbar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 30%;
  border-radius: inherit;
  background-color: rgb(255 255 255 / 0.24);
}

/* ---- Frequency chart ----
   Label column, then bars on a 0-180 axis (the top question is 168). The
   gridlines and the axis are offset by the same --tq-label + --tq-gap as the
   bars, and every % here resolves against the same width - the chart's -
   so all three line up at any size. */
.tq__chart {
  --tq-label: min(42%, 10.5rem);
  --tq-gap: 0.625rem;
  margin-top: 0.75rem;
  padding: 0.875rem 1rem 0.75rem;
  border-radius: 0.875rem;
  border: 1px solid var(--glass-line);
  background-color: rgb(17 26 43 / 0.7);
}

.tq__chart-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: var(--wdth-sub);
  font-size: 0.875rem;
  line-height: 1.3;
  color: var(--fg);
}

.tq__chart-sub {
  margin-top: 0.125rem;
  font-size: 0.6875rem;
  line-height: 1.4;
  color: var(--fg-muted);
}

.tq__plot {
  position: relative;
  margin-top: 0.875rem;
}

/* Five dashed verticals at 0/25/50/75/100% of the bar area. */
.tq__grid {
  --tq-dash: repeating-linear-gradient(to bottom, rgb(255 255 255 / 0.09) 0 3px, transparent 3px 7px);
  position: absolute;
  top: -0.25rem;
  bottom: -0.25rem;
  right: 0;
  left: calc(var(--tq-label) + var(--tq-gap));
  background-image: var(--tq-dash), var(--tq-dash), var(--tq-dash), var(--tq-dash), var(--tq-dash);
  background-size: 1px 100%;
  background-position: 0 0, 25% 0, 50% 0, 75% 0, 100% 0;
  background-repeat: no-repeat;
}

.tq__bars {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tq__row {
  display: grid;
  grid-template-columns: var(--tq-label) minmax(0, 1fr);
  column-gap: var(--tq-gap);
  align-items: center;
  height: 1rem;
}

/* Right-aligned and cut with an ellipsis, as in the product. The full
   question and its count stay readable to screen readers. */
.tq__label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: right;
  font-size: 0.65625rem;
  color: var(--fg-muted);
}

/* Width is the count on the 180 axis. The gradient is sized to the whole
   axis rather than each bar, so all ten read as one ramp, not ten. */
.tq__bar {
  display: block;
  width: calc(var(--v) / 180 * 100%);
  height: 0.75rem;
  border-radius: 0 0.1875rem 0.1875rem 0;
  background-image: linear-gradient(90deg, var(--brand), var(--accent));
  background-size: calc(100% * 180 / var(--v)) 100%;
}

.tq__axis {
  position: relative;
  height: 0.75rem;
  margin-top: 0.5rem;
  margin-left: calc(var(--tq-label) + var(--tq-gap));
  font-family: var(--font-mono);
  font-size: 0.59375rem;
  color: var(--fg-dim);
}

.tq__axis span {
  position: absolute;
  top: 0;
  line-height: 1;
  transform: translateX(-50%);
}

/* --------------------------------------------------------------------------
   Response - four .cap-card cards in two labelled pairs

   The cards themselves are the "What it does" component, unchanged. All this
   block does is the pairing: two rows of two, each under a label, so the four
   read as "what they get" and "what you get" rather than as a flat list.
   -------------------------------------------------------------------------- */

.resp__row {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}

@media (min-width: 640px) {
  .resp__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Four across. Each card is about 280px at 1280, which is tight - these have
   no checklist under the body, so they stay short enough to carry it. */
@media (min-width: 1024px) {
  .resp__row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-4);
  }
}

/* .cap-card__title normally sits under an eyebrow that supplies the space
   below the icon well. With no eyebrow the title has to supply it itself. */
.cap-card__icon + .cap-card__title {
  margin-top: 2rem;
}

/* Six actions read as a run-on when they sit in a sentence. As labels the eye
   takes them in at once. Deliberately unlike the tappable chips in the
   mockups below - no fill, no hover - so they do not read as controls. */
.copy-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding-left: 0;
  list-style: none;
}

.copy-chips li {
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--glass-line-strong);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--fg);
}

/* Four concrete things a reader should be able to take in at once. Two
   columns rather than chips, because these are phrases rather than labels and
   pills would wrap awkwardly. Distinct from .copy-chips and .copy-steps so
   three consecutive sections do not use the same device. */
.copy-points {
  display: grid;
  gap: 0.625rem 1.5rem;
  margin-top: 1.25rem;
  padding-left: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .copy-points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.copy-points li {
  position: relative;
  padding-left: 1.125rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--fg);
}

.copy-points li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.6875em;
  width: 0.4375rem;
  height: 1px;
  background-color: var(--accent);
}

/* NOTE for any future reuse: every colour in this .copy-* family is picked for
   dark surfaces. On a light band --fg-muted falls to 2.43:1 and --fg to
   1.07:1, so a light-band override is required before using any of these
   there (--body is 9.71:1, --ink 17.75:1, and --accent-ink replaces --accent,
   which is only 2.62:1 on white). No light section uses them today, so the
   overrides are not carried here. */

/* --------------------------------------------------------------------------
   Homepage card panel style: navy fill, glossy top sheen, lit top-left rim
   and a soft drop shadow. The fill is solid #141f35 rather than translucent,
   so it looks the same on the light bands (#response, #security) as on the
   dark one (#testimonials). Kept last in the file so it wins over each
   card's own background.
   -------------------------------------------------------------------------- */
#response.surface-light .cap-card,
.privacy__card,
.quote-card {
  border-color: rgb(255 255 255 / 0.12);
  background-color: #141f35;
  background-image: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0.07),
    rgb(255 255 255 / 0) 55%
  );
  box-shadow:
    inset 1px 1px 0 rgb(255 255 255 / 0.1),
    inset 0 0 28px -8px rgb(50 171 222 / 0.12),
    0 18px 40px -24px rgb(0 0 0 / 0.9);
}

/* --------------------------------------------------------------------------
   404 page (404.html) - one centred message and two ways back, filling most
   of the screen so the footer does not ride up under a short page.
   -------------------------------------------------------------------------- */
.notfound {
  display: flex;
  align-items: center;
  min-height: 78vh;
}

.notfound .container {
  width: 100%;
}

.notfound__actions {
  justify-content: center;
  margin-top: 2.25rem;
}

/* --------------------------------------------------------------------------
   Legal pages (privacy/) - long-form reading text

   One narrow column at a comfortable line length (~70 characters), body copy
   in --fg-muted with headings in full --fg, and real bullets, since this is
   the one place on the site meant to be read top to bottom.
   -------------------------------------------------------------------------- */
.legal__body {
  max-width: 46rem;
}

.legal__updated {
  margin-top: var(--sp-4);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--fg-muted);
}

.legal__body h2 {
  margin-top: var(--sp-7);
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: var(--wdth-sub);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  line-height: 1.3;
  color: var(--fg);
}

.legal__body p,
.legal__body ul {
  margin-top: var(--sp-4);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--fg-muted);
}

.legal__body ul {
  padding-left: 1.25rem;
  list-style: disc;
}

.legal__body li + li {
  margin-top: var(--sp-2);
}

.legal__body li::marker {
  color: var(--accent);
}

.legal__body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.legal__body a:hover {
  color: var(--fg);
}

.legal__consent {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--glass-line);
}