/* ============================================================================
   Primitives — buttons, badges, section headers, chips, ticks
   Styled to the live SmartRoots brand: pill geometry, generous radii, a pale
   yellow signal colour and the circular arrow badge that sits inside every CTA.
   ========================================================================= */

/* --- Button ---------------------------------------------------------------
   The brand's signature control: a full pill with a filled circular arrow
   riding inside it. The arrow disc inverts the button's own colours — yellow
   button, blue disc; blue button, yellow disc — which is what makes the pair
   read as one system rather than two unrelated buttons.

   Yellow never carries white text. #F5F572 against white is about 1.2:1; the
   label is always near-black, which lands at 15:1.                         */

.btn {
  --btn-pad-x: 1.5rem;
  --btn-h: 3rem;
  --disc: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-height: var(--btn-h);
  padding-left: var(--btn-pad-x);
  padding-right: 0.4rem;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -0.002em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  transition:
    background-color var(--d-fast) var(--ease-out-soft),
    color var(--d-fast) var(--ease-out-soft),
    box-shadow var(--d-base) var(--ease-out-soft),
    transform var(--d-fast) var(--ease-out-soft);
}

.btn--lg {
  --btn-h: 3.5rem;
  --btn-pad-x: 1.85rem;
  --disc: 2.125rem;
  font-size: var(--fs-body);
}

.btn__arrow {
  display: grid;
  place-items: center;
  width: var(--disc);
  height: var(--disc);
  flex: none;
  border-radius: 50%;
  transition: transform var(--d-base) var(--ease-out-expo),
    background-color var(--d-fast) var(--ease-out-soft),
    color var(--d-fast) var(--ease-out-soft);
}

.btn:hover .btn__arrow {
  transform: translateX(2px);
}

.btn:active {
  transform: translateY(1px);
}

/* Primary — the brand's yellow CTA */
.btn--primary {
  background: var(--yellow-300);
  color: var(--ink-900);
  box-shadow: var(--e-yellow);
}

.btn--primary .btn__arrow {
  background: var(--blue-500);
  color: #fff;
}

.btn--primary:hover {
  background: var(--yellow-400);
  box-shadow: 0 16px 32px -14px rgba(201, 201, 21, .7);
}

/* Blue — the inverse pairing, used where yellow would compete */
.btn--blue {
  background: var(--blue-500);
  color: #fff;
  box-shadow: var(--e-brand);
}

.btn--blue .btn__arrow {
  background: var(--yellow-300);
  color: var(--ink-900);
}

.btn--blue:hover {
  background: var(--blue-600);
  box-shadow: 0 16px 34px -12px rgba(35, 105, 210, .6);
}

.btn--secondary {
  background: var(--white);
  color: var(--ink-900);
  box-shadow: inset 0 0 0 1.5px var(--border-strong);
}

.btn--secondary .btn__arrow {
  background: var(--blue-100);
  color: var(--blue-600);
}

.btn--secondary:hover {
  box-shadow: inset 0 0 0 1.5px var(--blue-400);
}

.btn--secondary:hover .btn__arrow {
  background: var(--blue-500);
  color: #fff;
}

.btn--inverse {
  background: var(--white);
  color: var(--ink-900);
}

.btn--inverse .btn__arrow {
  background: var(--yellow-300);
  color: var(--ink-900);
}

.btn--inverse:hover {
  box-shadow: 0 14px 32px -14px rgba(0, 0, 0, .5);
}

.btn--ghost {
  background: transparent;
  color: var(--link);
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  min-height: 44px;
  gap: 0.5rem;
  --disc: 1.4rem;
}

.btn--ghost .btn__arrow {
  background: var(--blue-100);
  color: var(--blue-600);
}

.btn--ghost:hover {
  color: var(--blue-700);
}

.btn--ghost:hover .btn__arrow {
  background: var(--blue-500);
  color: #fff;
}

/* On ink */
.on-ink .btn--secondary {
  background: transparent;
  color: var(--text-on-ink);
  box-shadow: inset 0 0 0 1.5px var(--border-ink-strong);
}

.on-ink .btn--secondary .btn__arrow {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

.on-ink .btn--secondary:hover {
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55);
}

.on-ink .btn--ghost {
  color: var(--blue-300);
}

.on-ink .btn--ghost .btn__arrow {
  background: rgba(255, 255, 255, .16);
  color: #fff;
}

/* --- Badge ----------------------------------------------------------------
   The small tinted pill that heads every section on the live brand. It carries
   a three-dot mark rather than an arbitrary icon, so it stays neutral whatever
   the section is about.                                                     */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem 0.5rem 0.85rem;
  border-radius: var(--r-pill);
  background: var(--blue-200);
  color: var(--blue-800);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  line-height: 1.2;
  margin-bottom: 1.25rem;
}

.badge__mark {
  flex: none;
  color: var(--blue-500);
}

.on-ink .badge {
  background: rgba(255, 255, 255, .13);
  color: #fff;
}

.on-ink .badge__mark {
  color: var(--yellow-300);
}

.badge--yellow {
  background: var(--yellow-200);
  color: var(--yellow-700);
}

.badge--yellow .badge__mark {
  color: var(--yellow-700);
}

/* --- Section header ------------------------------------------------------- */

.sec-head--start,
.sec-head--center {
  max-width: 46rem;
}

.sec-head--center {
  margin-inline: auto;
  text-align: center;
}

.sec-head--center .badge {
  margin-inline: auto;
}

/* Heavy, site-wide. Every heading on the homepage is set at 700 and the
   product pages now match it. */
.sec-head__title {
  margin-bottom: 0;
  max-width: 22ch;
  font-weight: 700;
}

.sec-head--center .sec-head__title {
  margin-inline: auto;
}

.sec-head__body {
  margin-top: 1.25rem;
  display: grid;
  gap: 0.85rem;
  max-width: 54ch;
}

.sec-head--center .sec-head__body {
  margin-inline: auto;
}

.sec-head__extra {
  margin-top: 2rem;
}

/* Two-weight headings: the brand sets part of a heading in regular and part in
   bold on the same line. <Emph> marks the bold half. */
/* --- The emphasised phrase --------------------------------------------------
   The brand sets one phrase of a heading apart from the rest. That used to be
   weight alone — 400 against 800 — and it is now a serif italic in the brand
   blue, which is two signals instead of one and reads at a glance rather than
   on inspection.

   Three things this needs to get right:

   · A REAL italic. Bricolage Grotesque exposes opsz, wdth and wght and no
     `ital` axis, so `font-style: italic` on it produces a synthetic oblique —
     sheared verticals, upright letterforms, and at 3rem it looks like a
     rendering fault rather than a typographic choice. Playfair Display is
     loaded italic-only for this one job.
   · Its own size and tracking. Playfair's x-height is smaller than
     Bricolage's, so at a shared font-size the emphasis reads as the quieter
     half of the line, which is backwards. The nudge below corrects the optical
     mismatch, and the heading's tight display tracking is relaxed because a
     serif italic at -0.02em collides with itself.
   · A colour that survives the ink sections. Blue on paper, signal yellow on
     ink — `.on-ink .h1` would otherwise repaint it white and the distinction
     would vanish on exactly the sections that lean on it hardest. */

/* SUPERSEDED, at the owner's request: headings are now consistent across the
   whole site, set in one face at one weight like the homepage. The emphasised
   phrase no longer switches to a serif italic in blue; it inherits the
   heading's own face, weight, size and colour, so <TwoTone> headings read as
   a plain heavy heading. The note above is kept for why the device existed. */
.emph {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  color: inherit;
}

/* Every <TwoTone> heading at the site's single heading weight. */
.twotone {
  font-weight: 700;
}

/* The one place a coloured accent stays: the banner heading of each product
   page, in the same blue the homepage banner uses for its second line. */
.sc-hero__title .emph,
.sb-hero__title .emph,
.rc-hero__title .emph {
  color: var(--blue-600);
}

/* Split: headline column and body column side by side, bottom-aligned. */
@media (min-width: 900px) {
  .sec-head--split {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 1rem clamp(2rem, 1rem + 4vw, 5rem);
    align-items: end;
  }

  .sec-head--split .sec-head__title {
    max-width: 17ch;
  }

  .sec-head--split .sec-head__body {
    margin-top: 0;
  }

  .sec-head--split .sec-head__side-col {
    padding-bottom: 0.35rem;
  }
}

@media (max-width: 899px) {
  .sec-head--split {
    max-width: 46rem;
  }
}

/* --- Chip ----------------------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.chip--default {
  background: var(--blue-100);
  color: var(--blue-800);
}

.chip--ink {
  background: rgba(255, 255, 255, .12);
  color: var(--text-on-ink);
}

.chip--yellow {
  background: var(--yellow-200);
  color: var(--yellow-700);
}

/* --- Tick list ------------------------------------------------------------ */

.tick {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-secondary);
}

.tick__mark {
  flex: none;
  margin-top: 0.24rem;
  color: var(--blue-500);
}

.on-ink .tick {
  color: var(--text-on-ink-2);
}

.on-ink .tick__mark {
  color: var(--yellow-300);
}

/* --- Gradient rule -------------------------------------------------------- */

.grad-rule {
  height: 3px;
  width: 100%;
  border-radius: 3px;
  background: var(--loop-gradient);
}

/* --- Gradient frame -------------------------------------------------------
   The yellow→blue border the brand wraps around featured imagery. Drawn as a
   padded gradient box rather than border-image, which is unreliable at a
   large radius.                                                            */

.grad-frame {
  padding: 4px;
  border-radius: var(--r-xl);
  background: var(--loop-gradient);
  box-shadow: var(--e-3);
}

.grad-frame>* {
  border-radius: calc(var(--r-xl) - 4px);
  overflow: hidden;
  display: block;
}

/* --- TextReveal masks ----------------------------------------------------- */

.tr-mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

.tr-line {
  display: block;
}

.tr-line-static {
  display: block;
}



.ada-hero__actions .btn.btn--primary.btn--lg {
  white-space: normal;
  text-wrap: wrap;
  /* Modern property for controlling wrapping behavior */
}

/* Also ensure the inner label allows wrapping */
.ada-hero__actions .btn.btn--primary.btn--lg .btn__label {
  white-space: normal;
  text-align: center;
}

.ada-sol__cta .btn.btn--primary.btn--md {
  white-space: normal;
  text-wrap: wrap;
}

.ada-sol__cta .btn.btn--primary.btn--md .btn__label {
  white-space: normal;
  text-align: center;
}

.ada-close__cta .btn.btn--primary.btn--lg {
  white-space: normal;
  text-wrap: wrap;
}

.ada-close__cta .btn.btn--primary.btn--lg .btn__label {
  white-space: normal;
  text-align: center;
}