/* ============================================================
   ZIRYVO — sections
   Each band picks its own vertical step on purpose. Nothing here
   shares a uniform height; that is what creates the pacing.
   ============================================================ */

/* ---------------- Hero ---------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  isolation: isolate;
  overflow: hidden;
}
.hero__in {
  position: relative;
  z-index: 2;
  padding-block: clamp(104px, 13vh, 150px) clamp(96px, 12vh, 130px);
}
.hero__badge { margin-bottom: clamp(26px, 3.4vw, 40px); }
.hero__title { max-width: 16ch; margin-inline: auto; }
.hero__sub {
  margin: clamp(24px, 3vw, 34px) auto 0;
  max-width: 44ch;
}
.hero__ctas {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: clamp(32px, 3.6vw, 46px);
}


/* ---------------- Statement ----------------
   Words brighten individually as the block crosses the viewport.
   js/statement.js writes --lit per word.                          */
.statement {
  padding-block: var(--sp-xl);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.statement__in { position: relative; z-index: 2; }
.statement__text {
  font-size: clamp(1.75rem, 5.2vw, 4.4rem);
  line-height: 1.14;
  letter-spacing: -0.035em;
  font-weight: 500;
  max-width: 22ch;
  margin-inline: auto;
}
.statement__text .w {
  color: rgba(255, 255, 255, calc(0.14 + 0.86 * var(--lit, 0)));
  transition: color 0.28s linear;
}

/* ---------------- Problem ---------------- */
.problem { padding-block: var(--sp-lg); }
.problem__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 72px);
}
.problem__head { align-self: start; }
.problem__list { display: flex; flex-direction: column; }
.problem__list li {
  padding-block: clamp(16px, 1.9vw, 22px);
  border-top: 1px solid var(--line-soft);
  font-size: clamp(1.05rem, 1.9vw, 1.5rem);
  font-weight: 400;
  letter-spacing: -0.018em;
  color: var(--fg-soft);
  transition: color 0.5s var(--ease-soft);
}
.problem__list li:hover { color: var(--fg); }
.problem__turn {
  margin-top: clamp(56px, 7vw, 96px);
  text-align: center;
}

@media (min-width: 900px) {
  .problem__grid { grid-template-columns: 0.85fr 1.15fr; gap: 80px; }
  .problem__head { position: sticky; top: calc(var(--nav-h) + 60px); }
}

/* ---------------- Capabilities ----------------
   Deliberately a typographic ledger, not a card grid.            */
.caps { padding-block: var(--sp-lg); }
/* Measure goes on the heading, never the wrapper: `ch` resolves against
   the element's own font-size, so on a 16px wrapper it collapses to a
   fraction of the intended width and shears the headline. */
.caps__head { margin-bottom: clamp(56px, 7vw, 100px); }
.caps__head h2 { max-width: 18ch; }
.caps__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding-block: clamp(30px, 3.6vw, 46px);
  border-top: 1px solid var(--line-soft);
  transition: background 0.6s var(--ease);
}
.caps__row:last-child { border-bottom: 1px solid var(--line-soft); }
.caps__idx { align-self: start; }
.caps__title { letter-spacing: -0.025em; }
.caps__desc { max-width: 52ch; }

@media (min-width: 860px) {
  .caps__row {
    grid-template-columns: 90px 1fr 1.15fr;
    gap: 40px;
    align-items: baseline;
  }
}

/* ---------------- Conversation ---------------- */
.convo {
  padding-block: var(--sp-lg);
  position: relative;
  overflow: hidden;
}
.convo__head { text-align: center; margin-bottom: clamp(38px, 4.4vw, 62px); }
.convo__title { max-width: 20ch; margin-inline: auto; }
/* The exchange is the visual now, so it sits centred and a little tighter. */
.convo__ink {
  display: block;
  text-align: center;
  font-size: clamp(1.7rem, 3.6vw, 2.9rem);
  margin-top: clamp(26px, 3vw, 40px);
}
.convo__stage {
  max-width: 780px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 2.8vw, 34px);
}
.convo__turn {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
}
.convo__turn.is-said { opacity: 1; transform: none; }
.convo__turn--caller { align-self: flex-start; max-width: 84%; }
.convo__turn--ziryvo { align-self: flex-end;  max-width: 84%; text-align: right; }

.convo__who {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
}
.convo__turn--ziryvo .convo__who { justify-content: flex-end; }

.convo__line {
  font-size: clamp(1.05rem, 2.2vw, 1.72rem);
  line-height: 1.34;
  letter-spacing: -0.022em;
  font-weight: 400;
}
.convo__turn--caller .convo__line { color: var(--fg-soft); }
.convo__turn--ziryvo .convo__line { color: var(--fg); }

/* Voice bars. Animate only while that turn is speaking. */
.wave { display: inline-flex; align-items: center; gap: 2px; height: 13px; }
.wave i {
  display: block;
  width: 2px;
  height: 3px;
  background: currentColor;
  opacity: 0.5;
  border-radius: 1px;
  transform-origin: center;
}
.convo__turn.is-speaking .wave i { animation: wave 1.05s var(--ease-soft) infinite; }
.wave i:nth-child(1) { animation-delay: 0s;    }
.wave i:nth-child(2) { animation-delay: 0.11s; }
.wave i:nth-child(3) { animation-delay: 0.22s; }
.wave i:nth-child(4) { animation-delay: 0.33s; }
.wave i:nth-child(5) { animation-delay: 0.44s; }
@keyframes wave {
  0%, 100% { transform: scaleY(1);   opacity: 0.35; }
  50%      { transform: scaleY(3.6); opacity: 0.95; }
}

/* The hours band below is reused by the statement section. */

/* A continuous band of hours sliding behind the headline: the
   availability idea stated as motion rather than as an icon. */
.hours {
  position: absolute;
  inset: 50% 0 auto 0;
  transform: translateY(-50%);
  z-index: 1;
  display: flex;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
  pointer-events: none;
}
.hours__track {
  display: flex;
  flex-shrink: 0;
  animation: hours-roll 90s linear infinite;
}
.hours__track span {
  display: inline-flex;
  align-items: center;
  gap: 26px;
  padding-inline: 26px;
  font-size: clamp(3.5rem, 11vw, 9rem);
  font-weight: 500;
  letter-spacing: -0.05em;
  color: rgba(255, 255, 255, 0.045);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@keyframes hours-roll { to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .hours__track { animation: none; } }

/* ---------------- About / company ----------------
   Framed technical grid on the left, editorial column on the right.
   Deliberately surrounded by a lot of air.                          */
.about { padding-block: var(--sp-xl); }

.about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(48px, 6vw, 90px);
  align-items: center;
}
@media (min-width: 960px) {
  .about__grid { grid-template-columns: 0.95fr 1.05fr; gap: clamp(60px, 7vw, 110px); }
}

/* --- media column --- */
.about__media {
  position: relative;         /* the badge hangs off the frame from here, so it
                                 can overlap without the frame clipping it */
}

.about__frame {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line-soft);
  border-radius: clamp(18px, 2vw, 28px);
  background: rgba(255, 255, 255, 0.012);
  overflow: hidden;           /* lets the subject bleed off the bottom edge */
  isolation: isolate;
}

/* The technical grid. Two hairline gradients, faded at the frame edges so it
   reads as a drafting surface rather than graph paper. */
.about__mesh {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right,  rgba(255, 255, 255, 0.062) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.062) 1px, transparent 1px);
  background-size: 52px 52px;
  background-position: center center;
  mask-image: radial-gradient(ellipse 96% 96% at 50% 48%, #000 62%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 96% 96% at 50% 48%, #000 62%, transparent 100%);
  /* Drifts by exactly one cell, so the motion is felt but never resolves. */
  animation: mesh-drift 64s linear infinite;
}
@keyframes mesh-drift {
  to { background-position: calc(50% + 52px) calc(50% + 52px); }
}
@media (prefers-reduced-motion: reduce) { .about__mesh { animation: none; } }

/* The cut-out subject. The white contour is baked into the asset's alpha
   (generated from the source photo's own silhouette), not drawn in CSS —
   a CSS border would only ever be a rectangle. */
/* Deliberately oversized: the subject reaches close to the frame's edges and
   is cropped by its bottom, so it reads as placed rather than illustrated. */
.about__subject {
  position: absolute;
  left: 6%;
  bottom: -2%;
  width: 88%;
  z-index: 1;
}
.about__subject img { width: 100%; height: auto; }

/* Reveal: rises into the frame as the section arrives. */
.about__subject {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition: opacity 1.1s var(--ease) 0.18s, transform 1.2s var(--ease) 0.18s;
}
/* The frame itself carries data-reveal="fade", so .is-in lands here too. */
.about__frame.is-in .about__subject { opacity: 1; transform: none; }

/* Small physical label pinned to the lower-right, very slightly off-axis. */
/* Overhangs the frame's bottom-right corner, so it reads as a label stuck
   onto the print rather than a panel inside the layout. */
.about__badge {
  position: absolute;
  right: clamp(-26px, -2vw, -10px);
  bottom: clamp(-14px, -1.4vw, -6px);
  z-index: 2;
  padding: 13px 19px 14px;
  border-radius: 13px;
  background: rgba(6, 6, 6, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transform: rotate(-2.2deg);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}
.about__badge-top {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 5px;
}
.about__badge-main {
  display: block;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--fg);
}

/* --- text column --- */
.about__label { margin-bottom: clamp(22px, 2.6vw, 32px); }

.about__title {
  font-size: clamp(2.1rem, 4.6vw, 3.8rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  font-weight: 600;
}
/* The lighter italic on the closing line is what keeps the headline
   editorial rather than a slab of bold sans. */
.about__title em {
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.028em;
}

.about__copy {
  margin-top: clamp(24px, 2.8vw, 34px);
  max-width: 52ch;
}

.about__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: clamp(28px, 3.2vw, 40px);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--fg);
}
.about__cta svg { transition: transform 0.55s var(--ease); }
.about__cta:hover svg { transform: translateX(5px); }

.about__credit {
  margin-top: clamp(30px, 3.6vw, 44px);
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  font-size: 0.82rem;
  color: var(--fg-faint);
  max-width: 30ch;
}

@media (max-width: 959px) {
  .about__frame { max-width: 560px; }
  .about__media { max-width: 560px; }
}
@media (max-width: 520px) {
  .about__mesh { background-size: 40px 40px; }
  @keyframes mesh-drift {
    to { background-position: calc(50% + 40px) calc(50% + 40px); }
  }
  .about__subject { width: 82%; left: 9%; }
  .about__badge { padding: 11px 15px 12px; border-radius: 11px; }
  .about__badge-main { font-size: 0.86rem; }
}

/* ---------------- FAQ ---------------- */
.faq { padding-block: var(--sp-lg); }
.faq__grid { display: grid; grid-template-columns: 1fr; gap: clamp(36px, 4vw, 64px); }
@media (min-width: 900px) {
  .faq__grid { grid-template-columns: 0.72fr 1.28fr; gap: 80px; }
  .faq__head { position: sticky; top: calc(var(--nav-h) + 60px); align-self: start; }
}
.acc__item:first-child { border-top: 1px solid var(--line-soft); }

/* ---------------- Footer ---------------- */
.footer {
  border-top: 1px solid var(--line-soft);
  padding-block: clamp(56px, 7vw, 92px) 34px;
}
.footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 64px);
  padding-bottom: clamp(48px, 6vw, 76px);
}
.footer__stat { max-width: 30ch; margin-top: 20px; }
.footer__nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 32px;
}
.footer__col h4 {
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-faint);
  font-weight: 500;
  margin-bottom: 16px;
}
.footer__col li + li { margin-top: 10px; }
.footer__col a {
  font-size: 0.92rem;
  color: var(--fg-soft);
  transition: color 0.4s var(--ease-soft);
}
.footer__col a:hover { color: var(--fg); }

.footer__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: clamp(34px, 4vw, 48px);
  border-top: 1px solid var(--line-soft);
}
.footer__cta p { font-size: clamp(1.25rem, 2.6vw, 1.9rem); font-weight: 500;
                 letter-spacing: -0.028em; max-width: 20ch; }

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  border-top: 1px solid var(--line-soft);
  color: var(--fg-faint);
  font-size: 0.8rem;
}
.footer__legal { display: flex; gap: 22px; flex-wrap: wrap; }
.footer__legal a { transition: color 0.4s var(--ease-soft); }
.footer__legal a:hover { color: var(--fg-dim); }

@media (min-width: 900px) {
  .footer__top { grid-template-columns: 1fr 1.15fr; gap: 80px; }
}

/* Accent details inside the About block */
.about__badge-top { color: var(--lime); }
.about__cta svg   { color: var(--lime); }
.about__cta:hover { color: var(--lime); }

/* The scroll cue's hairline reads as a small accent mark */
.scrollcue__line {
  background: linear-gradient(to bottom, var(--lime-dim), transparent);
}

/* "Understand" over the conversation transcript. */
.convo__ink {
  display: block;
  text-align: center;
  font-size: clamp(1.7rem, 3.8vw, 3rem);
  margin-top: clamp(30px, 3.4vw, 46px);
}

/* ============================================================
   Live demo — the real ElevenLabs widget
   The widget renders in its own shadow root; nothing here reaches
   inside it. The composition is built around it instead.
   ============================================================ */
.demo {
  position: relative;
  padding-block: var(--sp-lg);
  text-align: center;
  /* NOT overflow:hidden — the widget renders position:fixed, and a clipping
     ancestor cuts it off mid-bubble (the call button disappears). The mesh
     below is inset:0 so nothing needs clipping here anyway. */
  overflow: visible;
  isolation: isolate;
  border-top: 1px solid var(--line-soft);
}
.demo__mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(to right,  rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 62% 62% at 50% 46%, #000 18%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 46%, #000 18%, transparent 78%);
  pointer-events: none;
}
.demo__in { position: relative; z-index: 2; }
.demo__title { max-width: 19ch; margin-inline: auto; }
.demo__ink { margin-top: -0.16em; }
.demo__sub { margin: clamp(20px, 2.4vw, 30px) auto 0; max-width: 46ch; }

.demo__stage {
  margin-top: clamp(30px, 3.4vw, 44px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}
.demo__meta { display: inline-flex; align-items: center; gap: 9px; }
.demo__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--lime);
  animation: badge-pulse 2.4s ease-in-out infinite;
}
/* The widget pins itself with position:fixed; the transform here makes this
   box its containing block, so it lands in the section instead of floating in
   the corner of every page.

   The height is not decorative. The in-call sheet sizes itself as
   `calc(100% - 80px)` of this box (capped at 550px) and anchors to its
   BOTTOM, so it opens upward. If this box only reserved the idle bubble's
   height, the panel would either be squashed to a sliver or expand up over
   the headline. Reserving the full height in normal flow means the panel
   opens into its own empty space, below the copy.

   Must never be `overflow: hidden` — that clips the fixed panel. */
.demo__widget {
  position: relative;
  transform: translateZ(0);
  width: min(508px, 100%);
  height: clamp(430px, 48vh, 470px);
  margin-inline: auto;
  border: 1px solid var(--line-soft);
  border-radius: clamp(16px, 1.6vw, 22px);
  background:
    radial-gradient(ellipse 70% 55% at 50% 78%,
      rgba(184, 255, 61, 0.05) 0%, transparent 70%),
    rgba(255, 255, 255, 0.014);
}

/* The containing block is a separate, inset box, and its WIDTH is deliberate.
   The widget lays out an overlay inset 32px inside this box, then anchors its
   sheet to that overlay's bottom-RIGHT at a natural max-width of 400px. Give
   the box more than 400 + 64 = 464px and the sheet hugs the right edge and
   reads off-centre; at exactly 464 it fills the overlay and sits centred.
   The bottom inset also carries an extra 32px, because the widget applies its
   overlay padding on the top and sides but not the bottom. */
.demo__widgetInner {
  position: absolute;
  /* The widget applies its own 32px overlay padding on the top and sides but
     not the bottom, so the bottom inset carries that 32px itself. Without it
     the panel sits 23px off the border while the other three sides sit 55px
     off, and the frame reads lopsided. */
  --pad: clamp(14px, 1.6vw, 22px);
  inset: var(--pad) var(--pad) calc(var(--pad) + 32px) var(--pad);
  transform: translateZ(0);
}

.demo__widget elevenlabs-convai {
  display: block;
  width: 100%;

  /* The widget's own theme API. It declares these on `:host, :root` inside
     its shadow root, so setting them on a PARENT does nothing — inheritance
     loses to the element's own declaration. A rule targeting the element
     from this (outer) tree does win, which is why this selector is
     `.demo__widget elevenlabs-convai`. Its internals are never touched. */
  /* The panel draws no border of its own, so its fill has to carry the
     contrast or it disappears against the page black. */
  --el-base:            #131313;
  --el-base-hover:      #161616;
  --el-base-active:     #1e1e1e;
  --el-base-border:     rgba(255, 255, 255, 0.16);
  --el-base-subtle:     rgba(255, 255, 255, 0.55);
  --el-base-primary:    #ffffff;

  --el-accent:          var(--lime);
  --el-accent-hover:    #c9ff66;
  --el-accent-active:   #a9f129;
  --el-accent-border:   rgba(184, 255, 61, 0.50);
  --el-accent-subtle:   rgba(0, 0, 0, 0.55);
  --el-accent-primary:  #000000;   /* text on the lime call button */

  /* Several radii are derived from this one as `calc(--el-button-radius + n)`,
     including states that ignore the explicit overrides below. At 100px the
     panel inherited a 106px radius and rendered as a lozenge. 22px keeps the
     call button a perfect pill — its height is 44px, so radius >= 22 is fully
     round — while everything derived from it stays a sane rounded rect. */
  --el-button-radius:   22px;
  --el-bubble-radius:   16px;
  --el-sheet-radius:         20px;
  --el-compact-sheet-radius: 22px;
  --font-sans:          'Inter', system-ui, sans-serif;
}

.demo__note { color: var(--fg-faint); max-width: 42ch; }


/* ============================================================
   Client logos — continuous marquee
   Five identical passes translating -20%: exactly one pass, so the
   reset is invisible. The count matters — the track must measure at
   least one viewport plus one pass, or the reset exposes bare track
   on the right. Spacing sits on the items (half a gap each side) so
   the seam between passes measures like every other gap.
   ============================================================ */
.logos {
  --logos-lead: clamp(30px, 3.6vw, 46px);   /* label -> strip */
  /* The strip has to sit on the section's centre line: the label above
     it otherwise pushes it low, which is immediately visible. Three
     rows do it — the strip takes the middle one and the two 1fr rows
     equalise around it. Padding arithmetic was the obvious fix and the
     wrong one: it has to assume the label's height, and the label
     wraps to two lines on a narrow viewport. This holds regardless. */
  display: grid;
  /* minmax(0, 1fr), not the default auto: an auto column sizes to its
     widest content, and that is the marquee track — several thousand
     pixels wide. The column would then stretch far past the viewport
     and carry the centred label out of sight with it. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr auto 1fr;
  min-height: calc(var(--sp-sm) * 2 + 100px);
  border-top: 1px solid var(--line-soft);
  overflow: hidden;
}
.logos .shell { grid-row: 1; align-self: end; }
.logos__viewport { grid-row: 2; }

.logos__label {
  text-align: center;
  /* Eyebrows elsewhere sit at --fg-faint, but they run alongside large
     type. This one is 11px on black with nothing near it, so it needs
     the extra contrast to register at all. */
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-dim);
  font-weight: 500;
  margin-bottom: var(--logos-lead);
}

/* Full bleed: the marquee deliberately breaks the 1280 shell. */
.logos__viewport {
  position: relative;
  /* Fades at both edges so logos arrive and leave rather than pop. */
  mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}

.logos__track {
  --logo-gap: clamp(48px, 6vw, 92px);
  display: flex;
  width: max-content;
  animation: logos-roll 46s linear infinite;
}

.logos__row { display: flex; align-items: center; }
.logos__row li {
  flex: 0 0 auto;
  padding-inline: calc(var(--logo-gap) / 2);
  line-height: 0;
}

/* --s is the per-logo optical correction: a heavy geometric mark and a
   long wordmark cannot share one height and still read as equals. */
.logos__row img {
  height: calc(clamp(26px, 3.1vw, 42px) * var(--s, 1));
  width: auto;
  opacity: 0.5;
  transition: opacity 0.5s var(--ease-soft);
}
.logos__row img:hover { opacity: 0.95; }

@keyframes logos-roll { to { transform: translate3d(-20%, 0, 0); } }

@media (prefers-reduced-motion: reduce) {
  .logos__track { animation: none; width: 100%; justify-content: center; }
  .logos__row { flex-wrap: wrap; justify-content: center; row-gap: clamp(22px, 3vw, 34px); }
  .logos__row + .logos__row { display: none; }   /* one static pass is enough */
  .logos__viewport { mask-image: none; -webkit-mask-image: none; }
}

/* ============================================================
   Tools — cost calculator + phrase card
   Two working panels. They borrow the soft-card look of a product UI
   but stay in the page's own palette: near-black surfaces, hairline
   edges, and the accent reserved for the figures that matter.
   ============================================================ */
.tools { padding-block: var(--sp-lg); }
.tools__head { margin-bottom: clamp(44px, 5.5vw, 76px); }
.tools__head h2 { max-width: 20ch; }

.tools__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 2.4vw, 30px);
}
@media (min-width: 900px) {
  .tools__grid { grid-template-columns: 1fr 1fr; }
}

/* ---------------- Shared card ---------------- */
.card {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.6vw, 34px);
  border: 1px solid var(--line-soft);
  border-radius: clamp(18px, 2vw, 26px);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 255, 255, 0.035) 0%, transparent 70%),
    rgba(255, 255, 255, 0.014);
}

.card__head {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: clamp(24px, 3vw, 34px);
}
.card__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  border: 1px solid var(--lime-faint);
  background: rgba(184, 255, 61, 0.07);
  color: var(--lime);
}
.card__icon svg { width: 18px; height: 18px; }
.card__title {
  font-size: clamp(0.98rem, 1.5vw, 1.12rem);
  line-height: 1.25;
  letter-spacing: -0.018em;
  font-weight: 500;
}

.card__note {
  margin-top: auto;
  padding-top: clamp(18px, 2.2vw, 24px);
  font-size: 0.79rem;
  line-height: 1.55;
  color: var(--fg-faint);
}

/* ---------------- Calculator ---------------- */
.calc__fields { display: flex; flex-direction: column; gap: clamp(18px, 2.2vw, 26px); }

.field__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 11px;
  font-size: 0.845rem;
  color: var(--fg-dim);
  cursor: pointer;
}
.field__val {
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--fg);
}

/* The track is drawn on the input itself; the thumb is the only part
   that needs the vendor pseudo-elements. */
.range {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.11);
  cursor: pointer;
}
.range:focus-visible { outline: 2px solid var(--lime); outline-offset: 8px; }
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--lime);
  border: 3px solid #0a0a0a;
  box-shadow: 0 0 0 1px var(--lime-faint), 0 0 14px rgba(184, 255, 61, 0.4);
  transition: transform 0.3s var(--ease);
}
.range::-webkit-slider-thumb:active { transform: scale(1.18); }
.range::-moz-range-thumb {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--lime);
  border: 3px solid #0a0a0a;
  box-shadow: 0 0 0 1px var(--lime-faint), 0 0 14px rgba(184, 255, 61, 0.4);
}

.calc__out {
  margin-top: clamp(26px, 3.2vw, 36px);
  padding-top: clamp(22px, 2.6vw, 30px);
  border-top: 1px solid var(--line-soft);
}
.calc__lede {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 10px;
}
.calc__big {
  font-size: clamp(1.9rem, 4.4vw, 2.9rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 600;
  color: var(--lime);
  font-variant-numeric: tabular-nums;
}
.calc__split {
  display: flex;
  gap: clamp(26px, 3.4vw, 44px);
  margin-top: clamp(16px, 2vw, 22px);
}
.calc__k {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 5px;
}
.calc__v {
  font-size: 0.97rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.calc__bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 44px;
  margin-top: clamp(20px, 2.4vw, 28px);
}
.calc__bars i {
  flex: 1;
  height: var(--h, 10%);
  border-radius: 2px;
  background: linear-gradient(to top, rgba(184, 255, 61, 0.5), rgba(184, 255, 61, 0.14));
  transition: height 0.5s var(--ease);
}
.calc__bars i:last-child { background: linear-gradient(to top, var(--lime), rgba(184, 255, 61, 0.35)); }

/* ---------------- Phrase card ---------------- */
.lang2__phrases { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  padding: 8px 14px;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  color: var(--fg-soft);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.35s var(--ease-soft), border-color 0.35s var(--ease-soft),
              background 0.35s var(--ease-soft);
}
.chip:hover { color: var(--fg); border-color: rgba(255, 255, 255, 0.26); }
.chip.is-on {
  color: var(--lime);
  border-color: var(--lime-faint);
  background: rgba(184, 255, 61, 0.08);
}
.chip--lang {
  min-width: 48px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
}

/* The spoken line. Sized to the longest phrase so switching languages
   never reflows the card. */
.lang2__say {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-block: clamp(20px, 2.4vw, 28px);
  padding: clamp(16px, 2vw, 22px);
  min-height: clamp(112px, 13vw, 132px);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.022);
}
.lang2__text {
  font-size: clamp(0.88rem, 1.35vw, 1rem);
  line-height: 1.55;
  color: var(--fg);
}

.lang2__wave {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 1.55em;
}
.lang2__wave i {
  width: 2px;
  height: 100%;
  border-radius: 2px;
  background: var(--lime);
  opacity: 0.5;
  transform-origin: center;
  animation: lang2-wave 1.15s var(--ease-soft) infinite;
}
.lang2__wave i:nth-child(1) { animation-delay: 0s; }
.lang2__wave i:nth-child(2) { animation-delay: 0.13s; }
.lang2__wave i:nth-child(3) { animation-delay: 0.26s; }
.lang2__wave i:nth-child(4) { animation-delay: 0.39s; }
.lang2__wave i:nth-child(5) { animation-delay: 0.52s; }
@keyframes lang2-wave {
  0%, 100% { transform: scaleY(0.28); opacity: 0.35; }
  50%      { transform: scaleY(1);    opacity: 0.95; }
}
@media (prefers-reduced-motion: reduce) {
  .lang2__wave i { animation: none; transform: scaleY(0.55); }
}

.lang2__langs { display: flex; flex-wrap: wrap; gap: 7px; }

/* ---------------- Live demo: consent gate ----------------
   Fills the reserved widget frame until the visitor opts in, so the
   layout does not jump when the widget replaces it. */
.demo__gate {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: clamp(18px, 3vw, 34px);
  text-align: center;
}
.demo__gate[hidden] { display: none; }
.demo__start svg { transition: none; }
.demo__start:disabled { opacity: 0.7; cursor: progress; transform: none; }
.demo__consent {
  max-width: 36ch;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--fg-faint);
}
.demo__consent a {
  color: var(--fg-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-left: 4px;
}
.demo__consent a:hover { color: var(--lime); }
.demo__error {
  font-size: 0.82rem;
  color: #ffb4b4;
}