/* Homepage art (website #252). Loads on the homepage only, after site.css and after the demo's sealed copy of the
   chat window's styles (assets/vendor/sitestaffr-panel/css/).

   Built from the approved round 7 mockup (design review website #248, mockup 3), whose style layers were r2 to r7
   plus r7-motion; each block below names the layer it came from. The rulings are on the wiki's homepage design
   page, "Rulings: the blog-cover art style (2026-11, website #248)". Class names are the mockup's own (x-, d1-,
   r3- to r7-) so the page renders exactly as approved; the mockup's body classes became one, .home-art.

   Colors are site.css tokens. The only literals are (1) colors read from the art itself, below as --art-*, so a
   scene and the section under it always agree, and (2) the lead email's own palette in the demo's inbox, copied
   from the middleware (leadEmailPalette for the stock teal), because that box shows the real email.

   Two rules hold everywhere:
     - Nothing depends on a script to be seen. home-motion.js holds an element back only when it starts below the
       first screen; with no script the demo shows the finished lead email instead of an empty window.
     - All motion sits inside prefers-reduced-motion: no-preference. */
.home-art {
  --art-sky: #d4f6f3; --art-skylow: #f8fbf0; --art-ground: #c9e4e1;
  --art-dusk: #004e71; --art-dusklow: #013550;
  --art-dawn: #b0e7db; --art-dawnlow: #eaeddc;
  --art-night: #001422; --art-nightlow: #000f1d;
  --art-tallsky: #c0eaea; --art-tallground: #1c6481;
}
/* ==================================================================== from round layer r2.css */
/* Homepage art, round 2 (2026-11-10). Shared by every direction; loads after the frozen site.css.
   Colors are site.css tokens. The only literals are colors read from the art itself, set by
   build.py as --art-* custom properties so a scene and the section under it always agree. */
.home-art main { overflow-x: clip; }
.home-art .seam-curtain,
.home-art .footer-seam { display: none; }
.x-wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.x-center { text-align: center; }
.x-lead { color: var(--text-secondary); font-size: 1.12rem; max-width: 34em; }
.x-center .x-lead { margin-inline: auto; }
.x-accent { color: var(--teal-text); }
.x-note { color: var(--text-muted); font-size: 0.92rem; }
.d1-hero .x-note { color: var(--text-secondary); }
.x-link { color: var(--teal-text); font-weight: 600; }
.x-link:hover { text-decoration: underline; }
.x-art { display: block; max-width: 100%; height: auto; }
/* Hero copy block (same words as today, set once) */
.x-eyebrow {
  display: inline-block; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: #005259; margin-bottom: 16px;   /* the live hero tagline color */
}
.x-h1 { font-size: clamp(2.3rem, 3.9vw, 3.5rem); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 22px; color: var(--text-primary); }
.x-h1 span { display: block; }
.x-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 28px; }
.x-actions .x-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.x-proof { margin-top: 18px; font-size: 0.9rem; color: var(--text-muted); }
/* Greeting chips */
.x-chip {
  display: inline-flex; align-items: baseline; gap: 8px; padding: 9px 16px; border-radius: 999px;
  background: #fff; border: 1px solid var(--border-light); box-shadow: var(--shadow-sm);
  font-weight: 600; font-size: 1rem; color: var(--text-primary); white-space: nowrap;
}
.x-chip small { font-weight: 500; font-size: 0.78rem; color: var(--text-muted); }
.x-english {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 8px 16px; border-radius: 999px;
  background: var(--emerald-light); color: #065f46; font-size: 0.9rem; font-weight: 600;
}
/* Closing copy */
.x-cta__btn { background: var(--teal-light); color: var(--block-dark); box-shadow: none; }
/* 5.68:1, the site's closing button */
.x-cta__or { margin-top: 20px; font-size: 0.95rem; }
/* Art that replaces the robot inside the sections kept as they are */
.home-art .see-it__stage .art-see { width: clamp(220px, 24vw, 320px); height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-xl); box-shadow: 0 20px 44px rgba(0,0,0,0.45); }
.home-art .see-it__stage-play { margin-top: -96px; }
.home-art .faq-section__ask .art-ask { flex: none; width: clamp(84px, 10vw, 112px); height: auto; }
@media (max-width: 900px) {
.x-h1 { font-size: 2.25rem; }
.x-lead { font-size: 1.04rem; }
.x-actions .btn { width: 100%; justify-content: center; }
.home-art .see-it__stage-play { margin-top: -84px; }
}
/* The live chat launcher is frozen into the page without its plugin styles; hide it in mockups */
.sitestaffr-widget { display: none !important; }
/* The live page pads its last section for the footer seam; the seam is hidden here, so is the pad */
.home-art main > section:last-child { padding-bottom: 0; }
/* ==================================================================== from round layer d1.css */
/* Direction 1, Open Sky: the page is four full-width scenes, afternoon to night, and the
   product surfaces sit on top of them. */
/* ---------- Hero: one scene edge to edge, the headline printed in its sky ---------- */
.d1-hero {
  position: relative; overflow: hidden;
  background: var(--art-sky);
  min-height: min(58vw, 900px);
  padding-top: clamp(118px, 10.4vw, 158px);
}
.d1-hero__art {
  position: absolute; right: 0; bottom: 0; height: min(40vw, 620px); width: auto; max-width: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24%), linear-gradient(90deg, transparent 0, #000 10%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(180deg, transparent 0, #000 24%), linear-gradient(90deg, transparent 0, #000 10%);
          mask-composite: intersect;
}
.d1-hero::after { content: ''; position: absolute; inset: auto 0 0 0; height: 110px; background: linear-gradient(180deg, transparent, var(--warm-white)); }
.d1-hero .x-wrap { position: relative; z-index: 1; }
.d1-hero__copy { max-width: 560px; }
.d1-hero .x-lead { max-width: 30em; }
.d1-hero__phone { display: none; }
/* ---------- The shift nobody covers: evening ---------- */
.d1-shift { position: relative; margin-top: 72px; background: var(--block-dark); color: var(--text-on-dark); overflow: hidden; }
.d1-shift__art {
  position: absolute; inset: 0 0 auto 0; width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
}
.d1-shift::before {   /* a soft shade behind the words, so the bright horizon never sits under them */
  content: ''; position: absolute; inset: 0 0 auto 42%; height: 50vw; z-index: 1;
  background: radial-gradient(ellipse 70% 62% at 62% 34%, rgba(0, 35, 42, 0.78), rgba(0, 35, 42, 0) 100%);
}
.d1-shift__end { font-family: var(--font-display); font-size: 1.3rem !important; color: #fff; }
.home-art .see-it { padding-top: 40px; }
/* ---------- Your morning: dawn, with the real inbox standing in the scene ---------- */
.d1-dawn { position: relative; background: var(--warm-white); }
.d1-dawn__art { width: 100%; height: auto; display: block;
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 78%, transparent 100%); }
.d1-dawn__copy { position: absolute; top: 11%; left: 50%; width: min(520px, 38vw); margin-left: clamp(40px, 6vw, 96px); }
.d1-dawn__copy h2 { margin-bottom: 14px; }
.home-art .what-you-get { position: relative; z-index: 1; margin-top: -13vw; padding-top: 0; background: transparent; }
.home-art .what-you-get__header { display: none; }
.home-art .morning-inbox { box-shadow: var(--shadow-xl); }
/* ---------- Languages ---------- */
.d1-lang__stage { display: grid; grid-template-columns: 1fr minmax(0, 520px) 1fr; align-items: center; gap: 12px; margin-top: 18px; }
.d1-lang__col { display: flex; flex-direction: column; gap: 20px; align-items: flex-end; }
.d1-lang__col--r { align-items: flex-start; }
.d1-lang__col .x-chip:nth-child(odd) { margin-right: 54px; }
.d1-lang__col--r .x-chip:nth-child(odd) { margin-right: 0; margin-left: 54px; }
/* ---------- Closing: night ---------- */
.d1-close { position: relative; background: var(--footer-dark); color: var(--text-on-dark); overflow: hidden; }
.d1-close__art { width: 100%; height: auto; display: block;
  -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, #000 80%, transparent 100%); }
.d1-close__copy { position: absolute; top: 31%; left: max(20px, calc((100vw - 1100px) / 2)); width: min(500px, 40vw); }
.d1-close__copy h2 { color: #fff; }
.d1-close__copy .section-label { color: var(--teal-light); }
.d1-close__copy .x-lead,
.d1-close__copy .x-note,
.d1-close__copy .x-cta__or { color: var(--text-on-dark); }
.d1-close__copy .x-cta__hl,
.d1-close__copy .x-link { color: var(--teal-light); }
.home-art .footer { margin-top: 0; }
/* ---------- Phone and tablet ---------- */
@media (max-width: 900px) {
.d1-hero { min-height: 0; padding-top: 104px; }
.d1-hero__art,
.d1-hero::after { display: none; }
.d1-hero__phone { display: block; width: 100%; height: auto; margin-top: 8px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%); mask-image: linear-gradient(180deg, transparent 0, #000 30%); }
.d1-shift { margin-top: 44px; }
.d1-shift picture { display: block; }
.d1-shift__art { position: static; }
.d1-shift::before { display: none; }
.d1-dawn { display: flex; flex-direction: column-reverse; }
.d1-dawn__copy { position: static; width: auto; margin: 0; padding: 44px 20px 0; text-align: center; }
.d1-dawn__art { margin-top: 12px; }
.home-art .what-you-get { margin-top: -90px; }
.d1-lang__stage { grid-template-columns: 1fr; }
.d1-lang__col,
.d1-lang__col--r { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px; }
.d1-lang__col .x-chip:nth-child(odd),
.d1-lang__col--r .x-chip:nth-child(odd) { margin: 0; }
.d1-lang__col .x-chip { font-size: 0.9rem; padding: 7px 12px; }
.d1-close { display: flex; flex-direction: column; }
.d1-close__copy { position: static; width: auto; padding: 0 20px 48px; margin-top: -30px; }
}
/* ==================================================================== from round layer r3.css */
/* Homepage art, round 3 (2026-11-10): direction 1, Open Sky, revised point by point from Mario's
   round 2 verdict. Loads after site.css, r2.css and d1.css. site.css tokens only; the only literals
   are the live page's own card colors, copied with the cards. */
/* ================================================================ Hero
   Round 2 left the top third of the hero as empty sky (the picture sat at the bottom, 40vw tall).
   A: the same picture, scaled to the hero's full height and anchored under the nav.
   B: a new, taller picture of the same scene; it fills the hero edge to edge.
   C: round 2's picture as it was, with a real lead card and a reply time in the empty sky. */
.r3-hero--a { min-height: 0; height: min(calc(46vw + 76px), 900px); padding-top: clamp(112px, 8.6vw, 136px); }
.r3-hero--a .d1-hero__art {
  top: 76px; bottom: auto; height: min(46vw, 824px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%), linear-gradient(90deg, transparent 0, #000 10%);
          mask-image: linear-gradient(180deg, transparent 0, #000 12%), linear-gradient(90deg, transparent 0, #000 10%);
}
/* ================================================================ The five-picture strip (from round 2's #2)
   It replaces the white capability bar and straddles the seam between the hero and the page. */
.r3-path { position: relative; z-index: 2; margin-top: -88px; }
.r3-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; position: relative; }
.r3-steps::before {   /* the trail: the dotted envelope path from the art */
  content: ''; position: absolute; left: 10%; right: 10%; top: 84px; border-top: 3px dashed var(--teal-light); opacity: 0.6;
}
.r3-step { position: relative; text-align: center; }
.r3-step__art {
  width: 168px; height: 168px; margin: 0 auto; border-radius: 50%; background: #fff; border: 4px solid #fff;
  box-shadow: var(--shadow-md); display: grid; place-items: center; overflow: hidden; position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.r3-step:hover .r3-step__art { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.r3-step__art img { width: 112%; height: 112%; object-fit: cover; }
.r3-step__n {
  display: inline-grid; place-items: center; width: 30px; height: 30px; margin-top: -16px; position: relative;
  border-radius: 50%; background: var(--teal-deep); color: #fff; font-weight: 700; font-size: 0.85rem; border: 3px solid var(--warm-white);
}
.r3-step h2 { font-size: 1.05rem; letter-spacing: normal; margin: 8px 0 0; }
/* ================================================================ The shift nobody covers
   Copy in the sky on the right; the four figure cards run across the bottom of the scene, BELOW the
   visitor walking away (his feet sit at 40% of the picture's width in height, so the first row
   starts at 40.5vw), never on top of him. The cards are the live page's own, hover and all. */
.r3-shift { margin-top: 64px; }
.r3-shift__in {
  position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(calc(40.5vw - 88px), auto) auto;
  padding-top: 88px; padding-bottom: 72px;
}
.r3-shift__head { grid-column: 2; grid-row: 1; align-self: start; }
.r3-shift__head .section-label { color: color-mix(in srgb, var(--teal-light) 45%, #fff); }
.r3-shift__head h2 { color: #fff; margin: 0 0 16px; }
.r3-shift__head p { font-size: 1.05rem; margin: 0 0 14px; max-width: 34em; }
.r3-shift .job-values { grid-column: 1 / -1; grid-row: 2; margin-top: 8px; }
.r3-shift .job-values__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.r3-shift .job-value { background: rgba(10, 66, 74, 0.86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.r3-shift .job-value:hover,
.r3-shift .job-value:focus-within { background-color: #0D4E58; }
.r3-shift .job-value__note { color: rgba(240, 250, 250, 0.72); }
.r3-shift .job-value__icon { width: 60px; height: 60px; background: none; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25)); }
.r3-shift .job-values__foot { text-align: center; }
/* ================================================================ See it answer
   A: the demo picture redrawn wide and shown big, like a video poster, with the play button on it.
   B: the same picture as the whole section's backdrop; the play button sits in the room. */
.home-art .see-it__stage { padding-top: 26px; }
.home-art .see-it__stage::before { width: min(1180px, 100%); }
/* ================================================================ Your morning
   Round 2 had the words top right and the inbox bottom left, so the right half under the words was
   empty sky. Now the words and the inbox share the right column, over the sky; the owner at the door
   keeps the left. The four notes below run in one row. */
.r3-dawn .d1-dawn__copy { top: 7.5%; left: auto; right: max(20px, calc((100vw - 1140px) / 2 + 20px)); margin: 0; width: min(560px, 44vw); }
.r3-dawn .d1-dawn__copy .x-lead { margin-bottom: 22px; }
.r3-dawn .morning-inbox { max-width: none; margin: 0; box-shadow: var(--shadow-xl); }
/* The request gets its own line under the time, name and tag, the way phones already show it. */
@media (min-width: 901px) {
.r3-dawn .morning-inbox__row { grid-template-columns: auto minmax(0, 1fr) auto auto; column-gap: 12px; row-gap: 4px; padding: 12px 18px; }
.r3-dawn .morning-inbox__time { grid-column: 1; grid-row: 1; }
.r3-dawn .morning-inbox__who { grid-column: 2; grid-row: 1; }
.r3-dawn .morning-inbox__tag { grid-column: 3; grid-row: 1; justify-self: end; }
.r3-dawn .morning-inbox__what { grid-column: 1 / 4; grid-row: 2; }
.r3-dawn .morning-inbox__row::after { grid-column: 4; grid-row: 1 / -1; }
}
.home-art .what-you-get { margin-top: 0; padding-top: 8px; }
.home-art .what-you-get__callouts { --cards: 4 !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.r3-wp-badge {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-text);
}
.r3-wp-badge img { width: 22px; height: 22px; }
/* ================================================================ Round 3 fixes found in the 1440 shot
   The live stage has a fixed 520px height (sized for the robot); the 16:9 frame is taller, so it
   spilled up over the subtitle and the hint landed on the picture. The stage takes its own height. */
.home-art .see-it.is-interactive .see-it__stage { height: auto; }
.home-art .see-it__header { margin-bottom: 8px; }
/* The proof pill sits over the rooftops at the bottom of the hero picture; unboxed text there is illegible. */
.home-art .x-proof a {
  display: inline-block; padding: 5px 14px 5px 6px; border-radius: 999px; background: rgba(255, 253, 249, 0.88);
  box-shadow: var(--shadow-sm); color: var(--text-secondary); text-decoration: none;
}
/* Hide the "fills in" note until the conversation is playing: before play there is nothing for it to
   point at, and it sat alone under the picture. */
.home-art .see-it:not(.has-played) .see-it__caption { visibility: hidden; }
/* ================================================================ Tablet, 901 to 1200
   The picture stays beside the words, scaled to the width, as it does on a laptop. The copy column is
   held to 44vw so it clears the glowing window and the walker. */
@media (max-width: 1200px) and (min-width: 901px) {
.r3-hero--a { height: auto; min-height: calc(46vw + 40px); padding-top: clamp(112px, 11vw, 132px); padding-bottom: 96px; }
.r3-hero--a .d1-hero__art {
    inset: auto 0 0 auto; height: calc(46vw - 10px); aspect-ratio: auto; margin: 0; object-fit: fill;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%), linear-gradient(90deg, transparent 0, #000 12%);
            mask-image: linear-gradient(180deg, transparent 0, #000 14%), linear-gradient(90deg, transparent 0, #000 12%);
  }
.r3-hero .x-wrap { margin-top: 0; }
.r3-hero .d1-hero__copy { max-width: min(470px, 44vw); }
.r3-hero .x-h1 { font-size: clamp(2.3rem, 4vw, 2.8rem); }
.r3-hero .x-h1 span { display: inline; }
.r3-hero .x-lead { font-size: 1.04rem; }
.r3-hero .x-actions { gap: 12px 20px; }
/* option C: there is no empty sky left to fill at this width */
.r3-step__art { width: 140px; height: 140px; }
.r3-steps::before { top: 70px; }
.r3-dawn .d1-dawn__copy { top: 5%; width: min(520px, 50vw); }
.r3-dawn .d1-dawn__copy .x-lead { margin-bottom: 14px; }
}
/* ================================================================ Phone and small tablet, up to 900 */
@media (max-width: 900px) {
.r3-hero--a { height: auto; padding-top: 104px; }
.r3-path { margin-top: -34px; }
.r3-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 10px; }
.r3-steps::before { display: none; }
.r3-step { flex: 0 0 calc((100% - 20px) / 3); }
.r3-step__art { width: min(120px, 26vw); height: min(120px, 26vw); border-width: 3px; }
.r3-step__n { width: 26px; height: 26px; margin-top: -13px; font-size: 0.78rem; }
.r3-step h2 { font-size: 0.92rem; line-height: 1.25; }
.r3-shift { margin-top: 44px; }
.r3-shift__in { display: block; padding-top: 0; margin-top: -40px; padding-bottom: 44px; }
.r3-shift .job-values { margin-top: 26px; }
.r3-shift .job-values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.r3-dawn .d1-dawn__copy { position: static; top: auto; right: auto; width: auto; padding: 44px 20px 0; text-align: left; }
.r3-dawn .morning-inbox__row { grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 3px 10px; padding: 12px 14px; }
/* the live phone layout */
.r3-dawn .morning-inbox__what { white-space: normal; overflow: hidden; text-overflow: ellipsis; }
.home-art .what-you-get { margin-top: 0; padding-top: 28px; }
.home-art .what-you-get__callouts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
}
@media (min-width: 621px) and (max-width: 900px) {
.r3-dawn .morning-inbox__row { grid-template-columns: 62px 104px minmax(0, 1fr) auto auto; gap: 10px; }
}
@media (max-width: 560px) {
.r3-shift .job-values__grid { grid-template-columns: 1fr 1fr; }
.home-art .what-you-get__callouts { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
/* the trades line wraps on a phone; a rounded box reads better than a two-line pill */
.home-art .x-proof a { border-radius: 14px; font-size: 0.84rem; }
/* the watermark word ran into the icon in the two-column phone cards */
.r3-shift .job-value__mark { display: none; }
}
/* ==================================================================== from round layer r4.css */
/* Homepage art, round 4 (2026-11-10): Mario's round 3 picks folded into one page (hero A, demo B,
   agencies B) and his round 3 notes fixed. Loads after r3.css. site.css tokens only. */
/* ================================================================ Busy Owners (desktop)
   Round 3 pinned the four figure cards under the walking visitor (at 40.5vw), so on a 1900px
   screen the right half between the words and the cards was a tall band of empty sky. Now the
   cards stand as the live page's own 2 by 2 grid right under the words, in the same column, and
   the section is only as tall as that column (or 46vw, so the shop is never cut short). */
@media (min-width: 901px) {
.home-art .r3-shift__in {
    grid-template-columns: 1fr minmax(0, 560px); grid-template-rows: auto auto; column-gap: 48px;
    align-content: center; min-height: min(46vw, 980px);
    padding-top: clamp(72px, 6vw, 112px); padding-bottom: clamp(64px, 5vw, 96px);
  }
.home-art .r3-shift__head { grid-column: 2; grid-row: 1; }
.home-art .r3-shift .job-values { grid-column: 2; grid-row: 2; margin-top: 18px; }
.home-art .r3-shift .job-values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.home-art .r3-shift .job-value { padding: 18px 18px 16px; }
.home-art .r3-shift .job-value__icon { width: 52px; height: 52px; }
.home-art .r3-shift .job-values__foot { text-align: left; margin-top: 12px; }
.home-art .r3-shift__head p { margin-bottom: 10px; }
.home-art .r3-shift__head h2 { margin-bottom: 14px; }
/* the shade behind the words now runs the full height of the column */
.home-art .d1-shift::before { inset: 0 0 0 30%; height: auto;   /* closest-side: zero before every edge, no seam */
    background: radial-gradient(ellipse 58% 52% at 60% 34%, rgba(0, 35, 42, 0.74), rgba(0, 35, 42, 0.5) 55%, rgba(0, 35, 42, 0) 100%); }
}
/* ================================================================ Your Morning, the four notes
   Round 3 ran them as four bare text clusters in an 820px row: each column was too narrow for its
   heading, so "Every Conversation" pushed its icon onto a line of its own and the four sat at four
   different heights, with a wide empty band under them. Now they are four even white cards across
   the full content width, pulled up into the soft bottom of the morning scene. The icon stays left
   of the heading and the card stays centered (Mario, 2026-08-28). */
@media (min-width: 901px) {
.home-art .what-you-get { margin-top: max(clamp(-150px, -7vw, -80px), calc(554px - 46.7vw)); padding-top: 0; padding-bottom: clamp(56px, 5vw, 88px); position: relative; z-index: 2; }
.home-art .what-you-get__callouts {
    max-width: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: stretch;
  }
.home-art .what-you-get__callout {
    background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md); padding: 22px 22px 20px; align-content: flex-start;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
.home-art .what-you-get__callout:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.home-art .what-you-get__callout-title { white-space: nowrap; margin-bottom: 0; }
.home-art .what-you-get__callout-desc { margin-top: 2px; }
}
@media (min-width: 901px) and (max-width: 1200px) {
.home-art .what-you-get { margin-top: max(0px, calc(622px - 54vw)); }
.home-art .what-you-get__callouts { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; margin-inline: auto; }
}
/* the morning scene starts under the demo's fade, so its own top edge dissolves too */
.home-art .d1-dawn__art {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 15%, #000 78%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 15%, #000 78%, transparent 100%);
}
.home-art .see-it { position: relative; }
.home-art .d1-close { position: relative; }
.home-art .d1-close__copy { z-index: 2; }
/* 120px fade + 24px */
/* ================================================================ Phone and small tablet */
@media (max-width: 900px) {
/* Hero: the sky color now melts into the page before the five pictures, instead of stopping
     at a straight line behind them. */
.home-art .r3-hero { background: linear-gradient(180deg, var(--art-sky) 0, var(--art-sky) 72%, var(--warm-white) 100%); padding-bottom: 0; }
.home-art .d1-hero__phone {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 80%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 80%, transparent 100%);
  }
.home-art .r3-path { margin-top: -56px; }
.home-art .x-proof a { white-space: nowrap; border-radius: 999px; }
/* One vertical rhythm: every section opens 64px below the last thing before it. */
.home-art .r3-shift { margin-top: 56px; }
.home-art .r3-shift__in { padding-bottom: 64px; }
.home-art .see-it { padding-top: 56px; }
/* 72px fade + 20px */
.home-art .r3-dawn .d1-dawn__copy { padding-top: 24px; }
.home-art .what-you-get { padding-bottom: 24px; }
.home-art .what-you-get__callouts { gap: 12px; }
.home-art .what-you-get__callout {
    background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm); padding: 18px 18px 16px;
  }
.home-art .d1-close__copy { padding-bottom: 56px; }
}
@media (max-width: 560px) {
/* one card per row: icon beside the heading, the line under the heading, left-aligned */
.home-art .what-you-get__callouts { grid-template-columns: 1fr; gap: 10px; }
.home-art .what-you-get__callout {
    display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; row-gap: 2px;
    text-align: left; justify-content: stretch; align-items: center; padding: 14px 16px;
  }
.home-art .what-you-get__callout-desc { grid-column: 2; margin: 0; font-size: 0.88rem; }
.home-art .what-you-get__callout-title { font-size: 1rem; }
}
/* Landscape tablet, 901 to 1200: the words take the right half exactly, so they clear the glowing
   window and the walker, and the four notes sit just under the inbox instead of touching it. */
@media (min-width: 901px) and (max-width: 1200px) {
/* Busy Owners: the scene is only 50vw tall here, too short for the words and four cards over
     it, so the scene runs first and the words and cards sit side by side under it. */
.home-art .d1-shift picture { display: block; }
.home-art .d1-shift__art { position: static; }
.home-art .d1-shift::before { display: none; }
.home-art .r3-shift__in { grid-template-columns: 1fr 1fr; column-gap: 36px; min-height: 0; margin-top: -72px; padding-top: 0; align-items: start; }
.home-art .r3-shift__head { grid-column: 1; }
.home-art .r3-shift .job-values { grid-column: 2; grid-row: 1; margin-top: 4px; }
.home-art .what-you-get { margin-top: 0; padding-top: 12px; }
}
/* ==================================================================== from round layer r5.css */
/* Homepage art, round 5 (2026-11-10). Loads after r4.css and after frozen copies of the real panel CSS.
   site.css tokens only; the chat window itself is the plugin's own stylesheet, untouched. */
/* ================================================================ Clean joins (Mario, round 4)
   No fades: a light section meets a dark one on a straight line, the way the live site's
   blocks already do. Busy Owners and Get Started start on their own night sky. */
.home-art .d1-shift { margin-top: 0; }
.home-art .r3-path { padding-bottom: clamp(56px, 6vw, 88px); }
.home-art .d1-close__copy { z-index: 2; }
@keyframes r5-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* ================================================================ Agencies: words beside the studio picture */
.r5-agency { background: var(--warm-white); }
.r5-agency__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.r5-agency__copy h2 { margin: 14px 0 10px; }
.r5-agency__copy .x-lead { margin: 0 0 22px; }
.r5-agency__points { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 14px; }
.r5-agency__points li { padding: 14px 18px; background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-md); color: var(--text-secondary); line-height: 1.45; }
.r5-agency__points strong { display: block; color: var(--text-primary); margin-bottom: 2px; }
.r5-agency__art { position: relative; display: grid; place-items: center; }
.r5-agency__art::before {   /* a pale stage the picture stands on */
  content: ""; position: absolute; left: 50%; top: 46%; width: min(92%, 520px); aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--teal-pale); z-index: 0;
}
.r5-agency__art img { position: relative; z-index: 1; width: 100%; max-width: 560px; height: auto; }
/* ================================================================ Tablet */
@media (max-width: 1200px) {
.r5-agency__in { grid-template-columns: 1fr 1fr; gap: 36px; }
}
/* ================================================================ Phone and small tablet */
@media (max-width: 900px) {
.r5-agency__in { grid-template-columns: 1fr; gap: 24px; }
.r5-agency__art { order: -1; }
.r5-agency__art img { max-width: 420px; }
}
/* ==================================================================== from round layer r6.css */
/* Homepage art, round 6 (2026-11-10): the "Hear a Visitor Talk" section on the dark background, four layouts
   (A to D) built around a visitor who came to see the demo. site.css tokens only; the chat window is the plugin's
   own stylesheet, untouched. Loads after r5.css. */
/* ================================================================ Shared */
.r6-see { position: relative; }
.r6-see h2 { margin: 10px 0 12px; }
.r6-sub { color: var(--text-on-dark); opacity: .86; font-size: 1.08rem; line-height: 1.5; margin: 0 0 22px; max-width: 32em; }
.r6-demo .is-text { display: none; }
.r6-demo[data-mode="text"] .is-text { display: inline; }
.r6-demo[data-mode="text"] .is-voice { display: none; }
/* The real window, placed in the page (the same undo as round 5, since the panel is a fixed popup). */
.r6-window { position: relative; width: 392px; max-width: 100%; text-align: left; }
.r6-window .sitestaffr-chat-panel.sitestaffr-demo-panel {
  position: relative !important; inset: auto !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
  width: 100% !important; height: 580px !important; max-height: none !important; min-height: 0 !important;
  opacity: 1 !important; transform: none !important; pointer-events: auto !important; z-index: 1 !important;
  border-radius: 20px !important; box-shadow: 0 24px 70px rgba(0, 0, 0, .45) !important;
}
.r6-window .sitestaffr-panel-grab { display: none !important; }
.r6-window .sitestaffr-chat-panel textarea { pointer-events: none; }
@media (max-width: 480px) {
html:has(.r6-window .sitestaffr-chat-panel.is-open),
html:has(.r6-window .sitestaffr-chat-panel.is-open) body { overflow: visible !important; overscroll-behavior: auto; }
}
/* Nothing in the demo window scrolls, so a swipe that starts on it must scroll the page. The panel's own
   overscroll-behavior: contain swallowed it on phones. */
.r6-window .sitestaffr-chat-panel * { overscroll-behavior: auto !important; }
.r6-i-pause,
.is-running > .r6-i-play,
.is-running .r6-pick__go .r6-i-play { display: none; }
.is-running > .r6-i-pause,
.is-running .r6-pick__go .r6-i-pause { display: inline; }
/* What to do next: always there; when the conversation ends it lights up and says so. */
.r6-next { grid-column: 1 / -1; display: grid; gap: 12px; }
.r6-next__t { margin: 0; font: 600 1.25rem/1.3 var(--font-display); color: var(--text-on-dark); opacity: .55; transition: opacity .5s ease; }
.r6-demo.is-done .r6-next__t { opacity: 1; }
.r6-next__row { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; }
.r6-next .see-it__setup { margin: 0; }
.r6-other { border: 0; background: none; color: var(--teal-light); font: 600 .98rem var(--font-body); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 8px 2px; }
.r6-other svg { width: 16px; height: 16px; }
.r6-demo:not(.is-done) .r6-other { display: none; }
/* ================================================================ A: pick a conversation */
.r6-a { display: grid; grid-template-columns: minmax(0, 1fr) 392px; column-gap: clamp(40px, 6vw, 96px); row-gap: 40px; align-items: start; }
.r6-a__win { grid-column: 2; grid-row: 1; width: 100%; max-width: 392px; }
/* Beside the window, "Your website can answer like this tonight" follows the steps instead of waiting below the
   window and its controls (Mario, 2026-11-11: the gap under the steps). The window spans both rows; the 1fr row
   takes whatever height it needs beyond the steps, so the steps row stays its own height. */
@media (min-width: 901px) {
.r6-a { grid-template-rows: auto 1fr; row-gap: 36px; }
.r6-a__win { grid-row: 1 / span 2; }
.r6-a .r6-next { grid-column: 1; grid-row: 2; align-self: start; }
}
.r6-pick { display: grid; gap: 12px; margin-bottom: 26px; max-width: 470px; }
.r6-pick__card { display: grid; grid-template-columns: 48px 1fr 44px; gap: 14px; align-items: center; text-align: left; cursor: pointer;
  padding: 14px 14px 14px 16px; border-radius: var(--radius-md); background: var(--block-dark-raised); border: 1.5px solid rgba(255, 255, 255, .12);
  color: var(--text-on-dark); font-family: var(--font-body); transition: border-color .2s ease, background-color .2s ease; }
.r6-pick__card:hover { border-color: var(--teal-light); }
.r6-pick__card[aria-pressed="true"] { border-color: var(--teal-light); background: rgba(31, 182, 204, .14); }
.r6-pick__icon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(31, 182, 204, .18); color: var(--teal-light); }
.r6-pick__txt b { display: block; font-size: 1.1rem; }
.r6-pick__txt small { display: block; margin-top: 3px; opacity: .78; font-size: .88rem; }
.r6-pick__go { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--teal-light); color: var(--footer-dark); }
.r6-a__track { display: grid; max-width: 470px; }
.r6-a__track > * { grid-area: 1 / 1; }
.r6-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; transition: opacity .4s ease; }
.r6-steps__i { display: flex; align-items: center; gap: 12px; padding: 9px 0; color: var(--text-on-dark); opacity: .55; transition: opacity .3s ease; }
.r6-steps__i b { font-weight: 600; }
.r6-steps__dot,
.r6-steps__ok { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 700 .85rem var(--font-body);
  border: 1.5px solid rgba(255, 255, 255, .35); flex: 0 0 auto; }
.r6-steps__ok { display: none; background: var(--teal-light); border-color: var(--teal-light); color: var(--footer-dark); }
.r6-a[data-stage="4"] .r6-steps,
.r6-a.is-done .r6-steps { opacity: 0; }
/* steps lit by stage (shared by A and C) */
.r6-demo[data-stage="1"] [data-n="1"],
.r6-demo[data-stage="2"] [data-n="2"],
.r6-demo[data-stage="3"] [data-n="3"],
.r6-demo[data-stage="4"] [data-n="4"] { opacity: 1; }
.r6-demo[data-stage="1"] .r6-steps__i[data-n="1"] .r6-steps__dot,
.r6-demo[data-stage="2"] .r6-steps__i[data-n="2"] .r6-steps__dot,
.r6-demo[data-stage="3"] .r6-steps__i[data-n="3"] .r6-steps__dot { background: var(--teal-pale); color: var(--teal-text); border-color: var(--teal-pale); }
.r6-demo[data-stage="2"] [data-n="1"],
.r6-demo[data-stage="3"] [data-n="1"],
.r6-demo[data-stage="3"] [data-n="2"],
.r6-demo[data-stage="4"] [data-n="1"],
.r6-demo[data-stage="4"] [data-n="2"],
.r6-demo[data-stage="4"] [data-n="3"] { opacity: .9; }
.r6-demo[data-stage="2"] [data-n="1"] .r6-steps__dot,
.r6-demo[data-stage="3"] :is([data-n="1"], [data-n="2"]) .r6-steps__dot,
.r6-demo[data-stage="4"] :is([data-n="1"], [data-n="2"], [data-n="3"]) .r6-steps__dot { display: none; }
.r6-demo[data-stage="2"] [data-n="1"] .r6-steps__ok,
.r6-demo[data-stage="3"] :is([data-n="1"], [data-n="2"]) .r6-steps__ok,
.r6-demo[data-stage="4"] :is([data-n="1"], [data-n="2"], [data-n="3"]) .r6-steps__ok { display: grid; }
@keyframes r6-drop { from { opacity: 0; transform: translateY(-16px) scale(.97); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
.r6-a { grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 28px; }
.r6-a__side { text-align: center; display: grid; justify-items: center; }
/* phone order: words, the two choices, the window, then the steps and the recap */
.r6-a__side { display: contents; }
.r6-a__side > :is(.section-label, h2, .r6-sub) { order: 1; text-align: center; }
.r6-a .section-label { margin-bottom: -18px; }
.r6-a h2 { margin-bottom: -16px; }
.r6-pick { order: 2; margin: 0; }
.r6-a__win { grid-column: 1; grid-row: auto; order: 3; }
.r6-a__track { order: 4; }
.r6-a .r6-next { order: 5; }
.r6-pick,
.r6-a__track { width: 100%; text-align: left; }
.r6-next { justify-items: center; text-align: center; }
.r6-next__row { justify-content: center; }
.r6-next__row .r6-other { flex-basis: 100%; justify-content: center; }
}
@media (max-width: 480px) {
.r6-pick__card { grid-template-columns: 40px 1fr 40px; gap: 10px; padding: 12px; }
.r6-pick__icon,
.r6-pick__go { width: 40px; height: 40px; }
}
/* Reduced motion: the demo changes state without any easing or sliding. */
@media (prefers-reduced-motion: reduce) {
.r6-demo *,
.r6-demo { animation: none !important; transition: none !important; }
}
/* ==================================================================== from round layer r7.css */
/* Round 7: demo 1 (Pick a conversation) with the owner's email shown three ways, none of which moves anything else.
   Mario, round 6: "I don't like how the recap shows ups like that and pushes things down."
   The section is the same height before, during and after the conversation (checked by heightcheck.py).
   Tokens only (site.css :root). */
/* Shared: the steps stay, and step 4 ticks when the email is sent. */
.r7-a[data-stage="4"] .r6-steps,
.r7-a.is-done .r6-steps { opacity: 1; }
.r7-a.is-done .r6-steps__i[data-n="4"] { opacity: .9; }
.r7-a.is-done .r6-steps__i[data-n="4"] .r6-steps__dot { display: none; }
.r7-a.is-done .r6-steps__i[data-n="4"] .r6-steps__ok { display: grid; }
/* The "Now watch the text chat" button keeps its space while hidden, so its arrival moves nothing. */
.r7-a:not(.is-done) .r6-other { display: inline-flex; visibility: hidden; }
.r7-stage { position: relative; }
/* ------------------------------------------------------------------ 2. swap: the email takes the steps' place */
/* ------------------------------------------------------------------ 3. inbox: the window turns into the owner's inbox */
.r7-inbox { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; overflow: hidden;
  background: var(--warm-white, #fff); border-radius: 12px; box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.98);
  transition: opacity .45s ease, transform .5s cubic-bezier(.2, .7, .2, 1), visibility 0s .5s; }
.r7-inbox__bar { display: flex; align-items: center; gap: 8px; padding: 14px 16px; color: var(--text-primary); border-bottom: 1px solid var(--border-light); background: #fff; }
.r7-inbox__bar svg { color: var(--teal-text); }
.r7-inbox__new { font-size: .78rem; font-weight: 600; color: var(--teal-text); background: var(--teal-pale); padding: 2px 8px; border-radius: 99px; }
.r7-inbox__back { margin-left: auto; background: none; border: 0; padding: 4px 0; color: var(--teal-text); font: 600 .85rem var(--font-body); cursor: pointer; }
.r7-inbox__back:hover { text-decoration: underline; }
.r7-inbox__pill { position: absolute; z-index: 4; left: 50%; bottom: -20px; translate: -50% 0; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 99px; border: 0; background: var(--teal-light); color: var(--footer-dark); font: 600 .9rem var(--font-body);
  box-shadow: var(--shadow-md); cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; }
/* Card #256 (Mario, 2026-11-10): the inbox opens only when the visitor asks for it. When the conversation ends the
   notification drops in; it opens the inbox, "See the conversation" closes it, and after that the pill reopens it. */
.r7h-inbox.r7-show-mail .r7-inbox { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.r7h-inbox.is-done.r7-opened:not(.r7-show-mail) .r7-inbox__pill { opacity: 1; visibility: visible; transition-delay: 0s; }
/* The notification is an envelope (Mario, 2026-11-11: not a banner or a toast) that swoops in and lands in the free
   band between the last thing in the chat and the message field. home-demo.js sets its height and top from that band
   (about 189px in the voice chat, 60px in the text chat), so it is larger where there is room; the width follows the
   drawing. The bottom and height here are only where it sits if that never ran. */
.r7-note { position: absolute; z-index: 4; left: 0; right: 0; bottom: 84px; height: 48px; width: fit-content; margin: 0 auto; padding: 0; border: 0;
  border-radius: 12px; background: none; font-family: var(--font-body); cursor: pointer; opacity: 0; visibility: hidden; }
.r7-env { display: block; height: 100%; width: auto; aspect-ratio: 200 / 110; overflow: visible;
  filter: drop-shadow(0 8px 10px rgba(0, 35, 42, .22)); transition: filter .25s ease; }
.r7-note__art { position: relative; display: block; height: 100%; transition: transform .25s ease; }
.r7h-inbox.is-done:not(.r7-opened) .r7-note { opacity: 1; visibility: visible; animation: r7-swoop 1.1s cubic-bezier(.22, .7, .3, 1) both; }
/* In from above the window on the left, a wide arc with a turn, then it lands and settles. */
@keyframes r7-swoop {
  0% { opacity: 0; transform: translate(-170%, -150%) rotate(-28deg) scale(.55); }
  18% { opacity: 1; }
  52% { transform: translate(14%, 10%) rotate(9deg) scale(1.04); }
  70% { transform: translate(-5%, -6%) rotate(-4deg) scale(1); }
  86% { transform: translate(1%, 1%) rotate(1.2deg); }
  100% { opacity: 1; transform: none; }
}
.r7-note:hover .r7-note__art { transform: translateY(-3px) rotate(-1.5deg); }
.r7-note:hover .r7-env { filter: drop-shadow(0 12px 14px rgba(0, 35, 42, .26)); }
.r7-env__s1 { stop-color: var(--teal-mid); }
.r7-env__s2 { stop-color: var(--teal-deep); }
.r7-env__s3 { stop-color: var(--teal-light); }
.r7-env__back { fill: url(#r7-env-body); }
.r7-env__side { fill: var(--teal-deep); opacity: .55; }
.r7-env__fold { fill: url(#r7-env-body); }
.r7-env__flap { fill: url(#r7-env-flap); }
.r7-env__edge { fill: none; stroke: var(--cream); stroke-width: 1.6; stroke-linejoin: round; opacity: .45; }
.r7-env__crease { fill: none; stroke: var(--cream); stroke-width: 1.2; opacity: .18; }
.r7-env__seal { fill: var(--emerald); stroke: var(--cream); stroke-width: 2.5; }
.r7-env__mark { fill: none; stroke: var(--cream); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.r7-env__spark { fill: none; stroke: var(--teal-light); stroke-width: 3; stroke-linecap: round; }
/* The label is lettering on the envelope's front, a fixed size rather than scaled with the drawing (12px in the text
   chat's 48px envelope, 15px once there is room). Its box is the envelope body's: 4 to 172 of the drawing's 200. */
.r7-note__label { position: absolute; left: 2%; width: 84%; text-align: center; color: var(--cream); font-size: 12px; font-weight: 700;
  line-height: 1.2; letter-spacing: .02em; white-space: nowrap; pointer-events: none; bottom: 5%; }
.r7-note.is-roomy .r7-note__label { font-size: 15px; bottom: 11%; }
.r7-note:focus-visible,
.r7-inbox__pill:focus-visible,
.r7-inbox__back:focus-visible { outline: 3px solid var(--teal-light); outline-offset: 3px; }
.r7-inbox:focus { outline: none; }
.r7-inbox:focus-visible { outline: 3px solid var(--teal-light); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
.r7-a *,
.r7-a { transition: none !important; animation: none !important; }
}
/* ==================================================================== from round layer r7-motion.css */
/* Round 7 motion. Mario, round 6: "I just want more of like simple entry transitions like fade ins of cards and titles
   or things like that. I don't need some elaborate transitions. I just want it to look nice as the user scrolls down
   the page." He approved two pieces of round 6 motion, kept here as they were: 7 Busy Owners (the night scene drifts
   against the page, the four amounts count up as their cards arrive) and 11 Customer results (86% and 23 count up,
   the quote card rises in).

   So, everywhere else: titles and cards fade and rise a little as they scroll in, once, with a short stagger. Nothing
   floats, crossfades, sweeps or loops. The first screen does not move.

   The rules:
     - Content never depends on motion to be seen. js/r7-motion.js holds an element back (r7-hold) only when it starts
       below the first screen, and lets it in (r7-in) as it arrives. With no script, nothing is held.
     - Opacity and transform only.
     - All of it sits inside prefers-reduced-motion: no-preference, and the script does nothing under reduce. */
@media (prefers-reduced-motion: no-preference) {
.r7-hold { opacity: 0; transform: translateY(22px); }
.r7-hold.r7-in { opacity: 1; transform: none;
    transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
    transition-delay: var(--r7-d, 0ms); }
/* 7 and 11: the counted figures keep their width while they count */
.job-value__amount,
.proof-section__lead-number { font-variant-numeric: tabular-nums; }
}
/* 7 Busy Owners: the night scene drifts slowly against the page (approved in round 6, unchanged) */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
@keyframes r7m-par { from { translate: 0 -2.5%; } to { translate: 0 2.5%; } }
.d1-shift__art { scale: 1.06; animation: r7m-par linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
}
}

/* ==================================================================== built for the theme (round 7, mockup 3) */
/* Without the script the window spot holds the finished lead email (the conversation needs the script to play). */
.r7-stage { min-height: 580px; }
.r7h-inbox:not(.is-live) .r7-inbox { opacity: 1; visibility: visible; transform: none; }
.r7h-inbox:not(.is-live) :is(.r7-inbox__back, .r7-inbox__pill, .r7-note) { display: none; }
/* NOTHING INSIDE THE WINDOW SCROLLS (Mario, 2026-11-10, card #256: "can we make sure that no scroll occurs in the
   chat widget?"). The window keeps one fixed height at every width (round 6), now 580px on phones too: the 540px
   phone box was what pushed the last message out of view there. Each conversation is made to fit, never clipped:
   the text thread is five messages (demo-timings.js), and the demo window is drawn a little tighter than the live
   one (spacing, not type size). The call screen keeps its small orb once details are being taken, at every width;
   on a phone the plugin grows it to 168px for thumbs, which the demo has no use for. Checked by sweeping every
   quarter second of both conversations at 390, 768, 1024, 1440 and 1920 (the card's sweep script). */
.r7-stage .r6-window .sitestaffr-chat-panel.sitestaffr-demo-panel .sitestaffr-chat-messages { padding: 12px 14px; gap: 8px; }
.r7-stage .r6-window .sitestaffr-chat-panel.sitestaffr-demo-panel .sitestaffr-chat-message { padding: 8px 13px; line-height: 1.4; }
.r7-stage .r6-window .sitestaffr-chat-panel.sitestaffr-demo-panel .sitestaffr-panel-receipt b,
.r7-stage .r6-window .sitestaffr-chat-panel.sitestaffr-demo-panel .sitestaffr-panel-notepad dd { overflow-wrap: normal; }
.r7-stage .r6-window .sitestaffr-chat-panel.sitestaffr-demo-panel[data-ssp-screen="call"] .sitestaffr-panel-call { padding-top: 8px; }
.r7-stage .r6-window .sitestaffr-chat-panel.sitestaffr-demo-panel .sitestaffr-panel-call-status { margin-bottom: 6px; }
.r7-stage .r6-window .sitestaffr-chat-panel.sitestaffr-demo-panel .sitestaffr-panel-captions { padding: 8px 14px 1px; margin-bottom: 6px; line-height: 1.4; }
.r7-stage .r6-window .sitestaffr-chat-panel.sitestaffr-demo-panel .sitestaffr-panel-caption { margin-bottom: 6px; }
.r7-stage .r6-window .sitestaffr-chat-panel.sitestaffr-demo-panel .sitestaffr-panel-notepad { padding: 7px 14px 3px; }
.r7-stage .r6-window .sitestaffr-chat-panel.sitestaffr-demo-panel .sitestaffr-panel-notepad dl > div { padding: 4px 0; }
.r7-stage .r6-window .sitestaffr-chat-panel.sitestaffr-demo-panel .sitestaffr-panel-call-controls { padding-top: 8px; padding-bottom: 8px; }
/* The name label grows from 11px to 12px on a phone but keeps its line at 15px, so the window stays as tall as before and still never scrolls.
   Phones (card #275): the window is 280 to 392px wide here, so the spacing is drawn tighter still (type stays 14px and up, labels 12px) and the
   message field is allowed to grow to the typed message, which wraps to five lines at 320 where the panel's own cap made the field scroll. */
@media (max-width: 480px) {
.r7-stage .r6-window .sitestaffr-chat-panel.sitestaffr-demo-panel .sitestaffr-chat-textarea { font-size: 14.5px; padding-inline: 12px; max-height: none; }
.r7-stage .r6-window .sitestaffr-chat-panel.sitestaffr-demo-panel .sitestaffr-panel-header { padding-top: 14px; padding-bottom: 12px; }
.r7-stage .r6-window .sitestaffr-chat-panel.sitestaffr-demo-panel .sitestaffr-chat-input-area { padding-top: 10px; padding-bottom: 10px; }
.r7-stage .r6-window .sitestaffr-chat-panel.sitestaffr-demo-panel .sitestaffr-chat-messages { padding: 10px 12px; gap: 6px; }
.r7-stage .r6-window .sitestaffr-chat-panel.sitestaffr-demo-panel .sitestaffr-chat-message { max-width: 94%; padding: 7px 12px; line-height: 1.35; }
.r7-stage .r6-window .sitestaffr-chat-panel.sitestaffr-demo-panel[data-ssp-screen="call"] .sitestaffr-panel-call { padding-top: 6px; }
.r7-stage .r6-window .sitestaffr-chat-panel.sitestaffr-demo-panel .sitestaffr-panel-captions { padding-top: 6px; line-height: 1.35; margin-bottom: 4px; }
.r7-stage .r6-window .sitestaffr-chat-panel.sitestaffr-demo-panel .sitestaffr-panel-caption { margin-bottom: 4px; }
.r7-stage .r6-window .sitestaffr-chat-panel.sitestaffr-demo-panel .sitestaffr-panel-notepad { padding-top: 6px; padding-bottom: 2px; }
.r7-stage .r6-window .sitestaffr-chat-panel.sitestaffr-demo-panel .sitestaffr-panel-hint { margin: 4px 0; }
.r7-stage .r6-window .sitestaffr-chat-panel.sitestaffr-demo-panel .sitestaffr-panel-call-controls { padding-top: 6px; padding-bottom: 6px; }
.r7-stage .r6-window .sitestaffr-chat-panel.sitestaffr-demo-panel .sitestaffr-panel-orb { --ssp-orb: 96px; margin-top: 0; }
.r7-stage .r6-window .sitestaffr-chat-panel.sitestaffr-demo-panel[data-ssp-screen="call"] .sitestaffr-panel-call.has-details .sitestaffr-panel-orb { --ssp-orb: 68px; margin-bottom: 4px; }
.r7-stage .r6-window .sitestaffr-chat-panel.sitestaffr-demo-panel .sitestaffr-panel-caption b { font-size: 12px; line-height: 15px; }
}
@media (max-width: 340px) {
.r7-stage .r6-window .sitestaffr-chat-panel.sitestaffr-demo-panel .sitestaffr-chat-messages { padding: 8px 12px; gap: 5px; }
.r7-stage .r6-window .sitestaffr-chat-panel.sitestaffr-demo-panel .sitestaffr-chat-message { font-size: 14px; padding: 6px 12px; }
}

/* The lead email as the owner's inbox shows it (Mario, round 7: "make it look the way it really looks in the
   inbox"). A plain mail client's header (subject, sender, to me, time), then the real email: the middleware's
   renderCallNotification, brand header, at its phone width (under 600px the email stacks its buttons and narrows
   its label column). The palette is that email's own for the stock teal. The links are spans: this is a picture of
   the email, so nothing here pretends to dial or open anything. */
.r7-mail { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #fff; text-align: left; }
.r7-mail__top { padding: 14px 16px 12px; border-bottom: 1px solid var(--border-light); }
.r7-mail__subject { margin: 0 0 12px; font: 600 1.02rem/1.35 var(--font-body); color: var(--text-primary); }
.r7-mail__from { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: .82rem; line-height: 1.35; color: var(--text-muted); }
.r7-mail__avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--teal-deep); color: #fff; font: 700 .95rem var(--font-body); }
.r7-mail__who { min-width: 0; overflow-wrap: anywhere; }
.r7-mail__who b { color: var(--text-primary); font-weight: 600; }
.r7-mail__who small { display: block; font-size: .78rem; }
.r7-mail__when { align-self: start; white-space: nowrap; font-size: .78rem; }
.r7-mail__body { flex: 1; min-height: 0; overflow: auto; padding: 16px 8px 24px; background: #f2f9f9; }
.lm { max-width: 560px; margin: 0 auto; color: #1d1f22; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
.lm p { margin: 0; }
.lm__head { padding: 22px; border-radius: 12px 12px 0 0; background: #00808b; color: #fff; }
.lm__kicker { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.lm .lm__biz { margin-top: 4px; font-size: 15px; font-weight: 600; }
.lm__card { padding: 28px 22px 30px; border: 1px solid #c1d6d8; border-top: 0; border-radius: 0 0 12px 12px; background: #fff; }
.lm__name { font-size: 26px; font-weight: 700; line-height: 1.25; }
.lm .lm__time { margin-top: 6px; font-size: 13px; color: #6f7378; }
.lm__actions { display: grid; gap: 10px; margin-top: 20px; }
.lm__actions:empty { display: none; }
.lm__btn { display: block; padding: 11px 18px; border: 1px solid #006f7a; border-radius: 8px; text-align: center; font-size: 14px; font-weight: 600; line-height: 1.2; color: #006f7a; white-space: nowrap; }
.lm__btn--solid { padding: 12px 20px; border-color: #00808b; background: #00808b; color: #fff; }
.lm .lm__label { margin: 24px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6f7378; }
.lm__details { width: 100%; border-collapse: collapse; }
.lm__details td { padding: 10px 0; border-top: 1px solid #dbe5e6; font-size: 14px; font-weight: 600; vertical-align: top; overflow-wrap: anywhere; }
.lm__details td.lm__dl { width: 110px; padding-right: 12px; font-size: 13px; font-weight: 400; color: #6f7378; }
.lm__summary { font-size: 15px; line-height: 1.65; color: #34373b; }
.lm__follow { margin-top: 20px; padding: 14px 18px; border-radius: 10px; background: #e6f3f4; font-size: 15px; line-height: 1.6; }
.lm__follow-label { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #006f7a; }
.lm__open { display: block; margin-top: 18px; padding: 13px 18px; border: 1px solid #006f7a; border-radius: 8px; text-align: center; font-size: 15px; font-weight: 600; color: #006f7a; }
.lm .lm__foot { padding: 18px 12px 0; text-align: center; font-size: 12px; line-height: 1.7; color: #6f7378; }
.lm__foot u { text-decoration: underline; }
/* Card #256: the inbox never scrolls, no address breaks mid-word (Mario, 2026-11-10), and the email is drawn at a
   size you can read (2026-11-11): body text 15px, 14px on a phone, labels 13px and up. home-demo.js drops the least
   important parts until it fits (fitMail). Without the script the finished email keeps its scrollbar. To fit that
   size, the mail client's header is one tight block and the brand header is one line. */
.r7h-inbox.is-live .r7-mail__body { overflow: hidden; }
.lm [hidden] { display: none !important; }
.lm__nb,
.r7-mail__addr { white-space: nowrap; }
.lm__details td { overflow-wrap: break-word; }
.r7-inbox__bar { padding: 9px 14px; }
.r7-mail__top { padding: 10px 14px; }
.r7-mail__subject { margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r7-mail__from { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 9px; font-size: .875rem; }
.r7-mail__avatar { width: 28px; height: 28px; font-size: .9rem; }
.r7-mail__who { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; overflow-wrap: normal; }
.r7-mail__who small { display: none; }
.r7-mail__when { align-self: center; font-size: .875rem; }
.r7-mail__body { padding: 8px; }
.lm__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 9px 16px; }
.lm__kicker { font-size: 12.5px; }
.lm .lm__biz { margin-top: 0; }
.lm__card { padding: 12px 16px 14px; }
.lm__name { font-size: 24px; }
.lm .lm__time { margin-top: 2px; font-size: 14px; }
.lm__actions { margin-top: 10px; }
.lm__btn,
.lm__btn--solid { padding: 8px 16px; font-size: 15px; }
.lm .lm__label { margin: 12px 0 2px; font-size: 13px; letter-spacing: .08em; }
.lm__details td { padding: 6px 0; font-size: 15px; line-height: 1.4; }
.lm__details td.lm__dl { width: 96px; font-size: 14px; }
.lm__summary { line-height: 1.5; }
.lm__summary.is-cut { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.lm__follow { margin-top: 12px; padding: 10px 14px; line-height: 1.5; }
.lm__follow-label { font-size: 12.5px; }
.lm__open { margin-top: 12px; padding: 10px 18px; }
.lm .lm__foot { padding-top: 10px; font-size: 13px; line-height: 1.5; }
@media (max-width: 480px) {
.lm__details td,
.lm__summary,
.lm__follow,
.lm__btn,
.lm__open { font-size: 14px; }
}

/* The demo's control bar (Mario, 2026-11-11): back and forward one message, play, and the other conversation.
   It sits under the window, clear of the "See the email" pill that hangs 20px below it, and keeps its place
   in every state so nothing around it moves. */
.demo-bar { display: none; }
.r7h-inbox.is-live .demo-bar { display: grid; justify-items: center; gap: 8px; margin-top: 36px; }
.demo-bar__row { display: flex; align-items: center; gap: 8px; }
.demo-bar__btn { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  background: var(--block-dark-raised); border: 1.5px solid rgba(255, 255, 255, .12); color: var(--text-on-dark);
  transition: border-color .2s ease, opacity .2s ease; }
.demo-bar__btn:hover { border-color: var(--teal-light); }
.demo-bar__btn--play { width: 48px; height: 48px; background: var(--teal-light); border-color: var(--teal-light); color: var(--footer-dark); }
.demo-bar__btn[aria-disabled="true"] { opacity: .35; cursor: default; border-color: rgba(255, 255, 255, .12); }
.demo-bar__btn:focus-visible { outline: 3px solid var(--teal-light); outline-offset: 3px; }
.demo-bar__count { margin: 0; font-size: .85rem; color: var(--text-on-dark); opacity: .78; font-variant-numeric: tabular-nums; }

/* The closing "Request Assistance" is the real onboarding button (the shortcode is the working mechanism), drawn
   as the mockup's link. Scoped to this line, so no other instance of the button changes. Its custom properties
   need !important because the plugin sets them inline. The line is a div, not a p: the shortcode prints a div,
   which would close a p early and leave the button outside this selector. */
.d1-close__copy .x-cta__or .sitestaffr-button-container { display: inline !important; margin: 0 !important; }
.d1-close__copy .x-cta__or .sitestaffr-button-widget {
  display: inline; min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important; font: inherit; font-weight: 600; cursor: pointer;
  --btn-background: transparent !important; --btn-hover-background: transparent !important;
  --btn-text-color: var(--teal-light) !important; color: var(--teal-light) !important;
}
.d1-close__copy .x-cta__or .sitestaffr-button-icon { display: none !important; }
.d1-close__copy .x-cta__or .sitestaffr-button-widget:hover { text-decoration: underline; }
@media (max-width: 1024px), (pointer: coarse) {
  .d1-close__copy .x-cta__or .sitestaffr-button-widget { padding-block: 10px !important; margin-block: -10px !important; }
}
/* ================================================================ Phone: Industries and FAQ fold
   site.js turns each group heading into a button (.fold__head) at 900px and under; the card around
   it is the heading plus the list that follows it. */
@media (max-width: 900px) {
.fold__head { margin: 0; padding: 0; background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-md); }
.fold__btn {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px; border: 0; background: none; cursor: pointer; text-align: left;
  font: inherit; font-size: 1rem; font-weight: 600; letter-spacing: normal; text-transform: none; color: var(--text-primary);
}
.fold__n {
  margin-left: auto; flex: none; min-width: 28px; height: 28px; padding: 0 9px; border-radius: 999px; display: grid; place-items: center;
  background: var(--teal-pale); color: var(--teal-text); font-size: 0.85rem; font-weight: 700;
}
.fold__btn::after { content: "+"; flex: none; width: 14px; text-align: center; color: var(--text-muted); font-weight: 400; font-size: 1.15rem; }
.fold__head.is-open { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.fold__head.is-open .fold__btn::after { content: "\2212"; }
.fold__head:not(.is-open) + * { display: none; }
.fold__head.is-open + .industries__names,
.fold__head.is-open + .faq-list__set { border-top: 0; border-radius: 0 0 var(--radius-md) var(--radius-md); }
.industries__list:has(.fold__head) { gap: 10px; }
.faq-list:has(.fold__head) { gap: 0; width: 100%; }
.faq-list .fold__head { margin-bottom: 10px; }
.faq-section__columns .faq-list + .faq-list .fold__head:first-child { margin-top: 0; }
.faq-list .fold__head.is-open { margin-bottom: 0; }
.faq-list .fold__head.is-open + .faq-list__set { margin-bottom: 10px; }
}
.x-proof__faces { display: inline-flex; vertical-align: middle; margin-right: 8px; }
.x-proof__faces img {
  width: 24px; height: 24px; border-radius: 50%; object-fit: cover; object-position: 50% 18%;
  border: 2px solid #fff; box-sizing: content-box;
}
.x-proof__faces > * + * { margin-left: -8px; }