/* ==========================================================================
   Call Recording & IVR page only (ivr.html). Loads after css/core.css and css/lawn.css.
   Page-only art uses the .ivr- prefix; kit classes are only restyled under an .ivr- scope
   or a section id. Every scene is drawn finished; motion (js/pages/ivr.js, site.js) only
   replays it, and stops with prefers-reduced-motion.
   ========================================================================== */

/* ---------- drawing fills: flat token colors for the inline SVG scenes ---------- */
.ivr-art { overflow: visible; fill: none; stroke: var(--fc-ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ivr-art * { vector-effect: non-scaling-stroke; }
.ivr-ns { stroke: none; }
.ivr-none { fill: none; }
.ivr-sky { fill: var(--fc-sky-2); }
.ivr-sky2 { fill: var(--fc-sky); }
.ivr-sun { fill: var(--fc-sun); }
.ivr-cloud { fill: var(--fc-white); stroke-width: 1.6; }
.ivr-white { fill: var(--fc-white); }
.ivr-ink { fill: var(--fc-ink); }
.ivr-orange { fill: var(--fc-orange); }
.ivr-red { fill: var(--fc-red-ink); }
.ivr-lawn-a { fill: var(--fc-lawn-a); }
.ivr-lawn-b { fill: var(--fc-lawn-b); }
.ivr-cut { fill: var(--fc-leaf); }
.ivr-clover { fill: var(--fc-clover); }
.ivr-clover2 { fill: var(--fc-clover-2); }
.ivr-tree-a { fill: var(--fc-tree); }
.ivr-tree-b { stroke: var(--fc-tree-hi); stroke-width: 3; }
.ivr-bush { fill: var(--fc-bush); }
.ivr-hedge { fill: var(--fc-clover-2); }
.ivr-shag { fill: var(--fc-clover); }
.ivr-bare { fill: var(--fc-kraft); stroke-width: 1.6; }
.ivr-dandy circle { fill: var(--fc-sun); stroke-width: 1.4; }
.ivr-kraft { fill: var(--fc-kraft); }
.ivr-glovefill { fill: var(--fc-sun); }
.ivr-wood { fill: var(--fc-wood); }
.ivr-board { fill: var(--fc-board); }
.ivr-soil { fill: var(--fc-soil); }
.ivr-brick { fill: var(--fc-brick); }
.ivr-roof2 { fill: var(--fc-rubber-2); }
.ivr-walk { fill: var(--fc-walk); }
.ivr-curb { fill: var(--fc-curb-a); }
.ivr-asphalt { fill: var(--fc-asphalt); }
.ivr-rubber { fill: var(--fc-rubber); }
.ivr-steel-a { fill: var(--fc-steel-a); }
.ivr-steel-b { fill: var(--fc-steel-b); }
.ivr-skin1 { fill: var(--fc-skin-1); }
.ivr-skin2 { fill: var(--fc-skin-2); }
.ivr-shirt { fill: var(--fc-sky); }
.ivr-shirt2 { fill: var(--fc-sun); }
.ivr-jeans { fill: var(--fc-sky); }
.ivr-glow { fill: var(--fc-glow); }
.ivr-mallow { fill: var(--fc-sheet-warm); }
.ivr-faint { stroke-opacity: 0.18; }
.ivr-speed { stroke-opacity: 0.35; stroke-dasharray: 10 8; }
.ivr-clip path { stroke: var(--fc-clover-2); stroke-width: 3; }
.ivr-steel-line { stroke: var(--fc-steel-c); stroke-width: 5; }
.ivr-rollbar { stroke-width: 10; }
.ivr-rollbar-hi { stroke: var(--fc-steel-b); stroke-width: 6; }
.ivr-band { stroke-width: 3.4; }
.ivr-stake { stroke-width: 4; }
.ivr-rail { stroke: var(--fc-steel-c); stroke-width: 3; }
.ivr-lead { stroke-width: 2; stroke-dasharray: 3 7; stroke-opacity: 0.7; }
.ivr-svgtext { stroke: none; fill: var(--fc-ink); font-family: var(--fc-display); font-weight: 400; }
.ivr-svgtext--sign { font-size: 15.5px; letter-spacing: 0; }
.ivr-svgtext--door { font-size: 16px; letter-spacing: 0.04em; fill: var(--fc-clover-2); }
.ivr-ico { flex: none; width: 1.15em; height: 1.15em; }

/* ---------- 1. Hero: the phone tree, clipped to the roll bar of a zero-turn ---------- */
@media (min-width: 1000px) {
  #top .fc-phero__grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
  .ivr-h1__a { display: block; }
}
/* the deck's eyebrow runs long: two even lines, never one word left hanging on the second */
#top .fc-kicker > span { text-wrap: balance; }
#top .ivr-sub + .ivr-sub { margin-top: -12px; }
.ivr-cue { margin-top: 10px; font-size: 0.95rem; }
.ivr-cue .fc-link { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 600px) {
  #top .ivr-sub { font-size: 1rem; line-height: 1.5; margin-bottom: 16px; }
  #top .ivr-sub + .ivr-sub { margin-top: -8px; }
  #top .fc-kicker { font-size: 0.7rem; letter-spacing: 0.06em; }
}

.ivr-tree { position: relative; width: min(100%, 540px); margin: 0 auto; }
.ivr-tree__stage { position: relative; container-type: inline-size; aspect-ratio: 540 / 612; }
.ivr-tree__frame {
  position: absolute;
  left: 0;
  top: 19%;
  z-index: 1;
  width: 68%;
  height: 60%;
  overflow: hidden;
  border: var(--fc-line);
  border-radius: var(--fc-r3);
  background: var(--fc-sky-2);
  box-shadow: var(--fc-chunk-lg);
}
.ivr-tree__yard { display: block; width: 100%; height: 100%; }
/* the phone holder: the phone, the mount, and the roll bar hoop it is clamped to. The holder
   makes no stacking context, so the hoop can pass behind the yard frame and the phone. */
.ivr-tree__hold { --pw: 48cqw; position: absolute; right: 1%; top: 7.5%; width: var(--pw); height: calc(var(--pw) * 2); }
.ivr-tree__phone { --pw: 48cqw; font-size: max(9.5px, calc(var(--pw) * 0.053)); line-height: 1.25; }
.ivr-tree__bar { position: absolute; left: -100%; top: -12%; z-index: 0; width: 200%; max-width: none; height: 124%; }
.ivr-tube { stroke-width: 26; }
.ivr-tube-steel { stroke: var(--fc-steel-b); stroke-width: 22; }
.ivr-tube-hi { stroke: var(--fc-steel-a); stroke-width: 5; }
/* the mount: rubber grips on both edges, a clamp around the tube under the phone */
.ivr-tree__grip {
  position: absolute;
  top: 44%;
  z-index: 3;
  width: 12px;
  height: 15%;
  border: var(--fc-line);
  border-radius: 6px;
  background: var(--fc-rubber);
}
.ivr-tree__grip--l { left: -8px; }
.ivr-tree__grip--r { right: -8px; }
.ivr-tree__clamp {
  position: absolute;
  top: calc(100% - 4px);
  left: 50%;
  z-index: 1;
  width: 50px;
  height: 34px;
  margin-left: -25px;
  border: var(--fc-line);
  border-radius: 10px;
  background: repeating-linear-gradient(90deg, transparent 0 8px, rgba(255, 255, 255, 0.12) 8px 10px), var(--fc-rubber);
  box-shadow: 3px 3px 0 rgba(22, 58, 37, 0.35);
}
.ivr-tree__clamp i {
  position: absolute;
  top: 50%;
  right: -13px;
  width: 13px;
  height: 12px;
  margin-top: -6px;
  border: var(--fc-line);
  border-left: 0;
  border-radius: 0 5px 5px 0;
  background: var(--fc-steel-b);
}
.ivr-tree__pause { position: absolute; left: 2.5%; top: calc(79% - 28px); z-index: 4; }
/* the roll-bar tube runs about 13px below the stage; the caption starts clear of it */
.ivr-tree__cap { display: block; width: max-content; max-width: 100%; margin: 32px auto 0; text-align: center; }

/* the call screen */
.ivr-tree__phone .fc-phone__screen {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
  padding: calc(var(--pw) * 0.17) calc(var(--pw) * 0.045) calc(var(--pw) * 0.05);
}
.ivr-call { display: grid; gap: 0.1em; color: var(--fc-chalk); text-align: center; }
.ivr-call__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  font-size: max(8.5px, 0.8em);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fc-chalk-2);
}
.ivr-call__label .ivr-ico { width: 1.2em; height: 1.2em; color: var(--fc-sun); }
.ivr-call__dot { color: var(--fc-sun); font-size: 1.6em; line-height: 0.5; }
.ivr-call__num { font-family: var(--fc-mono); font-size: 1.42em; font-weight: 700; letter-spacing: 0.02em; }
.ivr-menu {
  display: grid;
  gap: 0.3em;
  margin: 0;
  padding: 0.45em;
  border: var(--fc-line);
  border-radius: 0.95em;
  background: var(--fc-white);
  list-style: none;
  color: var(--fc-ink);
  box-shadow: 0 0.3em 0 rgba(8, 24, 14, 0.4);
}
.ivr-menu__line {
  display: flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.32em 0.42em;
  border: 1.5px solid transparent;
  border-radius: 0.6em;
  font-weight: 700;
  line-height: 1.2;
  transition: opacity 0.35s var(--fc-ease), transform 0.35s var(--fc-ease), background-color 0.2s, border-color 0.2s;
}
.ivr-menu__line--say {
  padding-bottom: 0.5em;
  border-bottom: 1.5px dashed rgba(22, 58, 37, 0.35);
  border-radius: 0.6em 0.6em 0 0;
  font-size: 0.92em;
  font-weight: 600;
  color: var(--fc-ink-2);
}
.ivr-menu__line--say .ivr-ico { color: var(--fc-clover-2); }
.ivr-key {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.85em;
  height: 1.85em;
  border: 2px solid var(--fc-ink);
  border-radius: 0.45em;
  background: var(--fc-paper);
  box-shadow: 0 0.2em 0 var(--fc-ink);
  font-weight: 800;
  line-height: 1;
  transition: transform 0.15s, box-shadow 0.15s, background-color 0.15s;
}
.ivr-menu__line.is-pressed { border-color: var(--fc-ink); background: var(--fc-sun-2); }
.ivr-menu__line.is-pressed .ivr-key { background: var(--fc-orange); box-shadow: 0 0.05em 0 var(--fc-ink); color: var(--fc-ink-deep); transform: translateY(0.15em); }
.ivr-result {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  align-self: center;
  min-height: 3.1em;
  max-width: 94%;
  padding: 0.35em 0.75em;
  border: 0.18em solid var(--fc-green-ink);
  border-radius: 0.6em;
  background: var(--fc-white);
  color: var(--fc-green-ink);
  font-size: max(9px, 0.86em);
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-align: left;
  text-transform: uppercase;
  /* the sheet budget, not the object one: two of the four results wrap to three lines */
  transform: rotate(-1deg);
  box-shadow: 0.2em 0.2em 0 rgba(8, 24, 14, 0.35);
}
.ivr-result .ivr-ico { width: 1.3em; height: 1.3em; }
.ivr-call__btns { display: flex; justify-content: space-around; margin-top: auto; }
.ivr-call__btns i {
  display: grid;
  place-items: center;
  width: 2.7em;
  height: 2.7em;
  border: 2px solid var(--fc-ink);
  border-radius: 50%;
  background: rgba(255, 253, 246, 0.9);
  color: var(--fc-ink);
}
.ivr-call__btns svg { width: 1.3em; height: 1.3em; }
.ivr-call__btns .ivr-call__end { background: var(--fc-red-ink); color: var(--fc-chalk); }
/* the build and the cycle (js/pages/ivr.js adds these; without it every line shows) */
.ivr-tree.is-building .ivr-menu__line:not(.is-in) { opacity: 0; transform: translateY(0.6em); }
.ivr-tree.is-live .ivr-result:not(.is-in) { opacity: 0; transform: rotate(-3deg) scale(1.35); }
.ivr-tree.is-live .ivr-result { transition: opacity 0.18s, transform 0.3s var(--fc-bounce); }
.ivr-call__label .ivr-ico { animation: ivr-ring 1.6s ease-in-out infinite; }
.ivr-tree.is-paused .ivr-call__label .ivr-ico { animation-play-state: paused; }
@keyframes ivr-ring {
  0%, 60%, 100% { transform: none; }
  66% { transform: rotate(-14deg); }
  74% { transform: rotate(12deg); }
  82% { transform: rotate(-8deg); }
}
@media (max-width: 600px) {
  .ivr-tree__stage { aspect-ratio: 358 / 500; }
  .ivr-tree__hold, .ivr-tree__phone { --pw: 58cqw; }
  .ivr-tree__hold { top: 7%; }
  .ivr-tree__frame { top: 18%; width: 64%; height: 58%; }
  .ivr-tree__clamp { width: 42px; height: 28px; margin-left: -21px; }
  .ivr-tree__pause { left: 3%; top: calc(76% - 28px); }
  .ivr-tree__cap { margin-top: 16px; font-size: 1.05rem; }
}

/* ---------- 2. Step 1: the seed tag sewn into the top seam of a grass seed bag ---------- */
.ivr-bag { position: relative; width: min(100%, 520px); justify-self: center; }
.ivr-bag__sack {
  position: relative;
  height: 590px;
  overflow: hidden;
  border: var(--fc-line);
  border-radius: 16px 16px 34px 34px;
  background-color: var(--fc-white);
  background-image:
    linear-gradient(90deg, transparent 22px, rgba(22, 58, 37, 0.2) 22px 24px, transparent 24px calc(100% - 24px), rgba(22, 58, 37, 0.2) calc(100% - 24px) calc(100% - 22px), transparent calc(100% - 22px)),
    linear-gradient(90deg, rgba(22, 58, 37, 0.06), transparent 22px, transparent calc(100% - 22px), rgba(22, 58, 37, 0.06)),
    repeating-linear-gradient(0deg, rgba(22, 58, 37, 0.06) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(90deg, rgba(22, 58, 37, 0.05) 0 2px, transparent 2px 5px);
  box-shadow: var(--fc-chunk-lg);
}
.ivr-bag__hem {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  height: 46px;
  border-bottom: var(--fc-line);
  background-color: var(--fc-paper-2);
  background-image:
    repeating-linear-gradient(0deg, rgba(22, 58, 37, 0.08) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(90deg, rgba(22, 58, 37, 0.07) 0 2px, transparent 2px 5px);
}
.ivr-bag__stitch {
  position: absolute;
  top: 26px;
  left: 0;
  right: 0;
  z-index: 5;
  height: 0;
  border-top: 3px dashed var(--fc-ink);
}
.ivr-bag__print { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; }
.ivr-seedtag {
  position: absolute;
  top: 18px;
  left: 50%;
  z-index: 2;
  width: min(86%, 430px);
  padding: 50px 24px 20px;
  border: var(--fc-line);
  border-top: 0;
  border-radius: 0 0 6px 6px;
  background: var(--fc-sheet);
  box-shadow: 4px 5px 0 rgba(22, 58, 37, 0.3);
  color: var(--fc-ink);
  transform: translateX(-50%) rotate(-1deg);
  transform-origin: 50% 0;
}
/* the stitch runs across the tag too, where it is sewn into the seam */
.ivr-seedtag__stitch { position: absolute; top: 6px; left: -2px; right: -2px; border-top: 3px dashed var(--fc-ink); }
.ivr-seedtag__lot { position: absolute; top: 32px; left: 0; right: 0; display: flex; height: 8px; border-block: 1.5px solid var(--fc-ink); background: var(--fc-clover); }
.ivr-seedtag__lot i { flex: 1; border-right: 1.5px solid rgba(255, 253, 246, 0.6); }
.ivr-seedtag__word {
  padding-bottom: 10px;
  border-bottom: 2px solid var(--fc-ink);
  font-family: var(--fc-display);
  font-size: clamp(1.3rem, 1rem + 0.9vw, 1.7rem);
  font-weight: 400;
  line-height: 1.12;
}
.ivr-seedtag__pos { margin-top: 10px; font-style: italic; font-weight: 600; color: var(--fc-orange-ink); }
.ivr-seedtag__def { margin-top: 10px; line-height: 1.55; }
.ivr-seedtag__def + .ivr-seedtag__def { margin-top: 8px; }
.ivr-seedtag__def strong { font-weight: 800; }
.ivr-seedtag__fine { display: grid; gap: 5px; margin-top: 16px; padding-top: 10px; border-top: 1.5px dashed rgba(22, 58, 37, 0.35); }
.ivr-seedtag__fine i { display: block; height: 5px; border-radius: 3px; background: rgba(22, 58, 37, 0.16); }
.ivr-seedtag__fine i:nth-child(1) { width: 84%; }
.ivr-seedtag__fine i:nth-child(2) { width: 62%; }
.ivr-seedtag__fine i:nth-child(3) { width: 74%; }
.ivr-seedtag__fine i:nth-child(4) { width: 40%; }
@media (max-width: 600px) {
  .ivr-bag__sack { height: 620px; }
  .ivr-seedtag { width: 90%; padding: 48px 16px 16px; }
  .ivr-seedtag__def { font-size: 0.97rem; }
}
@media (max-width: 360px) { .ivr-bag__sack { height: 650px; } }

/* ---------- 3. Step 2: the driveway estimate, and the lever ---------- */
.ivr-drivehead { max-width: 820px; }
.ivr-drive { max-width: 1100px; margin: 0 auto; }
/* the frame holds the scene's window: its focus ring and its pause button sit on it, above the
   art, so neither scrolls away on phones and the scene never paints over them */
.ivr-drive__frame { position: relative; }
.ivr-drive__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 7;
  border-radius: var(--fc-r3);
  pointer-events: none;
}
.ivr-drive__frame:has(> .ivr-drive__scroll:focus-visible)::after {
  border: 3px solid var(--fc-ink);
  box-shadow: inset 0 0 0 3px var(--fc-sun);
}
/* the demo flips the lever every 4.5 s while on screen: its pause button rides the frame's
   bottom edge, over the empty street (js/pages/ivr.js holds the demo on fc:pause) */
.ivr-drive__pause { position: absolute; right: 24px; bottom: -22px; z-index: 8; }
html:not(.js) .ivr-drive__pause { display: none; }
.ivr-drive__scroll {
  overflow: hidden;
  border: var(--fc-line);
  border-radius: var(--fc-r3);
  background: var(--fc-sky-2);
  box-shadow: var(--fc-chunk-lg);
}
.ivr-drive__stage { position: relative; container-type: inline-size; aspect-ratio: 2 / 1; }
.ivr-drive__img { position: absolute; inset: 0; }
.ivr-drive__art { display: block; width: 100%; height: 100%; }
.ivr-drive__sample.fc-sample--pin { top: 14px; right: auto; left: 14px; }
.ivr-drive__zoom { position: absolute; left: 79%; top: 2.4%; z-index: 3; width: 14cqw; }
.ivr-drive__lens {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  aspect-ratio: 1;
  padding: 0.6em;
  border: 4px solid var(--fc-ink);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.14), transparent 45%), var(--fc-night);
  box-shadow: 0 0 0 6px var(--fc-white), 0 0 0 8px var(--fc-ink), 8px 8px 0 4px var(--fc-ink);
  color: var(--fc-chalk);
  font-size: max(9.5px, 1.1cqw);
  line-height: 1.2;
  text-align: center;
}
.ivr-drive__notch { position: absolute; top: 7%; left: 50%; width: 26%; height: 5%; margin-left: -13%; border-radius: 999px; background: var(--fc-ink-black); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2); }
.ivr-cone { fill: var(--fc-white); fill-opacity: 0.4; stroke-dasharray: 4 6; stroke-opacity: 0.8; }
.ivr-drive__ring {
  display: grid;
  place-items: center;
  width: 2.5em;
  height: 2.5em;
  margin-top: 0.7em;
  border: 2px solid var(--fc-chalk);
  border-radius: 50%;
  background: var(--fc-clover);
  box-shadow: 0 0 0 0.35em rgba(124, 196, 107, 0.28), 0 0 0 0.7em rgba(124, 196, 107, 0.12);
}
.ivr-drive__ring svg { width: 1.3em; height: 1.3em; color: var(--fc-chalk); }
.ivr-drive__who { max-width: 11em; font-weight: 700; color: var(--fc-chalk-2); }
.ivr-drive__who b { display: block; margin-top: 0.15em; font-family: var(--fc-mono); font-size: 1.08em; color: var(--fc-chalk); white-space: nowrap; }
.ivr-drive__btns { display: flex; justify-content: center; gap: 1.5em; }
.ivr-drive__btns i { display: grid; place-items: center; width: 2.1em; height: 2.1em; border: 2px solid var(--fc-chalk); border-radius: 50%; }
.ivr-drive__btns svg { width: 1.1em; height: 1.1em; color: var(--fc-chalk); }
.ivr-drive__no { background: var(--fc-red-ink); }
.ivr-drive__yes { background: var(--fc-clover); }
.ivr-drive__badge {
  position: absolute;
  top: 72%;
  left: 50%;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.45em;
  width: 21cqw;
  min-width: 184px;
  padding: 0.5em 0.65em;
  border: var(--fc-line);
  border-radius: 12px;
  background: var(--fc-leaf);
  box-shadow: 3px 3px 0 var(--fc-ink);
  color: var(--fc-ink);
  font-size: max(10.5px, 1.25cqw);
  font-weight: 800;
  line-height: 1.2;
  transform: translateX(-50%) rotate(-4deg);
  transition: opacity 0.25s, transform 0.4s var(--fc-bounce);
}
.ivr-drive__badge svg { flex: none; width: 2em; height: 2em; padding: 0.2em; border: 2px solid var(--fc-ink); border-radius: 8px; background: var(--fc-white); }
.ivr-drive__wait,
.ivr-drive__ok {
  position: absolute;
  left: 91%;
  top: 44%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5cqw;
  width: 7cqw;
  min-width: 48px;
  height: 4.6cqw;
  min-height: 32px;
  border: var(--fc-line);
  border-radius: 16px 16px 16px 4px;
  background: var(--fc-white);
  box-shadow: 3px 3px 0 var(--fc-ink);
  transform: translate(-50%, -50%);
  transition: opacity 0.25s, transform 0.35s var(--fc-bounce);
}
.ivr-drive__wait i { width: max(6px, 0.8cqw); height: max(6px, 0.8cqw); border-radius: 50%; background: var(--fc-ink-2); }
.ivr-drive__ok { background: var(--fc-leaf); }
.ivr-drive__ok svg { width: 60%; height: 70%; color: var(--fc-ink); }
/* IVR off (default): the phone rings, the homeowner waits, the owner looks down at the phone */
.ivr-drive__badge,
.ivr-drive__ok { opacity: 0; transform: translateX(-50%) rotate(-4deg) scale(0.6); }
.ivr-drive__ok { transform: translate(-50%, -50%) scale(0.6); }
.ivr-rings path { stroke-width: 2.6; }
/* the ring, the buzz and the waiting dots play for about 4.5 s each time the IVR goes off
   (js/pages/ivr.js restarts .is-ringing), then rest: nothing here loops past 5 s */
.ivr-drive.is-ringing .ivr-rings path { animation: ivr-rings 1.1s ease-in-out 4; }
.ivr-drive.is-ringing .ivr-drive__lens { animation: ivr-buzz 2.2s ease-in-out 2; }
.ivr-drive.is-ringing .ivr-drive__wait i { animation: fc-dots 1.2s ease-in-out 3; }
.ivr-drive.is-ringing .ivr-drive__wait i:nth-child(2) { animation-delay: 0.15s; }
.ivr-drive.is-ringing .ivr-drive__wait i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ivr-rings { 50% { opacity: 0.15; } }
@keyframes ivr-buzz {
  0%, 70%, 100% { transform: none; }
  74% { transform: rotate(-4deg); }
  78% { transform: rotate(4deg); }
  82% { transform: rotate(-3deg); }
  86% { transform: rotate(2deg); }
}
.ivr-owner2__head { transform-box: view-box; transform-origin: 694px 268px; transform: rotate(16deg); transition: transform 0.5s var(--fc-ease); }
/* IVR on: the robot takes the call, the homeowner gets the owner's attention */
.ivr-drive.is-on .ivr-drive__badge { opacity: 1; transform: translateX(-50%) rotate(-4deg); }
.ivr-drive.is-on .ivr-drive__ok { opacity: 1; transform: translate(-50%, -50%); }
.ivr-drive.is-on .ivr-drive__wait { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
.ivr-drive.is-on .ivr-rings { opacity: 0; }
.ivr-drive.is-on .ivr-drive__lens { animation: none; }
.ivr-drive.is-on .ivr-drive__ring { box-shadow: none; }
.ivr-drive.is-on .ivr-owner2__head { transform: none; }
.ivr-drive__swipe { display: none; }
@media (max-width: 759px) {
  .ivr-drive__frame { margin-inline: calc(var(--fc-gutter) * -1); }
  .ivr-drive__frame::after { border-radius: 0; }
  .ivr-drive__scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    border-inline: 0;
    border-radius: 0;
    scrollbar-width: none;
  }
  .ivr-drive__scroll::-webkit-scrollbar { display: none; }
  /* full bleed: the frame's ring (above) draws inside the edge the section clips */
  @supports selector(:has(*)) { .ivr-drive__scroll:focus-visible { outline: none; } }
  /* the tag holds the scene's bottom right here, so the pause takes the bottom left */
  .ivr-drive__pause { right: auto; left: var(--fc-gutter); }
  .ivr-drive__stage { width: 700px; }
  /* the scene opens on its right end: the tag sits over the street there, clear of the lens */
  .ivr-drive__sample.fc-sample--pin { top: auto; bottom: 14px; left: auto; right: 14px; }
  /* IVR on: the badge hangs below the lens, never over the caller's number, and the
     homeowner's bubble drops beside her shoulder, clear of the badge */
  .ivr-drive__badge { top: 86%; }
  .ivr-drive__wait, .ivr-drive__ok { top: 54%; }
  .ivr-drive__btns { display: none; }
  .ivr-drive__zoom { left: 77.5%; width: 17cqw; }
  .ivr-drive__lens { gap: 0.25em; padding: 0.4em; }
  .ivr-drive__ring { margin-top: 0.4em; }
  .ivr-drive__swipe { display: block; margin: 8px 0 0; font-family: var(--fc-hand); font-size: 1.05rem; text-align: center; color: var(--fc-orange-ink); }
  .ivr-drive__swipe::after { content: " \2192"; }
  html.js .ivr-drive__swipe::before { content: "\2190 "; }
  html.js .ivr-drive__swipe::after { content: none; }
}
/* the lever: a throttle-style handle in a slotted steel plate */
.ivr-lever-row { display: flex; justify-content: center; margin-top: 30px; }
html:not(.js) .ivr-lever-row { display: none; }
.ivr-lever {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 96px;
  padding: 12px 20px 12px;
  border: var(--fc-line);
  border-radius: 20px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 3px),
    linear-gradient(var(--fc-pure), var(--fc-steel-a) 62%, var(--fc-steel-b));
  box-shadow: var(--fc-chunk), inset 0 0 0 4px rgba(255, 255, 255, 0.32);
  color: var(--fc-ink);
  font: inherit;
  cursor: pointer;
  transition: transform 0.2s var(--fc-bounce), box-shadow 0.2s var(--fc-bounce);
}
.ivr-lever:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--fc-ink), inset 0 0 0 4px rgba(255, 255, 255, 0.32); }
.ivr-lever:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--fc-ink), inset 0 0 0 4px rgba(255, 255, 255, 0.32); }
.ivr-lever__lab {
  min-width: 4.2em;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: color 0.2s;
}
.ivr-lever__lab--off { text-align: right; color: var(--fc-red-ink); }
.ivr-lever__lab--on { text-align: left; color: var(--fc-ink-2); }
.ivr-lever[aria-checked="true"] .ivr-lever__lab--off { color: var(--fc-ink-2); }
.ivr-lever[aria-checked="true"] .ivr-lever__lab--on { color: var(--fc-green-ink); }
.ivr-lever__plate { position: relative; flex: none; width: 150px; height: 72px; }
.ivr-lever__slot {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 6px;
  height: 18px;
  border: var(--fc-line);
  border-radius: 999px;
  background: var(--fc-ink-black);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.4);
}
.ivr-lever__arm {
  position: absolute;
  left: 50%;
  bottom: 13px;
  width: 10px;
  height: 60px;
  margin-left: -5px;
  border: var(--fc-line);
  border-radius: 5px;
  background: linear-gradient(90deg, var(--fc-steel-b), var(--fc-steel-a), var(--fc-steel-b));
  transform: rotate(-38deg);
  transform-origin: 50% 100%;
  transition: transform 0.45s var(--fc-bounce);
}
.ivr-lever__knob {
  position: absolute;
  top: -20px;
  left: 50%;
  width: 32px;
  height: 32px;
  margin-left: -16px;
  border: var(--fc-line);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, rgba(255, 255, 255, 0.7) 0 3px, transparent 3.6px), var(--fc-orange);
  box-shadow: inset -3px -4px 0 rgba(0, 0, 0, 0.16);
}
.ivr-lever[aria-checked="true"] .ivr-lever__arm { transform: rotate(38deg); }
/* small phones: the lever fits 288px, and both labels stay on one line */
@media (max-width: 400px) {
  .ivr-lever { gap: 8px; padding: 10px 12px; }
  .ivr-lever__plate { width: 112px; }
  .ivr-lever__lab { min-width: 0; font-size: 0.82rem; white-space: nowrap; }
}
.ivr-drive__cap {
  min-height: 3em;
  max-width: 34em;
  margin: 16px auto 0;
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  text-wrap: balance;
}

/* ---------- 4. Step 3: two call slips, then the spot-check tally ---------- */
.ivr-rechead { max-width: 760px; }
.ivr-slips { display: grid; gap: 40px; max-width: 1040px; }
@media (min-width: 860px) {
  .ivr-slips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: start; }
  .ivr-slipbox--booked { margin-top: 26px; }
}
.ivr-slipbox { position: relative; }
#recording .ivr-slipbox > .fc-sample--pin { top: -10px; right: 12px; }
#recording .ivr-slip { width: 100%; }
.ivr-slipbox--booked .ivr-slip { transform: rotate(0.8deg); }
#recording .ivr-slip .fc-slip__paper { gap: 14px; padding: 24px 22px 22px; font-size: 1rem; }
#recording .ivr-slip .fc-slip__head b { font-size: 1.2rem; }
#recording .ivr-slip .fc-bubble { font-size: 0.95rem; }
.ivr-slip__thread { padding: 4px 0 10px; }
.ivr-click {
  display: inline-flex;
  align-items: center;
  justify-self: center;
  gap: 8px;
  margin-top: 4px;
  padding: 4px 12px;
  border: 1.5px dashed var(--fc-gray-1);
  border-radius: 999px;
  color: var(--fc-ink-3);
  font-weight: 700;
  letter-spacing: 0.08em;
}
.ivr-click svg { width: 18px; height: 18px; color: var(--fc-red-ink); }
#recording .ivr-slip__out { padding-right: 110px; font-size: 0.95rem; font-weight: 800; color: var(--fc-ink); }
.ivr-slip__stamp { position: absolute; right: 14px; bottom: 16px; z-index: 3; font-size: 1.45rem; transform: rotate(-9deg); }
.ivr-slipbox--booked .ivr-slip__stamp { transform: rotate(-6deg); }
/* BOOKED is the wider stamp (about 150px once tilted): keep its lane clear of the outcome line */
@media (min-width: 601px) {
  #recording .ivr-slipbox--booked .ivr-slip__out { padding-right: 156px; text-wrap: balance; }
}
html.js .ivr-slips[data-play-on-view]:not(.is-playing) .ivr-slip__stamp { opacity: 0; transform: rotate(-9deg) scale(1.8); }
.ivr-slips.is-playing .ivr-slip__stamp { transition: opacity 0.2s 0.5s, transform 0.4s var(--fc-bounce) 0.5s; }
.ivr-slips.is-playing .ivr-slipbox--booked .ivr-slip__stamp { transition-delay: 1.1s; }
@media (max-width: 600px) {
  #recording .ivr-slip .fc-slip__paper { padding: 22px 16px 18px; }
  /* phones: the outcome line runs full width and the stamp lands under it, never on it */
  #recording .ivr-slip__out { padding-right: 0; padding-bottom: 52px; text-wrap: balance; }
  .ivr-slip__stamp { right: 18px; bottom: 16px; font-size: 1.2rem; }
}
/* the tally: a clipboard with one big number, labeled as a Pawn Leads result */
.ivr-tally { display: grid; justify-items: center; gap: 26px; margin-top: clamp(64px, 8vw, 96px); }
.ivr-tally__board { width: min(100%, 780px); }
.ivr-tally__paper { padding-top: 28px; }
.ivr-tally__strip { margin: 0 0 8px; }
.ivr-tally__strip .fc-labeltape { white-space: normal; }
.ivr-tally__grid { display: grid; gap: 10px 32px; align-items: center; }
@media (min-width: 700px) { .ivr-tally__grid { grid-template-columns: auto minmax(0, 1fr); } }
.ivr-tally__big {
  padding: 8px 18px 4px;
  font-family: var(--fc-display);
  font-size: clamp(4rem, 2.8rem + 4vw, 6.2rem);
  font-weight: 400;
  line-height: 1;
  color: var(--fc-red-ink);
  text-align: center;
}
.ivr-tally__rows { display: grid; margin: 0; padding: 0; list-style: none; }
.ivr-tally__rows li { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1.5px dashed rgba(22, 58, 37, 0.3); font-weight: 600; line-height: 1.4; }
.ivr-tally__rows li:last-child { border-bottom: 0; }
.ivr-tally__rows b { font-weight: 800; }
.ivr-tally__marks { width: 200px; height: 30px; fill: none; stroke: var(--fc-ballpoint); stroke-width: 2.6; stroke-linecap: round; }
.ivr-tally__marks--red { stroke: var(--fc-red-ink); }
.ivr-tally__under { max-width: 30em; font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); font-weight: 800; line-height: 1.4; text-align: center; text-wrap: balance; }

/* ---------- 5. Step 4: the phone face up on the tailgate, then the objection ---------- */
.ivr-gate {
  position: relative;
  justify-self: center;
  width: min(100%, 600px);
  aspect-ratio: 600 / 640;
  overflow: hidden;
  border: var(--fc-line);
  border-radius: var(--fc-r3);
  box-shadow: var(--fc-chunk-lg);
  container-type: inline-size;
}
.ivr-gate__bed {
  position: absolute;
  inset: 0 0 auto;
  height: 14%;
  border-bottom: var(--fc-line);
  background: repeating-linear-gradient(90deg, var(--fc-asphalt) 0 22px, var(--fc-asphalt-2) 22px 30px);
}
.ivr-gate__panel {
  position: absolute;
  inset: 14% 0 0;
  background:
    linear-gradient(transparent 0 7px, rgba(0, 0, 0, 0.25) 7px 9px, transparent 9px) 0 0 / 100% 100% no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 30%),
    var(--fc-clover-2);
}
/* two panels stamped into the steel */
.ivr-gate__stamp {
  position: absolute;
  top: 7%;
  left: 5%;
  right: 5%;
  height: 36%;
  border: 2px solid rgba(8, 24, 14, 0.5);
  border-radius: 18px;
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.18), 2px 2px 0 rgba(255, 255, 255, 0.12);
}
.ivr-gate__stamp--b { top: 48%; height: 30%; }
.ivr-gate__latch {
  position: absolute;
  left: 50%;
  bottom: 22px;
  width: 120px;
  height: 34px;
  margin-left: -60px;
  border: var(--fc-line);
  border-radius: 10px;
  background: linear-gradient(var(--fc-steel-c), var(--fc-steel-a) 55%, var(--fc-steel-b));
  box-shadow: inset 0 4px 0 rgba(0, 0, 0, 0.2);
}
.ivr-gate__gloves { position: absolute; right: 4%; top: 30%; width: 38%; height: auto; }
.ivr-gate__clips i {
  position: absolute;
  width: 14px;
  height: 4px;
  border-radius: 2px;
  background: var(--fc-clover);
  transform: rotate(var(--r, 20deg));
}
.ivr-gate__clips i { background: var(--fc-lawn-a); box-shadow: 0 0 0 1px rgba(8, 24, 14, 0.35); }
.ivr-gate__clips i:nth-child(1) { left: 70%; top: 20%; --r: 28deg; }
.ivr-gate__clips i:nth-child(2) { left: 76%; top: 23%; --r: -18deg; background: var(--fc-leaf); }
.ivr-gate__clips i:nth-child(3) { left: 58%; top: 84%; --r: 60deg; }
.ivr-gate__clips i:nth-child(4) { left: 88%; top: 78%; --r: 12deg; background: var(--fc-leaf); }
.ivr-gate__clips i:nth-child(5) { left: 64%; top: 72%; --r: -40deg; }
.ivr-gate__clips i:nth-child(6) { left: 92%; top: 18%; --r: 80deg; background: var(--fc-leaf); }
.ivr-gate__hold { --pw: 42cqw; position: absolute; left: 7%; top: 10%; z-index: 2; transform: rotate(-1deg); }
.ivr-gate__phone { --pw: 42cqw; }
/* the lock screen scales with the phone (--pw), with floors for the words, so both
   notifications always fit the screen */
.ivr-gate__phone .fc-phone__screen { padding: calc(var(--pw) * 0.15) calc(var(--pw) * 0.045) 10px; }
.ivr-gate__phone .fc-phone__time { font-size: calc(var(--pw) * 0.18); }
.ivr-lock__date { display: block; margin-top: 3px; font-size: clamp(11px, calc(var(--pw) * 0.056), 14.4px); font-weight: 600; text-align: center; color: var(--fc-chalk); }
.ivr-gate__phone .fc-notif { margin-top: calc(var(--pw) * 0.065); padding: 8px 9px 9px; border-radius: 14px; }
.ivr-gate__phone .fc-notif + .fc-notif { margin-top: 8px; }
.ivr-gate__phone .fc-notif__top { margin-bottom: 4px; }
.ivr-gate__phone .fc-notif__app { width: 22px; height: 22px; border-radius: 7px; }
.ivr-gate__phone .fc-notif__app svg { width: 15px; height: 15px; }
.ivr-gate__phone .fc-notif__title { font-size: clamp(11.5px, calc(var(--pw) * 0.056), 14px); }
.ivr-gate__phone .fc-notif__body { font-size: clamp(11px, calc(var(--pw) * 0.052), 12.8px); }
.ivr-notif--fail { background: var(--fc-sun-2); box-shadow: inset 6px 0 0 var(--fc-orange), 0 5px 0 rgba(8, 24, 14, 0.4); }
.ivr-notif--fail .fc-notif__title { color: var(--fc-red-ink); }
.ivr-notif--fail .fc-notif__body { color: var(--fc-ink); }
.ivr-notif--fail .fc-notif__ago { color: var(--fc-ink); font-weight: 800; }
.ivr-notif .fc-notif__app svg { color: var(--fc-ink-deep); }
.ivr-notif--pass { background: rgba(255, 253, 246, 0.9); box-shadow: 0 3px 0 rgba(8, 24, 14, 0.3); }
.ivr-notif--pass .fc-notif__app { background: var(--fc-leaf); }
@media (max-width: 600px) {
  .ivr-gate { aspect-ratio: auto; height: calc(62cqw * 2 + 100px); }
  .ivr-gate__hold, .ivr-gate__phone { --pw: 64cqw; }
  .ivr-gate__hold { left: 5%; top: 10%; }
  .ivr-gate__gloves { right: 1%; top: 42%; width: 36%; }
  .ivr-gate__latch { bottom: 14px; width: 90px; margin-left: -45px; }
}
@media (max-width: 360px) {
  .ivr-gate__hold, .ivr-gate__phone { --pw: 68cqw; }
  .ivr-gate__hold { left: 4%; }
}
@supports not (height: 1cqw) { .ivr-gate { height: 680px; } }

.ivr-objection { display: grid; justify-items: center; gap: 30px; margin-top: clamp(72px, 9vw, 112px); }
.ivr-objection__hold { position: relative; padding-top: 24px; }
.ivr-objection__label { position: absolute; top: 0; left: 50%; z-index: 7; white-space: nowrap; transform: translateX(-50%) rotate(-2deg); }
.ivr-objection__hold > .fc-sample--pin { top: 40px; right: -26px; }
.ivr-objection__phone { --pw: 262px; }
.ivr-objection__phone .fc-phone__screen { display: flex; flex-direction: column; padding-top: 46px; }
.ivr-objection__phone .fc-bubble { font-size: 0.86rem; }
.ivr-objection__input { display: block; height: 30px; margin-top: auto; border: 1.5px solid rgba(22, 58, 37, 0.35); border-radius: 999px; background: var(--fc-pure); }
.ivr-objection__line { max-width: 24em; font-size: clamp(1.3rem, 1.05rem + 0.9vw, 1.75rem); font-weight: 800; line-height: 1.3; text-align: center; text-wrap: balance; }
@media (min-width: 860px) {
  .ivr-objection { grid-template-columns: auto minmax(0, 30rem); justify-content: center; align-items: center; column-gap: 72px; }
  .ivr-objection__line { text-align: left; }
}
@media (max-width: 600px) {
  .ivr-objection__label { font-size: 0.92rem; }
  .ivr-objection__hold > .fc-sample--pin { right: -8px; }
}

/* ---------- 6. Step 5: the homeowner's phone mid-search, the clock, the plaque ---------- */
.ivr-miss { display: grid; justify-items: center; gap: 22px; }
.ivr-miss__scene { position: relative; display: grid; justify-items: center; }
.ivr-miss__hold { position: relative; }
.ivr-miss__phone { --pw: 262px; cursor: pointer; }
.ivr-miss__phone .fc-phone__screen { padding-top: 178px; }
.ivr-banner {
  position: absolute;
  top: 36px;
  left: 7px;
  right: 7px;
  z-index: 4;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  padding: 9px 10px 10px;
  border: var(--fc-line);
  border-radius: 16px;
  background: rgba(255, 253, 246, 0.98);
  box-shadow: 0 5px 0 rgba(8, 24, 14, 0.3);
  line-height: 1.25;
}
.ivr-banner__app { display: grid; place-items: center; width: 30px; height: 30px; border: var(--fc-line); border-radius: 9px; background: var(--fc-clover); color: var(--fc-white); }
.ivr-banner__app svg { width: 17px; height: 17px; }
.ivr-banner__row { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; color: var(--fc-ink-2); }
.ivr-banner__from { font-size: 0.82rem; font-weight: 800; }
.ivr-banner__body { font-size: 0.74rem; font-weight: 600; color: var(--fc-ink-2); }
.ivr-recents { margin-top: 0; }
.ivr-recents__hot { padding: 8px 6px; border: 1.5px solid rgba(22, 58, 37, 0.2); border-radius: 12px; background: var(--fc-pure); }
.ivr-recents .fc-listrow { grid-template-columns: 30px minmax(0, 1fr) auto; }
.ivr-recents__hot .fc-listrow__av { background: var(--fc-sun-2); }
.ivr-recents__hot .fc-listrow__av svg { width: 15px; height: 15px; }
.ivr-recents__meta { overflow: visible; white-space: normal; color: var(--fc-red-ink); font-weight: 700; }
.ivr-recents__t { font-weight: 700; color: var(--fc-ink-2); font-variant-numeric: tabular-nums; }
.ivr-recents__ghost i { display: block; height: 7px; margin: 3px 0; border-radius: 4px; background: rgba(22, 58, 37, 0.14); }
.ivr-recents__ghost i + i { width: 60%; }
.ivr-miss__search { margin-top: 14px; }
.ivr-watch { position: relative; z-index: 3; display: grid; justify-items: center; gap: 8px; margin: -70px 0 0 250px; }
.ivr-watch__label { padding: 3px 9px; border-radius: 5px; background: var(--fc-ink); color: var(--fc-sun); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; white-space: nowrap; }
.ivr-watch__face { --ro: 2.4rem; }
.ivr-watch__note { font-size: 1.05rem; }
.ivr-miss__plate { max-width: 470px; margin-top: 8px; text-align: center; }
.ivr-miss__plate .fc-plate__title { font-size: clamp(0.92rem, 0.8rem + 0.5vw, 1.22rem); line-height: 1.4; }
@media (max-width: 600px) { .ivr-miss__plate { padding-inline: 18px; } .ivr-miss__plate .fc-plate__title { letter-spacing: 0.05em; } }
.ivr-miss__line { max-width: 24em; font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); font-weight: 800; line-height: 1.35; text-align: center; text-wrap: balance; }
.ivr-miss__replay { margin-top: -4px; }
/* before it plays: no banner yet (site.js adds .is-playing on view; right away with reduced motion) */
html.js .ivr-miss__scene[data-play-on-view]:not(.is-playing) .ivr-banner { opacity: 0; transform: translateY(-130%); }
.ivr-miss__scene.is-playing .ivr-banner { transition: opacity 0.2s 1.9s, transform 0.55s var(--fc-bounce) 1.9s; }
@media (max-width: 600px) {
  .ivr-miss__phone { --pw: 240px; }
  .ivr-miss__phone .fc-phone__screen { padding-top: 182px; }
  .ivr-watch { margin: -58px 0 0 170px; }
  .ivr-watch__face { --ro: 2rem; }
}
@media (max-width: 380px) { .ivr-watch { margin-left: 120px; } }
/* the fence stands in the grass fringe at the seam, like the homepage */
#text-back .fc-fence { margin-top: 56px; }

/* ---------- 7. Under the hood: one thread on a laptop, four pins ---------- */
.ivr-hood { max-width: 1120px; margin: 0 auto; }
@media (min-width: 900px) { #thread .ivr-hood { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; } }
.ivr-laptop { position: relative; width: 100%; max-width: 720px; margin: 0 auto; padding-top: 6px; }
.ivr-laptop > .fc-sample--pin { top: -8px; }
.ivr-laptop__lid { padding: 14px 14px 18px; border: var(--fc-line); border-radius: 22px 22px 8px 8px; background: var(--fc-tablet); box-shadow: var(--fc-chunk-lg); }
.ivr-laptop__screen { border: 2px solid var(--fc-ink-black); border-radius: 8px; background: var(--fc-white); }
.ivr-laptop__base {
  position: relative;
  height: 24px;
  margin: 0 -6%;
  border: var(--fc-line);
  border-radius: 4px 4px 26px 26px;
  background: linear-gradient(var(--fc-steel-a), var(--fc-steel-b));
  box-shadow: var(--fc-chunk);
}
.ivr-laptop__base::after { content: ""; position: absolute; top: -2px; left: 50%; width: 90px; height: 9px; margin-left: -45px; border: 2px solid var(--fc-ink); border-top: 0; border-radius: 0 0 9px 9px; background: var(--fc-steel-b); }
.ivr-sh { display: grid; grid-template-columns: 58px minmax(0, 1fr); border-radius: 6px; }
.ivr-sh__side { display: grid; align-content: start; justify-items: center; gap: 12px; padding: 14px 0; border-right: 1.5px solid rgba(22, 58, 37, 0.14); border-radius: 6px 0 0 6px; background: var(--fc-paper-2); }
.ivr-sh__side i { width: 34px; height: 34px; border: 2px solid rgba(22, 58, 37, 0.3); border-radius: 50%; background: var(--fc-white); }
.ivr-sh__side i.is-on { border-color: var(--fc-ink); background: var(--fc-leaf); box-shadow: 0 0 0 3px var(--fc-sun); }
.ivr-sh__main { display: grid; align-content: start; gap: 12px; padding: 14px 18px 18px; min-width: 0; }
.ivr-sh__search { position: relative; min-height: 38px; }
.ivr-sh__search .fc-search__q { color: var(--fc-ink-2); font-weight: 600; }
.ivr-sh__head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1.5px solid rgba(22, 58, 37, 0.14); font-size: 1rem; }
.ivr-sh__av { display: grid; place-items: center; width: 34px; height: 34px; border: var(--fc-line); border-radius: 50%; background: var(--fc-sticky); font-size: 0.85rem; font-weight: 800; }
.ivr-sh__rows { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ivr-sh__rows .fc-bubble { max-width: 80%; }
.ivr-sh__sys {
  display: inline-flex;
  align-items: center;
  justify-self: center;
  gap: 6px;
  padding: 3px 12px;
  border: 1.5px solid var(--fc-red-ink);
  border-radius: 999px;
  background: var(--fc-red-tint);
  color: var(--fc-red-ink);
  font-size: 0.78rem;
  font-weight: 800;
}
.ivr-sh__sys svg { width: 15px; height: 15px; }
.ivr-sh__call {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "ic txt btn" "ic wave btn";
  align-items: center;
  gap: 6px 12px;
  margin-top: 6px;
  padding: 12px 12px 12px 14px;
  border: var(--fc-line);
  border-radius: 14px;
  background: var(--fc-sun-2);
  box-shadow: 3px 3px 0 var(--fc-ink);
}
.ivr-sh__callic { grid-area: ic; position: relative; display: grid; place-items: center; width: 40px; height: 40px; border: var(--fc-line); border-radius: 50%; background: var(--fc-clover); color: var(--fc-white); }
.ivr-sh__callic > svg { width: 20px; height: 20px; }
.ivr-sh__calltxt { grid-area: txt; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 0.86rem; font-weight: 800; line-height: 1.25; }
.ivr-sh__play { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px 2px 6px; border: 1.5px solid var(--fc-ink); border-radius: 999px; background: var(--fc-white); font-size: 0.78rem; }
.ivr-sh__play svg { width: 12px; height: 12px; }
.ivr-sh__wave { grid-area: wave; position: relative; display: flex; align-items: center; justify-self: start; gap: 3px; height: 26px; }
.ivr-sh__wave i { width: 4px; height: var(--h, 50%); border-radius: 2px; background: var(--fc-ink); }
.ivr-sh__wave i:nth-child(3n) { --h: 90%; }
.ivr-sh__wave i:nth-child(3n + 1) { --h: 40%; }
.ivr-sh__wave i:nth-child(4n + 2) { --h: 70%; }
.ivr-sh__wave i:nth-child(5n) { --h: 25%; }
.ivr-sh__wave i:nth-child(n + 8) { background: rgba(22, 58, 37, 0.35); }
.ivr-sh__btn {
  grid-area: btn;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border: var(--fc-line);
  border-radius: 10px;
  background: var(--fc-white);
  box-shadow: 2px 2px 0 var(--fc-ink);
  font-size: 0.82rem;
  font-weight: 800;
}
.ivr-sh__btn svg { width: 15px; height: 15px; }
#thread .ivr-pin { width: 30px; height: 30px; }
.ivr-pin--1 { --x: 0%; --y: 0%; }
.ivr-pin--2 { --x: calc(100% + 22px); --y: 50%; }
.ivr-pin--3 { --x: 100%; --y: 0%; }
.ivr-pin--4 { --x: calc(100% - 22px); --y: 50%; }
/* the pins light up one at a time as it scrolls in */
html.js .ivr-hood[data-play-on-view]:not(.is-playing) .ivr-pin { scale: 0; }
.ivr-hood.is-playing .ivr-pin { transition: scale 0.5s var(--fc-bounce) 0.2s; }
.ivr-hood.is-playing .ivr-sh__wave .ivr-pin { transition-delay: 0.7s; }
.ivr-hood.is-playing .ivr-sh__btn .ivr-pin { transition-delay: 1.2s; }
.ivr-hood.is-playing .ivr-sh__search .ivr-pin { transition-delay: 1.7s; }
.ivr-hood__key { gap: 14px; }
.ivr-hood__key li { font-size: 1.02rem; }
.ivr-hood__key b { font-weight: 800; }
@media (max-width: 600px) {
  .ivr-laptop__lid { padding: 8px 8px 12px; border-radius: 16px 16px 6px 6px; }
  .ivr-sh { grid-template-columns: minmax(0, 1fr); }
  .ivr-sh__side { display: none; }
  .ivr-sh__main { padding: 12px 10px 14px; }
  .ivr-sh__call { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ic txt" "wave wave" "btn btn"; }
  .ivr-sh__btn { justify-self: start; }
  .ivr-pin--3 { --x: calc(100% + 22px); --y: 50%; }
  .ivr-laptop__base { margin: 0 -3%; }
}

/* ---------- 8. Ask AI on the turf band, and the evidence board ---------- */
.ivr-askhead { max-width: 760px; }
.ivr-ask { max-width: 860px; }
.ivr-ask__box {
  position: relative;
  padding: 14px 14px 8px;
  border: var(--fc-line);
  border-radius: 24px;
  background: var(--fc-white);
  box-shadow: 6px 6px 0 rgba(4, 16, 9, 0.55);
  color: var(--fc-ink);
}
.ivr-ask__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 8px 8px 8px 10px;
  border: var(--fc-line);
  border-radius: 999px;
  background: var(--fc-pure);
  box-shadow: inset 0 -3px 0 rgba(22, 58, 37, 0.08);
}
.ivr-ask__label {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  padding: 8px 13px 8px 10px;
  border-radius: 999px;
  background: var(--fc-ink);
  color: var(--fc-sun);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}
.ivr-ask__label svg { width: 18px; height: 18px; }
.ivr-ask__q { flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.18rem); font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.ivr-ask__pause { flex: none; }
html:not(.js) .ivr-ask__pause { display: none; }
.ivr-ask__pause .fc-pause { box-shadow: 2px 2px 0 var(--fc-ink); }
@media (prefers-reduced-motion: reduce) { .ivr-ask__pause { display: none; } }
/* the box is white, not turf: the ink ring, not the sun one */
#ask-ai .ivr-ask__box :focus-visible { outline-color: var(--fc-ink); }
.ivr-ask__recent { margin: 8px 0 0; padding: 0 10px; list-style: none; }
.ivr-ask__recent li { display: flex; align-items: center; gap: 10px; padding: 11px 4px; border-top: 1.5px solid rgba(22, 58, 37, 0.12); font-weight: 600; line-height: 1.35; color: var(--fc-ink-2); }
.ivr-ask__recent svg { flex: none; width: 18px; height: 18px; color: var(--fc-ink-2); }
.ivr-ask__cap { margin-top: 16px; font-size: 0.95rem; font-weight: 600; color: var(--fc-chalk-2); }
@media (max-width: 600px) {
  .ivr-ask__box { padding: 10px 10px 4px; border-radius: 20px; }
  .ivr-ask__bar { flex-wrap: wrap; border-radius: 20px; padding: 10px; gap: 8px 10px; }
  .ivr-ask__q { flex-basis: calc(100% - 60px); order: 2; white-space: normal; min-height: 2.7em; }
  .ivr-ask__pause { order: 1; margin-left: auto; }
  .ivr-ask__label { order: 0; }
}
.ivr-story { display: grid; gap: 30px; margin-top: clamp(64px, 8vw, 104px); }
@media (min-width: 960px) {
  .ivr-story { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "before web" "after web"; column-gap: clamp(40px, 5vw, 72px); row-gap: 26px; align-items: start; }
  .ivr-story__before { grid-area: before; align-self: end; }
  .ivr-web { grid-area: web; }
  .ivr-story__after { grid-area: after; }
}
.ivr-story .fc-lead { color: var(--fc-chalk-2); }
.ivr-web.fc-surface { position: relative; padding: 0; aspect-ratio: 16 / 11; }
.ivr-web__tape { position: absolute; top: -10px; left: -18px; z-index: 7; transform: rotate(-7deg); }
.ivr-web__strings { position: absolute; inset: 0; width: 100%; height: 100%; }
.ivr-web__strings path { fill: none; stroke: var(--fc-red-ink); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.ivr-web__strings--tall { display: none; }
.ivr-web__cards { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.ivr-card {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: 29%;
  max-width: 200px;
  padding: 16px 10px 12px;
  border: var(--fc-line);
  border-radius: 3px;
  background: linear-gradient(transparent 0 11px, rgba(180, 35, 24, 0.45) 11px 13px, transparent 13px), var(--fc-white);
  box-shadow: 3px 4px 0 rgba(40, 20, 6, 0.4);
  color: var(--fc-ink);
  font-size: clamp(0.8rem, 0.72rem + 0.3vw, 0.95rem);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
}
.ivr-card .fc-pushpin { top: -9px; }
.ivr-card__t { display: block; }
.ivr-card--center { --x: 50%; --y: 50%; --r: -1deg; width: 34%; max-width: 230px; padding: 20px 12px 16px; background: var(--fc-sun); font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.12rem); }
.ivr-card--a { --x: 19%; --y: 22%; --r: -3deg; }
.ivr-card--b { --x: 81%; --y: 22%; --r: 2.5deg; }
.ivr-card--c { --x: 17%; --y: 80%; --r: 2deg; }
.ivr-card--d { --x: 83%; --y: 80%; --r: -2.5deg; }
.ivr-card--e { --x: 50%; --y: 88%; --r: 1.5deg; }
@media (max-width: 640px) {
  .ivr-web.fc-surface { aspect-ratio: 3 / 3.7; }
  .ivr-web__strings--wide { display: none; }
  .ivr-web__strings--tall { display: block; }
  .ivr-card { width: 42%; }
  .ivr-card--center { --y: 47%; width: 50%; }
  .ivr-card--a { --x: 27%; --y: 9%; }
  .ivr-card--b { --x: 73%; --y: 19%; }
  .ivr-card--e { --x: 26%; --y: 29%; }
  .ivr-card--c { --x: 28%; --y: 68%; }
  .ivr-card--d { --x: 72%; --y: 80%; }
  .ivr-web__tape { left: auto; right: -6px; transform: rotate(5deg); }
}
.ivr-story__after { display: grid; gap: 12px; }
.ivr-story__punch { font-family: var(--fc-display); font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); font-weight: 400; line-height: 1.1; color: var(--fc-sun); }
.ivr-story__small { font-size: 0.95rem; font-style: italic; font-weight: 600; color: var(--fc-chalk-2); }

/* ---------- 9. Shmo Calls: the grade card, held up by Shmello ---------- */
#shmo-calls .ivr-badge { align-self: start; justify-self: start; margin-bottom: 0; }
.ivr-grade { position: relative; justify-self: center; width: min(100%, 560px); padding-bottom: 176px; }
.ivr-grade__board { width: 100%; }
.ivr-grade__paper { padding-top: 34px; }
.ivr-grade__head { padding: 0 96px 10px 0; border-bottom: 3px double var(--fc-ink); font-family: var(--fc-mono); font-size: 0.84rem; font-weight: 700; letter-spacing: 0.04em; }
.ivr-grade__stamp { position: absolute; top: 24px; right: 14px; font-size: 1.1rem; transform: rotate(8deg); }
.ivr-grade__body { display: grid; gap: 14px 22px; margin-top: 6px; }
@media (min-width: 620px) { .ivr-grade__body { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: center; } }
.ivr-grade__lines { display: grid; margin: 0; padding: 0; list-style: none; }
.ivr-grade__lines li { padding: 11px 0; border-bottom: 1.5px dashed rgba(22, 58, 37, 0.3); font-size: 0.95rem; line-height: 1.5; }
.ivr-grade__lines li:last-child { border-bottom: 0; }
.ivr-grade__lines b { font-weight: 800; }
.ivr-grade__marks { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-family: var(--fc-hand); font-size: 1.02rem; line-height: 1.2; color: var(--fc-red-ink); }
.ivr-grade__marks li { display: flex; align-items: flex-start; gap: 6px; transform: rotate(-2deg); }
.ivr-grade__marks svg { flex: none; width: 20px; height: 20px; margin-top: -1px; }
.ivr-grade__foot { margin-top: 10px; padding-top: 10px; border-top: 3px double var(--fc-ink); font-family: var(--fc-mono); font-size: 0.86rem; font-weight: 700; }
.ivr-grade__mallow { position: absolute; left: 50%; bottom: 0; z-index: 4; width: 240px; height: 200px; margin-left: -120px; pointer-events: none; }
.ivr-grade__arms { position: absolute; inset: 0; width: 100%; height: 100%; }
.ivr-grade__sticker { --sticker: 150px; position: absolute; left: 45px; bottom: 0; width: 150px; transform: rotate(-3deg); }
@media (max-width: 600px) {
  .ivr-grade__head { padding-right: 0; padding-top: 30px; }
  .ivr-grade__stamp { top: 14px; right: 10px; font-size: 0.95rem; }
  .ivr-grade__marks { padding-top: 4px; }
}

/* ---------- 10. The work order ticket in the closing band ---------- */
#check .ivr-ticket { display: grid; gap: 8px; width: 100%; margin: -4px 0 0; }
#check .ivr-ticket div { display: grid; grid-template-columns: 6em minmax(0, 1fr); gap: 10px; align-items: baseline; padding-bottom: 7px; border-bottom: 1.5px solid rgba(22, 58, 37, 0.22); }
#check .ivr-ticket dt { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fc-ink-2); }
#check .ivr-ticket dd { margin: 0; font-weight: 700; line-height: 1.4; }
#check .ivr-ticket .fc-hw { font-size: 1.12rem; font-weight: 400; line-height: 1.3; }
#check .fc-cta__paper .fc-note { max-width: none; }
#check .fc-cta__copy { display: grid; gap: 14px; }
@media (max-width: 600px) { #check .ivr-ticket div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* ---------- motion off: every scene drawn finished ---------- */
@media (prefers-reduced-motion: reduce) {
  .ivr-drive__pause { display: none; }
  .ivr-call__label .ivr-ico,
  .ivr-rings path,
  .ivr-drive__lens,
  .ivr-drive__wait i,
  .ivr-miss__scene.is-playing .ivr-banner,
  .ivr-hood.is-playing .ivr-pin { transition: none; }
  .ivr-owner2__head,
  .ivr-drive__badge,
  .ivr-drive__ok,
  .ivr-drive__wait,
  .ivr-lever__arm { transition: none; }
}