/* Home block «Honest» (owner 18.10): the fake wall of praise crumbles into pixels, the answer stays.
   One screen, pinned by js/ehrlich.js. Palette: neutral cards, warm stars and badge, sky avatar and badge, grey logos;
   no red (nothing here is an error message) */
.eh { position: relative; margin-top: var(--section-y); }   /* the same gap as between the other sections (QA 20.10: 13 px) */
.eh__stage { position: relative; height: 100svh; min-height: 560px; overflow: hidden; display: grid; place-items: center; padding: 0 16px; }
.eh__fx, .eh__wall { position: absolute; inset: 0; pointer-events: none; }   /* no z-index: the warm circle must rise above the answer */
.eh__wall { z-index: 1; }
.eh-it { position: absolute; left: 50%; top: 50%; filter: blur(0px) grayscale(0);
  -webkit-mask-size: 240px 240px; mask-size: 240px 240px; -webkit-mask-repeat: repeat; mask-repeat: repeat; will-change: transform, opacity; }

.eh-stars { color: var(--warm); letter-spacing: .12em; font-size: 15px; line-height: 1; }

.eh-it[hidden] { display: none; }

/* the five-star cards */
.eh-rev { width: 248px; margin: 0; padding: 16px 18px; border-radius: var(--r-m); background: #fff; box-shadow: var(--shadow-1); }
.eh-rev blockquote { margin: 8px 0 12px; font: 500 15px/1.35 var(--font); color: var(--ink); }
.eh-rev figcaption { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-3); }
.eh-ava { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; font: 600 12px/1 var(--font); }
.eh-ava--warm { background: var(--warm-tint); color: var(--warm-ink); }
.eh-ava--sky { background: var(--sky-tint); color: var(--sky-ink); }

/* «No 1», «100 %» */
.eh-badge { padding: 10px 16px; border-radius: var(--r-pill); font: 600 14px/1.2 var(--font); white-space: nowrap; box-shadow: var(--shadow-1); }
.eh-badge--warm { background: var(--warm-tint); color: var(--warm-ink); }
.eh-badge--sky { background: var(--sky-tint); color: var(--sky-ink); }

/* the «logos»: grey marks that only name what they pretend to be */
.eh-logo { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--r-s); background: var(--grey-1); color: #8a8d98;
  font: 600 13px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.eh-logo svg { flex: none; width: 20px; height: 20px; fill: currentColor; }

/* the lines in the middle */
.eh__mid { grid-area: 1 / 1; position: relative; z-index: 2; text-align: center; }
.eh__mid { display: grid; justify-items: center; gap: 18px; }
.eh__says { display: grid; place-items: center; }
.eh__says > * { grid-area: 1 / 1; }
.eh__eyebrow { margin: 0; color: var(--text-3); font: 600 13px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; }
.eh__say { max-width: 20ch; margin: 0; font: 600 clamp(30px, 4.3vw, 60px)/1.08 var(--font); letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; }
.eh-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.eh-w > span { display: inline-block; }

@media (max-width: 699px) {
  .eh__stage { padding: 0 16px; }
  .eh-rev { width: 176px; padding: 12px 14px; }
  .eh-rev blockquote { margin: 6px 0 8px; font-size: 13px; }
  .eh-rev figcaption { font-size: 11.5px; gap: 6px; }
  .eh-ava { width: 22px; height: 22px; font-size: 11px; }
  .eh-stars { font-size: 12px; }
  .eh-badge { padding: 8px 12px; font-size: 12px; }
  .eh-logo { padding: 8px 12px; font-size: 11px; }
  .eh-logo svg { width: 16px; height: 16px; }
  .eh__say { font-size: clamp(28px, 8vw, 36px); max-width: 13ch; }
  .eh .hs-kaia { height: 52px; font-size: 15px; }
}

/* reduced motion (and the state before the scene starts): only the answer */
.eh.is-still .eh__fx, .eh.is-still .eh__mid { display: none; }
.eh.is-still .eh__stage { height: auto; min-height: 0; padding: clamp(64px, 9vw, 120px) 20px; }

/* the warm circle: the brand circle that runs the eraser */
.eh-ball { position: absolute; left: 0; top: 0; z-index: 4; width: clamp(84px, 10vw, 140px); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #f7a676, var(--warm) 55%, #c95a24); box-shadow: 0 18px 40px -12px rgba(var(--warm-rgb), .6); }

/* the trail of the eraser, in the colour of the page */
.eh-trail { position: absolute; left: 0; top: 0; z-index: 1; overflow: visible; }
.eh-trail path { fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* the slot machine counter: digits roll in grey wells, the stars run over */
.eh-slot { position: absolute; left: 50%; top: 56%; z-index: 2; display: grid; justify-items: center; gap: 8px; padding: 18px 28px 20px;
  border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-2); color: var(--text-2); font-size: 15px; }
.eh-slot__stars { white-space: nowrap; font-size: 18px; }
.eh-slot__n { display: flex; gap: .08em; font: 600 clamp(44px, 6vw, 84px)/1 var(--font); color: var(--ink); font-variant-numeric: tabular-nums; }
.eh-dg { display: block; height: 1.1em; overflow: hidden; padding: 0 .1em; border-radius: .16em; background: var(--grey-1); }
.eh-dg > span { display: flex; flex-direction: column; }
.eh-dg i { display: block; height: 1.1em; line-height: 1.1em; font-style: normal; text-align: center; }

@keyframes eh-caret { 50% { opacity: 0; } }
@media (max-width: 699px) {
  .eh-slot { padding: 14px 18px 16px; font-size: 13px; }
  .eh-slot__stars { font-size: 14px; }
}

/* ── e · combined (owner 18.10) ── */
/* the counter as a piece of the wall: its stars may run over five without widening it */
.eh-it.eh-slot { z-index: 2; }
.eh-slot__stars { width: 0; min-width: 100%; overflow: hidden; text-align: center; }
/* the typed turn: the full line keeps its place, the typed part and the caret lie on top */
.eh-tw { display: grid; }
.eh-tw > span { grid-area: 1 / 1; }
.eh-tw__ghost { visibility: hidden; }
.eh-tw__live.is-on::after { content: ""; display: inline-block; width: .06em; height: .95em; margin-left: .04em; vertical-align: -.1em; background: var(--warm); animation: eh-caret 1s steps(1) infinite; }

/* the answer: five stars over the headline, two cards, the black Kaia card */
.eh-ans { display: grid; justify-items: center; gap: clamp(28px, 4vw, 48px); max-width: var(--page-max); margin: 0 var(--edge); padding: var(--section-y) 0 0; }
.eh-hl { text-align: center; }
.eh-hl__stars { display: flex; justify-content: center; gap: .1em; color: var(--warm); font-size: clamp(38px, 5.4vw, 72px); line-height: 1; }
.eh-hl__stars > span { display: inline-block; -webkit-mask-size: 240px 240px; mask-size: 240px 240px; -webkit-mask-repeat: repeat; mask-repeat: repeat; }
.eh-hl h2 { max-width: 15ch; margin: .3em auto 0; font: 600 clamp(40px, 6.6vw, 96px)/1.02 var(--font); letter-spacing: -0.035em; color: var(--ink); text-wrap: balance; }
.eh-cards { display: grid; gap: 12px; width: 100%; max-width: var(--col-8); margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .eh-cards { grid-template-columns: 1fr 1fr; gap: var(--card-gap); } }
.eh-card { display: grid; align-content: start; gap: 18px; padding: var(--card-pad); border-radius: var(--r-l); background: #fff; box-shadow: var(--shadow-1); }
.eh-card__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; }
.eh-card__ic .icon { display: block; width: 24px; height: 24px; }
.eh-card__ic svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.eh-card__ic--warm { background: var(--warm-tint); color: var(--warm-ink); }
.eh-card__ic--sky { background: var(--sky-tint); color: var(--sky-ink); }
.eh-card p { margin: 0; font: 500 clamp(18px, 1.6vw, 22px)/1.4 var(--font); color: var(--ink); text-wrap: pretty; }
.eh-kaia { width: 100%; }
.eh.is-still[data-v="e"] .eh__stage { display: none; }

/* headlines broken at their «|» marks (owner 18.10: no stray breaks on any device): every line stays whole, the font
   shrinks to the widest line (js/ehrlich.js fitLines) */
.eh-ln { display: block; white-space: nowrap; }
.eh-fit, .eh-hl h2.eh-fit { max-width: none; }
.eh-tw__live { white-space: pre-line; }
.eh__say--tease, .eh__say--turn, .eh-hl h2 { text-wrap: nowrap; }
@media (max-width: 699px) {   /* phones: smaller praise, so more of it fits around the line */
  .eh[data-v="e"] .eh-rev { width: 148px; padding: 10px 12px; }
  .eh[data-v="e"] .eh-rev blockquote { font-size: 12px; margin: 4px 0 6px; }
  .eh[data-v="e"] .eh-rev figcaption { font-size: 10.5px; }
  .eh[data-v="e"] .eh-logo, .eh[data-v="e"] .eh-badge { font-size: 10.5px; padding: 7px 10px; }
}

/* e · the «Trusted by» strip (owner 19.10): grey wordmarks run past like on every agency site; invented names only */
.eh-trust { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: grid; justify-items: center; gap: 10px; padding: 0 0 clamp(14px, 2.4vw, 26px); pointer-events: none; }
.eh-trust__cap { font: 600 11px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.eh-trust__row { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.eh-trust__track { display: flex; gap: clamp(28px, 4vw, 56px); width: max-content; animation: eh-trust 32s linear infinite; }
@keyframes eh-trust { to { transform: translateX(-50%); } }
.eh-wm { display: inline-flex; align-items: center; gap: 7px; color: #9a9da8; font: 600 clamp(17px, 1.7vw, 22px)/1 var(--font); white-space: nowrap; }
.eh-wm svg { width: 1.05em; height: 1.05em; fill: currentColor; }
.eh-wm--1 { letter-spacing: .14em; font-weight: 700; font-size: clamp(14px, 1.4vw, 18px); }
.eh-wm--2 { font-weight: 500; letter-spacing: -0.03em; }
.eh-wm--3 { font-style: italic; font-weight: 600; letter-spacing: -0.01em; }
@media (prefers-reduced-motion: reduce) { .eh-trust__track { animation: none; } }

/* e · layout 20.10 (owner): the line on top, the counter under it, the reviews rain down below */
.eh[data-v="e"] .eh__mid { align-self: start; margin-top: clamp(28px, 7svh, 88px); }
.eh[data-v="e"] .eh-it.eh-slot { left: 50%; }
.eh[data-v="e"] .eh__say { font-size: clamp(26px, 3.6vw, 52px); }

.eh-kaia .kcta { margin: 0; }   /* the answer block already has the page edge and the gap */