/* ==========================================================================
   IVR & Call Recording (After Hours). Page scenes only; prefix ivr-.
   The signature object is the counter phone that answers itself and records
   (.ivr-desk): it answers in the hero (menu, key press, REC light, the saved
   slip), rings on the counter camera in Step 2, plays its recordings back in
   Step 3, asks the survey question in Step 4 and becomes our booking menu.
   The closing band hangs its handset in neon.
   Motion: everything rests finished. Armed poses live under html.motion (or
   under .is-run, which only ivr.js adds when motion is allowed).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero: the phone order on phones (headline, one lead line, the button, then
   the phone), page-scoped until the kit takes it (THEME kit change)
   -------------------------------------------------------------------------- */
@media (min-width: 1000px) {
  .ivr-hero .ah-phero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 999px) {
  .ivr-hero .ah-phero__grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .ivr-hero .ah-phero__copy, .ivr-hero .ivr-hero__acts { display: contents; }
  .ivr-hero .ah-phero__h { margin-bottom: 16px; }
  .ivr-hero .ivr-hero__lead { order: 1; margin-bottom: 22px; }
  .ivr-hero__go { order: 2; align-self: flex-start; }
  .ivr-hero__object { order: 3; margin-top: 30px; }
  .ivr-hero .ivr-hero__more { order: 4; margin: 34px 0 20px; }
  .ivr-hero__walk { order: 5; align-self: flex-start; }
}
@media (max-width: 480px) {
  .ivr-hero .ah-crumbs { margin-bottom: 18px; }
  .ivr-hero .ah-kicker { margin-bottom: 14px; font-size: 0.8rem; letter-spacing: 0.13em; }
  .ivr-hero .ah-phero__h { margin-bottom: 14px; }
  .ivr-hero .ivr-hero__lead { margin-bottom: 18px; font-size: 1.06rem; line-height: 1.5; }
  .ivr-hero__object { margin-top: 26px; }
}

/* --------------------------------------------------------------------------
   The scene: PAWN neon on the bricks, the counter phone on the lit glass case
   -------------------------------------------------------------------------- */
.ivr-scene { position: relative; width: min(100%, 560px); margin: 0; padding-top: 128px; }
.ivr-scene__neon { position: absolute; z-index: 0; top: 0; left: 0; width: 220px; height: auto; overflow: visible; pointer-events: none; }
.ivr-neon__halo, .ivr-neon__tube, .ivr-neon__core { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ivr-neon__halo { stroke: var(--ah-neon-pink); stroke-width: 16; opacity: 0.6; }
.ivr-neon__tube { stroke: var(--ah-neon-pink); stroke-width: 7; }
.ivr-neon__core { stroke: var(--ah-neon-pink-core); stroke-width: 2.4; }
.ivr-neon__hw circle { fill: #141c2c; stroke: var(--ah-950); stroke-width: 2; }
.ivr-neon__sub { font: 800 15px/1 var(--ah-body); letter-spacing: 0.3em; fill: var(--ah-neon-sky); }
@media (prefers-reduced-motion: no-preference) {
  .ivr-neon__lit { animation: ah-ignite 1.2s 0.35s both; }
}
@media (max-width: 600px) {
  .ivr-scene { padding-top: 0; }
  .ivr-scene__neon { display: none; }
}

/* the lit glass case the phone stands on (gold rings are small objects) */
.ivr-scene__case {
  position: relative; z-index: 1; height: 70px; margin: -8px -3% 0;
  border: 2px solid var(--ah-950); border-radius: 4px 4px 0 0;
  background:
    linear-gradient(180deg, rgba(200, 230, 255, 0.42) 0 9px, var(--ah-950) 9px 11px, transparent 11px),
    radial-gradient(circle at 50% 50%, transparent 4px, var(--ah-gold) 4.5px 6.5px, transparent 7px) 26px 30px / 78px 16px repeat-x,
    radial-gradient(circle, rgba(255, 217, 138, 0.42) 1.3px, transparent 1.8px) 0 12px / 8px 8px,
    linear-gradient(180deg, transparent 0 calc(100% - 15px), var(--ah-950) calc(100% - 15px) calc(100% - 13px), #3a2414 calc(100% - 13px)),
    linear-gradient(180deg, #13223d, #0b1528);
}
.ivr-scene__case::after { content: ""; position: absolute; inset: 11px 0 15px; background: linear-gradient(115deg, transparent 0 22%, rgba(200, 230, 255, 0.08) 22% 30%, transparent 30% 64%, rgba(200, 230, 255, 0.06) 64% 69%, transparent 69%); }
.ivr-scene__foot { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 50px; }
.ivr-scene__cap { color: var(--ah-fog); font-size: 1rem; font-weight: 700; text-align: center; }

/* --------------------------------------------------------------------------
   The counter phone (hero + booking): dark plastic base, handset in its
   cradle, a backlit LCD, the REC light and a rubber keypad
   -------------------------------------------------------------------------- */
.ivr-desk { position: relative; z-index: 2; --key-w: 34px; --key-h: 28px; }
.ivr-desk__body {
  position: relative; display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 14px;
  padding: 16px 16px 18px 12px;
  border: 3px solid var(--ah-950); border-radius: 26px 26px 16px 16px;
  background: linear-gradient(180deg, #2c3446, #181e2b 52%, #10141d);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.13), inset 0 -7px 0 rgba(0, 0, 0, 0.35), 8px 8px 0 var(--ah-blue);
}
.ivr-desk__cradle { position: relative; min-height: 160px; border-radius: 20px; background: #0b0f17; box-shadow: inset 0 4px 0 rgba(0, 0, 0, 0.6), inset 0 0 0 2px rgba(255, 255, 255, 0.05); }
.ivr-desk__handset { position: absolute; inset: 4px 2px; width: calc(100% - 4px); height: calc(100% - 8px); overflow: visible; }
.ivr-hs { fill: #4a5568; stroke: var(--ah-950); stroke-width: 5; }
.ivr-hs__hi { fill: none; stroke: rgba(255, 255, 255, 0.34); stroke-width: 4; stroke-linecap: round; }
.ivr-hs__grill circle { fill: #11151d; }
.ivr-desk__face { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: start; min-width: 0; }

/* the backlit LCD: ink on pale sky, the brightest thing on the counter */
.ivr-desk__screen {
  position: relative; min-width: 0; padding: 10px 12px 12px;
  border: 3px solid var(--ah-950); border-radius: 10px;
  background-color: #c9ecff;
  background-image: repeating-linear-gradient(180deg, rgba(11, 20, 36, 0.045) 0 1px, transparent 1px 3px), radial-gradient(120% 90% at 28% 0, #e8f7ff, #b9e3fb 72%);
  color: var(--ah-ink);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55), 0 0 0 4px #0b0f17;
}
.ivr-tree__bar { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; padding-bottom: 7px; border-bottom: 2px solid rgba(11, 20, 36, 0.22); color: var(--ah-ink-2); font: 800 0.76rem/1.25 var(--ah-mono); letter-spacing: 0.04em; text-transform: uppercase; }
.ivr-tree__bar b { color: var(--ah-ink); font-weight: 800; white-space: nowrap; }
.ivr-tree__ring { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ivr-tree__body { display: grid; gap: 4px; }
.ivr-tree__line { display: flex; align-items: center; gap: 9px; min-height: 31px; padding: 3px 8px 3px 4px; border-radius: 6px; font-size: 0.95rem; font-weight: 700; line-height: 1.25; transition: background-color 0.25s, color 0.25s, opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out); }
.ivr-tree__line--say { gap: 7px; padding-left: 2px; color: var(--ah-ink-2); font-style: italic; font-weight: 600; }
.ivr-tree__say { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ivr-tree__key { flex: none; display: grid; place-items: center; width: 25px; height: 25px; border: 2px solid var(--ah-ink); border-radius: 6px; background: rgba(255, 255, 255, 0.5); font: 900 1rem/1 var(--ah-display); }
.ivr-tree__line.pressed { background: var(--ah-ink); color: var(--ah-sky); }
.ivr-tree__line.pressed .ivr-tree__key { border-color: var(--ah-950); background: var(--ah-blue); color: var(--ah-ink); }
.ivr-tree__result { display: flex; align-items: center; gap: 7px; margin-top: 8px; padding: 5px 9px; border: 2px dashed rgba(11, 20, 36, 0.45); border-radius: 6px; color: #0d4f9c; font-size: 0.9rem; font-weight: 800; line-height: 1.25; transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out); } /* darker than blue-ink: the LCD's lower half is a deeper sky */
.ivr-tree__result svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* the REC light and the keypad */
.ivr-desk__side { display: grid; justify-items: center; gap: 12px; }
.ivr-desk__rec { display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px 4px; border: 2px solid var(--ah-950); border-radius: 5px; background: #0b0f17; color: #8fa3bd; font: 800 0.72rem/1 var(--ah-mono); letter-spacing: 0.16em; text-transform: uppercase; }
.ivr-desk__led { width: 10px; height: 10px; border-radius: 50%; background: #3b1a26; box-shadow: 0 0 0 2px #0b0f17; transition: background-color 0.2s, box-shadow 0.2s; }
.ivr-desk__rec.is-on { color: #ffd6e5; }
.ivr-desk__rec.is-on .ivr-desk__led { background: #ff4f8e; box-shadow: 0 0 0 2px #0b0f17, 0 0 9px 1px var(--ah-neon-pink); }
.ivr-desk__rec--line { color: var(--ah-sky); }
.ivr-desk__rec--line .ivr-desk__led { background: var(--ah-neon-sky); box-shadow: 0 0 0 2px #0b0f17, 0 0 8px var(--ah-neon-sky); }
.ivr-desk__keys { display: grid; grid-template-columns: repeat(3, var(--key-w)); gap: 7px; }
.ivr-desk__key { display: grid; place-items: center; height: var(--key-h); border: 2px solid var(--ah-950); border-radius: 7px; background: linear-gradient(180deg, #3d4759, #232b3a); color: var(--ah-sky); font: 900 1rem/1 var(--ah-display); font-style: normal; box-shadow: 0 3px 0 #05070c; transition: background-color 0.15s, color 0.15s, translate 0.15s, box-shadow 0.15s; }
.ivr-desk__key.is-down { background: var(--ah-blue); color: var(--ah-ink); translate: 0 2px; box-shadow: 0 1px 0 #05070c, 0 0 10px 1px rgba(47, 155, 255, 0.7); }

/* the slip the finished call slides off as */
.ivr-desk__slip {
  position: absolute; z-index: 4; right: 7%; bottom: -36px; display: flex; align-items: center; gap: 9px; max-width: min(86%, 330px);
  padding: 9px 13px 8px; border: 2px solid var(--ah-950); border-radius: 3px;
  background-color: #fbf9f2; background-image: var(--ah-fiber); color: var(--ah-ink);
  font: 800 0.9rem/1.3 var(--ah-body); box-shadow: 4px 4px 0 var(--ah-neon-pink); rotate: 1deg;
  transition: opacity 0.4s var(--ease-out), transform 0.5s var(--ease-back);
}
.ivr-desk__slipic { flex: none; width: 34px; height: 12px; stroke: var(--ah-blue-ink); stroke-width: 2.4; stroke-linecap: round; }

/* the demo (ivr.js adds .is-run only when motion is allowed): lines build, a key goes down, the call files itself */
.ivr-desk.is-run .ivr-tree__line:not(.show), .ivr-desk.is-run .ivr-tree__result:not(.show) { opacity: 0; transform: translateY(6px); }
.ivr-desk.is-run .ivr-desk__slip:not(.show) { opacity: 0; transform: translateY(-16px); }

/* compact phone (phones): the keypad drops to one row of 1 2 3 under the screen */
@media (max-width: 560px) {
  .ivr-desk { --key-w: 44px; --key-h: 30px; }
  .ivr-desk__body { grid-template-columns: 46px minmax(0, 1fr); gap: 10px; padding: 12px 12px 14px 9px; border-radius: 22px 22px 14px 14px; }
  .ivr-desk__cradle { min-height: 0; border-radius: 16px; }
  .ivr-desk__face { grid-template-columns: minmax(0, 1fr); gap: 11px; }
  .ivr-desk__side { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .ivr-desk__key:nth-child(n+4) { display: none; }
  .ivr-desk__screen { padding: 8px 10px 10px; }
  .ivr-tree__line { min-height: 29px; font-size: 0.92rem; }
  .ivr-desk__slip { right: 4%; bottom: -50px; font-size: 0.86rem; }
  .ivr-scene__foot { margin-top: 64px; }
}
@media (max-width: 359px) {
  .ivr-desk__body { grid-template-columns: 36px minmax(0, 1fr); }
  .ivr-desk { --key-w: 38px; }
  .ivr-tree__bar { font-size: 0.7rem; letter-spacing: 0.02em; }
}

/* --------------------------------------------------------------------------
   Step 1: the dictionary card, one beat, with the phone's own keys
   -------------------------------------------------------------------------- */
.ivr-what { --deco-at: 0 100%; --deco-size: 42% 62%; padding-block: clamp(64px, 8vw, 104px); }
.ivr-what__head { margin-bottom: clamp(26px, 3.4vw, 42px); }
.ivr-defn { max-width: 1000px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 44px; rotate: -0.4deg; }
@media (min-width: 880px) {
  .ivr-defn { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; padding: 34px 44px 30px; }
  .ivr-defn__word { padding-right: 34px; border-right: 2px dashed rgba(11, 20, 36, 0.22); }
}
.ivr-defn .ah-defn__term { font-size: clamp(1.9rem, 1.2rem + 2vw, 2.9rem); line-height: 1.02; }
.ivr-defn__body > * + * { margin-top: 14px; }
.ivr-keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ivr-keys li { display: grid; justify-items: start; align-content: start; gap: 8px; color: var(--ah-ink); font-size: 1rem; font-weight: 600; line-height: 1.35; }
.ivr-keycap { display: grid; place-items: center; width: 48px; height: 42px; border: 2px solid var(--ah-950); border-radius: 9px; background: linear-gradient(180deg, #3d4759, #1a202c); color: var(--ah-sky); font: 900 1.45rem/1 var(--ah-display); box-shadow: 0 4px 0 #05070c; }
@media (max-width: 600px) {
  .ivr-keys { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ivr-keys li { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
  .ivr-keycap { width: 44px; height: 38px; }
}

/* --------------------------------------------------------------------------
   Step 2: the counter on the shop camera, and the IVR lever (Jeff's v4 scene)
   -------------------------------------------------------------------------- */
.ivr-two__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; align-items: center; }
@media (min-width: 1000px) { .ivr-two__grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(36px, 4.4vw, 70px); } }
/* a long headline in a half column: one step down the kit scale keeps it to 3 lines */
.ivr-two__copy .ah-h2, .ivr-survey__copy .ah-h2 { font-size: clamp(2.35rem, 1.1rem + 2.6vw, 3.55rem); }
.ivr-two__copy .ah-h2 { margin-bottom: 22px; }
.ivr-cctv { margin: 0; }
.ivr-cctv__housing { position: relative; padding: 18px; border: 3px solid var(--ah-950); border-radius: 18px; background: linear-gradient(160deg, #3d4759, #1b212e 55%, #11151d); box-shadow: 8px 8px 0 var(--ah-blue), inset 0 0 0 2px rgba(255, 255, 255, 0.1); }
.ivr-cctv__screw { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e3e9f0, #5d6a7d); box-shadow: 0 0 0 1.5px var(--ah-950); }
.ivr-cctv__screw--tl { top: 5px; left: 5px; } .ivr-cctv__screw--tr { top: 5px; right: 5px; } .ivr-cctv__screw--bl { bottom: 5px; left: 5px; } .ivr-cctv__screw--br { bottom: 5px; right: 5px; }
.ivr-cctv__screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border: 3px solid var(--ah-950); border-radius: 14px; background: #0a1628; }
.ivr-cctv__feed { position: absolute; inset: 0; width: 100%; height: 100%; }
.ivr-cctv__neon, .ivr-cctv__neonhalo { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ivr-cctv__neonhalo { stroke: rgba(255, 63, 134, 0.35); stroke-width: 18; }
.ivr-cctv__neon { stroke: #ffd3e3; stroke-width: 6; }
.ivr-cctv__sub { font: 800 12px/1 var(--ah-body); letter-spacing: 0.3em; fill: #8fd6ff; opacity: 0.8; }
.ivr-cctv__head { transform-box: fill-box; transform-origin: 50% 100%; transition: transform 0.6s var(--ease-back); transform: translateX(10px) rotate(12deg); }
.ivr-cctv.with .ivr-cctv__head { transform: translateX(-6px) rotate(-8deg); }
/* tension: a pink halftone over the counter while the phone rings */
.ivr-cctv__tension { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle, rgba(255, 63, 134, 0.38) 1.3px, transparent 1.8px) 0 0 / 9px 9px; -webkit-mask-image: radial-gradient(42% 60% at 52% 52%, #000, transparent); mask-image: radial-gradient(42% 60% at 52% 52%, #000, transparent); transition: opacity 0.5s; }
.ivr-cctv.with .ivr-cctv__tension { opacity: 0; }
.ivr-cctv__lines { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(173, 229, 255, 0.05) 0 1px, transparent 1px 4px); }
.ivr-cctv__hud { position: absolute; left: 14px; top: 11px; color: #d8f1ff; font: 800 0.74rem/1 var(--ah-mono); letter-spacing: 0.14em; text-transform: uppercase; text-shadow: 0 0 4px rgba(47, 155, 255, 0.8); }
/* the customer's mood: impatience dots, then a check */
.ivr-cctv__mood { position: absolute; left: 13%; top: 43%; width: 13%; display: grid; place-items: center; }
.ivr-cctv__dots, .ivr-cctv__ok { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 6px 9px; border: 2px solid var(--ah-950); border-radius: 999px; background: var(--ah-cream); transition: opacity 0.35s, scale 0.45s var(--ease-back); }
.ivr-cctv__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ah-red-ink); }
.ivr-cctv__ok { padding: 4px; background: var(--ah-blue); opacity: 0; scale: 0.6; }
.ivr-cctv__ok svg { width: 18px; height: 18px; fill: none; stroke: var(--ah-ink); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.ivr-cctv.with .ivr-cctv__dots { opacity: 0; scale: 0.6; }
.ivr-cctv.with .ivr-cctv__ok { opacity: 1; scale: 1; }
/* the counter phone, small, on the counter */
.ivr-cctv__desk { position: absolute; left: 60%; bottom: 25%; width: 33%; }
.ivr-cctv__deskbody { position: relative; display: grid; grid-template-columns: 18% minmax(0, 1fr); gap: 6%; padding: 6% 6% 7% 5%; border: 2px solid var(--ah-950); border-radius: 12px 12px 8px 8px; background: linear-gradient(180deg, #2c3446, #10141d); box-shadow: 4px 4px 0 rgba(3, 6, 13, 0.6); }
.ivr-cctv__hs { border: 2px solid var(--ah-950); border-radius: 10px; background: #2a3345; }
.ivr-cctv__lcd { display: grid; min-height: 52px; padding: 5px 6px; border: 2px solid var(--ah-950); border-radius: 5px; background: #c9ecff; color: var(--ah-ink); font-size: clamp(0.56rem, 0.35rem + 0.55vw, 0.78rem); line-height: 1.2; }
.ivr-cctv__ring, .ivr-cctv__ivr { grid-area: 1 / 1; display: grid; align-content: center; gap: 2px; transition: opacity 0.3s; }
.ivr-cctv__ring small { font: 800 0.92em/1.1 var(--ah-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ah-ink-2); }
.ivr-cctv__ring b { font-weight: 800; white-space: nowrap; }
.ivr-cctv__ivr { opacity: 0; }
.ivr-cctv__ivr b { font-weight: 800; color: var(--ah-blue-ink); }
.ivr-cctv__menu { display: flex; gap: 3px; margin-top: 2px; }
.ivr-cctv__menu i { display: grid; place-items: center; width: 1.5em; height: 1.4em; border: 1.5px solid var(--ah-ink); border-radius: 3px; font: 900 1em/1 var(--ah-display); font-style: normal; }
.ivr-cctv__menu i.is-on { background: var(--ah-ink); color: var(--ah-sky); }
.ivr-cctv.with .ivr-cctv__ring { opacity: 0; }
.ivr-cctv.with .ivr-cctv__ivr { opacity: 1; }
.ivr-cctv__waves { position: absolute; left: 50%; top: -34%; width: 70%; height: 40%; translate: -50% 0; }
.ivr-cctv__waves i { position: absolute; inset: 0; border: 3px solid var(--ah-neon-sky); border-bottom: 0; border-left-color: transparent; border-right-color: transparent; border-radius: 50% 50% 0 0; opacity: 0.85; }
.ivr-cctv__waves i + i { inset: 26% 18% 0; }
.ivr-cctv.with .ivr-cctv__waves { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  html.motion .ivr-cctv:not(.with) .ivr-cctv__waves i { animation: ivr-ringwave 1.1s ease-out infinite; }
  html.motion .ivr-cctv:not(.with) .ivr-cctv__waves i + i { animation-delay: 0.25s; }
  html.motion .ivr-cctv:not(.with) .ivr-cctv__dots i { animation: ivr-dot 1s ease-in-out infinite; }
  html.motion .ivr-cctv:not(.with) .ivr-cctv__dots i:nth-child(2) { animation-delay: 0.15s; }
  html.motion .ivr-cctv:not(.with) .ivr-cctv__dots i:nth-child(3) { animation-delay: 0.3s; }
  html.motion .ivr-cctv:not(.with) .ivr-cctv__deskbody { animation: ivr-buzz 1.1s steps(2) infinite; }
}
@keyframes ivr-ringwave { 0% { opacity: 0; scale: 0.7; } 30% { opacity: 0.9; } 100% { opacity: 0; scale: 1.15; } }
@keyframes ivr-dot { 50% { translate: 0 -3px; opacity: 0.5; } }
@keyframes ivr-buzz { 0%, 60% { translate: 0 0; } 70% { translate: -1px 0; } 80% { translate: 1px 0; } 90% { translate: -1px 0; } }
/* the console: the big IVR lever */
.ivr-cctv__console { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 24px; }
.ivr-lever {
  display: inline-flex; align-items: center; gap: 12px; min-height: 58px; padding: 6px 18px;
  border: 3px solid var(--ah-950); border-radius: 12px;
  background: linear-gradient(180deg, #f1f4f8, #d3dae3 55%, #e2e8ee); color: var(--ah-ink); /* light enough mid-face for the lit label (AA) */
  font: 800 0.82rem/1 var(--ah-mono); letter-spacing: 0.12em; text-transform: uppercase;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.7), 4px 4px 0 var(--ah-blue); cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: translate 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.ivr-lever:hover { translate: -2px -2px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.7), 6px 6px 0 var(--ah-blue); }
.ivr-lever:active { translate: 2px 2px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.7), 1px 1px 0 var(--ah-blue); }
.ivr-lever:focus-visible { outline-color: var(--ah-sky); }
.ivr-lever__lab { opacity: 0.72; transition: opacity 0.2s, color 0.2s; }
.ivr-lever[aria-pressed="false"] .ivr-lever__lab--off { opacity: 1; color: var(--ah-red-ink); }
.ivr-lever[aria-pressed="true"] .ivr-lever__lab--on { opacity: 1; color: #0d4f9c; }
.ivr-lever__track { position: relative; flex: none; width: 66px; height: 34px; border: 2px solid var(--ah-950); border-radius: 999px; background: #1a202c; box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.5); transition: background-color 0.25s; }
.ivr-lever__knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border: 2px solid var(--ah-950); border-radius: 50%; background: radial-gradient(circle at 36% 34%, var(--ah-brass-hi) 0 18%, var(--ah-brass) 52%, var(--ah-brass-lo) 100%); transition: transform 0.35s var(--ease-back); }
.ivr-lever[aria-pressed="true"] .ivr-lever__track { background: var(--ah-blue); }
.ivr-lever[aria-pressed="true"] .ivr-lever__knob { transform: translateX(32px); }
.ivr-cctv__cap { max-width: 34em; margin: 18px auto 0; color: var(--ah-paper); font-size: 1.05rem; font-weight: 700; line-height: 1.45; text-align: center; text-wrap: balance; }
.ivr-cctv:not(.with) .ivr-cctv__capon, .ivr-cctv.with .ivr-cctv__capoff { display: none; }
/* no JS: the lever can't move, so both captions show and the lever rests out of the way */
html:not(.js) .ivr-lever { display: none; }
html:not(.js) .ivr-cctv__cap span { display: block !important; }
html:not(.js) .ivr-cctv__cap span + span { margin-top: 6px; color: var(--ah-sky); }
@media (max-width: 480px) {
  .ivr-cctv__housing { padding: 12px; border-radius: 14px; }
  .ivr-cctv__screen { border-radius: 10px; }
  .ivr-cctv__hud { left: 10px; top: 8px; font-size: 0.66rem; }
  .ivr-cctv__desk { left: 55%; width: 40%; bottom: 23%; }
  .ivr-cctv__lcd { min-height: 44px; }
  .ivr-lever { gap: 9px; padding: 6px 12px; }
}
/* the smallest phones: give the little counter phone's screen room for "IVR answered" */
@media (max-width: 360px) { .ivr-cctv__desk { left: 50%; width: 46%; } }

/* --------------------------------------------------------------------------
   Step 3: two call recordings from the Shmello thread
   -------------------------------------------------------------------------- */
.ivr-calls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; align-items: start; max-width: 1080px; margin: 0 auto; }
@media (min-width: 900px) { .ivr-calls { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; } .ivr-call--yes { margin-top: 30px; } }
.ivr-call {
  position: relative; border: 2px solid var(--ah-950); border-radius: 12px;
  background-color: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink);
  box-shadow: 7px 7px 0 var(--ah-neon-pink); rotate: -0.5deg;
}
.ivr-call--yes { box-shadow: 7px 7px 0 var(--ah-blue); rotate: 0.5deg; }
.ivr-call :focus-visible { outline-color: var(--ah-ink); }
.ivr-call__app { display: flex; align-items: center; gap: 9px; padding: 10px 18px 9px; border-radius: 10px 10px 0 0; background: var(--ah-ink); color: #cdd6e1; font: 700 0.74rem/1.2 var(--ah-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.ivr-call__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ah-neon-pink); box-shadow: 0 0 0 2px var(--ah-ink), 0 0 6px var(--ah-neon-pink); }
.ivr-call__player { display: flex; align-items: center; gap: 14px; padding: 16px 18px 6px; }
.ivr-call__play { flex: none; display: grid; place-items: center; width: 50px; height: 50px; padding: 0; border: 2px solid var(--ah-950); border-radius: 50%; background: var(--ah-blue); color: var(--ah-ink); box-shadow: 3px 3px 0 var(--ah-ink); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: translate 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out); }
.ivr-call__play:hover { translate: -1px -1px; box-shadow: 4px 4px 0 var(--ah-ink); }
.ivr-call__play:active { translate: 2px 2px; box-shadow: 1px 1px 0 var(--ah-ink); }
.ivr-call__play svg { width: 20px; height: 20px; fill: currentColor; }
.ivr-call__is, .ivr-call__play[aria-pressed="true"] .ivr-call__ip { display: none; }
.ivr-call__play[aria-pressed="true"] .ivr-call__is { display: block; }
.ivr-call__wave { --p: 0%; position: relative; flex: 1 1 auto; min-width: 0; height: 42px; }
.ivr-wave { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ivr-wave__bars { fill: none; stroke: rgba(11, 20, 36, 0.32); stroke-width: 3.2px; stroke-linecap: round; }
.ivr-wave__flat { fill: none; stroke: var(--ah-red-ink); stroke-width: 3px; stroke-linecap: round; stroke-dasharray: 2 6; }
.ivr-call__played { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.ivr-call__played .ivr-wave__bars { stroke: var(--ah-blue-ink); }
.ivr-call__played .ivr-wave__flat { stroke-dasharray: none; }
.ivr-call__head { position: absolute; top: -4px; bottom: -4px; left: var(--p); width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--ah-ink); opacity: 0; }
.ivr-call.is-playing .ivr-call__head { opacity: 1; }
.ivr-call__tag { display: flex; align-items: center; gap: 8px; padding: 8px 18px 0; font: 900 1.3rem/1 var(--ah-display); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ah-red-ink); }
.ivr-call--yes .ivr-call__tag { color: var(--ah-blue-ink); }
.ivr-call__tag svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.ivr-call__lines { display: grid; gap: 9px; padding: 14px 18px 4px; }
.ivr-line { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 2px 4px; border-radius: 6px; color: var(--ah-ink); font-size: 1rem; font-weight: 600; line-height: 1.42; transition: opacity 0.3s, background-color 0.3s; }
.ivr-line__who { color: var(--ah-ink-2); font: 800 0.7rem/1.4 var(--ah-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.ivr-line--you .ivr-line__who { color: var(--ah-blue-ink); }
.ivr-line--you .ivr-line__said { font-weight: 700; }
.ivr-line--hang .ivr-line__said { color: var(--ah-red-ink); font-style: italic; font-weight: 800; letter-spacing: 0.02em; }
.ivr-line.is-ahead { opacity: 0.25; }
.ivr-line.is-live { background: rgba(27, 141, 246, 0.16); }
.ivr-call__out { position: relative; margin: 14px 18px 0; padding: 14px 150px 20px 4px; border-top: 2px dashed rgba(11, 20, 36, 0.3); color: var(--ah-ink); font-weight: 800; line-height: 1.4; }
.ivr-call__stamp { position: absolute; right: 18px; bottom: 18px; }
@media (max-width: 420px) {
  .ivr-call__out { padding-right: 4px; padding-bottom: 66px; }
  .ivr-call__stamp { right: auto; left: 22px; bottom: 16px; }
  .ivr-call__player, .ivr-call__lines { padding-inline: 14px; }
  .ivr-call__tag { padding-inline: 14px; }
  .ivr-call__out { margin-inline: 14px; }
  .ivr-line { grid-template-columns: 50px minmax(0, 1fr); gap: 8px; }
}
@media (prefers-reduced-motion: no-preference) {
  html.motion .ivr-call:not(.is-play) .ivr-call__stamp { opacity: 0; scale: 1.7; }
  .ivr-call.is-play .ivr-call__stamp { animation: ivr-thump 0.5s var(--ease-back) 0.7s both; }
  .ivr-call--yes.is-play .ivr-call__stamp { animation-delay: 1s; }
  .ivr-call.is-playing .ivr-call__stamp:not(.is-stamped) { opacity: 0; animation: none; }
  .ivr-call .ivr-call__stamp.is-stamped { animation: ivr-thump 0.45s var(--ease-back) both; }
}
@keyframes ivr-thump { 0% { opacity: 0; scale: 1.8; } 60% { opacity: 1; scale: 0.94; } 100% { opacity: 1; scale: 1; } }

/* the call log: ten answered calls on thermal tape, one of them a no-click */
.ivr-leak { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; max-width: 1000px; margin: clamp(64px, 8vw, 100px) auto 0; }
@media (min-width: 860px) { .ivr-leak { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); } }
.ivr-log { --tilt: -1deg; }
.ivr-log .ah-receipt__paper { font-size: 0.9rem; }
.ivr-log__rows li { position: relative; padding: 4px 0; }
.ivr-log__rows li span { gap: 8px; }
.ivr-log__wave { flex: none; width: 38px; height: 12px; stroke: rgba(11, 20, 36, 0.55); stroke-width: 2.2; stroke-linecap: round; }
.ivr-log__no { color: var(--ah-red-ink); }
.ivr-log__no b { color: var(--ah-red-ink); }
.ivr-log__no s { text-decoration-thickness: 2px; }
.ivr-log__no .ivr-log__wave { stroke: var(--ah-red-ink); }
.ivr-log__stamp { position: absolute; right: 30%; top: 50%; translate: 0 -50%; rotate: -6deg; background: rgba(251, 249, 242, 0.85); }
@media (max-width: 359px) { .ivr-log__wave { display: none; } }
.ivr-leak__num { margin-bottom: 18px; color: var(--ah-sky); font: 900 clamp(4.6rem, 3rem + 5vw, 7.6rem)/0.86 var(--ah-display); letter-spacing: 0.005em; text-shadow: 0.04em 0.04em 0 var(--ah-blue-deep), 0.075em 0.075em 0 var(--ah-950); }
.ivr-leak__copy .ah-copy p { font-size: 1.15rem; }

/* --------------------------------------------------------------------------
   Step 4: the caller grades the call; the owner's phone lights the dark counter
   -------------------------------------------------------------------------- */
.ivr-survey { --vig-at: 70% 46%; }
.ivr-survey__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 46px; }
@media (min-width: 1000px) {
  .ivr-survey__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-areas: "copy scene" "talk scene"; column-gap: clamp(36px, 4.4vw, 72px); row-gap: 44px; align-items: start; }
  .ivr-survey__copy { grid-area: copy; } .ivr-survey__scene { grid-area: scene; } .ivr-survey__talk { grid-area: talk; }
}
.ivr-survey__copy .ah-h2 { margin-bottom: 22px; }
.ivr-survey__scene { position: relative; display: grid; grid-template-columns: minmax(0, 0.82fr) auto minmax(0, 1fr); gap: 10px; align-items: center; }
.ivr-beat { margin: 0; display: grid; justify-items: center; gap: 16px; }
.ivr-beat__lab { justify-self: center; }
.ivr-survey__then { display: grid; place-items: center; width: 54px; color: var(--ah-sky); }
.ivr-survey__then svg { width: 54px; height: 36px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 999px) and (min-width: 700px) { .ivr-survey__scene { max-width: 780px; margin-inline: auto; } }
@media (max-width: 699px) {
  .ivr-survey__scene { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ivr-survey__then { justify-self: center; rotate: 80deg; }
}

/* the caller's phone, at the end of the call */
.ivr-cphone { position: relative; width: min(100%, 236px); rotate: -1.5deg; }
.ivr-cphone__body { position: relative; padding: 9px; border: 3px solid var(--ah-950); border-radius: 36px; background: linear-gradient(160deg, #3a4456, #1a202c 40%, #11151d); box-shadow: 7px 7px 0 var(--ah-blue), inset 0 0 0 2px rgba(255, 255, 255, 0.12); }
.ivr-cphone__island { position: absolute; z-index: 2; left: 50%; top: 17px; width: 30%; height: 18px; margin-left: -15%; border-radius: 999px; background: #05070c; }
.ivr-cphone__screen { display: grid; justify-items: center; gap: 4px; padding: 40px 14px 16px; border: 2px solid var(--ah-950); border-radius: 27px; background: linear-gradient(180deg, #17284a, #0b1424 70%); color: var(--ah-paper); text-align: center; }
.ivr-cphone__who { font: 900 1.35rem/1.05 var(--ah-display); letter-spacing: 0.02em; }
.ivr-cphone__state { color: var(--ah-sky); font: 800 0.7rem/1.3 var(--ah-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.ivr-cphone__ask { display: flex; align-items: flex-start; gap: 6px; margin-top: 10px; padding: 8px 10px; border: 2px solid var(--ah-950); border-radius: 14px 14px 14px 5px; background: var(--ah-cream); color: var(--ah-ink); font-size: 0.88rem; font-weight: 800; line-height: 1.3; text-align: left; }
.ivr-cphone__ask svg { flex: none; width: 16px; height: 16px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ivr-cphone__how { margin-top: 4px; color: var(--ah-fog); font-size: 0.8rem; font-weight: 700; }
.ivr-cphone__pad { display: grid; grid-template-columns: repeat(3, 50px); gap: 8px 12px; margin-top: 10px; }
.ivr-cphone__k { display: grid; place-items: center; align-content: center; height: 46px; border-radius: 50%; background: rgba(173, 229, 255, 0.1); color: rgba(238, 244, 251, 0.45); font: 800 1.15rem/1 var(--ah-body); font-style: normal; }
.ivr-cphone__k small { font: 800 0.56rem/1 var(--ah-mono); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 2px; }
.ivr-cphone__k--opt { background: rgba(173, 229, 255, 0.24); color: var(--ah-paper); box-shadow: inset 0 0 0 2px rgba(173, 229, 255, 0.45); }
.ivr-cphone__k--two { background: var(--ah-neon-pink); color: var(--ah-ink); box-shadow: 0 0 0 2px var(--ah-950), 0 0 12px rgba(255, 63, 134, 0.75); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s, scale 0.3s var(--ease-back); }
.ivr-cphone__end { display: grid; place-items: center; width: 50px; height: 50px; margin-top: 10px; border: 2px solid var(--ah-950); border-radius: 50%; background: #e5484d; }
.ivr-cphone__end svg { width: 24px; height: 24px; fill: var(--ah-paper); }

/* the owner's phone, face up on the dark wood counter: its screen is the only light */
.ivr-countertop {
  position: relative; width: 100%; padding: 30px 18px 34px; border: 2px solid var(--ah-950); border-radius: 8px;
  background:
    radial-gradient(70% 60% at 50% 46%, rgba(3, 6, 13, 0) 30%, rgba(3, 6, 13, 0.62) 100%),
    repeating-linear-gradient(90deg, transparent 0 calc(33.33% - 2px), rgba(3, 6, 13, 0.75) calc(33.33% - 2px) 33.33%),
    repeating-linear-gradient(177deg, rgba(0, 0, 0, 0.16) 0 2px, transparent 2px 9px, rgba(255, 220, 170, 0.05) 9px 10px, transparent 10px 17px),
    linear-gradient(90deg, #4a2e1a, #3a2414 33%, #4f311c 34%, #3a2414 66%, #462b18 67%, #3a2414);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.55), inset 0 2px 0 rgba(255, 220, 170, 0.16);
}
/* the screen is the only light: printed in sky dots on the wood around the phone */
.ivr-countertop::before { content: ""; position: absolute; inset: 2% 4%; pointer-events: none; background: radial-gradient(circle, rgba(173, 229, 255, 0.55) 1.5px, transparent 2px) 0 0 / 9px 9px; -webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent 100%); mask-image: radial-gradient(closest-side, #000 45%, transparent 100%); }
.ivr-owner { position: relative; width: min(100%, 272px); margin: 0 auto; rotate: 2deg; }
.ivr-owner__body { position: relative; padding: 9px; border: 3px solid var(--ah-950); border-radius: 38px; background: linear-gradient(160deg, #3a4456, #1a202c 40%, #11151d); box-shadow: 6px 6px 0 rgba(3, 6, 13, 0.75), inset 0 0 0 2px rgba(255, 255, 255, 0.12); }
.ivr-owner__island { position: absolute; z-index: 2; left: 50%; top: 17px; width: 30%; height: 18px; margin-left: -15%; border-radius: 999px; background: #05070c; }
.ivr-owner__screen { display: grid; gap: 10px; padding: 46px 12px 26px; border: 2px solid var(--ah-950); border-radius: 29px; background: radial-gradient(120% 70% at 50% 0, #1d3a66, #0b1424 72%); color: var(--ah-paper); }
.ivr-owner__time { text-align: center; font: 900 3.4rem/0.9 var(--ah-display); letter-spacing: 0.02em; }
.ivr-owner__date { margin: -4px 0 10px; text-align: center; color: var(--ah-fog); font-size: 0.9rem; font-weight: 700; }
.ivr-notif { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; align-items: start; padding: 10px 11px; border: 2px solid var(--ah-950); border-radius: 14px; background: var(--ah-cream); color: var(--ah-ink); transition: opacity 0.45s var(--ease-out), transform 0.6s var(--ease-back); }
.ivr-notif--fail { box-shadow: 3px 3px 0 var(--ah-neon-pink); }
.ivr-notif--pass { background: #dfe7f1; }
.ivr-notif__ic { display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid var(--ah-950); border-radius: 8px; background: var(--ah-neon-pink); }
.ivr-notif--pass .ivr-notif__ic { background: var(--ah-blue); }
.ivr-notif__ic svg { width: 16px; height: 16px; fill: none; stroke: var(--ah-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ivr-notif__tx p { font-size: 0.84rem; line-height: 1.35; font-weight: 600; color: var(--ah-ink-2); }
.ivr-notif__tx .ivr-notif__t { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 2px; color: var(--ah-ink); font-size: 0.82rem; }
.ivr-notif__t b { font-weight: 800; }
.ivr-notif__t time { flex: none; color: var(--ah-ink-2); font-size: 0.74rem; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  html.motion .ivr-survey__scene:not(.is-play) .ivr-cphone__k--two { background: rgba(173, 229, 255, 0.24); color: var(--ah-paper); box-shadow: inset 0 0 0 2px rgba(173, 229, 255, 0.45); }
  .ivr-survey__scene.is-play .ivr-cphone__k--two { transition-delay: 0.7s; animation: ivr-press 0.4s var(--ease-back) 0.7s both; }
  html.motion .ivr-survey__scene:not(.is-play) .ivr-notif--fail { opacity: 0; transform: translateY(-18px) scale(0.96); }
  .ivr-survey__scene.is-play .ivr-notif--fail { transition-delay: 1.5s; }
}
@keyframes ivr-press { 0% { scale: 1; } 40% { scale: 0.86; } 100% { scale: 1; } }
/* the objection, under the owner's phone on phones and beside it on desktop */
.ivr-survey__talk { display: grid; gap: 18px; justify-items: start; }
.ivr-objection { width: min(100%, 540px); }
.ivr-objection__meta { display: inline-flex; align-items: center; gap: 8px; justify-self: start; color: var(--ah-sky); }
.ivr-objection__meta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ivr-objection__out { max-width: 30em; color: var(--ah-paper); font: 900 clamp(1.45rem, 1.1rem + 1vw, 1.9rem)/1.12 var(--ah-display); letter-spacing: 0.01em; }

/* --------------------------------------------------------------------------
   Under the hood: the customer's Shmello thread with numbered parts
   -------------------------------------------------------------------------- */
.ivr-hood__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; max-width: 1080px; margin: 0 auto; }
@media (min-width: 960px) { .ivr-hood__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 52px; } }
.ivr-thread { --browser-w: 660px; }
.ivr-thread .ah-browser__screen { aspect-ratio: auto; overflow: visible; background: #f3efe4; color: var(--ah-ink); }
.ivr-thread :focus-visible { outline-color: var(--ah-ink); }
.ivr-pin { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border: 2px solid var(--ah-950); border-radius: 50%; background: var(--ah-neon-pink); color: var(--ah-ink); font: 900 0.95rem/1 var(--ah-display); font-style: normal; box-shadow: 2px 2px 0 var(--ah-950); }
.ivr-thread__top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 16px; border-bottom: 2px solid rgba(11, 20, 36, 0.16); }
.ivr-thread__who { display: flex; align-items: center; gap: 9px; font-size: 1rem; }
.ivr-thread__who b { font-weight: 800; }
.ivr-thread__av { display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid var(--ah-950); border-radius: 50%; background: var(--ah-sky); }
.ivr-thread__av svg { width: 20px; height: 20px; fill: none; stroke: var(--ah-ink); stroke-width: 2; stroke-linecap: round; }
.ivr-thread__search { display: flex; align-items: center; gap: 8px; flex: 1 1 210px; min-height: 40px; padding: 0 6px 0 14px; border: 2px solid var(--ah-950); border-radius: 999px; background: #fffdf7; color: var(--ah-ink-2); font-size: 0.92rem; font-weight: 700; }
.ivr-thread__search svg { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.ivr-thread__search .ivr-pin { margin-left: auto; }
.ivr-thread__list { display: grid; gap: 14px; padding: 18px 16px 20px; }
.ivr-msg { display: grid; gap: 4px; max-width: 86%; }
.ivr-msg__b { padding: 10px 15px 9px; border: 2px solid var(--ah-950); border-radius: 18px; font-size: 0.98rem; font-weight: 700; line-height: 1.38; }
.ivr-msg__t { color: var(--ah-ink-2); font: 700 0.72rem/1.2 var(--ah-mono); letter-spacing: 0.06em; }
.ivr-msg--in { justify-self: start; }
.ivr-msg--in .ivr-msg__b { border-bottom-left-radius: 6px; background: #fffdf7; box-shadow: 3px 3px 0 rgba(11, 20, 36, 0.18); }
.ivr-msg--out { justify-self: end; justify-items: end; }
.ivr-msg--out .ivr-msg__b { border-bottom-right-radius: 6px; background: var(--ah-blue); box-shadow: 3px 3px 0 var(--ah-ink); }
.ivr-msg--call { justify-self: stretch; max-width: none; padding: 12px 14px; border: 2px solid var(--ah-950); border-radius: 12px; background: var(--ah-cream); box-shadow: 4px 4px 0 var(--ah-neon-pink); }
.ivr-msg__h { display: flex; align-items: center; gap: 7px; color: var(--ah-ink-2); font-size: 0.86rem; font-weight: 700; }
.ivr-msg__h b { color: var(--ah-ink); font-weight: 800; }
.ivr-msg__h svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; }
.ivr-msg__h .ivr-pin { margin-left: auto; }
.ivr-msg__player { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.ivr-msg__play { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid var(--ah-950); border-radius: 50%; background: var(--ah-blue); }
.ivr-msg__play svg { width: 14px; height: 14px; fill: var(--ah-ink); }
.ivr-msg__wave { flex: 1 1 auto; min-width: 0; height: 30px; fill: none; stroke: var(--ah-blue-ink); stroke-width: 2.4px; stroke-linecap: round; }
.ivr-msg__tx { margin-top: 8px; border-top: 1.5px dashed rgba(11, 20, 36, 0.3); }
.ivr-msg__tx summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; color: var(--ah-blue-ink); font-weight: 800; font-size: 0.95rem; }
.ivr-msg__tx summary::-webkit-details-marker { display: none; }
.ivr-msg__tx summary::before { content: ""; width: 9px; height: 9px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; rotate: -45deg; transition: rotate 0.2s; }
.ivr-msg__tx[open] summary::before { rotate: 45deg; }
.ivr-msg__tx summary .ivr-pin { margin-left: auto; }
.ivr-msg__tx p { margin-top: 6px; font-size: 0.92rem; line-height: 1.4; color: var(--ah-ink); }
.ivr-msg__tx p:last-child { padding-bottom: 4px; }
.ivr-legend { display: grid; gap: 22px; }
.ivr-legend li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }
.ivr-legend .ivr-pin { width: 34px; height: 34px; font-size: 1.15rem; margin-top: 2px; }
.ivr-legend h3 { color: var(--ah-paper); font: 900 1.5rem/1.05 var(--ah-display); letter-spacing: 0.02em; text-transform: uppercase; }
.ivr-legend p { margin-top: 4px; color: var(--ah-fog); font-size: 1.04rem; }
@media (min-width: 600px) and (max-width: 959px) { .ivr-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 30px; } }

/* --------------------------------------------------------------------------
   The true story: the corkboard. The search in the middle, the evidence
   pinned around it, red yarn from the search to each card
   -------------------------------------------------------------------------- */
.ivr-cork { margin: 0; }
.ivr-cork__board {
  position: relative; padding: 22px 16px 26px;
  border: 3px solid var(--ah-950); border-radius: 10px;
  background-color: #5e4630;
  background-image: radial-gradient(circle, rgba(30, 18, 8, 0.4) 1px, transparent 1.6px), radial-gradient(circle, rgba(255, 226, 180, 0.16) 1px, transparent 1.5px);
  background-size: 7px 7px, 11px 11px; background-position: 0 0, 3px 5px;
  box-shadow: inset 0 0 0 9px #3a2414, inset 0 0 0 11px var(--ah-950), 8px 8px 0 rgba(0, 0, 0, 0.55);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px;
}
.ivr-cork__yarn { display: none; }
.ivr-ask { position: relative; z-index: 3; grid-column: 1 / -1; margin: 6px 4px 10px; }
.ivr-ask__label { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 5px 10px 4px; border: 2px solid var(--ah-950); border-radius: 4px; background: #11151d; color: #e8edf3; font: 700 0.74rem/1.2 var(--ah-mono); letter-spacing: 0.12em; text-transform: uppercase; box-shadow: 2px 2px 0 var(--ah-blue); rotate: -1deg; }
.ivr-ask__label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ah-neon-sky); box-shadow: 0 0 6px var(--ah-neon-sky); }
.ivr-ask__bar { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 18px; border: 2px solid var(--ah-950); border-radius: 999px; background: #fbf9f2; color: var(--ah-ink); font-size: 1.04rem; font-weight: 700; box-shadow: 4px 4px 0 var(--ah-blue); }
.ivr-ask__bar svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--ah-ink-2); stroke-width: 2.4; stroke-linecap: round; }
.ivr-ask__caret { flex: none; width: 2px; height: 1.25em; margin-left: -6px; background: var(--ah-ink); }
.ivr-ask .ah-sample { top: -6px; }
@media (prefers-reduced-motion: no-preference) { .ivr-cork.is-play .ivr-ask__caret { animation: ah-blink 1.1s steps(1) 5; } }
.ivr-ev { position: relative; display: grid; justify-items: center; gap: 8px; padding: 24px 10px 12px; border: 2px solid var(--ah-950); border-radius: 4px; background-color: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink); text-align: center; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5); rotate: var(--r, 0deg); }
.ivr-ev p { font-size: 0.95rem; font-weight: 800; line-height: 1.25; }
.ivr-ev__pin { position: absolute; top: 6px; left: 50%; width: 15px; height: 15px; margin-left: -7.5px; border: 2px solid var(--ah-950); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff9cc0, #e03673); }
.ivr-ev__art { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; }
.ivr-ev__rec { padding: 4px 8px; border: 1.5px solid rgba(11, 20, 36, 0.4); border-radius: 999px; background: #fffdf7; }
.ivr-ev__play { width: 14px; height: 14px; fill: var(--ah-blue-ink); }
.ivr-ev__wave { width: 44px; height: 14px; stroke: var(--ah-blue-ink); stroke-width: 2.2; stroke-linecap: round; }
.ivr-ev--bf .ivr-ev__wave, .ivr-ev--bf .ivr-ev__play { stroke: var(--ah-red-ink); fill: var(--ah-red-ink); }
.ivr-ev__bubbles { display: grid; grid-template-columns: 64px; gap: 4px; width: 64px; }
.ivr-ev__bubbles i { display: block; height: 9px; border: 1.5px solid var(--ah-950); border-radius: 6px; background: #fffdf7; }
.ivr-ev__bubbles i:nth-child(1) { width: 70%; } .ivr-ev__bubbles i:nth-child(2) { width: 80%; justify-self: end; background: var(--ah-blue); } .ivr-ev__bubbles i:nth-child(3) { width: 55%; }
.ivr-ev__hang { position: relative; display: grid; grid-template-columns: 36px; gap: 4px; width: 50px; padding: 13px 7px 7px; border: 1.5px solid var(--ah-950); border-radius: 3px 3px 8px 8px; background: #fffdf7; clip-path: polygon(30% 0, 70% 0, 100% 22%, 100% 100%, 0 100%, 0 22%); }
.ivr-ev__hang::before { content: ""; position: absolute; top: 3px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--ah-ink); }
.ivr-ev__hang i { display: block; height: 2.5px; border-radius: 2px; background: rgba(11, 20, 36, 0.6); }
.ivr-ev__hang i:nth-child(2) { width: 70%; }
.ivr-ev__ticket { padding: 4px 9px 3px 14px; border: 1.5px solid var(--ah-950); border-left: 3px dashed var(--ah-ink); border-radius: 3px; background: #fffdf7; color: var(--ah-red-ink); font: 800 0.66rem/1.2 var(--ah-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.ivr-ev--loan { grid-column: 1 / -1; justify-self: center; width: min(100%, 220px); }
.ivr-cork__stamp { grid-area: auto / 1 / auto / -1; justify-self: center; margin-top: 4px; font-size: clamp(1.25rem, 0.8rem + 2vw, 1.6rem); background: rgba(246, 239, 221, 0.92); }
@media (min-width: 820px) {
  .ivr-cork__board { display: block; aspect-ratio: 1000 / 560; padding: 0; }
  .ivr-cork__yarn { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
  .ivr-cork__yarn path { fill: none; stroke: #d64534; stroke-width: 3px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
  .ivr-ask { position: absolute; left: 50%; top: 52%; width: min(44%, 430px); margin: 0; translate: -50% -50%; }
  .ivr-ev { position: absolute; z-index: 2; width: clamp(150px, 18%, 196px); translate: -50% -50%; }
  .ivr-ev--loan { left: 50%; top: 15%; width: clamp(150px, 18%, 196px); }
  .ivr-ev--jan { left: 17.6%; top: 26.8%; }
  .ivr-ev--texts { left: 82.4%; top: 26.8%; }
  .ivr-ev--bf { left: 18.4%; top: 78%; }
  .ivr-ev--item { left: 81.6%; top: 78%; }
  .ivr-cork__stamp { position: absolute; z-index: 3; left: 50%; top: 85%; translate: -50% -50%; margin: 0; }
  @media (prefers-reduced-motion: no-preference) {
    html.motion .ivr-cork:not(.is-play) .ivr-cork__yarn path { stroke-dashoffset: 1; }
    .ivr-cork__yarn path { transition: stroke-dashoffset 0.9s var(--ease-out); transition-delay: 1.7s; }
    .ivr-cork__yarn path:nth-child(2) { transition-delay: 1.85s; } .ivr-cork__yarn path:nth-child(3) { transition-delay: 2s; } .ivr-cork__yarn path:nth-child(4) { transition-delay: 2.15s; } .ivr-cork__yarn path:nth-child(5) { transition-delay: 2.3s; }
  }
}
@media (prefers-reduced-motion: no-preference) {
  html.motion .ivr-cork:not(.is-play) .ivr-cork__stamp { opacity: 0; scale: 1.7; }
  .ivr-cork.is-play .ivr-cork__stamp { animation: ivr-thump 0.5s var(--ease-back) 3s both; }
}
.ivr-story__after { max-width: 40em; margin-top: clamp(34px, 4vw, 50px); }
.ivr-story__after p strong { color: var(--ah-sky); }

/* --------------------------------------------------------------------------
   Shmo Calls: one sample call, graded against the shop's SOPs (no scores)
   -------------------------------------------------------------------------- */
.ivr-sc__soon { margin-bottom: 22px; }
@media (max-width: 420px) { .ivr-sc__soon .ah-sticker { max-width: 100%; white-space: normal; text-align: center; text-wrap: balance; } }
.ivr-sc__head .ah-h2 { margin-bottom: 20px; }
.ivr-report {
  position: relative; max-width: 900px; margin: 0 auto;
  border: 2px solid var(--ah-950); border-radius: 10px;
  background-color: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink);
  box-shadow: 8px 8px 0 var(--ah-blue); rotate: -0.4deg;
}
.ivr-report :focus-visible { outline-color: var(--ah-ink); }
.ivr-report__mallow { position: absolute; z-index: 5; right: -26px; top: -62px; width: clamp(92px, 12vw, 128px); height: auto; rotate: 9deg; filter: drop-shadow(2px 0 0 var(--ah-cream)) drop-shadow(-2px 0 0 var(--ah-cream)) drop-shadow(0 2px 0 var(--ah-cream)) drop-shadow(0 -2px 0 var(--ah-cream)) drop-shadow(3px 3px 0 var(--ah-950)); pointer-events: none; }
.ivr-report__head { display: flex; align-items: center; gap: 12px; padding: 14px 22px 12px; border-radius: 8px 8px 0 0; border-bottom: 5px solid var(--ah-blue); background: var(--ah-ink); color: #fff; }
.ivr-report__brand { font: 900 1.25rem/1 var(--ah-display); letter-spacing: 0.08em; text-transform: uppercase; }
.ivr-report__what { color: var(--ah-sky); font: 700 0.76rem/1 var(--ah-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.ivr-report__strip { display: flex; align-items: center; gap: 14px; padding: 14px 22px; border-bottom: 2px dashed rgba(11, 20, 36, 0.3); }
.ivr-report__play { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border: 2px solid var(--ah-950); border-radius: 50%; background: var(--ah-blue); }
.ivr-report__play svg { width: 15px; height: 15px; fill: var(--ah-ink); }
.ivr-report__wave { flex: 1 1 auto; min-width: 0; height: 32px; fill: none; stroke: var(--ah-blue-ink); stroke-width: 2.6px; stroke-linecap: round; }
.ivr-report__line { flex: none; color: var(--ah-ink-2); font: 700 0.74rem/1.2 var(--ah-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.ivr-report__rows > li { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 14px 28px; align-items: center; padding: 18px 22px; }
.ivr-report__rows > li + li { border-top: 1.5px solid rgba(11, 20, 36, 0.16); }
.ivr-report__say h3 { font: 900 1.4rem/1.05 var(--ah-display); letter-spacing: 0.03em; text-transform: uppercase; }
.ivr-report__say p { margin-top: 6px; color: var(--ah-ink-2); font-size: 1rem; line-height: 1.5; }
.ivr-report__sop { display: grid; gap: 8px; }
.ivr-report__sop li { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 0.98rem; transition: opacity 0.35s var(--ease-out), translate 0.35s var(--ease-out); }
.ivr-report__sop svg { flex: none; width: 22px; height: 22px; padding: 2px; border: 2px solid var(--ah-950); border-radius: 5px; background: var(--ah-blue); fill: none; stroke: var(--ah-ink); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.ivr-report__flag { display: flex; align-items: center; gap: 8px; justify-self: start; padding: 8px 12px; border: 2px solid var(--ah-950); border-radius: 8px; background: #ffe0ec; box-shadow: 3px 3px 0 var(--ah-neon-pink); color: var(--ah-ink); font-weight: 800; font-size: 0.95rem; line-height: 1.3; transition: opacity 0.35s var(--ease-out), scale 0.45s var(--ease-back); }
.ivr-report__flag svg { flex: none; width: 18px; height: 18px; fill: var(--ah-neon-pink); stroke: var(--ah-ink); stroke-width: 2; stroke-linejoin: round; }
.ivr-report__ask { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 2px solid var(--ah-950); border-radius: 999px; background: #fffdf7; color: var(--ah-ink-2); font-weight: 700; font-size: 0.95rem; }
.ivr-report__ask svg { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
@media (max-width: 700px) {
  .ivr-report__rows > li { grid-template-columns: minmax(0, 1fr); padding: 16px 16px; }
  .ivr-report__head, .ivr-report__strip { padding-inline: 16px; }
  .ivr-report__line { display: none; }
  .ivr-report { margin-top: 40px; }
  .ivr-report__mallow { right: -8px; top: -54px; }
}
@media (prefers-reduced-motion: no-preference) {
  html.motion .ivr-report:not(.is-play) .ivr-report__sop li { opacity: 0; translate: -10px 0; }
  .ivr-report.is-play .ivr-report__sop li { transition-delay: 0.5s; }
  .ivr-report.is-play .ivr-report__sop li + li { transition-delay: 0.85s; }
  html.motion .ivr-report:not(.is-play) .ivr-report__flag { opacity: 0; scale: 0.85; }
  .ivr-report.is-play .ivr-report__flag { transition-delay: 1.25s; }
}

/* --------------------------------------------------------------------------
   Booking band: the counter phone again, now it answers with our menu
   -------------------------------------------------------------------------- */
.ivr-bk { position: relative; width: min(100%, 540px); margin-inline: auto; }
.ivr-desk--book .ivr-desk__cradle { min-height: 140px; }
.ivr-bk__say { display: flex; align-items: flex-start; gap: 7px; margin-bottom: 10px; color: var(--ah-ink-2); font-size: 0.95rem; font-style: italic; font-weight: 600; line-height: 1.3; }
.ivr-bk__say svg { margin-top: 1px; }
.ivr-bk__menu { display: grid; gap: 8px; }
.ivr-bk__opt { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 10px 6px 7px; border: 2px solid var(--ah-ink); border-radius: 8px; background: rgba(255, 255, 255, 0.5); color: var(--ah-ink); font-size: 1.02rem; font-weight: 800; line-height: 1.25; text-decoration: none; transition: background-color 0.15s, color 0.15s; }
.ivr-bk__press { font-weight: 700; color: var(--ah-ink-2); transition: color 0.15s; }
.ivr-bk__opt:hover, .ivr-bk__opt:focus-visible, .ivr-bk__opt[aria-expanded="true"] { background: var(--ah-ink); color: var(--ah-sky); }
.ivr-bk__opt:hover .ivr-bk__press, .ivr-bk__opt:focus-visible .ivr-bk__press, .ivr-bk__opt[aria-expanded="true"] .ivr-bk__press { color: var(--ah-sky); }
.ivr-bk__opt:hover .ivr-tree__key, .ivr-bk__opt:focus-visible .ivr-tree__key, .ivr-bk__opt[aria-expanded="true"] .ivr-tree__key { border-color: var(--ah-950); background: var(--ah-blue); color: var(--ah-ink); }
.ivr-bk__opt:focus-visible { outline: 3px solid var(--ah-ink); outline-offset: 2px; }
.ivr-desk--book:has(.ivr-bk__opt[data-key="1"]:is(:hover, :focus-visible, [aria-expanded="true"])) .ivr-desk__key[data-k="1"],
.ivr-desk--book:has(.ivr-bk__opt[data-key="2"]:is(:hover, :focus-visible)) .ivr-desk__key[data-k="2"] { background: var(--ah-blue); color: var(--ah-ink); translate: 0 2px; box-shadow: 0 1px 0 #05070c, 0 0 10px 1px rgba(47, 155, 255, 0.7); }
@media (max-width: 560px) { .ivr-desk--book .ivr-desk__key:nth-child(n+3) { display: none; } }
@media (max-width: 400px) { .ivr-bk__press { display: none; } }

/* --------------------------------------------------------------------------
   Closing band: the handset in neon. Tap it and it rings
   -------------------------------------------------------------------------- */
.ivr-ring { position: relative; display: block; width: min(100%, 520px); margin: 0 auto 46px; padding: 64px 0 0; border: 0; background: none; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.ivr-ring:focus-visible { outline: none; }
.ivr-ring:focus-visible .ivr-ring__svg { outline: 3px solid var(--ah-sky); outline-offset: 8px; border-radius: 16px; }
/* the chains live in the sign's own drawing, so they always reach the hardware at any width */
.ivr-ring__chains path { fill: none; stroke-linecap: round; }
.ivr-ring__links { stroke: #8794a6; stroke-width: 6; stroke-dasharray: 5.5 3.5; }
.ivr-ring__holes { stroke: #0b1424; stroke-width: 2.2; stroke-dasharray: 2 7; stroke-dashoffset: -1.75; }
.ivr-ring__svg { display: block; width: 100%; height: auto; overflow: visible; }
.ivr-ring__glass use, .ivr-ring__glass path { fill: none; stroke: rgba(255, 230, 240, 0.14); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.ivr-ring__lit use, .ivr-ring__lit path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ivr-t-halo { stroke-width: 20; opacity: 0.85; }
.ivr-t-tube { stroke-width: 8.5; }
.ivr-t-core { stroke-width: 3; }
.ivr-ring__lit--hand .ivr-t-halo, .ivr-ring__lit--hand .ivr-t-tube { stroke: var(--ah-neon-pink); }
.ivr-ring__lit--hand .ivr-t-core { stroke: var(--ah-neon-pink-core); }
.ivr-ring__arc .ivr-t-halo, .ivr-ring__arc .ivr-t-tube { stroke: var(--ah-neon-blue); }
.ivr-ring__arc .ivr-t-core { stroke: var(--ah-neon-blue-core); }
.ivr-ring__hw circle { fill: #141c2c; stroke: var(--ah-950); stroke-width: 2; }
.ivr-ring__hand { transform-box: view-box; transform-origin: 180px 85px; transition: translate 0.25s var(--ease-out); }
.ivr-ring.is-ringing .ivr-ring__hand { translate: 0 -6px; }
@media (prefers-reduced-motion: no-preference) {
  html.motion .ivr-final:not(.is-play) .ivr-ring__lit { opacity: 0.05; }
  .ivr-final.is-play .ivr-ring__lit { animation: ah-ignite 1.1s var(--t, 0.1s) both; }
  .ivr-ring.is-ringing .ivr-ring__hand { animation: ivr-shake 0.9s var(--ease-out) both; }
  .ivr-ring.is-ringing .ivr-ring__arc { animation: ivr-arc 0.36s steps(2) 3 both; }
  .ivr-ring.is-ringing .ivr-ring__arc--2 { animation-delay: 0.08s; }
  .ivr-ring.is-ringing .ivr-ring__arc--3 { animation-delay: 0.16s; }
  .ivr-ring:hover { animation: ah-sway 1.4s ease-in-out; transform-origin: 50% 0; }
}
@keyframes ivr-shake { 0% { rotate: 0deg; } 15% { rotate: -4deg; } 30% { rotate: 4deg; } 45% { rotate: -3deg; } 60% { rotate: 3deg; } 75% { rotate: -1.5deg; } 100% { rotate: 0deg; } }
@keyframes ivr-arc { 0% { opacity: 1; } 50% { opacity: 0.12; } 100% { opacity: 1; } }
@media (max-width: 480px) { .ivr-ring { padding-top: 52px; margin-bottom: 36px; } }