/* ==========================================================================
   static/css/try-cta.css  ·  the "Try Mirror Ai" controls
   ==========================================================================
   Styles for the render macros in templates/components/try_cta.html:
     .try-cta    filled accent button (the one primary action in its view)
     .try-chip   a suggested question, as a link
     .try-card   content-styled card: heading, quoted question, button, note
     .try-sticky the slim dismissible bar (components/try_sticky.html)

   REQUIRES site-tokens.css. Every colour, radius, duration and type size below
   is a token from that file; none is introduced here.

   The header's "Try it free" item is NOT styled here. It is `.sh-cta` in
   site-chrome.css, because the header renders on pages that never load this
   file.

   SPACING IS LITERAL ON PURPOSE. --space-1..7 exist in site-tokens.css AND in
   design-system.css / responsive.css with different values (responsive.css
   clamps them by viewport), and these controls must look the same on every
   shell they are dropped into. site-chrome.css avoids those names for the
   same reason. The values below are the site-tokens scale (8/12/16/24).

   COLOUR IS NEVER THE ONLY SIGNAL. The button is a filled shape with a text
   label and an arrow; the chip is a bordered shape with its question as text.
   Neither relies on cyan alone to read as a control.
   ========================================================================== */

/* ---- button ------------------------------------------------------------- */
.try-cta {
  position: relative; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 24px;
  font-family: var(--font-ui); font-size: var(--type-u5); font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--_ink-on-accent);
  background: var(--grad-accent);
  border: 0; border-radius: var(--r-pill);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: 0 8px 24px -10px var(--accent-glow);
  transition: transform var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out);
}
.try-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 30px -10px var(--accent-glow); }
.try-cta__arrow { flex: none; transition: transform var(--dur-2) var(--ease-out); }
.try-cta:hover .try-cta__arrow { transform: translateX(3px); }
.try-cta:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}

/* ---- chip --------------------------------------------------------------- */
.try-chip {
  box-sizing: border-box;
  display: inline-flex; align-items: center;
  min-height: 44px; max-width: 100%;
  padding: 8px 16px;
  font-family: var(--font-ui); font-size: var(--type-u5); font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--ink-2);
  background: var(--sf-1);
  border: 1px solid var(--line-3); border-radius: var(--r-pill);
  text-decoration: none; text-align: left;
  overflow-wrap: anywhere;
  transition: color var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out),
              background var(--dur-2) var(--ease-out);
}
.try-chip:hover {
  color: var(--ink-1); border-color: var(--accent-line-hi); background: var(--accent-wash);
}
.try-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---- card ---------------------------------------------------------------
   THE HOUSE CARD LANGUAGE, not a new one: the hairline, radius, faint top-lit
   gradient and display-face title of `.ind-card` / `.ind-persona`
   (css/individual.css), restated here with no page-private tokens so it renders
   the same on every shell. It reads as content, not as an ad banner: no glow,
   no fill, the only accent is the one button. */
.try-card {
  box-sizing: border-box;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 16px;
  margin: 0;
  padding: clamp(24px, 3vw, 32px) clamp(20px, 3vw, 28px);
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .012));
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  font-family: var(--font-ui);
  text-align: left;
}
.try-card__copy { display: flex; flex-direction: column; gap: 8px; }
.try-card__heading {
  margin: 0;
  font-family: var(--font-display); font-size: var(--type-u2); font-weight: 600;
  letter-spacing: var(--track-tight);
  line-height: var(--lh-snug); color: var(--ink-1);
}
/* Measures in ch ON the paragraph, swept with test/e2e/width_audit.py's
   tripwire: 62ch on the 14px lede read 79 characters on /individual, so 56. */
.try-card__lede,
.try-card__question {
  margin: 0; max-width: 56ch;
  font-size: var(--type-u5); line-height: var(--lh-body); color: var(--ink-2);
}
.try-card__question q { font-style: italic; color: var(--ink-1); }
.try-card__chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0; padding: 0; list-style: none;
}
.try-card__chips li { display: flex; max-width: 100%; }
.try-card__action {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
}
.try-card__note {
  margin: 0; max-width: 56ch;
  font-size: var(--type-u6); line-height: var(--lh-body); color: var(--ink-3);
}

/* ---- card placements ------------------------------------------------------
   --section  a card closing (or between) a page's sections
   --wide     from 900px the copy and chips sit left and the action right, so a
              full-content-width card is not one tall ragged column
   --pricing / --404 / --listing / --in-article / --article-end  per-host spacing */
.try-card--section { margin-top: 40px; }
@media (min-width: 900px) {
  .try-card--wide {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
    grid-template-areas: "copy action" "chips action";
    column-gap: 40px; row-gap: 16px;
    align-items: center;
  }
  .try-card--wide .try-card__copy { grid-area: copy; }
  .try-card--wide .try-card__chips { grid-area: chips; }
  .try-card--wide .try-card__action {
    grid-area: action;
    flex-direction: column; align-items: flex-start; justify-self: end;
  }
  .try-card--wide .try-card__action .try-card__note { max-width: 32ch; }
  .try-card--wide:not(:has(.try-card__chips)) { grid-template-areas: "copy action"; }
}
.try-card--pricing { margin: 0 auto 40px; max-width: 960px; }
.try-card--404 { width: min(100%, 560px); margin: 24px auto 0; }
.try-card--listing { margin: 32px 0; }
.try-card--article-end { margin: 40px 0; }

/* PROSE HOSTS. Inside an article (.article-content) or a reading page
   (.rd-prose / .rd-section) the host's prose rules reach into the card: link
   colour and underline (a cyan label on the cyan button is 1:1), paragraph
   size and gaps, the arrow list marker on the chips. Each is put back here,
   two classes deep so it outranks the host's one-class-plus-element rules.
   The heading-sized <p> keeps its heading look where the host uses a <p>. */
.article-content .try-card { margin: 40px 0; }
.article-content .try-card p,
.rd-prose .try-card p,
.rd-section .try-card p {
  margin: 0; font-size: var(--type-u5); line-height: var(--lh-body); color: var(--ink-2);
}
.article-content .try-card .try-card__heading,
.rd-prose .try-card .try-card__heading {
  font-family: var(--font-display); font-size: var(--type-u2); font-weight: 600;
  line-height: var(--lh-snug); color: var(--ink-1);
}
.article-content .try-card .try-card__note,
.rd-prose .try-card .try-card__note,
.rd-section .try-card .try-card__note { font-size: var(--type-u6); color: var(--ink-3); }
.rd-prose .try-card ul,
.rd-section .try-card ul { margin: 0; }
.rd-prose .try-card li,
.rd-section .try-card li { margin: 0; padding: 0; font-size: inherit; line-height: inherit; }
.rd-prose .try-card li::before,
.rd-section .try-card li::before { content: none; }
.article-content .try-card a,
.rd-prose .try-card a,
.rd-section .try-card a { border-bottom: 0; text-decoration: none; }
.article-content .try-card a.try-cta,
.rd-prose .try-card a.try-cta,
.rd-section .try-card a.try-cta { color: var(--_ink-on-accent); }
.article-content .try-card a.try-chip,
.rd-prose .try-card a.try-chip,
.rd-section .try-card a.try-chip { color: var(--ink-2); }
.article-content .try-card a.try-chip:hover,
.rd-prose .try-card a.try-chip:hover,
.rd-section .try-card a.try-chip:hover { color: var(--ink-1); }

/* ---- sticky bar (components/try_sticky.html, driven by try-cta.js) --------
   Hidden until try-cta.js decides otherwise; never shown without script,
   because without script it could not be dismissed. `visibility` (not only
   opacity) takes it out of the tab order and the accessibility tree while it
   is off screen. z-index is the rail band: above page content, under the
   header (whose mobile drawer must cover it) and far under the modal band. */
.try-sticky {
  position: fixed; z-index: var(--z-rail);
  box-sizing: border-box;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-ui);
  background: var(--sf-glass);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
          backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--line-3);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7);
  visibility: hidden; opacity: 0; transform: translateY(16px);
  transition: opacity var(--dur-3) var(--ease-out),
              transform var(--dur-3) var(--ease-out),
              visibility 0s linear var(--dur-3);
}
.try-sticky[hidden] { display: none; }
.try-sticky.is-shown {
  visibility: visible; opacity: 1; transform: none;
  transition: opacity var(--dur-3) var(--ease-out),
              transform var(--dur-3) var(--ease-out);
}
.try-sticky__text {
  margin: 0; min-width: 0;
  font-size: var(--type-u5); font-weight: 500; line-height: var(--lh-snug);
  color: var(--ink-1);
}
.try-sticky__cta { flex: none; }
.try-sticky__dismiss {
  flex: none;
  display: grid; place-items: center;
  width: 44px; height: 44px; margin: 0; padding: 0;
  font: inherit; font-size: 22px; line-height: 1;
  color: var(--ink-2);
  background: transparent; border: 1px solid transparent; border-radius: var(--r-pill);
  cursor: pointer;
}
.try-sticky__dismiss:hover { color: var(--ink-1); border-color: var(--line-3); }
.try-sticky__dismiss:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --try-sticky-lift is set by try-cta.js only on pages whose legacy chat bubble
   shares this corner (the Knowledge Hub); everywhere else it is unset. */
/* phone and tablet: a slim full-width bar, 64px plus the home-indicator inset */
@media (max-width: 1099px) {
  .try-sticky {
    left: 0; right: 0; bottom: var(--try-sticky-lift, 0px);
    min-height: 64px; max-height: calc(64px + env(safe-area-inset-bottom, 0px));
    padding: 10px 8px calc(10px + env(safe-area-inset-bottom, 0px)) 16px;
    border-width: 1px 0 0; border-radius: 0;
  }
  .try-sticky__text { flex: 1 1 auto; }
  .try-sticky__cta { margin-left: auto; }
}
/* below 420px the question and the button no longer fit one 64px row; the
   button label carries the whole offer on its own */
@media (max-width: 419px) {
  .try-sticky__text { display: none; }
  .try-sticky__cta { flex: 1 1 auto; margin-left: 0; }
}
/* desktop: a compact card in the bottom-right corner */
@media (min-width: 1100px) {
  .try-sticky {
    right: 24px; bottom: max(24px, var(--try-sticky-lift, 0px));
    padding: 12px 8px 12px 20px;
    border-radius: var(--r-lg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .try-cta, .try-cta__arrow, .try-chip { transition: none; }
  .try-sticky, .try-sticky.is-shown { transition: none; transform: none; }
  .try-cta:hover, .try-cta:hover .try-cta__arrow { transform: none; }
}