/* ==========================================================================
   AFTER HOURS: software.html (prefix sm-), the Shmello platform page.
   This page is its own shop and the text thread is its signature: Shmello in
   his lit case with the shop's phone beside him (tap him and the text goes
   out), the niche-list thread in the deals list, Shmello's booking calendar
   texted on a phone in the booking band, and a neon text bubble over the
   closing line. Shmello's ember is the page's second neon. Also here: the
   "becoming Shmello" strip, the client rail, the back-office monitor (the
   video), the leaky bucket, real posts on the seams and pinned beside their
   feature, the eight tabs, the balance and its two hang tags, the laptop and
   the lock screen, Ask AI, the review beats, the tape deck, the missed-call
   phone, the giveaway, the envelope, the site builder on its rack, the app
   menu, the receipt and the $197 tag, the s'more, the tickets and the FAQ.
   No lamp, no shop door, no OPEN sign: those belong to the homepage.
   Shared pieces come from theme.css; only this page's scenes live here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Page-wide: Shmello's ember (the page's second neon), icons, small bits
   -------------------------------------------------------------------------- */
#main, .sm-modal, .sm-guide {
  --sm-ember: #ff5b1f;        /* Shmello ember: fills and neon only; ink text on it (5.9:1) */
  --sm-ember-hi: #ff8a5c;     /* ember as text on night (7.5:1) */
  --sm-ember-core: #ffe6da;   /* the white-hot core of an ember tube */
  --sm-ember-ink: #b23508;    /* ember as text on cream (5.6:1) */
  --sm-ember-deep: #7a2205;   /* the ember accent's printed shadow */
  --seam-pad: 56px;           /* the extra room a section gives a post taped across its seam */
}
.sm-i { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.sm-neon__tube, .sm-neon__core { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sm-neon__tube { stroke: var(--sm-ember); stroke-width: 3; }
.sm-neon__core { stroke: var(--sm-ember-core); stroke-width: 1.1; }
/* the money pillar's label lights its LED ember (the time pillar uses the kit's sky LED) */
.ah-label.sm-label--ember::before { background: var(--sm-ember); box-shadow: 0 0 0 2px #11151d, 0 0 8px var(--sm-ember); }
/* keeping score: each feature's label carries a mini paper tag that matches the balance's two hang tags
   (sky "Win back time", ember "Make more money"); the tag's hole stands in for the label's LED */
.ah-label.sm-scored { gap: 9px; padding-left: 7px; }
.ah-label.sm-scored::before { display: none; }
.sm-mt { position: relative; flex: none; white-space: nowrap; padding: 3px 8px 2px 17px; border: 2px solid var(--ah-950); border-radius: 3px; background: var(--ah-cream); color: var(--ah-blue-ink); font-weight: 800; letter-spacing: 0.1em; box-shadow: 2px 2px 0 var(--ah-sky); rotate: 1.5deg; }
.sm-mt::before { content: ""; position: absolute; left: 5px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #11151d; box-shadow: 0 0 0 1.5px var(--ah-brass); }
.sm-mt--money { color: var(--sm-ember-ink); box-shadow: 2px 2px 0 var(--sm-ember); rotate: -1deg; }
@media (max-width: 359px) { .sm-mt { flex: 0 1 auto; white-space: normal; } }
/* when the label runs out of room, the words drop under the tag as one line (not a thin column beside it);
   below 1280px the dot goes, since the paper tag already separates the two */
.ah-label.sm-scored { flex-wrap: wrap; row-gap: 8px; }
.sm-scored__t { min-width: 0; }
@media (max-width: 1279px) { .sm-scored__sep { display: none; } }
.ah-copy .sm-big { max-width: 18em; margin: 0 0 14px; color: var(--ah-paper); font: 900 clamp(1.6rem, 1.15rem + 1.3vw, 2.2rem)/1.04 var(--ah-display); letter-spacing: 0.01em; text-wrap: balance; }
.sm-askai .ah-copy a, .sm-calls .ah-copy a, .sm-deals .ah-copy a, .sm-email .ah-copy a, .sm-note a {
  color: var(--ah-sky); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.sm-askai .ah-copy a:hover, .sm-calls .ah-copy a:hover, .sm-deals .ah-copy a:hover, .sm-email .ah-copy a:hover, .sm-note a:hover { color: var(--ah-paper); }
.sm-note { max-width: 44em; margin: 34px auto 0; text-align: center; color: var(--ah-fog); font-size: 1.05rem; line-height: 1.6; }
.sm-note b { color: var(--ah-paper); }

/* the "in the box" line: the other tool's price tag, struck through, and the ember sticker */
.sm-rep { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; margin: 40px auto 0; text-align: center; }
.sm-rep s {
  position: relative; display: inline-block; padding: 7px 14px 6px 28px;
  border: 2px solid var(--ah-950); border-radius: 4px 14px 14px 4px;
  background-color: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink-2);
  font: 700 0.95rem/1.3 var(--ah-body); text-decoration: line-through; text-decoration-color: var(--ah-red-ink); text-decoration-thickness: 2.5px;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55); rotate: -1.2deg;
}
.sm-rep s::before { content: ""; position: absolute; left: 9px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--band-bg, var(--ah-900)); box-shadow: 0 0 0 2px var(--ah-950); }
.sm-rep__dot { color: var(--ah-mute); font-weight: 800; }
/* stacked on phones: the tag and the sticker read as a pair without the dot (it would dangle at a line end) */
@media (max-width: 767px) { .sm-rep__dot { display: none; } }
@media (max-width: 1279px) { .sm-ev .sm-rep__dot { display: none; } }
.sm-rep b {
  display: inline-block; padding: 6px 12px 5px; border: 2px solid var(--ah-950); border-radius: 5px;
  background: var(--sm-ember); color: var(--ah-ink);
  font: 900 1.05rem/1 var(--ah-display); letter-spacing: 0.1em; text-transform: uppercase;
  box-shadow: 2px 2px 0 var(--ah-paper); rotate: 2.5deg;
}

/* hard-offset "sticker" outline for the mascot art (cream die-cut edge, ink shadow) */
.sm-case__mallow, .sm-guide__img, .sm-modal__mascot, .sm-pricing__price-note img, .sm-smore__layer--mallow img {
  filter: drop-shadow(2px 0 0 var(--ah-cream)) drop-shadow(-2px 0 0 var(--ah-cream)) drop-shadow(0 2px 0 var(--ah-cream)) drop-shadow(0 -2px 0 var(--ah-cream)) drop-shadow(3px 4px 0 rgba(3, 6, 13, 0.6));
}

/* sections that hand a post across their seam get the room for it */
main > section:has(+ .sm-seam) { padding-bottom: calc(var(--pad-y) + var(--seam-pad)); }
main > section:has(> .ah-rail, > .ah-curb, > .ah-counter, > .ah-gate):has(+ .sm-seam) { padding-bottom: calc(var(--pad-y) + 28px + var(--seam-pad)); }
main > .sm-seam + section { padding-top: calc(var(--pad-y) + var(--seam-pad)); }

/* JS-only controls rest out of sight without JS */
html:not(.js) .sm-tb__replay, html:not(.js) .sm-hs__replay, html:not(.js) .sm-gw__controls, html:not(.js) .sm-sb__send, html:not(.js) .sm-oi__hint, html:not(.js) .sm-dl__send { display: none !important; }

/* --------------------------------------------------------------------------
   1. The "becoming Shmello" ribbon: a lit sign strip bolted above the hero
   -------------------------------------------------------------------------- */
.sm-ribbon {
  position: relative; z-index: 4; border-bottom: 2px solid var(--ah-950);
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 4px), linear-gradient(180deg, #2d3647, #1a202c 55%, #141a25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 3px 0 rgba(0, 0, 0, 0.5);
}
.sm-ribbon::before, .sm-ribbon::after { content: ""; position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f2f5f9, #9aa7b8 60%, #5d6a7d); box-shadow: 0 0 0 1.5px var(--ah-950); }
.sm-ribbon::before { left: 12px; } .sm-ribbon::after { right: 12px; }
.sm-ribbon__in { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 9px 0 8px; }
.sm-ribbon__fire { width: 26px; height: 26px; flex: none; overflow: visible; filter: drop-shadow(0 0 4px rgba(255, 91, 31, 0.9)); }
.sm-ribbon__t { color: #e8edf3; font: 700 0.95rem/1.35 var(--ah-body); letter-spacing: 0.01em; text-align: center; text-wrap: balance; }
.sm-ribbon__t strong { color: var(--sm-ember-core); font-weight: 800; text-shadow: 0 0 6px rgba(255, 91, 31, 0.95), 0 0 2px #fff; }
@media (max-width: 520px) { .sm-ribbon__in { gap: 10px; padding: 8px 10px 7px; } .sm-ribbon__t { font-size: 0.86rem; text-align: left; } .sm-ribbon::before, .sm-ribbon::after { display: none; } }

/* --------------------------------------------------------------------------
   2. HERO: Shmello in the lit display case (Jeff KEEP) with the shop's phone
   propped beside him. One vignette: tap Shmello, he toasts and the text goes out.
   -------------------------------------------------------------------------- */
@media (min-width: 1000px) { .sm-hero .ah-phero__grid { grid-template-columns: minmax(0, 1.24fr) minmax(0, 0.76fr); } }
.sm-hero .ah-phero__copy { max-width: 760px; }
.sm-hero .ah-kicker__led { background: var(--sm-ember); box-shadow: 0 0 0 2px var(--ah-950), 0 0 10px 1px var(--sm-ember); }
.sm-was s { color: var(--ah-mute); text-decoration-color: var(--sm-ember); text-decoration-thickness: 2px; }
.sm-was__t { min-width: 0; }
.sm-was__arrow { color: var(--sm-ember-hi); }
.sm-name { color: var(--sm-ember-hi); text-shadow: 0.04em 0.04em 0 var(--sm-ember-deep), 0.075em 0.075em 0 var(--ah-950); }
.sm-hero .ah-mark__line path { stroke: var(--sm-ember); }

/* the vignette: the case on the left, the phone in front of it on the right */
.sm-hobj { position: relative; width: min(100%, 540px); margin: 0 auto; }
.sm-case { position: relative; width: 66%; margin: 0 0 46px; }
/* the case throws warm printed light on the bricks behind it */
.sm-case__spot {
  position: absolute; z-index: 0; left: -30%; right: -60%; top: 8%; bottom: -10%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 120, 70, 0.62) 1.3px, transparent 1.8px) 0 0 / 9px 9px;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, rgba(0, 0, 0, 0.45) 62%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 30%, rgba(0, 0, 0, 0.45) 62%, transparent 100%);
  opacity: 0.4; transition: opacity 0.5s ease;
}
.sm-case.is-lit .sm-case__spot { opacity: 0.75; }
.sm-case__sign { position: relative; z-index: 3; width: 80%; margin: 0 auto -4px; padding-top: 40px; }
.sm-case__chain { position: absolute; top: 0; width: 8px; height: 48px; background: radial-gradient(ellipse 45% 40% at 50% 50%, transparent 52%, #9aa7b8 58%, #5d6a7d 85%, transparent 90%) 0 0 / 100% 10px repeat-y; }
.sm-case__chain--l { left: 16%; } .sm-case__chain--r { right: 16%; }
.sm-case__box {
  position: relative; display: block; padding: 9px 10px 8px; text-align: center;
  border: 2px solid var(--ah-950); border-radius: 14px; background-color: #070b15;
  background-image: linear-gradient(rgba(30, 40, 60, 0.9) 2px, transparent 2px), linear-gradient(90deg, rgba(30, 40, 60, 0.9) 2px, transparent 2px);
  background-size: 100% 50%, 20% 100%; background-position: 0 10px, 12px 0;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.55), inset 0 0 0 2px rgba(255, 255, 255, 0.05);
}
/* the neon word: an ember tube (the sanctioned glow) */
.sm-case__tube {
  display: inline-block; color: var(--sm-ember-core);
  font: 900 clamp(1.7rem, 1.2rem + 1.7vw, 2.6rem)/1 var(--ah-display); letter-spacing: 0.1em; text-transform: uppercase;
  text-shadow: 0 0 2px #fff, 0 0 7px var(--sm-ember), 0 0 16px rgba(255, 91, 31, 0.75);
}
.sm-case__btn { position: relative; z-index: 2; display: block; width: 100%; padding: 0; border: 0; border-radius: 18px; background: none; cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.sm-case__btn:focus-visible { outline-offset: 6px; }
.sm-case__frame {
  display: block; padding: 11px 11px 9px; border: 3px solid var(--ah-950); border-radius: 16px 16px 6px 6px;
  background: repeating-linear-gradient(178deg, rgba(0, 0, 0, 0.1) 0 2px, transparent 2px 11px), linear-gradient(90deg, #4a2f1b, #7a5230 18%, #6a4428 50%, #7a5230 82%, #4a2f1b);
  box-shadow: 9px 9px 0 rgba(0, 0, 0, 0.6), inset 0 2px 0 rgba(255, 220, 170, 0.28);
}
.sm-case__glass {
  position: relative; display: block; aspect-ratio: 1 / 1.06; overflow: hidden;
  border: 2px solid var(--ah-950); border-radius: 8px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 16px, rgba(0, 0, 0, 0.2) 16px 34px), linear-gradient(180deg, #2a1c40, #1a1230 55%, #0e0b1c);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.1);
  transition: background-color 0.5s ease;
}
/* the strip light along the top of the case, and the printed light it pours down */
.sm-case__strip { position: absolute; z-index: 2; left: 9%; right: 9%; top: 9px; height: 7px; border-radius: 6px; background: #fff2e8; box-shadow: 0 0 0 1.5px rgba(3, 6, 13, 0.7), 0 0 9px 2px rgba(255, 130, 80, 0.75); }
.sm-case__dots {
  position: absolute; z-index: 1; inset: 0;
  background: radial-gradient(circle, rgba(255, 176, 128, 0.55) 1.3px, transparent 1.8px) 0 0 / 9px 9px;
  clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%);
  -webkit-mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.35) 70%, transparent);
  mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.35) 70%, transparent);
  opacity: 0.55; transition: opacity 0.5s ease;
}
.sm-case.is-lit .sm-case__dots { opacity: 1; }
/* Shmello sits a little left of center: the phone leans on the right edge of the case */
.sm-case__item { position: absolute; z-index: 3; left: 42%; bottom: 19%; width: 64%; translate: -50% 0; }
.sm-case__mallow { display: block; width: 100%; height: auto; }
.sm-case__mallow--flame { display: none; }
.sm-case.is-lit .sm-case__mallow--calm { display: none; }
.sm-case.is-lit .sm-case__mallow--flame { display: block; }
/* the blue velvet riser the prize sits on */
.sm-case__cushion {
  position: absolute; z-index: 2; left: 42%; bottom: 6%; width: 74%; height: 17%; translate: -50% 0;
  border: 2.5px solid var(--ah-950); border-radius: 50% 50% 10px 10px / 46% 46% 10px 10px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 3px, transparent 3px 9px), linear-gradient(180deg, #3366cc, #1d438f 55%, #132f69);
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.45);
}
.sm-case__glare { position: absolute; z-index: 4; inset: 0; pointer-events: none; background: linear-gradient(118deg, transparent 0 14%, rgba(200, 230, 255, 0.12) 14% 23%, transparent 23% 26%, rgba(200, 230, 255, 0.08) 26% 28%, transparent 28% 100%); }
.sm-case__embers { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.sm-case__embers i { position: absolute; bottom: 34%; width: 7px; height: 7px; border-radius: 50%; background: #ffd2bd; box-shadow: 0 0 0 1.5px rgba(3, 6, 13, 0.6), 0 0 8px 2px rgba(255, 91, 31, 0.9); opacity: 0; }
.sm-case__embers i:nth-child(1) { left: 24%; } .sm-case__embers i:nth-child(2) { left: 38%; width: 5px; height: 5px; } .sm-case__embers i:nth-child(3) { left: 52%; }
.sm-case__embers i:nth-child(4) { left: 62%; width: 5px; height: 5px; } .sm-case__embers i:nth-child(5) { left: 32%; width: 4px; height: 4px; }
.sm-case__base {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0 -8px; padding: 9px 12px; border: 3px solid var(--ah-950); border-radius: 4px 4px 12px 12px;
  background: repeating-linear-gradient(177deg, rgba(0, 0, 0, 0.14) 0 2px, transparent 2px 11px), linear-gradient(180deg, #6a4428, #3a2414);
  box-shadow: 9px 9px 0 rgba(0, 0, 0, 0.6), inset 0 2px 0 rgba(255, 220, 170, 0.22);
}
/* the brass plate names the jobs, small (gold only on small objects) */
.sm-case__plate {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 5px 9px 4px;
  border: 2px solid var(--ah-950); border-radius: 4px; background: linear-gradient(180deg, #fff1bf, #e2b44a 42%, #c9962e 70%, #e7bf52);
  color: #2b1f05; font: 900 clamp(0.6rem, 0.45rem + 0.35vw, 0.74rem)/1.1 var(--ah-display); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; text-shadow: 0 1px 0 rgba(255, 245, 210, 0.75);
}
.sm-case__plate::before, .sm-case__plate::after { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff4cf, #9c7420); box-shadow: 0 0 0 1px #5c420c; }
/* the little rocker switch on the case: it flips when Shmello toasts */
.sm-case__switch { position: relative; display: block; flex: none; width: 40px; height: 22px; border: 2px solid var(--ah-950); border-radius: 6px; background: #11151d; }
.sm-case__switch i { position: absolute; top: 2px; left: 2px; width: 16px; height: 14px; border: 2px solid var(--ah-950); border-radius: 4px; background: linear-gradient(180deg, #e3e9f0, #9aa7b8); transition: transform 0.3s var(--ease-back), background-color 0.3s; }
.sm-case.is-lit .sm-case__switch i { transform: translateX(16px); background: var(--sm-ember); }
.sm-case__btn:hover .sm-case__frame { box-shadow: 11px 11px 0 rgba(0, 0, 0, 0.6), inset 0 2px 0 rgba(255, 220, 170, 0.28); }
.sm-case.is-lit .sm-case__glass { background-color: #3a1d22; }
/* the hand note sits under the case on the left, pointing up at Shmello */
.sm-case__hand { position: absolute; left: 2px; bottom: -42px; z-index: 4; color: var(--sm-ember-hi); rotate: -4deg; }
.sm-case__hand .ah-hand__arrow { order: 2; transform: scaleY(-1); width: 40px; height: 30px; }
@media (prefers-reduced-motion: no-preference) {
  .sm-case.is-burst .sm-case__embers i { animation: sm-ember 1.5s var(--ease-out) 2 both; }
  .sm-case.is-burst .sm-case__embers i:nth-child(2) { animation-delay: 0.18s; } .sm-case.is-burst .sm-case__embers i:nth-child(3) { animation-delay: 0.4s; }
  .sm-case.is-burst .sm-case__embers i:nth-child(4) { animation-delay: 0.1s; } .sm-case.is-burst .sm-case__embers i:nth-child(5) { animation-delay: 0.55s; }
  .sm-case.is-burst .sm-case__item { animation: sm-bob 0.7s var(--ease-back); }
  .sm-case.is-burst .sm-case__tube { animation: ah-relight 0.8s both; }
  html.motion .sm-case .sm-case__tube { animation: ah-ignite 1.2s 0.4s both; }
}
@keyframes sm-ember { 0% { opacity: 0; transform: translate(0, 0) scale(0.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 6px), -150px) scale(1); } }
.sm-case__embers i:nth-child(2) { --dx: -10px; } .sm-case__embers i:nth-child(3) { --dx: 14px; } .sm-case__embers i:nth-child(4) { --dx: -6px; }
@keyframes sm-bob { 35% { transform: translateY(-14px) rotate(-3deg); } 70% { transform: translateY(2px) rotate(1deg); } }

/* the shop's phone, propped against the case */
.sm-hph { position: absolute; z-index: 5; right: 0; top: 62px; width: 44%; margin: 0; rotate: 3deg; }
.sm-hph > .ah-sample { top: -12px; right: 10px; }
.sm-hph__body { position: relative; padding: 7px; border: 3px solid var(--ah-950); border-radius: 30px; background: linear-gradient(160deg, #3a4456, #1a202c 40%, #11151d); box-shadow: 7px 7px 0 var(--sm-ember), inset 0 0 0 2px rgba(255, 255, 255, 0.12); }
.sm-hph__island { position: absolute; z-index: 3; left: 50%; top: 14px; width: 30%; height: 15px; margin-left: -15%; border-radius: 999px; background: #05070c; }
.sm-hph__screen { position: relative; display: flex; flex-direction: column; overflow: hidden; aspect-ratio: 9 / 17.5; border: 2px solid var(--ah-950); border-radius: 23px; background-color: #f8f2e2; background-image: var(--ah-fiber); color: var(--ah-ink); }
.sm-hph__top { display: flex; align-items: center; gap: 4px; padding: 30px 10px 8px; border-bottom: 1.5px solid rgba(11, 20, 36, 0.15); background: #fbf7ec; }
.sm-hph__back { color: var(--ah-blue-ink); font-size: 15px; stroke-width: 2.6; }
.sm-hph__to { display: grid; min-width: 0; }
.sm-hph__to b { overflow: hidden; font: 800 0.84rem/1.15 var(--ah-body); white-space: nowrap; text-overflow: ellipsis; }
.sm-hph__to span { color: var(--ah-ink-2); font-size: 0.68rem; font-weight: 700; line-height: 1.2; }

/* the thread inside a screen (hero phone and the deals list window share it) */
.sm-chat { gap: 7px; width: 100%; padding: 10px 9px 12px; }
.sm-chat .ah-chat__meta { margin: 0 0 2px; color: var(--ah-ink-2); font-size: 0.62rem; letter-spacing: 0.06em; }
.sm-chat .ah-chat__bubble { max-width: 90%; padding: 7px 10px 6px; border-radius: 16px; font-size: 0.8rem; line-height: 1.32; }
/* plain wrapping in the small mock bubbles: Safari's "pretty" wrapping (the kit sets it on every p) breaks a narrow
   bubble into five two-word lines and pushes the reply and the stamp off the phone screen */
.sm-chat .ah-chat__bubble, .sm-oi__tb, .sm-bk__bub > *, .sm-rv__smsmsg { text-wrap: wrap; }
.sm-chat .ah-chat__row--out .ah-chat__bubble { border-bottom-right-radius: 5px; box-shadow: 2px 2px 0 var(--ah-ink); }
.sm-chat .ah-chat__row--in .ah-chat__bubble { border-bottom-left-radius: 5px; background: #fff; box-shadow: 2px 2px 0 var(--ah-blue); }
.sm-chat .ah-chat__who { margin-bottom: 1px; font-size: 0.6rem; opacity: 0.85; }
.sm-chat__rcpt { margin-top: -3px; color: var(--ah-ink-2); font: 700 0.62rem/1 var(--ah-body); }
.sm-chat__came { justify-content: center; margin-top: 6px; }
.sm-chat__stamp {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px 4px;
  border: 3px solid currentColor; border-radius: 8px; color: var(--ah-blue-ink);
  font: 900 1rem/1 var(--ah-display); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
  box-shadow: inset 0 0 0 2px #f8f2e2, inset 0 0 0 3.5px currentColor; rotate: -6deg;
  -webkit-mask: var(--ah-speckle) 0 0 / 90px 90px; mask: var(--ah-speckle) 0 0 / 90px 90px;
}
.sm-chat__stamp .sm-i { stroke-width: 3.4; }
@media (prefers-reduced-motion: no-preference) {
  html.motion .sm-chat:not(.is-play) .sm-chat__rcpt > span { opacity: 0; }
  html.motion .sm-chat:not(.is-play) .sm-chat__stamp { opacity: 0; transform: scale(1.9); }
  .sm-chat__rcpt > span { transition: opacity 0.3s ease; }
  .sm-chat__stamp { transition: opacity 0.2s ease, transform 0.45s var(--ease-back); }
}
/* re-arming a thread to play it again (software.js): no transitions for one frame */
.sm-rearm, .sm-rearm * { transition: none !important; animation: none !important; }

/* phones and tablets: the first screen shows the headline, the button and the top of the vignette;
   the lead lines move under the vignette (a page-side stand-in for the planned kit change) */
@media (max-width: 999px) {
  .sm-hero .ah-phero__grid { gap: 0; }
  .sm-hero .ah-phero__copy { display: contents; }
  .sm-hero .ah-crumbs { order: 1; }
  .sm-hero .sm-was { order: 2; }
  .sm-hero .ah-phero__h { order: 3; }
  .sm-hero .ah-actions { order: 4; }
  .sm-hero .ah-phero__note { order: 5; margin-top: 12px; }
  .sm-hero .ah-phero__object { order: 6; margin-top: 22px; }
  .sm-hero .ah-phero__lead { order: 7; }
  .sm-hero .sm-lead1 { margin-top: 30px; }
}
@media (max-width: 600px) {
  .sm-hero .ah-phero__h { margin-bottom: 18px; }
  .sm-hero .sm-was { margin-bottom: 14px; font-size: 0.78rem; letter-spacing: 0.12em; }
  .sm-hobj { width: 100%; }
  .sm-case { width: 61%; margin-bottom: 44px; }
  .sm-case__sign { padding-top: 26px; }
  .sm-case__chain { height: 34px; }
  .sm-case__switch { display: none; }
  .sm-case__base { justify-content: center; padding: 7px 6px; }
  .sm-case__plate { padding: 4px 6px 3px; gap: 4px; font-size: 0.56rem; letter-spacing: 0.04em; }
  .sm-hph { top: 34px; width: 53%; rotate: 2.5deg; }
  .sm-hph__body { padding: 6px; border-radius: 26px; }
  .sm-hph__screen { border-radius: 20px; }
  .sm-hph__top { padding: 26px 8px 6px; }
  .sm-chat { gap: 6px; padding: 8px 7px 10px; }
  .sm-hph .sm-chat .ah-chat__bubble { max-width: 94%; padding: 6px 9px 5px; font-size: 0.76rem; }
  .sm-hph .sm-chat .ah-chat__meta { display: none; }
  .sm-case__hand { font-size: 0.95rem; }
}
/* the smallest phones and the narrow laptop column (1000-1279px): a compact thread, so the reply and
   the "Came in" stamp stay on the phone's screen instead of running off its bottom */
@media (max-width: 359px) {
  .sm-hph__top { padding-top: 24px; }
  .sm-hph .sm-chat { gap: 5px; padding: 7px 6px 9px; }
  .sm-hph .sm-chat .ah-chat__bubble { padding: 5px 8px 4px; font-size: 0.7rem; }
  .sm-hph .sm-chat__stamp { padding: 4px 8px 3px; font-size: 0.86rem; }
}
@media (min-width: 1000px) and (max-width: 1279px) {
  .sm-hph { top: 52px; width: 48%; }
  .sm-hph__top { padding: 27px 8px 6px; }
  .sm-hph .sm-chat { gap: 6px; padding: 8px 7px 10px; }
  .sm-hph .sm-chat .ah-chat__bubble { max-width: 96%; padding: 6px 8px 5px; font-size: 0.74rem; }
  .sm-hph .sm-chat .ah-chat__meta { display: none; }
  .sm-hph .sm-chat__stamp { font-size: 0.9rem; }
}

/* --------------------------------------------------------------------------
   3. The logo belt: client cards hanging from a steel rail
   -------------------------------------------------------------------------- */
.sm-trusted { padding: 54px 0 34px; }
.sm-trusted__head { text-align: center; }
.sm-trusted__label { margin-bottom: 16px; }
.sm-belt { position: relative; overflow: hidden; padding: 22px 0 20px; }
.sm-belt__rod { position: absolute; left: 0; right: 0; top: 14px; height: 14px; border-block: 2px solid var(--ah-950); background: linear-gradient(180deg, #e3e9f0, #9aa7b8 45%, #5d6a7d); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.5); }
.sm-belt__track { display: flex; width: max-content; }
.sm-belt__group { display: flex; gap: 22px; margin: 0; padding: 0 22px 0 0; list-style: none; }
.sm-belt__card {
  --r: -1.6deg; position: relative; display: grid; place-items: center; flex: none; width: 152px; height: 92px; margin-top: 20px; padding: 12px 14px 10px;
  border: 2px solid var(--ah-950); border-radius: 6px; background-color: var(--ah-cream); background-image: var(--ah-fiber);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.55); rotate: var(--r); transform-origin: 50% -20px;
}
.sm-belt__card::before { content: ""; position: absolute; left: 50%; top: -24px; width: 2px; height: 30px; margin-left: -1px; background: #e8dcc0; box-shadow: 0 0 0 1px var(--ah-950); }
.sm-belt__card::after { content: ""; position: absolute; left: 50%; top: 4px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--ah-850); box-shadow: 0 0 0 1.5px var(--ah-950), 0 0 0 3.5px var(--ah-steel-b), 0 0 0 5px var(--ah-950); }
.sm-belt__card:nth-child(3n+2) { --r: 1.4deg; } .sm-belt__card:nth-child(3n) { --r: -0.5deg; }
.sm-belt__card img { width: auto; height: auto; max-width: 118px; max-height: 58px; object-fit: contain; }
.sm-belt__foot { display: flex; justify-content: flex-end; margin-top: 8px; }
@media (prefers-reduced-motion: no-preference) {
  html.js .sm-belt__track { animation: sm-belt 64s linear infinite; }
  @media (hover: hover) { .sm-belt:hover .sm-belt__track { animation-play-state: paused; } }
}
@keyframes sm-belt { to { transform: translateX(-50%); } }
/* no JS or reduced motion: the rail stands still and scrolls sideways under a finger (nothing clipped, nothing moving) */
html:not(.js) .sm-belt__track { width: auto; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; padding: 0 var(--gut) 6px; }
html:not(.js) .sm-belt__dup { display: none; }
html:not(.js) .sm-belt__card { scroll-snap-align: start; }
@media (prefers-reduced-motion: reduce) {
  .sm-belt__track { width: auto; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; padding: 0 var(--gut) 6px; }
  .sm-belt__track::-webkit-scrollbar { display: none; }
  .sm-belt__dup { display: none; }
  .sm-belt__card { scroll-snap-align: start; }
}
.sm-belt__track:focus-visible { outline-offset: -3px; }
@media (max-width: 600px) { .sm-belt__card { width: 128px; height: 80px; } .sm-belt__card img { max-width: 100px; max-height: 50px; } .sm-belt__group { gap: 16px; padding-right: 16px; } }

/* --------------------------------------------------------------------------
   4. The video: the back-office monitor, its poster the real Conversation Hub
   -------------------------------------------------------------------------- */
.sm-video { --deco-at: 0 100%; --deco-size: 40% 55%; }
.sm-mon { position: relative; width: min(100%, 860px); margin: 0 auto; padding-bottom: 46px; }
.sm-mon__bezel { position: relative; padding: 16px 16px 30px; border: 3px solid var(--ah-950); border-radius: 18px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 4px), linear-gradient(180deg, #3a4456, #1a202c 60%, #151a24); box-shadow: 9px 9px 0 var(--ah-blue), inset 0 2px 0 rgba(255, 255, 255, 0.14); }
.sm-mon .sm-mon__screen { border: 2px solid var(--ah-950); border-radius: 8px; background: #eef1f6; box-shadow: none; }
.sm-mon .sm-mon__screen::after { display: none; }
.sm-mon .sm-mon__poster { object-fit: cover; object-position: 0 22%; }
/* a printed scrim over the real screen so the title card reads; the inbox still shows through */
.sm-mon .sm-mon__card { background: radial-gradient(circle, rgba(3, 6, 13, 0.55) 1.3px, transparent 1.7px) 0 0 / 7px 7px, linear-gradient(180deg, rgba(5, 10, 22, 0.15), rgba(5, 10, 22, 0.55) 46%, rgba(5, 10, 22, 0.92)); }
.sm-mon__logo { width: clamp(44px, 7vw, 70px); }
.sm-mon__led { position: absolute; left: 50%; bottom: 10px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: #5fe39b; box-shadow: 0 0 0 1.5px var(--ah-950), 0 0 6px rgba(95, 227, 155, 0.8); }
.sm-mon__neck { position: absolute; left: 50%; bottom: 14px; width: 100px; height: 34px; margin-left: -50px; border: 3px solid var(--ah-950); border-top: 0; background: linear-gradient(90deg, #5d6a7d, #cfd7e1 50%, #5d6a7d); }
.sm-mon__foot { position: absolute; left: 50%; bottom: 0; width: 280px; height: 17px; margin-left: -140px; border: 3px solid var(--ah-950); border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, #cfd7e1, #6f7c90); box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.5); }
.sm-mon .sm-mon__screen.is-live { background: #000; }
@media (max-width: 640px) {
  .sm-mon__bezel { padding: 9px 9px 22px; border-radius: 14px; }
  .sm-mon__led { bottom: 7px; }
  .sm-mon__neck { width: 70px; height: 28px; margin-left: -35px; }
  .sm-mon__foot { width: 190px; margin-left: -95px; }
}

/* --------------------------------------------------------------------------
   5. The problem: the leaky bucket
   -------------------------------------------------------------------------- */
.sm-bucket { position: relative; margin: 0; }
.sm-bucket__stage { position: relative; width: min(100%, 560px); margin: 0 auto; }
.sm-bucket__svg { display: block; width: min(100%, 330px); height: auto; margin: 0 auto; overflow: visible; }
.bk-puddle { fill: rgba(47, 155, 255, 0.34); stroke: var(--ah-950); stroke-width: 2.5; }
.bk-puddle-hi { fill: rgba(173, 229, 255, 0.6); }
.bk-handle { fill: none; stroke: var(--ah-950); stroke-width: 10; stroke-linecap: round; }
.bk-handle-hi { fill: none; stroke: var(--ah-steel-b); stroke-width: 4.5; stroke-linecap: round; }
.bk-body { fill: #aab5c4; stroke: var(--ah-950); stroke-width: 3; stroke-linejoin: round; }
.bk-shine { fill: none; stroke: rgba(255, 255, 255, 0.7); stroke-width: 8; stroke-linecap: round; }
.bk-rib { fill: none; stroke: #6f7c90; stroke-width: 3.2; }
.bk-rim { fill: var(--ah-steel-a); stroke: var(--ah-950); stroke-width: 3; }
.bk-in { fill: var(--ah-ink); stroke: var(--ah-950); stroke-width: 2; }
.bk-water { fill: var(--ah-blue); }
.bk-hole ellipse { fill: #03060d; stroke: var(--ah-steel-c); stroke-width: 2; }
.bk-drip { fill: var(--ah-sky); stroke: var(--ah-950); stroke-width: 1.5; transform-box: fill-box; transform-origin: 50% 0; }
.bk-num circle { fill: var(--ah-cream); stroke: var(--ah-950); stroke-width: 2.5; }
.bk-num text { fill: var(--ah-ink); font: 900 15px/1 var(--ah-display); text-anchor: middle; }
@media (prefers-reduced-motion: no-preference) {
  .sm-bucket.is-play .bk-drip { animation: sm-drip 2.2s ease-in 3 backwards; }
  .sm-bucket.is-play .bk-hole--2 .bk-drip { animation-delay: 0.7s; }
  .sm-bucket.is-play .bk-hole--3 .bk-drip { animation-delay: 1.4s; }
}
@keyframes sm-drip { 0% { opacity: 0; transform: translateY(0) scale(0.55); } 14% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; transform: translateY(78px) scale(1); } }
.sm-bucket__tags { display: grid; gap: 10px; margin: 18px auto 0; padding: 0; max-width: 360px; list-style: none; }
.sm-bucket__tag {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 12px 7px 8px;
  border: 2px solid var(--ah-950); border-radius: 5px; background-color: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink);
  font: 700 0.98rem/1.3 var(--ah-body); box-shadow: 3px 3px 0 var(--ah-blue);
}
.sm-bucket__tag:nth-child(2) { rotate: 0.8deg; box-shadow: 3px 3px 0 var(--ah-sky); } .sm-bucket__tag:nth-child(odd) { rotate: -0.7deg; }
.sm-bucket__n { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border: 2px solid var(--ah-950); border-radius: 50%; background: var(--ah-ink); color: var(--ah-sky); font: 900 0.95rem/1 var(--ah-display); }
@media (min-width: 640px) {
  .sm-bucket__tags { position: absolute; inset: 0; margin: 0; max-width: none; pointer-events: none; }
  .sm-bucket__tag { position: absolute; width: 150px; align-items: flex-start; padding: 7px 10px 6px; font-size: 0.9rem; pointer-events: auto; }
  .sm-bucket__n { width: 22px; height: 22px; font-size: 0.82rem; }
  .sm-bucket__tag::after { content: ""; position: absolute; top: 18px; width: 30px; height: 2px; background: rgba(173, 229, 255, 0.55); }
  .sm-bucket__tag--1 { left: 0; top: 30%; } .sm-bucket__tag--1::after { left: 100%; }
  .sm-bucket__tag--2 { right: 0; top: 40%; } .sm-bucket__tag--2::after { right: 100%; }
  .sm-bucket__tag--3 { right: 0; top: 70%; } .sm-bucket__tag--3::after { right: 100%; width: 48px; }
}
.sm-bucket__cap { margin-top: 18px; text-align: center; color: var(--ah-fog); font-size: 1rem; font-weight: 600; }
.sm-problem__punch { max-width: 26em; }

/* --------------------------------------------------------------------------
   6. The seams: a real post taped across the seam between two bands
   -------------------------------------------------------------------------- */
.sm-seam { position: relative; z-index: 8; height: 0; }
.sm-seam__fig { position: absolute; top: 0; display: flex; align-items: center; gap: 14px; width: max-content; max-width: calc(100% - 2 * var(--gut)); margin: 0; translate: 0 -50%; }
.sm-seam--r .sm-seam__fig { right: max(var(--gut), calc((100% - 1200px) / 2)); flex-direction: row-reverse; }
.sm-seam--l .sm-seam__fig { left: max(var(--gut), calc((100% - 1200px) / 2)); }
.sm-seam__post { flex: none; width: 200px; }
.sm-seam__post .ah-post__btn img { max-height: 200px; object-fit: cover; object-position: 50% 0; }
.sm-seam__cap {
  max-width: 220px; padding: 6px 11px 5px; border: 2px solid var(--ah-950); border-radius: 4px;
  background: #11151d; color: #e8edf3; font: 700 0.86rem/1.35 var(--ah-body); letter-spacing: 0.01em;
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.07), 3px 3px 0 var(--ah-blue); rotate: -1.2deg;
}
.sm-seam--r .sm-seam__cap { rotate: 1deg; box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.07), 3px 3px 0 var(--sm-ember); }
@media (max-width: 640px) {
  #main { --seam-pad: 50px; }
  .sm-seam__post { width: 140px; }
  .sm-seam__post .ah-post__btn img { max-height: 138px; }
  .sm-seam__cap { max-width: min(190px, calc(100vw - 2 * var(--gut) - 156px)); font-size: 0.8rem; }
}
/* posts pinned inside a section, beside the feature they prove (reviews, and the Shmo Card posts in the name story) */
.sm-pins { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 34px 44px; margin: clamp(52px, 6vw, 76px) auto 0; padding-top: 10px; }
.sm-pin { display: grid; justify-items: center; gap: 22px; width: min(100%, 290px); margin: 0; }
.sm-pin:nth-child(2) { margin-top: 34px; }
.sm-pin:nth-child(3) { margin-top: 10px; }
.sm-pin__post { width: 100%; }
.sm-pin__post .ah-post__btn img { max-height: 330px; object-fit: cover; object-position: 50% 0; }
.sm-pin__cap { max-width: 100%; text-align: center; }
.sm-pin:nth-child(2) .sm-pin__cap { rotate: 1deg; box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.07), 3px 3px 0 var(--sm-ember); }
/* the Shmo Card posts sit as a pile (overlapping), not a row, so the band before the pricing tickets keeps its own recipe */
@media (min-width: 761px) {
  .sm-pins--cards { gap: 0; }
  .sm-pins--cards .sm-pin { position: relative; width: 272px; }
  .sm-pins--cards .sm-pin + .sm-pin { margin-left: -58px; }
  .sm-pins--cards .sm-pin:nth-child(1) { z-index: 1; margin-top: 26px; }
  .sm-pins--cards .sm-pin:nth-child(2) { z-index: 2; margin-top: 0; }
  .sm-pins--cards .sm-pin:nth-child(3) { z-index: 1; margin-top: 40px; }
  .sm-pins--cards .sm-pin:hover, .sm-pins--cards .sm-pin:focus-within { z-index: 3; }
  .sm-pins--cards .sm-pin__cap { max-width: 200px; }
  .sm-pins--cards .sm-pin:nth-child(1) .sm-pin__cap { justify-self: start; margin-left: 6px; }
  .sm-pins--cards .sm-pin:nth-child(3) .sm-pin__cap { justify-self: end; margin-right: -6px; }
  .sm-pins--cards .sm-pin:nth-child(3) .ah-post__tag { left: auto; right: 14px; rotate: 2deg; }
}
@media (max-width: 760px) {
  .sm-pins { flex-wrap: nowrap; justify-content: flex-start; gap: 22px; margin-inline: calc(var(--gut) * -1); padding: 30px var(--gut) 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); scrollbar-width: none; }
  .sm-pins::-webkit-scrollbar { display: none; }
  .sm-pin { flex: 0 0 78%; scroll-snap-align: center; }
  .sm-pin:nth-child(n) { margin-top: 0; }
  .sm-pin__post .ah-post__btn img { max-height: 300px; }
}

/* --------------------------------------------------------------------------
   7. The toolbox: the back-office monitor with eight tabs
   -------------------------------------------------------------------------- */
.sm-tb { position: relative; display: flex; flex-direction: column; align-items: center; max-width: 980px; margin: 0 auto; }
.sm-tb__monitor { position: relative; width: 100%; padding: 14px; border: 3px solid var(--ah-950); border-radius: 18px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 4px), linear-gradient(180deg, #3a4456, #1a202c 60%, #151a24); box-shadow: 9px 9px 0 var(--ah-blue), inset 0 2px 0 rgba(255, 255, 255, 0.14); }
.sm-tb__monitor > .ah-sample { top: -14px; right: 24px; }
.sm-tb__neck { position: absolute; left: 50%; top: 100%; width: 90px; height: 32px; margin-left: -45px; border: 3px solid var(--ah-950); border-top: 0; background: linear-gradient(90deg, #5d6a7d, #cfd7e1 50%, #5d6a7d); }
.sm-tb__foot { position: absolute; left: 50%; top: calc(100% + 29px); width: 250px; height: 16px; margin-left: -125px; border: 3px solid var(--ah-950); border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, #cfd7e1, #6f7c90); box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.5); }
.sm-tb__win { position: relative; border: 2px solid var(--ah-950); border-radius: 8px; background: #0b1528; }
.sm-tb.is-done .sm-tb__win { cursor: pointer; }
.sm-tb__chrome { display: flex; align-items: flex-end; gap: 8px; padding: 9px 8px 0 12px; border-radius: 6px 6px 0 0; border-bottom: 2px solid var(--ah-950); background: linear-gradient(180deg, #e3e9f0, #b9c3d0); }
.sm-tb__dots { display: flex; gap: 6px; align-self: center; margin: 0 6px 8px 0; flex: none; }
.sm-tb__dots span { width: 11px; height: 11px; border: 1.5px solid var(--ah-950); border-radius: 50%; background: var(--ah-neon-pink); }
.sm-tb__dots span:nth-child(2) { background: var(--ah-gold); } .sm-tb__dots span:nth-child(3) { background: var(--ah-sky); }
.sm-tb__tabs { display: flex; flex: 1 1 auto; min-width: 0; gap: 3px; align-items: flex-end; }
.sm-tb__tab {
  display: flex; align-items: center; gap: 6px; flex: 1 1 0; min-width: 0; max-width: 132px; height: 34px; padding: 0 8px;
  border: 2px solid var(--ah-950); border-bottom: 0; border-radius: 8px 8px 0 0; background: #cfd7e1; color: var(--ah-ink-2);
  font: 700 0.76rem/1 var(--ah-body); white-space: nowrap; overflow: hidden;
  transition: background-color 0.25s, color 0.25s, max-width 0.4s cubic-bezier(0.6, -0.32, 0.55, 1), flex-grow 0.4s cubic-bezier(0.6, -0.32, 0.55, 1), padding 0.4s cubic-bezier(0.6, -0.32, 0.55, 1), opacity 0.32s ease, border-width 0.4s;
}
.sm-tb__tab.is-active { background: #fbfaf6; color: var(--ah-ink); }
.sm-tb__tab.is-closing { max-width: 0; flex-grow: 0.001; padding: 0; border-width: 0; opacity: 0; pointer-events: none; }
.sm-tb__fav { display: grid; place-items: center; flex: 0 0 18px; width: 18px; height: 18px; border: 1.5px solid var(--ah-950); border-radius: 4px; font: 900 0.7rem/1 var(--ah-body); }
.sm-tb__label { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.sm-tb__x { flex: none; color: #5a6a86; font-size: 0.8rem; line-height: 1; }
.sm-tb__tab--shm { background: #ffe1d2; color: #6e1f04; }
.sm-tb__shmfav { flex: 0 0 20px; width: 20px; height: 20px; object-fit: contain; }
.sm-tb.is-after .sm-tb__tab--shm { max-width: 220px; flex-grow: 2; background: #fff3ec; box-shadow: inset 0 -3px 0 var(--sm-ember); }
.sm-tb__more { position: relative; flex: none; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border: 2px solid var(--ah-950); border-bottom: 0; border-radius: 8px 8px 0 0; background: #b9c3d0; color: var(--ah-ink); font: 700 0.72rem/1 var(--ah-body); cursor: pointer; transition: opacity 0.4s; }
.sm-tb__more::after { content: ""; position: absolute; inset: -10px 0 0; }
.sm-tb__more:hover { background: #e3e9f0; }
.sm-tb__more:focus-visible { outline-color: var(--ah-ink); outline-offset: -4px; }
.sm-tb__more-cv { width: 11px; height: 8px; flex: none; }
.sm-tb__more-badge { padding: 3px 7px; border-radius: 999px; background: var(--ah-red-ink); color: #fff; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.02em; }
.sm-tb.is-after .sm-tb__more { background: #cfd7e1; }
.sm-tb__urlrow { padding: 7px 12px; border-bottom: 2px solid var(--ah-950); background: #fbfaf6; }
.sm-tb__url { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; overflow: hidden; border: 1.5px solid rgba(11, 20, 36, 0.35); border-radius: 999px; background: #eef1f6; color: var(--ah-ink-2); font: 700 0.8rem/1 var(--ah-mono); white-space: nowrap; transition: color 0.6s, background-color 0.6s; }
.sm-tb__lock { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; }
.sm-tb.is-after .sm-tb__url { background: #fff1ea; color: var(--sm-ember-ink); }
.sm-tb__view { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 290px; overflow: hidden; background: radial-gradient(circle, rgba(173, 229, 255, 0.07) 1px, transparent 1.4px) 0 0 / 14px 14px, #0d1a2e; }
.sm-tb__signin { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: opacity 0.7s ease; }
.sm-tb.is-after .sm-tb__signin { opacity: 0; pointer-events: none; }
.sm-tb__card { width: min(320px, calc(100% - 44px)); padding: 20px 22px 16px; border: 2px solid var(--ah-950); border-radius: 10px; background-color: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink); box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.55); rotate: -0.6deg; }
.sm-tb__card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sm-tb__card-fav { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 7px; font-size: 0.95rem; transition: background-color 0.18s; }
.sm-tb__card-title { min-width: 0; overflow: hidden; font: 800 0.98rem/1.2 var(--ah-body); white-space: nowrap; text-overflow: ellipsis; }
.sm-tb__field { display: flex; align-items: center; height: 38px; margin-top: 9px; padding: 0 12px; border: 1.5px solid rgba(11, 20, 36, 0.35); border-radius: 8px; background: #fffdf6; color: #5a6a86; font-size: 0.82rem; }
.sm-tb__field--pw { letter-spacing: 0.18em; font-size: 0.9rem; }
.sm-tb__btnfake { display: grid; place-items: center; height: 38px; margin-top: 12px; border: 2px solid var(--ah-950); border-radius: 8px; font: 800 0.86rem/1 var(--ah-body); transition: background-color 0.18s; }
.sm-tb__forgot { display: block; margin-top: 10px; text-align: center; color: var(--ah-blue-ink); font-size: 0.78rem; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.sm-tb__app { position: absolute; inset: 0; width: 100%; height: 100%; background: #fff; object-fit: cover; object-position: 50% 6%; opacity: 0; transition: opacity 0.9s ease 0.15s; }
.sm-tb.is-after .sm-tb__app { opacity: 1; }
/* the status bar: a black LED strip */
.sm-tb__status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 9px 14px; border-top: 2px solid var(--ah-950); border-radius: 0 0 6px 6px; background: #04060b; color: #c9ecff; font: 700 0.8rem/1.3 var(--ah-mono); font-variant-numeric: tabular-nums; }
.sm-tb__count { text-shadow: 0 0 5px rgba(47, 155, 255, 0.85); }
.sm-tb__tally { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 14px; min-width: 0; }
.sm-tb__old { color: #ffd6e5; white-space: nowrap; text-shadow: 0 0 5px rgba(255, 63, 134, 0.85); transition: opacity 0.5s; }
.sm-tb.is-after .sm-tb__old { opacity: 0.55; text-decoration: line-through; text-decoration-color: var(--ah-neon-pink); text-decoration-thickness: 2px; }
.sm-tb__new { display: none; color: var(--sm-ember-core); white-space: nowrap; text-shadow: 0 0 6px rgba(255, 91, 31, 0.95); }
.sm-tb.is-after .sm-tb__new, html:not(.js) .sm-tb__new { display: inline; }
/* the price chips that fly from each tab to the total */
.sm-tb__chip { position: absolute; z-index: 6; padding: 3px 8px; border: 1.5px solid var(--ah-950); border-radius: 999px; background: #ffd6e5; color: var(--ah-red-ink); font: 800 0.72rem/1.2 var(--ah-mono); white-space: nowrap; pointer-events: none; will-change: transform; transition: transform 0.55s cubic-bezier(0.35, 0.6, 0.4, 1), opacity 0.55s ease 0.18s; }
/* the right-click menu and the ledger dropdown: paper */
.sm-tb__ctx { position: absolute; z-index: 8; width: 192px; padding: 5px; border: 2px solid var(--ah-950); border-radius: 8px; background: var(--ah-cream); color: var(--ah-ink); font: 600 0.8rem/1.2 var(--ah-body); box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.6); opacity: 0; pointer-events: none; transform: translateY(-5px); transition: opacity 0.22s, transform 0.22s; }
.sm-tb__ctx.is-open { opacity: 1; transform: none; }
.sm-tb__ctx-item { padding: 6px 10px; border-radius: 5px; }
.sm-tb__ctx-sep { height: 1.5px; margin: 4px 6px; background: rgba(11, 20, 36, 0.2); }
.sm-tb__ctx-hot { background: #ffe1d2; font-weight: 800; transition: background-color 0.16s, color 0.16s; }
.sm-tb__ctx-hot.is-flash { background: var(--sm-ember); color: var(--ah-ink); }
.sm-tb__ledger {
  position: absolute; z-index: 7; top: 50px; right: 8px; width: min(360px, calc(100% - 16px)); padding: 10px 10px 8px;
  border: 2px solid var(--ah-950); border-radius: 6px; background-color: #fbf9f2; background-image: repeating-linear-gradient(180deg, transparent 0 23px, rgba(11, 20, 36, 0.035) 23px 24px);
  color: var(--ah-ink); box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.6); opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity 0.25s, transform 0.25s;
}
.sm-tb__ledger.is-open { opacity: 1; pointer-events: auto; transform: none; }
.sm-tb__led-row { display: flex; align-items: center; gap: 10px; padding: 6px 6px; border-bottom: 1.5px dotted rgba(11, 20, 36, 0.25); }
.sm-tb__led-fav { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 5px; font-size: 0.72rem; }
.sm-tb__led-mid { flex: 1 1 auto; min-width: 0; }
.sm-tb__led-name { display: block; font: 800 0.84rem/1.25 var(--ah-body); }
.sm-tb__led-term { display: block; color: var(--ah-ink-2); font-size: 0.76rem; line-height: 1.3; }
.sm-tb__led-price { flex: none; color: var(--ah-red-ink); font: 800 0.82rem/1 var(--ah-mono); font-variant-numeric: tabular-nums; }
.sm-tb__led-note { padding: 7px 6px 3px; color: var(--ah-ink-2); font-size: 0.76rem; font-weight: 600; }
.sm-tb__led-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px; padding: 9px 6px 3px; border-top: 4px double var(--ah-ink); font: 800 0.86rem/1 var(--ah-mono); font-variant-numeric: tabular-nums; }
.sm-tb__replay { margin-top: 66px; visibility: hidden; }
.sm-tb.is-done .sm-tb__replay { visibility: visible; }
@media (max-width: 600px) {
  .sm-tb__monitor { padding: 9px; border-radius: 14px; }
  .sm-tb__dots { display: none; }
  .sm-tb__chrome { padding-left: 8px; }
  .sm-tb__tab { justify-content: center; gap: 0; max-width: 40px; padding: 0 5px; }
  .sm-tb__tab .sm-tb__label, .sm-tb__tab .sm-tb__x { display: none; }
  .sm-tb.is-after .sm-tb__tab--shm { max-width: 170px; gap: 7px; padding: 0 10px; }
  .sm-tb.is-after .sm-tb__tab--shm .sm-tb__label { display: block; }
  .sm-tb__more { gap: 4px; padding: 0 7px; }
  .sm-tb__more-badge { padding: 2px 6px; font-size: 0.62rem; }
  .sm-tb__status { padding: 8px 10px; font-size: 0.72rem; }
  .sm-tb__view { min-height: 300px; }
  .sm-tb__led-row { gap: 8px; padding: 5px 4px; }
  .sm-tb__neck { width: 70px; margin-left: -35px; height: 26px; } .sm-tb__foot { top: calc(100% + 23px); width: 180px; margin-left: -90px; }
  .sm-tb__replay { margin-top: 56px; }
}

/* --------------------------------------------------------------------------
   8. The two ways: the jeweler's balance on the counter, a hang tag under each pan
   (no lamp: the lamp lives on the homepage only)
   -------------------------------------------------------------------------- */
.sm-twoways .ah-split { align-items: center; }
.sm-scl { position: relative; min-width: 0; width: min(100%, 560px); margin: 0 auto; container-type: inline-size; }
.sm-scl__svg { display: block; width: 100%; height: auto; overflow: visible; }
.sc-shadow { fill: rgba(0, 0, 0, 0.5); }
.sc-brass { fill: var(--ah-brass); stroke: var(--ah-950); stroke-width: 3; stroke-linejoin: round; }
.sc-hi { fill: none; stroke: var(--ah-brass-hi); stroke-width: 4; stroke-linecap: round; }
.sc-knob { fill: var(--ah-brass-hi); stroke: var(--ah-950); stroke-width: 3; }
.sc-beam { fill: var(--ah-brass); stroke: var(--ah-950); stroke-width: 3; }
.sc-string { fill: none; stroke: var(--ah-950); stroke-width: 3.2; stroke-linecap: round; }
.sc-hook { fill: var(--ah-steel-a); stroke: var(--ah-950); stroke-width: 2; }
.sc-pan { fill: var(--ah-brass); stroke: var(--ah-950); stroke-width: 3; stroke-linejoin: round; }
.sc-face { fill: #fffdf6; stroke: var(--ah-950); stroke-width: 3.5; }
.sc-crown { fill: var(--ah-sky); stroke: var(--ah-950); stroke-width: 2; }
.sc-tick { fill: none; stroke: var(--ah-ink); stroke-width: 2.6; stroke-linecap: round; }
.sc-hand { fill: none; stroke: var(--ah-ink); stroke-width: 4; stroke-linecap: round; }
.sc-hand--m { stroke: var(--sm-ember); stroke-width: 3; }
.sc-pin { fill: var(--ah-950); }
.sc-coin { fill: var(--ah-gold); stroke: var(--ah-950); stroke-width: 2.5; }
.sc-dollar { fill: var(--ah-brass-lo); font: 900 16px/1 var(--ah-display); text-anchor: middle; }
.sm-scl__swing { transform-box: view-box; transform-origin: 320px 104px; }
.sm-scl__hands { transform-box: view-box; transform-origin: 156px 176px; }
@media (prefers-reduced-motion: no-preference) {
  .sm-scl.is-play .sm-scl__swing { animation: sm-sway 2.6s ease-in-out 2; }
  .sm-scl.is-play .sm-scl__hands { animation: ah-spin 2.4s var(--ease-out) 1; }
}
@keyframes sm-sway { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-2.4deg); } 75% { transform: rotate(2.4deg); } }
/* the two big paper hang tags: each string runs up to its own pan (pans sit at 14.3% and 85.7% of the scale; the stand is in the middle) */
.sm-scl__labels { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 12px; margin-top: -24px; }
.sm-scl__lab {
  position: relative; display: grid; align-content: start; gap: 6px; width: 38%; padding: 34px 14px 18px;
  border: 2px solid var(--ah-950); border-radius: 6px; background-color: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink);
  box-shadow: 5px 5px 0 var(--ah-sky); rotate: -1.6deg; transform-origin: 37.6% 0;
}
.sm-scl__lab--money { box-shadow: 5px 5px 0 var(--sm-ember); rotate: 1.4deg; transform-origin: 62.4% 0; }
.sm-scl__hole { position: absolute; left: 37.6%; top: 9px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #241812; box-shadow: 0 0 0 2px var(--ah-950), 0 0 0 4.5px var(--ah-brass), 0 0 0 6px var(--ah-950); }
.sm-scl__lab--money .sm-scl__hole { left: 62.4%; }
.sm-scl__lab::before { content: ""; position: absolute; left: 37.6%; bottom: calc(100% - 15px); width: 2px; height: calc(22.2cqi - 9px); margin-left: -1px; background: #e8dcc0; box-shadow: 0 0 0 1px var(--ah-950); }
.sm-scl__lab--money::before { left: 62.4%; }
.sm-scl__lab b { font: 900 clamp(1.3rem, 1rem + 1vw, 1.75rem)/0.98 var(--ah-display); letter-spacing: 0.03em; text-transform: uppercase; text-wrap: balance; }
.sm-scl__lab--time b { color: var(--ah-blue-ink); } .sm-scl__lab--money b { color: var(--sm-ember-ink); }
.sm-scl__lab span:not(.sm-scl__hole) { color: var(--ah-ink-2); font-size: 0.95rem; font-weight: 600; line-height: 1.4; }
@media (max-width: 480px) { .sm-scl__lab { width: 42%; padding: 30px 10px 14px; } .sm-scl__lab, .sm-scl__lab--money { transform-origin: 50% 0; } .sm-scl__lab::before, .sm-scl__hole { left: 34% !important; } .sm-scl__lab--money::before, .sm-scl__lab--money .sm-scl__hole { left: 66% !important; } .sm-scl__lab span:not(.sm-scl__hole) { font-size: 0.88rem; } }

/* --------------------------------------------------------------------------
   9. The one inbox: the laptop on the counter; the shop phone's lock-screen note replays the morning
   -------------------------------------------------------------------------- */
.sm-oi { max-width: 1040px; margin: 0 auto; }
.sm-oi__panel {
  position: relative; overflow: hidden; border: 3px solid var(--ah-950); border-radius: 18px;
  background:
    radial-gradient(circle, rgba(255, 196, 150, 0.32) 1.3px, transparent 1.8px) 50% 0 / 10px 10px no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 130px),
    linear-gradient(180deg, #101a2e, #0b1424 70%);
  box-shadow: 9px 9px 0 rgba(0, 0, 0, 0.55);
}
.sm-oi__panel > .ah-sample { top: 16px; right: 18px; }
.sm-oi__laptop { position: relative; z-index: 5; width: min(680px, 90%); margin: 104px auto 0; }
.sm-oi__lid { padding: 14px 14px 16px; border: 3px solid var(--ah-950); border-radius: 18px 18px 6px 6px; background: linear-gradient(180deg, #3a4456, #1a202c 55%, #151a24); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.14); }
.sm-oi__screen { position: relative; overflow: hidden; aspect-ratio: 650 / 442; border: 2px solid var(--ah-950); border-radius: 8px; background: #0b1528; }
.sm-oi__deck { position: relative; width: 110%; height: 18px; margin-left: -5%; border: 3px solid var(--ah-950); border-radius: 3px 3px 16px 16px; background: linear-gradient(180deg, #e3e9f0, #9aa7b8 60%, #6f7c90); }
.sm-oi__deck::before { content: ""; position: absolute; left: 50%; top: -1px; width: 100px; height: 6px; margin-left: -50px; border-radius: 0 0 8px 8px; background: #5d6a7d; }
.sm-oi__browser { position: absolute; inset: 12px 3% 12px; display: flex; flex-direction: column; overflow: hidden; border: 2px solid var(--ah-950); border-radius: 8px; background: #dde3ec; }
.sm-oi__browser.is-pulse { animation: sm-pulse 0.75s ease-out; }
@keyframes sm-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 91, 31, 0.8); } 45% { box-shadow: 0 0 0 5px rgba(255, 91, 31, 0.7); } 100% { box-shadow: 0 0 0 0 rgba(255, 91, 31, 0); } }
.sm-oi__chrome { display: flex; flex: none; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-bottom: 1.5px solid rgba(11, 20, 36, 0.3); background: linear-gradient(180deg, #eef1f6, #d6dde7); }
.sm-oi__dots { display: flex; flex: none; gap: 5px; }
.sm-oi__dots i { width: 10px; height: 10px; border: 1.5px solid var(--ah-950); border-radius: 50%; background: var(--ah-neon-pink); }
.sm-oi__dots i:nth-child(2) { background: var(--ah-gold); } .sm-oi__dots i:nth-child(3) { background: var(--ah-sky); }
.sm-oi__tab { position: relative; display: flex; align-items: center; gap: 7px; min-width: 0; height: 26px; margin-top: 8px; padding: 0 28px 0 9px; border: 1.5px solid rgba(11, 20, 36, 0.4); border-bottom: 0; border-radius: 8px 8px 0 0; background: #fbfaf6; color: var(--ah-ink); font: 700 0.74rem/1 var(--ah-body); white-space: nowrap; }
.sm-oi__tab img { width: 15px; height: 15px; flex: none; }
.sm-oi__tabtext { overflow: hidden; text-overflow: ellipsis; }
.sm-oi__tabbadge { position: absolute; right: 5px; top: 50%; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; margin-top: -9px; border: 1.5px solid var(--ah-950); border-radius: 9px; background: var(--sm-ember); color: var(--ah-ink); font: 800 0.66rem/1 var(--ah-body); }
.sm-oi__tabbadge.is-zero { opacity: 0; }
.sm-oi__tabbadge.is-pop { animation: sm-badge 0.5s cubic-bezier(0.34, 1.56, 0.5, 1); }
@keyframes sm-badge { 40% { transform: scale(1.6); } }
.sm-oi__clock { flex: none; margin-left: auto; color: var(--ah-ink-2); font: 700 0.72rem/1 var(--ah-mono); transition: color 0.2s; }
.sm-oi__clock.is-tick { color: var(--sm-ember-ink); }
.sm-oi__urlbar { display: flex; flex: none; align-items: center; height: 28px; padding: 0 10px; border-bottom: 1.5px solid rgba(11, 20, 36, 0.25); background: #fbfaf6; }
.sm-oi__urlpill { display: flex; flex: 1; align-items: center; gap: 6px; height: 19px; padding: 0 10px; overflow: hidden; border-radius: 10px; background: #eef1f6; color: var(--ah-ink-2); font: 700 0.66rem/1 var(--ah-mono); white-space: nowrap; }
.sm-oi__urlpill .sm-i { color: #1b7a43; }
.sm-oi__shot { position: relative; display: block; flex: 1; min-height: 0; width: 100%; margin: 0; padding: 0; border: 0; background: #fff; cursor: zoom-in; }
.sm-oi__shot img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sm-oi__shot:focus-visible { outline: 3px solid var(--ah-ink); outline-offset: -4px; }
/* the counter front: the dock of everything that landed */
.sm-oi__dock {
  position: relative; z-index: 4; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; min-height: 120px; margin-top: -12px; padding: 34px 170px 34px;
  border-top: 3px solid var(--ah-950); background: linear-gradient(180deg, rgba(255, 220, 170, 0.2), transparent 4px), repeating-linear-gradient(177deg, rgba(0, 0, 0, 0.13) 0 2px, transparent 2px 12px), linear-gradient(180deg, #6a4428, #3a2414);
}
.sm-oi__chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 15px; border: 2px solid var(--ah-950); border-radius: 999px; background-color: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink); font: 700 0.86rem/1.2 var(--ah-body); box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6); cursor: pointer; transition: box-shadow 0.2s, translate 0.2s var(--ease-back); -webkit-tap-highlight-color: transparent; }
.sm-oi__chip:hover, .sm-oi__chip:focus-visible { translate: 0 -2px; box-shadow: 3px 3px 0 var(--sm-ember); }
.sm-oi__chip.is-in { animation: sm-chip-in 0.45s cubic-bezier(0.3, 1.3, 0.45, 1) both; }
@keyframes sm-chip-in { from { opacity: 0; transform: translateY(8px) scale(0.92); } }
.sm-oi__chipdot { flex: none; width: 10px; height: 10px; border: 1.5px solid var(--ah-950); border-radius: 50%; }
.sm-oi__chip--sms .sm-oi__chipdot { background: #3fd46a; } .sm-oi__chip--mail .sm-oi__chipdot { background: var(--ah-blue); }
.sm-oi__chip--call .sm-oi__chipdot { background: #ff6b5c; } .sm-oi__chip--msgr .sm-oi__chipdot { background: #8f7bff; } .sm-oi__chip--insta .sm-oi__chipdot { background: var(--ah-neon-pink); }
/* the notification slips in flight (built by software.js) */
.sm-oi__flights { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.sm-oi__banner { position: absolute; left: 0; top: 0; display: flex; align-items: flex-start; gap: 11px; width: 300px; padding: 12px 13px 13px; border: 2px solid var(--ah-950); border-radius: 12px; background-color: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink); box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.6); opacity: 0; will-change: transform; }
.sm-oi__bic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border: 2px solid var(--ah-950); border-radius: 9px; color: var(--ah-ink); font-size: 21px; }
.sm-oi__b--sms .sm-oi__bic { background: #67df7b; } .sm-oi__b--mail .sm-oi__bic { background: var(--ah-sky); } .sm-oi__b--call .sm-oi__bic { background: #ff8577; }
.sm-oi__b--msgr .sm-oi__bic { background: #b3a6ff; } .sm-oi__b--insta .sm-oi__bic { background: #ff8fbd; }
.sm-oi__btxt { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.sm-oi__brow { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sm-oi__bapp { color: var(--ah-ink-2); font: 800 0.64rem/1.2 var(--ah-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.sm-oi__bwhen { color: var(--ah-ink-2); font-size: 0.66rem; }
.sm-oi__btitle { overflow: hidden; font: 800 0.86rem/1.25 var(--ah-body); white-space: nowrap; text-overflow: ellipsis; }
.sm-oi__bmsg { color: var(--ah-ink-2); font-size: 0.8rem; line-height: 1.35; }
.sm-oi__bmsg.is-sent { display: flex; align-items: center; gap: 4px; color: #146b3a; font-weight: 800; }
.sm-oi__stamp { position: absolute; right: 10px; bottom: -14px; padding: 5px 9px 4px; border: 2.5px solid var(--ah-blue-ink); border-radius: 6px; background: var(--ah-cream); color: var(--ah-blue-ink); font: 900 0.8rem/1 var(--ah-display); letter-spacing: 0.08em; text-transform: uppercase; box-shadow: inset 0 0 0 2px var(--ah-cream), inset 0 0 0 3.5px var(--ah-blue-ink); opacity: 0; transform: rotate(-14deg) scale(2.4); }
.sm-oi__stamp.is-on { animation: sm-stamp 0.55s cubic-bezier(0.34, 1.5, 0.5, 1) forwards; }
@keyframes sm-stamp { 0% { opacity: 0; transform: rotate(-14deg) scale(2.4); } 55% { opacity: 1; transform: rotate(-4.5deg) scale(0.9); } 100% { opacity: 1; transform: rotate(-7deg) scale(1); } }
/* where a chip came from: a printed target ring, not a glow */
.sm-oi__spawn { position: absolute; z-index: 7; left: -999px; top: -999px; width: 130px; height: 130px; margin: -65px 0 0 -65px; border: 3px dashed var(--sm-ember-hi); border-radius: 50%; background: radial-gradient(circle, rgba(255, 150, 100, 0.6) 1.4px, transparent 1.9px) 0 0 / 9px 9px; opacity: 0; transition: opacity 0.35s; pointer-events: none; }
.sm-oi__spawn.is-vis { opacity: 1; }
.sm-oi__caption { margin: 16px 6px 0; text-align: center; color: var(--ah-fog); font-size: 0.98rem; font-weight: 600; }
.sm-oi.is-rm .sm-oi__chip { animation: none; }

@media (max-width: 640px) {
  .sm-oi__panel { border-radius: 14px; }
  .sm-oi__panel > .ah-sample { top: 14px; right: 12px; }
  .sm-oi__laptop { width: calc(100% - 20px); margin-top: 16px; }
  .sm-oi__lid { padding: 7px; border-radius: 12px 12px 5px 5px; }
  .sm-oi__screen { aspect-ratio: auto; }
  .sm-oi__browser { position: static; }
  .sm-oi__shot { flex: none; }
  .sm-oi__shot img { height: auto; object-fit: fill; }
  .sm-oi__chrome { gap: 8px; height: 32px; padding: 0 8px; }
  .sm-oi__tab { max-width: 64%; }
  .sm-oi__deck { height: 12px; }
  .sm-oi__dock { gap: 8px; min-height: 0; padding: 28px 12px 22px; }
  .sm-oi__chip { padding: 0 12px; font-size: 0.82rem; }
  .sm-oi__banner { left: 10px; width: calc(100% - 20px); }
}

/* the shop phone's lock screen: the morning's notification, and the replay button */
.sm-oi__lock {
  position: absolute; z-index: 6; right: 26px; bottom: 26px; display: grid; justify-items: center; gap: 0; width: 138px; padding: 30px 8px 12px;
  border: 3px solid var(--ah-950); border-radius: 26px; color: var(--ah-paper); text-align: center; cursor: pointer;
  background: radial-gradient(circle, rgba(173, 229, 255, 0.08) 1px, transparent 1.4px) 0 0 / 10px 10px, linear-gradient(180deg, #17284a, #0b1528);
  box-shadow: 6px 6px 0 var(--sm-ember), inset 0 0 0 2px rgba(255, 255, 255, 0.08); rotate: 4deg;
  -webkit-tap-highlight-color: transparent; transition: box-shadow 0.2s, translate 0.2s var(--ease-back);
}
.sm-oi__lock::before { content: ""; position: absolute; left: 50%; top: 9px; width: 34%; height: 12px; margin-left: -17%; border-radius: 999px; background: #05070c; }
.sm-oi__lock:hover { translate: -2px -2px; box-shadow: 8px 8px 0 var(--sm-ember), inset 0 0 0 2px rgba(255, 255, 255, 0.08); }
.sm-oi__lock:focus-visible { outline: 3px solid var(--ah-sky); outline-offset: 4px; }
.sm-oi__lockclock { display: block; margin-bottom: 10px; color: var(--ah-paper); font: 900 2.2rem/1 var(--ah-display); letter-spacing: 0.02em; text-shadow: 0.04em 0.04em 0 var(--ah-950); }
.sm-oi__note { display: flex; align-items: center; gap: 6px; width: 100%; padding: 7px 6px; border: 2px solid var(--ah-950); border-radius: 10px; background-color: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink); text-align: left; transition: opacity 0.3s, transform 0.3s var(--ease-back); }
.sm-oi__note img { flex: none; width: 22px; height: 22px; }
.sm-oi__notetxt { display: grid; min-width: 0; gap: 1px; font-size: 0.64rem; font-weight: 700; line-height: 1.2; }
.sm-oi__notetxt b { font-size: 0.7rem; font-weight: 800; }
.sm-oi__notewhen { display: none; flex: none; margin-left: auto; color: var(--ah-ink-2); font-size: 0.7rem; }
.sm-oi__note.is-zero { opacity: 0; transform: translateY(-6px); }
.sm-oi__note.is-pop { animation: sm-badge 0.5s cubic-bezier(0.34, 1.56, 0.5, 1); }
.sm-oi__hint { display: block; margin-top: 10px; color: var(--ah-sky); font: 700 0.62rem/1.3 var(--ah-mono); letter-spacing: 0.1em; text-transform: uppercase; }

/* tap a chip: its message opens as a short thread on the counter */
.sm-oi__threadwrap { position: relative; z-index: 4; padding: 0 186px 30px; background: repeating-linear-gradient(177deg, rgba(0, 0, 0, 0.13) 0 2px, transparent 2px 12px), linear-gradient(180deg, #4a2f1b, #3a2414); }
.sm-oi__thread { display: grid; justify-items: start; gap: 8px; max-width: 420px; margin: 0 auto; padding: 12px 14px 14px; border: 2px solid var(--ah-950); border-radius: 12px; background-color: #fbf7ec; background-image: var(--ah-fiber); color: var(--ah-ink); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.55); transition: opacity 0.3s ease; }
.sm-oi__thread.is-empty { opacity: 0; }
.sm-oi__threadhead { display: flex; align-items: center; gap: 8px; color: var(--ah-ink); font: 800 0.82rem/1.25 var(--ah-body); }
.sm-oi__tb { max-width: 92%; padding: 8px 12px 7px; border: 2px solid var(--ah-950); border-radius: 16px 16px 16px 5px; background: #fff; color: var(--ah-ink); font: 700 0.95rem/1.35 var(--ah-body); box-shadow: 2px 2px 0 var(--ah-blue); }
.sm-oi__tb--note { justify-self: center; max-width: none; padding: 4px 10px 3px; border: 1.5px dashed rgba(11, 20, 36, 0.5); border-radius: 6px; background: transparent; box-shadow: none; color: var(--ah-ink-2); font: 800 0.7rem/1.35 var(--ah-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.sm-oi__chipdot--sms { background: #3fd46a; } .sm-oi__chipdot--mail { background: var(--ah-blue); } .sm-oi__chipdot--call { background: #ff6b5c; }
.sm-oi__chipdot--msgr { background: #8f7bff; } .sm-oi__chipdot--insta { background: var(--ah-neon-pink); }
.sm-oi__dock { padding-inline: 186px; }
@media (max-width: 899px) {
  .sm-oi__panel { display: flex; flex-direction: column; }
  .sm-oi__lock { position: relative; right: auto; bottom: auto; order: -1; z-index: 9; display: grid; gap: 4px; width: auto; margin: 12px 12px 0; padding: 10px 10px 8px; border-radius: 14px; rotate: none; box-shadow: 4px 4px 0 var(--sm-ember); }
  .sm-oi__lock::before, .sm-oi__lockclock { display: none; }
  .sm-oi__note { padding: 9px 10px; }
  .sm-oi__note img { width: 30px; height: 30px; }
  .sm-oi__notetxt { font-size: 0.82rem; } .sm-oi__notetxt b { font-size: 0.84rem; }
  .sm-oi__notewhen { display: block; }
  .sm-oi__hint { margin-top: 4px; }
  .sm-oi__laptop { margin-top: 20px; }
  .sm-oi__dock, .sm-oi__threadwrap { padding-inline: 18px; }
}
@media (max-width: 640px) { .sm-oi__dock, .sm-oi__threadwrap { padding-inline: 12px; } .sm-oi__threadwrap { padding-bottom: 22px; } }

/* --------------------------------------------------------------------------
   10. Ask AI: the Ask AI box on the back-office screen, four source chips, and the corkboard
   -------------------------------------------------------------------------- */
.sm-fc__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 56px; margin-bottom: clamp(36px, 4vw, 54px); }
@media (min-width: 980px) { .sm-fc__head { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: end; } }
.sm-fc__title .ah-h2 { margin-bottom: 0; }
@media (max-width: 979px) { .sm-fc__title .ah-h2 { margin-bottom: 20px; } }
.sm-fc { position: relative; max-width: 1040px; margin: 0 auto; }
.sm-fc__tabs { position: relative; z-index: 3; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin: 0 0 -2px; padding: 0 6px; }
.sm-fc__tab {
  position: relative; min-height: 48px; padding: 11px 32px 11px 15px; text-align: left;
  border: 2px solid var(--ah-950); border-bottom: 0; border-radius: 12px 12px 0 0; background: #d6c08a; color: #3f3110;
  font: 700 0.94rem/1.3 var(--ah-body); cursor: pointer; translate: 0 6px;
  transition: translate 0.25s var(--ease-back), background-color 0.2s, box-shadow 0.2s; -webkit-tap-highlight-color: transparent;
}
.sm-fc__tab::after { content: ""; position: absolute; right: 13px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; rotate: 45deg; opacity: 0.6; }
.sm-fc__tab:hover { background: #e4cf98; translate: 0 3px; }
.sm-fc__tab[aria-pressed="true"] { z-index: 2; background: #ffe9b3; translate: 0 0; box-shadow: inset 0 -4px 0 var(--sm-ember); }
.sm-fc__scene > .ah-sample { top: -14px; right: 18px; }
.sm-fc__scene { position: relative; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 26px; align-items: start; padding: 30px 20px 22px; border: 3px solid var(--ah-950); border-radius: 4px 12px 12px 12px; background: radial-gradient(circle, rgba(173, 229, 255, 0.05) 1px, transparent 1.4px) 0 0 / 14px 14px, #0a1220; box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.5); }
/* the back-office screen: the Ask AI box, where it looks, and what it found */
.sm-fc__screen { position: relative; overflow: hidden; padding-bottom: 12px; border: 3px solid var(--ah-950); border-radius: 12px; background: #0e1a2f; box-shadow: 7px 7px 0 var(--ah-blue), inset 0 2px 0 rgba(255, 255, 255, 0.06); }
.sm-fc__bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-bottom: 2px solid var(--ah-950); background: linear-gradient(180deg, #e3e9f0, #b9c3d0); color: var(--ah-ink-2); font: 700 0.68rem/1 var(--ah-mono); }
.sm-fc__bar i { flex: none; width: 9px; height: 9px; border: 1.5px solid var(--ah-950); border-radius: 50%; background: var(--ah-neon-pink); }
.sm-fc__bar i:nth-child(2) { background: var(--ah-gold); } .sm-fc__bar i:nth-child(3) { background: var(--ah-sky); }
.sm-fc__bar img { flex: none; width: 16px; height: 16px; margin-left: 6px; }
.sm-fc__slip { position: relative; margin: 12px 12px 14px; padding: 10px 12px 9px; border: 2px solid var(--ah-950); border-radius: 10px; background: #fbfaf6; color: var(--ah-ink); box-shadow: 3px 3px 0 var(--sm-ember); }
.sm-fc__sliplabel { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; color: var(--sm-ember-ink); font: 800 0.7rem/1 var(--ah-mono); letter-spacing: 0.18em; text-transform: uppercase; }
.sm-fc__sliplabel .sm-i { font-size: 0.95rem; stroke-width: 2.6; }
.sm-fc__cab { position: relative; margin: 0 12px; }
.sm-fc__cab.is-rattle .sm-fc__src { animation: sm-scan 0.32s linear; }
@keyframes sm-scan { 50% { transform: translateX(2px); } }
.sm-fc__etch { margin: 0 0 8px; color: var(--ah-mute); font: 800 0.62rem/1.25 var(--ah-mono); letter-spacing: 0.16em; text-transform: uppercase; }
.sm-fc__src { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sm-fc__drawer { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 7px 10px; border: 2px solid #2a3a58; border-radius: 9px; background: #101d33; color: var(--ah-mute); font: 800 0.86rem/1.1 var(--ah-body); transition: background-color 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s, translate 0.25s var(--ease-back); }
.sm-fc__drawer .sm-i { font-size: 1.05rem; }
.sm-fc__drawer.is-open { border-color: var(--ah-950); background: var(--ah-sky); color: var(--ah-ink); box-shadow: 2px 2px 0 var(--sm-ember); translate: 0 -2px; }
.sm-fc__brass { margin: 12px 12px 0; padding: 7px 10px; border: 2px solid var(--ah-950); border-radius: 6px; background: #04060b; color: #c9ecff; text-align: center; font: 700 0.76rem/1.4 var(--ah-mono); font-variant-numeric: tabular-nums; text-shadow: 0 0 5px rgba(47, 155, 255, 0.6); }
.sm-fc__card {
  position: absolute; left: var(--fcx, 0); top: var(--fcy, 0); width: min(52%, 270px); padding: 13px 14px 12px;
  border: 2px solid var(--ah-950); border-radius: 3px; background-color: #fbf7ec; background-image: linear-gradient(transparent 36px, rgba(180, 35, 24, 0.45) 36px 38px, transparent 38px);
  color: var(--ah-ink); box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.5);
  opacity: 0; transform: translateX(-46px) rotate(0deg) scale(0.94); transition: transform 0.42s var(--ease-back), opacity 0.3s ease;
}
.sm-fc__cabcol { position: relative; z-index: 2; }
.sm-fc__query { min-height: 42px; color: var(--ah-ink); font: 700 0.86rem/1.45 var(--ah-mono); word-break: break-word; }
.sm-fc__caret { display: inline-block; width: 2px; height: 14px; margin-left: 2px; vertical-align: -2px; background: var(--ah-ink); }
@media (prefers-reduced-motion: no-preference) { html.js .sm-fc__caret { animation: ah-blink 1.05s steps(1) 4; } }
.sm-fc__dot { padding: 0 5px; }
.sm-fc__wall {
  position: relative; z-index: 1; min-height: 548px; border: 3px solid var(--ah-950); border-radius: 6px;
  background:
    radial-gradient(circle at 20% 30%, rgba(60, 35, 10, 0.35) 0 1.2px, transparent 1.6px) 0 0 / 13px 11px,
    radial-gradient(circle at 70% 60%, rgba(255, 230, 190, 0.25) 0 1px, transparent 1.4px) 0 0 / 9px 13px,
    #b98a55;
  box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.6), inset 0 0 0 10px #6a4428, inset 0 0 0 12px var(--ah-950), inset 0 0 0 14px rgba(0, 0, 0, 0.25);
}
.sm-fc__wallhint { position: absolute; left: 20px; right: 20px; top: 24px; margin: 0; text-align: center; color: var(--ah-ink); font: 800 0.74rem/1.5 var(--ah-mono); letter-spacing: 0.16em; text-transform: uppercase; transition: opacity 0.4s ease; }
.sm-fc__wall.is-pinned .sm-fc__wallhint { opacity: 0; }
.sm-fc__card.is-pinned { opacity: 1; transform: translateY(0) rotate(var(--fcr, 0deg)) scale(1); }
.sm-fc__pin { position: absolute; top: -8px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border: 2px solid var(--ah-950); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffb59a, var(--sm-ember) 55%, #8a2a07); }
.sm-fc__cardhead { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.sm-fc__cardhead .sm-i { color: var(--ah-blue-ink); font-size: 16px; }
.sm-fc__name { flex: 1; min-width: 0; font: 800 0.92rem/1.2 var(--ah-body); }
.sm-fc__date { flex: none; color: var(--ah-ink-2); font: 700 0.72rem/1 var(--ah-mono); font-variant-numeric: tabular-nums; }
.sm-fc__bubble { position: relative; padding: 9px 12px; border: 1.5px solid rgba(11, 20, 36, 0.35); border-radius: 13px 13px 13px 4px; background: #fffdf6; color: var(--ah-ink); font: 600 0.84rem/1.45 var(--ah-body); }
.sm-fc__kw { padding: 0 2px; margin: 0 -2px; border-radius: 3px; background-color: transparent; background-image: linear-gradient(rgba(255, 91, 31, 0.38), rgba(255, 91, 31, 0.38)); background-repeat: no-repeat; background-size: 0% 100%; color: inherit; transition: background-size 0.55s ease; }
.sm-fc__card.is-lit .sm-fc__kw { background-size: 100% 100%; }
.sm-fc__callrow { display: flex; align-items: center; gap: 10px; margin-top: 9px; padding: 7px 10px; border: 1.5px solid rgba(11, 20, 36, 0.25); border-radius: 8px; background: #eef3fb; }
.sm-fc__play { flex: none; width: 0; height: 0; border-left: 9px solid var(--ah-blue-ink); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.sm-fc__wave { display: flex; flex: 1; align-items: center; gap: 2.5px; min-width: 0; height: 20px; overflow: hidden; }
.sm-fc__wave i { display: block; flex: none; width: 3px; border-radius: 2px; background: var(--ah-blue-ink); }
.sm-fc__len { flex: none; color: var(--ah-ink-2); font: 700 0.74rem/1 var(--ah-mono); font-variant-numeric: tabular-nums; }
.sm-fc__caption { margin: 18px 0 0; text-align: center; color: var(--ah-fog); font-size: 0.95rem; font-weight: 600; }
@media (max-width: 760px) {
  .sm-fc__tabs { flex-direction: column; align-items: stretch; gap: 8px; margin-bottom: 14px; padding: 0; }
  .sm-fc__tab { border-bottom: 2px solid var(--ah-950); border-radius: 12px 12px 4px 4px; translate: none; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6); }
  .sm-fc__tab:hover { translate: none; }
  .sm-fc__tab[aria-pressed="true"] { box-shadow: 4px 4px 0 var(--sm-ember); }
  .sm-fc__scene { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 26px 12px 16px; border-radius: 12px; }
  .sm-fc__cabcol { width: min(100%, 360px); margin: 0 auto; }
  .sm-fc__wall { min-height: 0; padding: 54px 18px 10px; }
  .sm-fc__card { position: static; width: 100%; margin: 0 0 18px; transform: translateY(-16px) scale(0.96); }
  .sm-fc__card.is-pinned { transform: rotate(var(--fcrm, 0deg)); }
  .sm-fc__wallhint { top: 20px; }
}

/* --------------------------------------------------------------------------
   11. The reviews engine: three beats on one counter. The real tablet sends the
   ask, the text lands on the customer's phone, the review lands on Google.
   -------------------------------------------------------------------------- */
.sm-reviews { --deco-at: 100% 0; --deco-size: 40% 50%; }
.sm-rv { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; max-width: 1160px; margin: 0 auto; }
@media (min-width: 1000px) {
  .sm-rv {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.82fr) minmax(0, 1fr);
    grid-template-areas: "more more less" "ask text google" "counter counter counter" "land cap .";
    column-gap: 34px; row-gap: 0; align-items: end;
  }
  .sm-rv__note--more { grid-area: more; justify-self: start; max-width: 560px; margin: 0 0 40px 30px; }
  .sm-rv__note--less { grid-area: less; margin: 0 10px 40px 0; }
  .sm-rv__beat--ask { grid-area: ask; } .sm-rv__beat--text { grid-area: text; align-self: center; } .sm-rv__beat--google { grid-area: google; }
  .sm-rv__land { grid-area: land; } .sm-rv__cap { grid-area: cap; }
  .sm-rv__counter { grid-area: counter; display: block; }
  /* the hand-off arrows between the beats */
  .sm-rv__beat--ask::after, .sm-rv__beat--text::after {
    content: ""; position: absolute; z-index: 3; right: -30px; top: 46%; width: 26px; height: 26px;
    background: var(--sm-ember-hi); -webkit-mask: var(--sm-arrow) center / contain no-repeat; mask: var(--sm-arrow) center / contain no-repeat;
  }
}
.sm-rv { --sm-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15.5M13.5 6l6 6-6 6'/%3E%3C/svg%3E"); }
.sm-rv__note { position: relative; padding: 26px 22px 20px; border: 2px solid var(--ah-950); border-radius: 4px; background-color: #fff7d6; background-image: var(--ah-fiber); color: var(--ah-ink); box-shadow: 5px 5px 0 var(--sm-ember); rotate: -1deg; }
.sm-rv__note--less { background-color: var(--ah-cream); box-shadow: 5px 5px 0 var(--ah-sky); rotate: 0.9deg; }
.sm-rv__note::before { content: ""; position: absolute; left: 50%; top: -13px; width: 98px; height: 26px; margin-left: -49px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 3px, transparent 3px 7px), rgba(226, 208, 168, 0.9); clip-path: polygon(3% 0, 97% 6%, 100% 28%, 96% 52%, 100% 78%, 97% 100%, 2% 94%, 0 72%, 4% 48%, 0 22%); rotate: -3deg; }
.sm-rv__note p { color: var(--ah-ink); font-size: 1.04rem; line-height: 1.55; }
.sm-rv__note p + p { margin-top: 8px; color: var(--ah-ink-2); }
.sm-rv__note strong { font-weight: 800; }
.sm-rv__note--more strong { color: var(--sm-ember-ink); } .sm-rv__note--less strong { color: var(--ah-blue-ink); }
.sm-rv__beat { position: relative; min-width: 0; }
/* the step number on each beat */
.sm-rv__n { position: absolute; z-index: 6; left: -6px; top: -14px; display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid var(--ah-950); border-radius: 50%; background: var(--ah-ink); color: var(--ah-sky); font: 900 1.1rem/1 var(--ah-display); box-shadow: 2px 2px 0 var(--sm-ember); }
/* beat 1: the real tablet on its counter stand */
.sm-kiosk { position: relative; width: min(100%, 470px); margin: 0 auto; padding-bottom: 34px; }
.sm-kiosk__btn { position: relative; z-index: 2; display: block; width: 100%; padding: 0; border: 0; border-radius: 22px; background: none; cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
.sm-kiosk__btn:focus-visible { outline-offset: 5px; }
.sm-kiosk__tablet { display: block; padding: 14px; border: 3px solid var(--ah-950); border-radius: 22px; background: linear-gradient(160deg, #3a4456, #1a202c 45%, #11151d); box-shadow: 8px 8px 0 var(--ah-blue), inset 0 2px 0 rgba(255, 255, 255, 0.14); transition: translate 0.25s var(--ease-back), box-shadow 0.25s var(--ease-back); }
.sm-kiosk__btn:hover .sm-kiosk__tablet { translate: -2px -2px; box-shadow: 10px 10px 0 var(--ah-blue), inset 0 2px 0 rgba(255, 255, 255, 0.14); }
.sm-kiosk__bar, .sm-dl__bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 2px solid var(--ah-950); border-bottom: 0; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, #e3e9f0, #b9c3d0); color: var(--ah-ink); font: 700 0.72rem/1 var(--ah-mono); }
.sm-kiosk__bar i, .sm-dl__bar i { flex: none; width: 10px; height: 10px; border: 1.5px solid var(--ah-950); border-radius: 50%; background: var(--ah-neon-pink); }
.sm-kiosk__bar i:nth-child(2), .sm-dl__bar i:nth-child(2) { background: var(--ah-gold); } .sm-kiosk__bar i:nth-child(3), .sm-dl__bar i:nth-child(3) { background: var(--ah-sky); }
.sm-kiosk__bar span, .sm-dl__bar span { flex: 1; min-width: 0; margin-left: 6px; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.sm-kiosk__tablet img { display: block; width: 100%; height: auto; border: 2px solid var(--ah-950); border-radius: 0 0 8px 8px; background: #fff; }
.sm-kiosk__real { position: absolute; z-index: 3; top: -12px; right: 18px; --tilt: 5deg; }
.sm-kiosk__stand { position: absolute; z-index: 1; left: 50%; bottom: 12px; width: 58px; height: 52px; margin-left: -29px; border: 3px solid var(--ah-950); background: linear-gradient(90deg, #5d6a7d, #cfd7e1 50%, #5d6a7d); }
.sm-kiosk__base { position: absolute; left: 50%; bottom: 0; width: 210px; height: 18px; margin-left: -105px; border: 3px solid var(--ah-950); border-radius: 50% 50% 8px 8px / 100% 100% 8px 8px; background: linear-gradient(180deg, #cfd7e1, #6f7c90); box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.5); }
.sm-rv__land { max-width: 30em; margin: 18px 0 0; color: var(--ah-fog); font-size: 1.04rem; }
/* beat 2: the ask, as it lands on the customer's phone */
.sm-rv__sms { position: relative; display: grid; gap: 3px; width: min(100%, 300px); margin: 0 auto; padding: 12px 13px 13px; border: 2px solid var(--ah-950); border-radius: 16px; background-color: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink); box-shadow: 5px 5px 0 var(--sm-ember); rotate: -1.5deg; }
.sm-rv__sms > .ah-sample { top: -14px; right: 10px; }
.sm-rv__smshead { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.sm-rv__smsic { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border: 2px solid var(--ah-950); border-radius: 7px; background: #67df7b; color: var(--ah-ink); font-size: 0.95rem; }
.sm-rv__smsapp { color: var(--ah-ink-2); font: 800 0.66rem/1 var(--ah-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.sm-rv__smswhen { margin-left: auto; color: var(--ah-ink-2); font-size: 0.7rem; }
.sm-rv__smsfrom { font: 800 0.95rem/1.2 var(--ah-body); }
.sm-rv__smsmsg { color: var(--ah-ink); font-size: 0.92rem; font-weight: 600; line-height: 1.4; }
.sm-rv__cap { margin: 18px auto 0; color: var(--ah-fog); font-size: 0.98rem; font-weight: 600; text-align: center; }
/* beat 3: the review lands on Google; five stars get the AI reply, three stars go to your manager */
.sm-rv__beat--google { display: grid; gap: 16px; justify-items: center; padding-bottom: 6px; }
.sm-rv__g { position: relative; display: grid; gap: 7px; width: min(100%, 320px); padding: 13px 14px 14px; border: 2px solid var(--ah-950); border-radius: 10px; background: #fffdf6; color: var(--ah-ink); box-shadow: 5px 5px 0 var(--ah-blue); rotate: 1deg; }
.sm-rv__g > .ah-sample { top: -14px; right: 10px; }
.sm-rv__g--low { width: min(92%, 296px); margin-left: 8%; box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.55); rotate: -1.5deg; }
.sm-rv__ghead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; font: 800 0.86rem/1.2 var(--ah-body); }
.sm-rv__stars { color: #b07807; font-size: 1.05rem; letter-spacing: 2px; line-height: 1; }
.sm-rv__off { color: #9a927e; }
.sm-rv__lines { display: grid; gap: 5px; }
.sm-rv__lines i { display: block; height: 7px; border-radius: 4px; background: #ddd5c2; }
.sm-rv__lines i:nth-child(2) { width: 70%; }
.sm-rv__reply { display: grid; gap: 1px; margin-top: 4px; padding: 7px 0 0 10px; border-top: 1.5px dashed rgba(11, 20, 36, 0.25); font-size: 0.84rem; line-height: 1.3; }
.sm-rv__reply b { font-weight: 800; }
.sm-rv__reply span { color: var(--sm-ember-ink); font-weight: 800; font-size: 0.78rem; }
.sm-rv__lines--reply { padding-left: 10px; }
.sm-rv__mgr { position: absolute; right: -14px; bottom: -18px; padding: 8px 10px 9px; border: 2px solid var(--ah-950); background: #fff3a8; color: var(--ah-ink); font: 1rem/1.05 var(--ah-hand); box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55); rotate: 5deg; }
/* the counter the three beats stand on */
.sm-rv__counter { height: 30px; margin: -4px -24px 0; border: 2px solid var(--ah-950); border-radius: 4px; background: linear-gradient(180deg, rgba(255, 220, 170, 0.2), transparent 3px), repeating-linear-gradient(177deg, rgba(0, 0, 0, 0.14) 0 2px, transparent 2px 11px), linear-gradient(180deg, #6a4428, #3a2414); box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.5); }
.sm-rv__more { margin-top: clamp(36px, 4vw, 52px); text-align: center; }
@media (max-width: 999px) {
  .sm-rv__counter { display: none; }
  .sm-rv__beat--text, .sm-rv__beat--google { margin-top: 10px; }
  .sm-rv__n { left: 0; }
  .sm-rv__land { margin-top: 0; }
  .sm-rv__cap { margin-top: -6px; }
}

/* --------------------------------------------------------------------------
   12. Call recording: the tape deck
   -------------------------------------------------------------------------- */
.sm-crwrap { position: relative; min-width: 0; }
.sm-cr { position: relative; width: min(100%, 560px); margin: 0 auto; }
.sm-cr > .ah-sample { top: -14px; right: 22px; }
.sm-cr__deck { position: relative; padding: 22px 20px 18px; border: 3px solid var(--ah-950); border-radius: 14px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 4px), linear-gradient(180deg, #edf1f6, #c6cfdb 55%, #aab5c4); color: var(--ah-ink); box-shadow: 8px 8px 0 var(--ah-blue), inset 0 1px 0 rgba(255, 255, 255, 0.75); }
.sm-cr__screw { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(35deg, transparent 43%, var(--ah-950) 43% 57%, transparent 57%), radial-gradient(circle at 35% 35%, #f2f5f9, #9aa7b8 60%, #5d6a7d); box-shadow: 0 0 0 1.5px var(--ah-950); }
.sm-cr__screw--tl { left: 9px; top: 9px; } .sm-cr__screw--tr { right: 9px; top: 9px; } .sm-cr__screw--bl { left: 9px; bottom: 9px; } .sm-cr__screw--br { right: 9px; bottom: 9px; }
.sm-cr__reels { position: relative; display: flex; align-items: center; justify-content: space-between; width: min(72%, 330px); margin: 0 auto 16px; }
.sm-cr__reel { position: relative; z-index: 1; display: block; width: 96px; height: 96px; border: 3px solid var(--ah-950); border-radius: 50%; background: radial-gradient(circle, #e3e9f0 0 13%, var(--ah-950) 13.5% 16%, #4a2f1b 16.5% 63%, var(--ah-950) 63.5% 65.5%, #9aa7b8 66%); }
.sm-cr__reel i { position: absolute; inset: 12px; border-radius: 50%; background: conic-gradient(from 10deg, transparent 0 28deg, rgba(227, 233, 240, 0.85) 28deg 44deg, transparent 44deg 148deg, rgba(227, 233, 240, 0.85) 148deg 164deg, transparent 164deg 268deg, rgba(227, 233, 240, 0.85) 268deg 284deg, transparent 284deg); -webkit-mask: radial-gradient(circle, transparent 0 22%, #000 23% 76%, transparent 77%); mask: radial-gradient(circle, transparent 0 22%, #000 23% 76%, transparent 77%); }
.sm-cr__tape { position: absolute; z-index: 0; left: 48px; right: 48px; bottom: 6px; height: 3px; background: #4a2f1b; box-shadow: 0 0 0 1px var(--ah-950); }
.sm-cr__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 12px; }
.sm-cr__rec { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 4px; border: 2px solid var(--ah-950); border-radius: 6px; background: #04060b; color: #ffb3b3; font: 900 0.95rem/1 var(--ah-display); letter-spacing: 0.14em; text-shadow: 0 0 5px rgba(255, 60, 60, 0.9); }
.sm-cr__dot { width: 10px; height: 10px; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 0 1.5px #04060b, 0 0 8px 2px rgba(255, 60, 60, 0.85); }
.sm-cr__caller { display: inline-flex; align-items: center; gap: 6px; color: var(--ah-ink); font: 800 0.9rem/1.2 var(--ah-body); }
.sm-cr__caller .sm-i { color: var(--ah-blue-ink); font-size: 1.05em; }
.sm-cr__time { padding: 5px 9px 4px; border: 2px solid var(--ah-950); border-radius: 6px; background: #04060b; color: #c9ecff; font: 800 1.05rem/1 var(--ah-display); letter-spacing: 0.08em; font-variant-numeric: tabular-nums; text-shadow: 0 0 6px rgba(47, 155, 255, 0.95); }
.sm-cr__wave { position: relative; display: flex; align-items: center; gap: 2px; height: 86px; padding: 0 12px; overflow: hidden; border: 2px solid var(--ah-950); border-radius: 8px; background: #04060b; box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.8); }
.sm-cr__wave i { display: block; flex: 1 1 0; min-width: 1px; max-width: 5px; height: calc(var(--h, 30) * 1px); border-radius: 2px; background: var(--ah-neon-sky); box-shadow: 0 0 4px rgba(47, 155, 255, 0.8); }
.sm-cr__wave::after { content: ""; position: absolute; inset: 0; z-index: 1; background: #04060b; transform-origin: 100% 50%; transform: scaleX(0); }
.sm-cr__head { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.sm-cr__head::after { content: ""; position: absolute; right: 14px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--sm-ember); box-shadow: 0 0 6px var(--sm-ember); }
.sm-cr__foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; margin-top: 16px; }
.sm-cr__use { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 5px; border: 2px solid var(--ah-950); border-radius: 4px; background: #11151d; color: #e8edf3; font: 700 0.84rem/1.2 var(--ah-body); box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.07), 2px 2px 0 var(--ah-blue); rotate: -1deg; }
.sm-cr__use:nth-child(2) { rotate: 0.8deg; box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.07), 2px 2px 0 var(--sm-ember); }
.sm-cr__use .sm-i { color: var(--ah-sky); }
.sm-crwrap .sm-rep { margin-top: 34px; }
@media (prefers-reduced-motion: no-preference) {
  html.motion .sm-cr:not(.is-play) .sm-cr__wave::after { transform: scaleX(1); }
  html.motion .sm-cr:not(.is-play) .sm-cr__head { transform: translateX(calc(-100% + 30px)); }
  .sm-cr .sm-cr__wave::after { transition: transform 2.8s linear 0.3s; }
  .sm-cr .sm-cr__head { transition: transform 2.8s linear 0.3s; }
  .sm-cr.is-play .sm-cr__reel i { animation: ah-spin 1s linear 3; }
  .sm-cr.is-play .sm-cr__dot { animation: ah-blink 0.9s steps(1) 4; }
}
@media (max-width: 480px) { .sm-cr__reel { width: 76px; height: 76px; } .sm-cr__tape { left: 38px; right: 38px; } .sm-cr__wave { height: 74px; gap: 1px; padding: 0 8px; } .sm-cr__deck { padding: 20px 14px 16px; } }
/* the deck stays small: one transcript line on its display and a sticky note for the coaching */
.sm-cr { width: min(100%, 470px); }
.sm-cr__reels { width: min(66%, 290px); margin-bottom: 14px; }
.sm-cr__reel { width: 80px; height: 80px; }
.sm-cr__tape { left: 40px; right: 40px; }
.sm-cr__wave { height: 64px; }
.sm-cr__line { margin: 10px 0 0; padding: 8px 12px 9px; border: 2px solid var(--ah-950); border-radius: 6px; background: #04060b; color: #c9ecff; font: 700 0.86rem/1.4 var(--ah-mono); }
.sm-cr__who { display: block; margin-bottom: 3px; color: var(--ah-mute); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; }
.sm-cr__sticky { position: absolute; z-index: 4; right: -20px; bottom: 58px; width: 96px; padding: 12px 8px 12px; border: 2px solid var(--ah-950); background: #fff3a8; color: var(--ah-ink); font: 1.02rem/1.05 var(--ah-hand); text-align: center; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.55); rotate: 7deg; }
.sm-cr__sticky::before { content: ""; position: absolute; left: 50%; top: -10px; width: 52px; height: 18px; margin-left: -26px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 3px, transparent 3px 7px), rgba(226, 208, 168, 0.92); clip-path: polygon(3% 0, 97% 6%, 100% 28%, 96% 52%, 100% 78%, 97% 100%, 2% 94%, 0 72%, 4% 48%, 0 22%); rotate: -4deg; }
@media (max-width: 480px) { .sm-cr__reel { width: 66px; height: 66px; } .sm-cr__tape { left: 33px; right: 33px; } .sm-cr > .ah-sample { right: auto; left: 18px; --tilt: -5deg; } .sm-cr__sticky { top: 6px; right: -6px; bottom: auto; width: 70px; padding: 9px 6px; font-size: 0.86rem; } }

/* --------------------------------------------------------------------------
   13. Missed call text back: the phone, the stopwatch, the brass plaque
   -------------------------------------------------------------------------- */
.sm-phones { --deco-at: 0 0; --deco-size: 36% 46%; }
.sm-hs { position: relative; display: flex; flex-direction: column; align-items: center; max-width: 880px; margin: 0 auto; }
.sm-hs__scene { display: flex; align-items: center; justify-content: center; gap: 70px; width: 100%; }
.sm-hs__phonewrap { position: relative; flex: none; }
.sm-hs__phonewrap > .ah-sample { top: 6px; right: -12px; }
.sm-hs__phone { position: relative; width: 290px; aspect-ratio: 9 / 19.2; padding: 10px; border: 3px solid var(--ah-950); border-radius: 44px; background: linear-gradient(160deg, #3a4456, #1a202c 40%, #11151d); box-shadow: 8px 8px 0 var(--sm-ember), inset 0 0 0 2px rgba(255, 255, 255, 0.12); rotate: -3deg; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sm-hs__phone:focus-visible { outline-offset: 5px; }
.sm-hs__screen { position: relative; width: 100%; height: 100%; overflow: hidden; border: 2px solid var(--ah-950); border-radius: 34px; background: #05080f; }
.sm-hs__notch { position: absolute; z-index: 6; top: 8px; left: 50%; width: 82px; height: 21px; margin-left: -41px; border-radius: 12px; background: #010204; }
.sm-hs__status { position: absolute; z-index: 4; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; height: 38px; padding: 8px 22px 0; color: #cadcf2; font: 700 0.74rem/1 var(--ah-body); letter-spacing: 0.02em; }
.sm-hs__status-ic { display: flex; gap: 4px; color: #9db8d6; font-size: 0.8rem; }
.sm-hs__scr { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 50px 13px 12px; transition: opacity 0.5s ease, transform 0.5s ease; }
.sm-hs.is-p2 .sm-hs__scr1 { opacity: 0; transform: translateY(-12px); pointer-events: none; }
.sm-hs__scr2 { opacity: 0; transform: translateY(16px); pointer-events: none; }
.sm-hs.is-p2 .sm-hs__scr2 { opacity: 1; transform: none; }
.sm-hs__oshead { display: flex; align-items: baseline; justify-content: space-between; padding: 4px 6px 10px; }
.sm-hs__oshead b { color: #eef4fb; font: 800 1.25rem/1 var(--ah-body); }
.sm-hs__oshead span { color: var(--ah-blue-hi); font-size: 0.76rem; font-weight: 700; }
.sm-hs__call { display: flex; align-items: center; gap: 10px; padding: 10px 6px; border-bottom: 1px solid rgba(157, 184, 214, 0.12); }
.sm-hs__call-ic { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: rgba(157, 184, 214, 0.12); color: #9db8d6; font-size: 0.9rem; }
.sm-hs__call--hot .sm-hs__call-ic { background: rgba(255, 107, 92, 0.18); color: #ff8a7e; }
.sm-hs__call-txt { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.sm-hs__call-txt b { overflow: hidden; color: #eef4fb; font-size: 0.88rem; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.sm-hs__call-txt span { color: #8fa3bd; font-size: 0.7rem; }
.sm-hs__call-meta { flex: none; color: #8fa3bd; font-size: 0.7rem; font-variant-numeric: tabular-nums; }
.sm-hs__call--dim { opacity: 0.5; }
.sm-hs__tabbar { display: flex; align-items: center; justify-content: space-around; margin-top: auto; padding: 10px 4px 2px; border-top: 1px solid rgba(157, 184, 214, 0.12); }
.sm-hs__tab { display: flex; flex-direction: column; align-items: center; gap: 3px; color: #5d7a9c; font-size: 0.95rem; }
.sm-hs__tab small { font-size: 0.52rem; font-weight: 700; letter-spacing: 0.04em; }
.sm-hs__tab--on { color: var(--ah-blue-hi); }
.sm-hs__searchbar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid rgba(157, 184, 214, 0.2); border-radius: 13px; background: #141f31; color: #eef4fb; font-size: 0.82rem; }
.sm-hs__searchbar > .sm-i { color: #8fa3bd; font-size: 0.9rem; }
.sm-hs__query { min-width: 0; overflow: hidden; font-weight: 700; white-space: nowrap; }
.sm-hs__caret { flex: 0 0 2px; width: 2px; height: 16px; border-radius: 1px; background: var(--ah-blue-hi); }
@media (prefers-reduced-motion: no-preference) { .sm-hs:not(.is-done) .sm-hs__caret { animation: ah-blink 1s steps(1) 6; } }
.sm-hs__mic { margin-left: auto; }
.sm-hs__suggs { display: flex; flex-direction: column; margin-top: 6px; }
.sm-hs__sugg { display: flex; align-items: center; gap: 10px; padding: 11px 8px; border-bottom: 1px solid rgba(157, 184, 214, 0.12); transition: opacity 0.45s ease, transform 0.45s ease; }
.sm-hs__sugg--echo { opacity: 0; color: #9db8d6; font-size: 0.78rem; }
.sm-hs__sugg--echo .sm-i { color: #5d7a9c; }
.sm-hs.is-echo .sm-hs__sugg--echo { opacity: 1; }
.sm-hs__sugg--comp { opacity: 0; transform: translateY(7px); }
.sm-hs.is-comp .sm-hs__sugg--comp { opacity: 1; transform: none; }
.sm-hs.is-dim .sm-hs__sugg--comp { opacity: 0.4; }
.sm-hs__pin { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 8px; background: rgba(255, 107, 92, 0.18); color: #ff8a7e; font-size: 0.9rem; }
.sm-hs__comp-txt { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.sm-hs__comp-txt b { color: #eef4fb; font-size: 0.82rem; font-weight: 700; }
.sm-hs__comp-txt span { color: #8fa3bd; font-size: 0.7rem; }
.sm-hs__open { color: #5fe39b; font-weight: 700; }
.sm-hs__go { margin-left: auto; color: #5d7a9c; }
.sm-hs__kb { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding: 8px 0 2px; }
.sm-hs__krow { display: flex; justify-content: center; gap: 4px; }
.sm-hs__key { display: grid; place-items: center; flex: 1 1 0; min-width: 0; max-width: 24px; height: 31px; border-radius: 5px; background: #1c2940; color: #9db8d6; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; transition: background-color 0.12s, color 0.12s; }
.sm-hs__key--sp { flex: 0 0 auto; width: 58%; max-width: none; text-transform: none; }
.sm-hs__key.is-hit { background: var(--sm-ember); color: var(--ah-ink); }
.sm-hs__banner { position: absolute; z-index: 5; top: 36px; left: 8px; right: 8px; display: flex; align-items: flex-start; gap: 10px; padding: 10px 11px; border: 2px solid var(--ah-950); border-radius: 14px; background-color: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink); box-shadow: 4px 4px 0 var(--sm-ember); opacity: 0; transform: translateY(-140%); }
.sm-hs.is-note .sm-hs__banner { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) { html.js .sm-hs.is-note:not(.is-rm) .sm-hs__banner { animation: sm-banner 0.64s cubic-bezier(0.22, 1.1, 0.32, 1.18) backwards; } }
@keyframes sm-banner { 0% { transform: translateY(-140%); opacity: 0.4; } 62% { transform: translateY(5%); opacity: 1; } 82% { transform: translateY(-2%); } }
.sm-hs__bicon { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border: 2px solid var(--ah-950); border-radius: 8px; background: #67df7b; color: var(--ah-ink); font-size: 1rem; }
.sm-hs__btxt { flex: 1 1 auto; min-width: 0; }
.sm-hs__brow { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.sm-hs__bapp { color: var(--ah-ink-2); font: 800 0.55rem/1.2 var(--ah-mono); letter-spacing: 0.1em; }
.sm-hs__btime { color: var(--ah-ink-2); font-size: 0.58rem; }
.sm-hs__btitle { margin-top: 1px; color: var(--sm-ember-ink); font-size: 0.8rem; font-weight: 800; }
.sm-hs__bbody { margin-top: 1px; color: var(--ah-ink); font-size: 0.72rem; line-height: 1.4; }
.sm-hs__watch { display: flex; flex: none; flex-direction: column; align-items: center; gap: 12px; min-width: 220px; }
.sm-hs__watch-label { color: var(--ah-fog); font: 800 0.76rem/1.2 var(--ah-mono); letter-spacing: 0.2em; }
.sm-hs__dial { position: relative; display: grid; place-items: center; width: 200px; height: 200px; margin-top: 14px; border: 4px solid var(--ah-950); border-radius: 50%; background: radial-gradient(circle, #fffdf6 0 60%, var(--ah-950) 60.5% 62%, #e3e9f0 62.5% 75%, #9aa7b8 75.5%); box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.55), inset 0 3px 0 rgba(255, 255, 255, 0.5); }
.sm-hs__crown { position: absolute; left: 50%; top: -24px; width: 30px; height: 20px; margin-left: -15px; border: 3px solid var(--ah-950); border-radius: 6px 6px 2px 2px; background: linear-gradient(90deg, #9aa7b8, #f2f5f9 45%, #6f7c90); }
.sm-hs__crown::after { content: ""; position: absolute; left: 50%; top: 100%; width: 12px; height: 8px; margin-left: -6px; border: 3px solid var(--ah-950); border-top: 0; background: #9aa7b8; }
.sm-hs__ticks { position: absolute; inset: 22px; border-radius: 50%; background: repeating-conic-gradient(from -2deg, var(--ah-ink) 0 4deg, transparent 4deg 30deg); -webkit-mask: radial-gradient(circle, transparent 0 84%, #000 85%); mask: radial-gradient(circle, transparent 0 84%, #000 85%); }
.sm-hs__digits { position: relative; color: var(--ah-ink); font: 900 3.4rem/1 var(--ah-display); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.sm-hs.is-done .sm-hs__digits { color: var(--sm-ember-ink); }
@media (prefers-reduced-motion: no-preference) { .sm-hs.is-done:not(.is-rm) .sm-hs__digits { animation: sm-freeze 0.55s ease; } }
@keyframes sm-freeze { 35% { transform: scale(1.1); } }
.sm-hs__watch-note { display: flex; align-items: center; gap: 6px; min-height: 18px; color: var(--ah-mute); font-size: 0.86rem; font-weight: 700; transition: color 0.4s ease; }
.sm-hs.is-warn .sm-hs__watch-note { color: var(--ah-hot); }
.sm-hs.is-done .sm-hs__watch-note { color: var(--ah-sky); }
.sm-hs__plaque { position: relative; max-width: 100%; margin-top: 52px; padding: 11px 34px 10px; border: 2px solid var(--ah-950); border-radius: 5px; background: linear-gradient(180deg, #fff1bf, #e2b44a 42%, #c9962e 70%, #e7bf52); color: #2b1f05; text-align: center; font: 800 0.76rem/1.6 var(--ah-body); letter-spacing: 0.14em; text-shadow: 0 1px 0 rgba(255, 245, 210, 0.75); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.6), inset 0 0 0 2px rgba(255, 255, 255, 0.45), inset 0 0 0 4px rgba(122, 86, 15, 0.45); text-wrap: balance; }
.sm-hs__plaque::before, .sm-hs__plaque::after { content: ""; position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff4cf, #9c7420); box-shadow: 0 0 0 1.5px #5c420c; }
.sm-hs__plaque::before { left: 12px; } .sm-hs__plaque::after { right: 12px; }
.sm-hs__replay { margin-top: 20px; visibility: hidden; }
.sm-hs.is-done .sm-hs__replay { visibility: visible; }
.sm-hs__replay .sm-i { font-size: 1.1em; }
@media (max-width: 760px) {
  .sm-hs__scene { flex-direction: column; gap: 34px; }
  .sm-hs__phone { width: 262px; rotate: -1.5deg; }
  .sm-hs__plaque { margin-top: 36px; padding-inline: 26px; font-size: 0.7rem; letter-spacing: 0.1em; }
}

/* --------------------------------------------------------------------------
   14. The deals list: the signature thread. Pick a niche list, send the blast,
   the reply lands and the customer comes in. The real screen is a thumbnail.
   -------------------------------------------------------------------------- */
.sm-dl { position: relative; width: min(100%, 560px); margin: 0 auto; padding-bottom: 92px; }
.sm-dl__win { position: relative; border: 3px solid var(--ah-950); border-radius: 12px; background: #0b1528; box-shadow: 9px 9px 0 var(--sm-ember); }
.sm-dl__win > .ah-sample { top: -14px; right: 20px; }
.sm-dl .sm-dl__bar { border: 0; border-bottom: 2px solid var(--ah-950); border-radius: 9px 9px 0 0; }
.sm-dl__app { display: grid; grid-template-columns: 158px minmax(0, 1fr); min-height: 330px; }
.sm-dl__lists { display: grid; align-content: start; gap: 8px; padding: 14px 10px; border-right: 2px solid var(--ah-950); border-radius: 0 0 0 9px; background: #101d33; }
.sm-dl__lab { margin: 0 0 2px; color: var(--ah-mute); font: 800 0.64rem/1.2 var(--ah-mono); letter-spacing: 0.16em; text-transform: uppercase; }
.sm-dl__list { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 10px; border: 2px solid #2a3a58; border-radius: 9px; background: #0b1528; color: var(--ah-fog); font: 800 0.84rem/1.15 var(--ah-body); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; }
.sm-dl__list:hover { border-color: var(--ah-sky); color: var(--ah-paper); }
.sm-dl__list[aria-pressed="true"] { border-color: var(--ah-950); background: var(--ah-cream); color: var(--ah-ink); box-shadow: 3px 3px 0 var(--sm-ember); }
.sm-dl__dot { flex: none; width: 10px; height: 10px; border: 1.5px solid currentColor; border-radius: 50%; }
.sm-dl__list[aria-pressed="true"] .sm-dl__dot { border-color: var(--ah-950); background: var(--sm-ember); }
.sm-dl__convo { display: flex; flex-direction: column; min-width: 0; padding: 12px 14px 14px; border-radius: 0 0 9px 0; background-color: #f8f2e2; background-image: var(--ah-fiber); color: var(--ah-ink); }
.sm-dl__to { padding-bottom: 8px; border-bottom: 1.5px solid rgba(11, 20, 36, 0.15); color: var(--ah-ink-2); font: 700 0.82rem/1.2 var(--ah-body); }
.sm-dl__to b { color: var(--ah-ink); font-weight: 800; }
.sm-dl__chat { flex: 1; align-content: start; padding: 14px 0 12px; }
.sm-dl__chat .ah-chat__bubble { font-size: 0.92rem; }
.sm-dl__chat .ah-chat__who { font-size: 0.64rem; }
.sm-dl__chat .sm-chat__stamp { font-size: 1.1rem; }
.sm-dl__send { align-self: flex-end; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 2px solid var(--ah-950); border-radius: 999px; background: var(--sm-ember); color: var(--ah-ink); font: 800 0.92rem/1 var(--ah-body); box-shadow: 3px 3px 0 var(--ah-ink); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: translate 0.15s, box-shadow 0.15s; }
.sm-dl__send:hover { translate: -1px -1px; box-shadow: 4px 4px 0 var(--ah-ink); }
.sm-dl__send:active { translate: 2px 2px; box-shadow: 1px 1px 0 var(--ah-ink); }
.sm-dl__send .sm-i { stroke-width: 2.6; }
.sm-dl__send:focus-visible { outline: 3px solid var(--ah-ink); outline-offset: 3px; }
/* the real screen, small, tap to see it full size */
.sm-dl__shot { position: absolute; z-index: 4; left: -10px; bottom: 0; width: 150px; padding: 6px; border: 2px solid var(--ah-950); border-radius: 6px; background: #fff; box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.55); rotate: -4deg; cursor: zoom-in; -webkit-tap-highlight-color: transparent; transition: rotate 0.3s var(--ease-back), translate 0.3s var(--ease-back); }
.sm-dl__shot:hover, .sm-dl__shot:focus-visible { rotate: 0deg; translate: 0 -4px; }
.sm-dl__shot img { display: block; width: 100%; height: auto; }
.sm-dl__real { position: absolute; z-index: 5; left: 92px; bottom: 132px; --tilt: 5deg; }
@media (max-width: 560px) {
  .sm-dl { padding-bottom: 122px; }
  .sm-dl__app { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .sm-dl__lists { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; border-right: 0; border-bottom: 2px solid var(--ah-950); border-radius: 0; }
  .sm-dl__lab { flex: 1 1 100%; }
  .sm-dl__list { flex: 1 1 auto; padding: 6px 9px; font-size: 0.8rem; }
  .sm-dl__convo { border-radius: 0 0 9px 9px; }
  .sm-dl__shot { width: 112px; left: 0; }
  .sm-dl__real { left: 78px; bottom: 98px; }
}

/* --------------------------------------------------------------------------
   15. The giveaway: the booth, the text bubbles riding to the store, the store's clicker
   -------------------------------------------------------------------------- */
.sm-gw { position: relative; max-width: 1060px; margin: 0 auto; }
.sm-gw__scene { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 360px) minmax(150px, 1fr) minmax(0, 300px); gap: 0 18px; align-items: end; }
.sm-gw__overline { display: block; margin-bottom: 10px; color: var(--ah-sky); font: 800 0.78rem/1.35 var(--ah-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.sm-gw__count { margin-bottom: 16px; }
.sm-gw__num { display: block; color: var(--ah-paper); font: 900 clamp(3.4rem, 2.5rem + 2.4vw, 5rem)/0.9 var(--ah-display); font-variant-numeric: tabular-nums; text-shadow: 0.05em 0.05em 0 var(--ah-blue-deep), 0.09em 0.09em 0 var(--ah-950); }
.sm-gw__num--after { color: var(--sm-ember-hi); text-shadow: 0.05em 0.05em 0 var(--sm-ember-deep), 0.09em 0.09em 0 var(--ah-950); }
.sm-gw__count em { display: block; margin-top: 8px; color: var(--ah-fog); font-size: 0.98rem; font-style: normal; font-weight: 700; line-height: 1.35; }
.sm-gw__boothset { display: flex; align-items: flex-end; }
.sm-gw__bowl { display: block; flex: none; width: 220px; height: auto; margin-bottom: -8px; overflow: visible; }
.gw-shadow { fill: rgba(0, 0, 0, 0.5); }
.gw-glass { fill: rgba(173, 229, 255, 0.09); }
.gw-slips use { stroke: rgba(11, 20, 36, 0.65); stroke-width: 1.2; }
.gw-top use { stroke: rgba(11, 20, 36, 0.65); stroke-width: 1.2; }
.gw-rim { fill: none; stroke: var(--ah-950); stroke-width: 4; }
.gw-mouth { fill: #0b1424; stroke: var(--ah-950); stroke-width: 3; }
.gw-glint { fill: none; stroke: rgba(255, 255, 255, 0.6); stroke-width: 6; stroke-linecap: round; }
.gw-glint--2 { stroke-width: 4; }
.sm-gw__layer { opacity: 0; transform: translateY(-8px); transition: opacity 0.3s, transform 0.3s; }
.sm-gw__layer.is-on { opacity: 1; transform: none; }
.sm-gw__tablet { position: relative; width: 122px; margin-left: -16px; }
.sm-gw__tabscreen { display: grid; justify-items: center; gap: 7px; padding: 14px 10px 12px; border: 3px solid var(--ah-950); border-radius: 10px; background: #0b1528; box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.55); }
.sm-gw__tabscreen strong { color: var(--ah-sky); font: 900 1.05rem/1 var(--ah-display); letter-spacing: 0.06em; }
.sm-gw__tabline { display: block; width: 86%; height: 6px; border-radius: 3px; background: rgba(173, 229, 255, 0.25); }
.sm-gw__tabline--short { width: 64%; }
.sm-gw__tabbtn { margin-top: 3px; padding: 5px 8px 4px; border: 2px solid var(--ah-950); border-radius: 999px; background: var(--sm-ember); color: var(--ah-ink); font: 800 0.66rem/1 var(--ah-body); white-space: nowrap; }
.sm-gw__tabstand { width: 26px; height: 22px; margin: 0 auto; border: 3px solid var(--ah-950); border-top: 0; background: linear-gradient(90deg, #5d6a7d, #cfd7e1 50%, #5d6a7d); }
@media (prefers-reduced-motion: no-preference) { .sm-gw.is-run .sm-gw__tabbtn { animation: sm-tabbtn 1.1s ease-in-out 2; } }
@keyframes sm-tabbtn { 50% { transform: scale(1.08); box-shadow: 0 0 0 3px rgba(255, 91, 31, 0.45); } }
/* the route: text bubbles riding from the booth to the store */
.sm-gw__flight { position: relative; align-self: center; height: 46px; margin: 0 -6px 120px; }
.sm-gw__tube { position: absolute; left: 6px; right: 6px; top: 8px; height: 30px; overflow: hidden; border: 2px solid var(--ah-950); border-radius: 4px; background: linear-gradient(180deg, rgba(173, 229, 255, 0.3), rgba(173, 229, 255, 0.07) 45%, rgba(173, 229, 255, 0.22)); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.22); }
.sm-gw__cap { position: absolute; z-index: 2; top: 1px; width: 14px; height: 44px; border: 2px solid var(--ah-950); border-radius: 3px; background: linear-gradient(180deg, var(--ah-brass-lo), var(--ah-brass-hi) 45%, var(--ah-brass)); }
.sm-gw__cap--a { left: 0; } .sm-gw__cap--b { right: 0; }
.sm-gw__msg { position: absolute; inset: 0; }
.sm-gw__msg i { position: absolute; left: 0; top: 50%; width: 30px; height: 18px; margin-top: -9px; border: 2px solid var(--ah-950); border-radius: 9px; background: linear-gradient(180deg, #fffaf0, var(--ah-cream) 50%, #c9bea2); }
.sm-gw__msg i::after { content: ""; position: absolute; top: -2px; bottom: -2px; left: 9px; width: 5px; border-inline: 2px solid var(--ah-950); background: var(--sm-ember); }
/* each text bubble rests at its own spot on the route (--at); when the 60 days play, they ride in from the booth and settle there */
.sm-gw__msg:nth-child(1) { --at: calc((100% - 34px) * 0.06); } .sm-gw__msg:nth-child(2) { --at: calc((100% - 34px) * 0.24); }
.sm-gw__msg:nth-child(3) { --at: calc((100% - 34px) * 0.42); } .sm-gw__msg:nth-child(4) { --at: calc((100% - 34px) * 0.6); }
.sm-gw__msg:nth-child(5) { --at: calc((100% - 34px) * 0.78); } .sm-gw__msg:nth-child(6) { --at: calc((100% - 34px) * 0.96); }
.sm-gw__msg { transform: translateX(var(--at)); }
.sm-gw__flightlab { position: absolute; left: 0; right: 0; top: calc(100% + 10px); color: var(--ah-fog); font: 700 0.8rem/1.35 var(--ah-mono); letter-spacing: 0.06em; text-align: center; text-transform: uppercase; }
@media (prefers-reduced-motion: no-preference) {
  .sm-gw__flight.is-go .sm-gw__msg { animation: sm-ride-x 1.5s ease-in-out both; }
  .sm-gw__flight.is-go .sm-gw__msg:nth-child(2) { animation-delay: 0.34s; } .sm-gw__flight.is-go .sm-gw__msg:nth-child(3) { animation-delay: 0.68s; }
  .sm-gw__flight.is-go .sm-gw__msg:nth-child(4) { animation-delay: 1.02s; } .sm-gw__flight.is-go .sm-gw__msg:nth-child(5) { animation-delay: 1.36s; }
  .sm-gw__flight.is-go .sm-gw__msg:nth-child(6) { animation-delay: 1.7s; }
}
@keyframes sm-ride-x { from { transform: translateX(-36px); } to { transform: translateX(var(--at)); } }
@keyframes sm-ride-y { from { transform: translateY(-36px); } to { transform: translateY(var(--at)); } }
/* the 60 days after: the day calendar and the brass tally clicker */
.sm-gw__afterset { display: flex; align-items: flex-end; gap: 24px; }
.sm-gw__cal { position: relative; width: 100px; }
.sm-gw__calbind { position: relative; height: 12px; }
.sm-gw__calring { position: absolute; top: -6px; width: 9px; height: 20px; border: 2.5px solid var(--ah-950); border-radius: 5px; background: linear-gradient(90deg, #9aa7b8, #f2f5f9 50%, #6f7c90); z-index: 2; }
.sm-gw__calring:nth-child(1) { left: 24%; } .sm-gw__calring:nth-child(2) { left: 62%; }
.sm-gw__calbody { position: relative; height: 104px; perspective: 400px; }
.sm-gw__calpage, .sm-gw__calflip { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; border: 3px solid var(--ah-950); border-radius: 6px; background: #fbf7ec; box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.55); }
.sm-gw__calflip { opacity: 0; transform-origin: 50% 0; box-shadow: none; }
.sm-gw__calflip.is-flipping { animation: sm-calflip 0.23s ease-in forwards; }
@keyframes sm-calflip { 0% { opacity: 1; transform: rotateX(0); } 100% { opacity: 0; transform: rotateX(-86deg) translateY(-6px); } }
.sm-gw__calhead { display: block; padding: 6px 0 4px; border-bottom: 2px solid var(--ah-950); background: var(--ah-red-ink); color: #fff; font: 900 0.86rem/1 var(--ah-display); letter-spacing: 0.2em; text-align: center; }
.sm-gw__calnum { display: grid; flex: 1; place-items: center; color: var(--ah-ink); font: 900 2.8rem/1 var(--ah-display); font-variant-numeric: tabular-nums; }
.sm-gw__clicker { position: relative; display: grid; place-items: center; width: 100px; height: 100px; margin-top: 18px; }
.sm-gw__clickbtn { position: absolute; left: 50%; top: -16px; width: 24px; height: 18px; margin-left: -12px; border: 3px solid var(--ah-950); border-radius: 5px 5px 2px 2px; background: linear-gradient(90deg, var(--ah-brass-lo), var(--ah-brass-hi) 45%, var(--ah-brass)); }
.sm-gw__clickbody { display: grid; place-items: center; width: 100%; height: 100%; border: 3px solid var(--ah-950); border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--ah-brass-hi), var(--ah-brass) 50%, var(--ah-brass-lo)); box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.55); }
.sm-gw__clickwin { padding: 5px 7px 4px; border: 2px solid var(--ah-950); border-radius: 4px; background: #fbf7ec; color: var(--ah-ink); font: 900 1.25rem/1 var(--ah-display); letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.sm-gw__clickring { position: absolute; right: -12px; bottom: 6px; width: 22px; height: 22px; border: 3px solid var(--ah-steel-b); border-radius: 50%; box-shadow: 0 0 0 1.5px var(--ah-950), inset 0 0 0 1.5px var(--ah-950); }
.sm-gw__table { position: relative; z-index: 1; height: 34px; margin-top: -4px; border: 3px solid var(--ah-950); border-radius: 6px; background: linear-gradient(180deg, rgba(255, 220, 170, 0.2), transparent 4px), repeating-linear-gradient(177deg, rgba(0, 0, 0, 0.13) 0 2px, transparent 2px 12px), linear-gradient(180deg, #6a4428, #3a2414); box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.5); }
.sm-gw__caption { margin-top: 26px; text-align: center; color: var(--ah-paper); font: 900 clamp(1.4rem, 1.1rem + 1vw, 1.9rem)/1.1 var(--ah-display); letter-spacing: 0.01em; transition: opacity 0.5s ease, transform 0.5s ease; }
.sm-gw__caption b { color: var(--sm-ember-hi); }
.sm-gw__caption:not(.is-show) { opacity: 0; transform: translateY(8px); }
.sm-gw__controls { margin-top: 18px; text-align: center; }
.sm-gw__replay .sm-i { font-size: 1.1em; }
.sm-gw__honest { margin-top: 12px; text-align: center; color: var(--ah-fog); font-size: 0.95rem; font-weight: 600; }
.sm-gw__after-note { margin-top: 40px; }
@media (max-width: 860px) {
  .sm-gw__scene { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 0; text-align: center; }
  .sm-gw__booth, .sm-gw__after { width: min(100%, 360px); }
  .sm-gw__boothset, .sm-gw__afterset { justify-content: center; }
  .sm-gw__flight { width: 46px; height: 150px; margin: 18px auto 46px; align-self: center; }
  .sm-gw__tube { left: 8px; right: 8px; top: 6px; bottom: 6px; width: auto; height: auto; }
  .sm-gw__cap { top: auto; left: 1px; width: 44px; height: 14px; background: linear-gradient(90deg, var(--ah-brass-lo), var(--ah-brass-hi) 45%, var(--ah-brass)); }
  .sm-gw__cap--a { top: 0; } .sm-gw__cap--b { bottom: 0; right: auto; }
  .sm-gw__msg i { left: 50%; top: 0; width: 18px; height: 30px; margin: 0 0 0 -9px; }
  .sm-gw__msg i::after { left: -2px; right: -2px; top: 9px; bottom: auto; width: auto; height: 5px; border-inline: 0; border-block: 2px solid var(--ah-950); }
  .sm-gw__msg { transform: translateY(var(--at)); }
  .sm-gw__flightlab { left: calc(100% + 12px); right: auto; top: 50%; width: 130px; translate: 0 -50%; text-align: left; }
  .sm-gw__bowl { width: 200px; }
  .sm-gw__table { margin-top: 10px; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 860px) {
  .sm-gw__flight.is-go .sm-gw__msg { animation-name: sm-ride-y; }
}
/* the 60 days of texts ride from the booth to the store as little text bubbles on a dashed route (not capsules) */
.sm-gw__tube { border: 0; background: none; box-shadow: none; }
.sm-gw__tube::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed rgba(173, 229, 255, 0.5); }
.sm-gw__cap { display: none; }
.sm-gw__msg i { width: 30px; height: 20px; margin-top: -10px; border: 2px solid var(--ah-950); border-radius: 10px 10px 10px 3px; background: var(--ah-cream); box-shadow: 2px 2px 0 var(--sm-ember); }
.sm-gw__msg i::after { content: ""; position: absolute; left: 6px; right: 6px; top: 4px; bottom: auto; width: auto; height: 7px; border: 0; background: linear-gradient(var(--ah-ink-2), var(--ah-ink-2)) 0 0 / 100% 2px no-repeat, linear-gradient(var(--ah-ink-2), var(--ah-ink-2)) 0 5px / 60% 2px no-repeat; }
.sm-gw__msg:nth-child(even) i { border-radius: 10px 10px 3px 10px; background: var(--ah-blue); box-shadow: 2px 2px 0 var(--ah-950); }
@media (max-width: 860px) {
  .sm-gw__tube::before { left: 50%; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 2px dashed rgba(173, 229, 255, 0.5); }
  .sm-gw__msg i { left: 50%; top: 0; width: 30px; height: 20px; margin: 0 0 0 -15px; }
  .sm-gw__msg i::after { left: 6px; right: 6px; top: 4px; bottom: auto; width: auto; height: 7px; border: 0; }
}

/* --------------------------------------------------------------------------
   16. Email that lands: the envelope on the counter, flipped
   -------------------------------------------------------------------------- */
.sm-ev { position: relative; min-width: 0; }
.sm-ev__scene { position: relative; padding: 18px 0 36px; }
.sm-ev__scene > .ah-sample { top: 4px; left: 14px; right: auto; --tilt: -5deg; }
.sm-ev__env { position: relative; width: min(100%, 520px); margin: 0 auto; aspect-ratio: 8 / 5; perspective: 1400px; }
.sm-ev__flipbtn { position: absolute; inset: 0; z-index: 1; padding: 0; border: 0; border-radius: 10px; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sm-ev__flipbtn:focus-visible { outline-offset: 6px; }
.sm-ev__inner { position: absolute; inset: 0; z-index: 2; transform-style: preserve-3d; pointer-events: none; transition: transform 0.9s cubic-bezier(0.4, 0.1, 0.2, 1); }
.sm-ev.is-flipped .sm-ev__inner { transform: rotateY(180deg); }
.sm-ev__face { position: absolute; inset: 0; border: 3px solid var(--ah-950); border-radius: 8px; backface-visibility: hidden; -webkit-backface-visibility: hidden; font-family: var(--ah-mono); }
.sm-ev__face--shared {
  background:
    radial-gradient(circle at 30% 70%, rgba(60, 40, 15, 0.25) 0 1.2px, transparent 1.6px) 0 0 / 11px 9px,
    repeating-linear-gradient(93deg, transparent 0 3px, rgba(120, 95, 50, 0.07) 3px 4px),
    linear-gradient(160deg, #d6c49d, #c2ae84 70%, #b6a27a);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.6);
  transition: visibility 0s linear 0.45s;
}
.sm-ev.is-flipped .sm-ev__face--shared { visibility: hidden; }
.sm-ev:not(.is-flipped) .sm-ev__face--shared { transition-delay: 0s; }
.sm-ev__face--clean { background-color: #f3ead3; background-image: var(--ah-fiber); transform: rotateY(180deg); box-shadow: 8px 8px 0 var(--sm-ember); }
.sm-ev__smudge { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(60, 50, 35, 0.3), transparent 70%); }
.sm-ev__smudge--1 { left: 14%; bottom: 16%; width: 60px; height: 34px; rotate: -12deg; } .sm-ev__smudge--2 { right: 22%; top: 12%; width: 42px; height: 26px; }
.sm-ev__return { position: absolute; top: 8%; left: 5%; color: #3d3020; font-size: clamp(0.62rem, 1.6vw, 0.76rem); font-weight: 700; line-height: 1.5; }
.sm-ev__return--gold { color: var(--sm-ember-ink); font-weight: 800; }
.sm-ev__addr { position: absolute; left: 50%; top: 50%; color: #241b0e; font-size: clamp(0.72rem, 2vw, 0.95rem); font-weight: 700; line-height: 1.7; letter-spacing: 0.04em; transform: translate(-50%, -42%); white-space: nowrap; }
.sm-ev__postmark {
  position: absolute; z-index: 3; top: 6%; right: 24%; display: flex; align-items: center; justify-content: center;
  width: clamp(74px, 17vw, 96px); height: clamp(74px, 17vw, 96px); padding: 0; border: 2.5px dashed rgba(45, 34, 18, 0.75); border-radius: 50%; background: none;
  color: #2d2212; font: 800 clamp(0.5rem, 1.3vw, 0.6rem)/1.5 var(--ah-mono); letter-spacing: 0.08em; text-align: center; rotate: 8deg; cursor: pointer; pointer-events: auto;
}
.sm-ev__postmark:focus-visible { outline-color: var(--ah-ink); outline-offset: 2px; }
.sm-ev__postmark--clean { border-color: rgba(178, 53, 8, 0.7); color: var(--sm-ember-ink); cursor: default; pointer-events: none; }
.sm-ev__stamp { position: absolute; right: 8%; bottom: 12%; padding: 0.3em 0.6em 0.24em; border: 3.5px solid currentColor; border-radius: 8px; font: 900 clamp(1.15rem, 3.6vw, 1.7rem)/1 var(--ah-display); letter-spacing: 0.14em; opacity: 0; transform: rotate(-14deg) scale(0); transition: transform 0.18s cubic-bezier(0.2, 1.6, 0.4, 1), opacity 0.12s ease; -webkit-mask: var(--ah-speckle) 0 0 / 90px 90px; mask: var(--ah-speckle) 0 0 / 90px 90px; }
.sm-ev__stamp--spam { color: var(--ah-red-ink); border-style: dashed; }
.sm-ev__stamp--inbox { color: var(--ah-blue-ink); box-shadow: inset 0 0 0 2px #f3ead3, inset 0 0 0 3.5px currentColor; }
.sm-ev.is-slam1 .sm-ev__stamp--spam { opacity: 0.94; transform: rotate(-14deg) scale(1); }
.sm-ev.is-slam2 .sm-ev__stamp--inbox { opacity: 0.94; transform: rotate(-10deg) scale(1); }
/* the wax seal: Shmello ember */
.sm-ev__seal { position: absolute; left: 10%; bottom: 13%; width: 48px; height: 48px; border: 2.5px solid var(--ah-950); border-radius: 46% 54% 50% 48%; background: radial-gradient(circle at 36% 30%, #ff9b6e, var(--sm-ember) 50%, #8a2a07 92%); box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4); }
.sm-ev__seal::after { content: "S"; position: absolute; inset: 0; display: grid; place-items: center; color: #5c1a04; font: 900 1.3rem/1 var(--ah-display); }
.sm-ev__pool { position: absolute; z-index: 4; top: 30%; right: 6%; width: min(230px, 62%); padding: 10px 12px; border: 2px solid var(--ah-950); border-radius: 8px; background: #11151d; color: #c9d4e2; font: 600 0.74rem/1.65 var(--ah-body); box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.6); }
.sm-ev__pool b { display: block; margin-bottom: 4px; color: var(--ah-paper); font-size: 0.72rem; }
.sm-ev__pool span { display: block; color: var(--ah-fog); }
.sm-ev__pool .sm-ev__you { color: var(--sm-ember-hi); font-weight: 800; }
.sm-ev__tags { display: grid; gap: 10px; width: min(100%, 520px); margin: 22px auto 0; }
.sm-ev__tag { justify-self: start; padding: 6px 11px 5px; border: 2px solid var(--ah-950); border-radius: 4px; background: #11151d; color: #e8edf3; font: 700 0.84rem/1.35 var(--ah-body); box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.07), 2px 2px 0 var(--ah-blue); rotate: -0.8deg; }
.sm-ev__tag--2 { justify-self: end; rotate: 0.8deg; box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.07), 2px 2px 0 var(--sm-ember); }
.sm-ev__plate { position: absolute; right: 4%; bottom: 0; padding: 5px 12px 4px; border: 2px solid var(--ah-950); border-radius: 4px; background: linear-gradient(180deg, #fff1bf, #e2b44a 42%, #c9962e 70%, #e7bf52); color: #2b1f05; font: 800 0.62rem/1.3 var(--ah-body); letter-spacing: 0.16em; text-shadow: 0 1px 0 rgba(255, 245, 210, 0.75); box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55); }
.sm-ev__switch { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; width: fit-content; max-width: 100%; margin: 26px auto 0; padding: 6px; border: 2px solid var(--ah-950); border-radius: 12px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 4px), linear-gradient(180deg, #edf1f6, #c6cfdb 55%, #aab5c4); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.55); }
.sm-ev__sw { min-height: 44px; padding: 0 14px; border: 2px solid transparent; border-radius: 8px; background: none; color: var(--ah-ink); font: 800 0.8rem/1.2 var(--ah-body); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sm-ev__sw:hover { border-color: rgba(11, 20, 36, 0.4); }
.sm-ev__sw.is-on { border-color: var(--ah-950); background: var(--ah-ink); color: var(--sm-ember-core); }
.sm-ev__switch :focus-visible { outline-color: var(--ah-ink); }
.sm-ev .sm-rep { margin-top: 30px; }
@media (prefers-reduced-motion: reduce) { .sm-ev__face--shared { transition: none; } }
@media (max-width: 480px) { .sm-ev__sw { flex: 1 1 100%; } .sm-ev__switch { width: 100%; } .sm-ev__plate { right: 0; font-size: 0.56rem; letter-spacing: 0.1em; } }

/* --------------------------------------------------------------------------
   17. Websites + hosting: the site that builds itself, on a rack server
   -------------------------------------------------------------------------- */
.sm-sb { max-width: 900px; margin: 0 auto; }
.sm-sb__scene { position: relative; padding-bottom: 56px; }
.sm-sb__browser { position: relative; z-index: 3; width: min(680px, 94%); margin: 0 auto; border: 3px solid var(--ah-950); border-radius: 14px; background: #0d1728; box-shadow: 9px 9px 0 var(--ah-blue); rotate: -1.2deg; }
.sm-sb__browser > .ah-sample { top: -14px; right: 22px; }
.sm-sb__tabbar { display: flex; align-items: flex-end; gap: 12px; padding: 9px 14px 0; border-radius: 11px 11px 0 0; background: linear-gradient(180deg, #e3e9f0, #b9c3d0); border-bottom: 2px solid var(--ah-950); }
.sm-sb__dots { display: flex; gap: 6px; padding-bottom: 10px; }
.sm-sb__dots span { width: 11px; height: 11px; border: 1.5px solid var(--ah-950); border-radius: 50%; background: var(--ah-neon-pink); }
.sm-sb__dots span:nth-child(2) { background: var(--ah-gold); } .sm-sb__dots span:nth-child(3) { background: var(--ah-sky); }
.sm-sb__tab { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px 14px 8px; border: 2px solid var(--ah-950); border-bottom: 0; border-radius: 8px 8px 0 0; background: #fbfaf6; color: var(--ah-ink); font: 700 0.8rem/1 var(--ah-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-sb__fav { flex: none; width: 10px; height: 10px; border: 1.5px solid var(--ah-950); background: var(--sm-ember); rotate: 45deg; }
.sm-sb__urlbar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 2px solid var(--ah-950); background: #fbfaf6; }
.sm-sb__nav { display: flex; gap: 6px; color: #5a6a86; font-size: 0.9rem; }
.sm-sb__urlpill { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; padding: 6px 14px; border: 1.5px solid rgba(11, 20, 36, 0.35); border-radius: 999px; background: #eef1f6; }
.sm-sb__lock { color: #5a6a86; transition: color 0.4s; }
.sm-sb.is-built .sm-sb__lock { color: #1b7a43; }
.sm-sb__url { overflow: hidden; color: var(--ah-ink-2); font: 700 0.78rem/1 var(--ah-mono); white-space: nowrap; text-overflow: ellipsis; }
.sm-sb:not(.is-built) .sm-sb__url { font-style: normal; color: #5a6a86; }
@media (prefers-reduced-motion: no-preference) { .sm-sb.is-building .sm-sb__url { animation: sm-urlpulse 1.2s ease-in-out 4; } }
@keyframes sm-urlpulse { 50% { opacity: 0.45; } }
.sm-sb__live { flex: none; padding: 3px 9px 2px; border: 2px solid var(--ah-950); border-radius: 999px; background: #5fe39b; color: var(--ah-ink); font: 800 0.62rem/1.2 var(--ah-mono); letter-spacing: 0.14em; opacity: 0; transform: scale(0.85); transition: opacity 0.5s, transform 0.5s var(--ease-back); }
.sm-sb.is-built .sm-sb__live { opacity: 1; transform: none; }
.sm-sb__viewport { display: flex; flex-direction: column; gap: 11px; min-height: 256px; padding: 16px 16px 14px; background: radial-gradient(circle, rgba(173, 229, 255, 0.05) 1px, transparent 1.4px) 0 0 / 12px 12px, #0b1528; transition: background-color 0.8s; }
.sm-sb.is-v2 .sm-sb__viewport { background-color: #05080f; }
.sm-sb__sec { opacity: 0; transform: translateY(16px) scale(0.98); transition: opacity 0.55s ease, transform 0.6s cubic-bezier(0.2, 0.85, 0.3, 1.08); }
.sm-sb__sec.is-in { opacity: 1; transform: none; }
.sm-sb__hero { position: relative; overflow: hidden; padding: 18px 18px 16px; border: 2px solid var(--ah-950); border-radius: 10px; background: linear-gradient(140deg, #1b2842, #0d1830 55%, #111f38); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5); transition: background-color 0.8s, border-color 0.8s; }
.sm-sb.is-v2 .sm-sb__hero { background: linear-gradient(140deg, #111b30, #060d1b 60%, #0b1526); }
.sm-sb__hero-eyebrow { margin-bottom: 6px; color: var(--sm-ember-hi); font: 700 0.6rem/1 var(--ah-mono); letter-spacing: 0.24em; }
.sm-sb__hero-title { color: var(--ah-cream); font: 900 1.7rem/1.02 var(--ah-display); letter-spacing: 0.02em; text-transform: uppercase; }
.sm-sb__hero-sub { margin-top: 5px; color: var(--ah-fog); font-size: 0.8rem; }
.sm-sb__hero-cta { display: inline-block; margin-top: 11px; padding: 6px 13px; border: 2px solid var(--ah-950); border-radius: 999px; background: var(--sm-ember); color: var(--ah-ink); font: 800 0.74rem/1.1 var(--ah-body); }
.sm-sb__stars { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 11px 14px; border: 2px solid var(--ah-950); border-radius: 10px; background: #0c1628; transition: background-color 0.8s; }
.sm-sb.is-v2 .sm-sb__stars { background: #080f1d; }
.sm-sb__starrow { color: var(--ah-gold); font-size: 0.9rem; letter-spacing: 2.5px; line-height: 1; }
.sm-sb__starmeta { color: var(--ah-fog); font-size: 0.74rem; font-weight: 700; }
.sm-sb__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.sm-sb__chip { padding: 4px 10px 3px; border: 1.5px solid var(--ah-950); border-radius: 999px; background: var(--ah-cream); color: var(--ah-ink); font: 800 0.66rem/1.2 var(--ah-body); text-decoration: line-through; text-decoration-color: transparent; transition: opacity 0.6s, background-color 0.6s, text-decoration-color 0.6s; }
.sm-sb__chip--mute { background: #9aa7b8; }
.sm-sb.is-v2 .sm-sb__chip--mute { opacity: 0.35; text-decoration-color: var(--ah-ink); }
.sm-sb.is-v2 .sm-sb__chip:not(.sm-sb__chip--mute) { background: #ffe1d2; }
.sm-sb__hours { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; border: 2px solid var(--ah-950); border-radius: 10px; background: #0c1628; color: var(--ah-fog); font: 700 0.68rem/1.3 var(--ah-mono); letter-spacing: 0.06em; transition: background-color 0.8s; }
.sm-sb.is-v2 .sm-sb__hours { background: #080f1d; }
.sm-sb__fri { padding: 4px 11px 3px; border: 1.5px solid var(--ah-950); border-radius: 999px; background: linear-gradient(180deg, #fff1bf, #e2b44a); color: #2b1f05; font-weight: 800; }
.sm-sb__composer { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 2px solid var(--ah-950); border-radius: 0 0 11px 11px; background: #fbfaf6; }
.sm-sb__input { display: flex; flex: 1; align-items: center; min-width: 0; min-height: 40px; padding: 6px 16px; border: 1.5px solid rgba(11, 20, 36, 0.35); border-radius: 999px; background: #fffdf6; color: var(--ah-ink); font-size: 0.82rem; font-weight: 600; }
.sm-sb__ph { display: none; overflow: hidden; color: #5a6a86; white-space: nowrap; text-overflow: ellipsis; }
.sm-sb__input.is-empty .sm-sb__ph { display: inline; }
.sm-sb__typed { overflow: hidden; white-space: nowrap; }
.sm-sb__caret { flex: none; width: 2px; height: 16px; margin-left: 3px; border-radius: 1px; background: var(--sm-ember); }
@media (prefers-reduced-motion: no-preference) { html.js .sm-sb.is-building .sm-sb__caret { animation: ah-blink 1.05s steps(1) 5; } }
.sm-sb__send { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 2px solid var(--ah-950); border-radius: 50%; background: var(--sm-ember); color: var(--ah-ink); font-size: 1.15rem; box-shadow: 2px 2px 0 var(--ah-950); cursor: pointer; transition: translate 0.15s, box-shadow 0.15s; }
.sm-sb__send:hover { translate: -1px -1px; box-shadow: 3px 3px 0 var(--ah-950); }
.sm-sb__send:focus-visible { outline-color: var(--ah-ink); }
.sm-sb__send .sm-i { stroke-width: 2.6; }
/* the 1U rack server the site rides on */
.sm-sb__server {
  position: absolute; z-index: 2; left: 50%; bottom: 0; display: block; width: min(780px, 100%); height: 66px; margin: 0; padding: 0; translate: -50% 0;
  border: 3px solid var(--ah-950); border-radius: 6px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 3px), linear-gradient(180deg, #3a4456, #1a202c 50%, #151a24);
  color: inherit; text-align: left; box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.55); cursor: pointer;
}
.sm-sb__server:hover, .sm-sb__server:focus-visible, .sm-sb__server.is-open { z-index: 5; }
.sm-sb__row { display: flex; align-items: center; gap: 16px; height: 100%; padding: 0 40px; }
.sm-sb__ear { position: absolute; top: 6px; bottom: 6px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; width: 18px; padding: 6px 0; border: 2px solid var(--ah-950); border-radius: 3px; background: linear-gradient(180deg, #5d6a7d, #3a4456); }
.sm-sb__ear--l { left: 6px; } .sm-sb__ear--r { right: 6px; }
.sm-sb__screw { width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e3e9f0, #5d6a7d 65%); box-shadow: 0 0 0 1px var(--ah-950); }
.sm-sb__vents { flex: none; width: 112px; height: 32px; border: 2px solid var(--ah-950); border-radius: 3px; background: repeating-linear-gradient(90deg, #04060b 0 3px, #2a3142 3px 7px); }
.sm-sb__plate { flex: 1; min-width: 0; padding: 7px 10px 6px; border: 2px solid var(--ah-950); border-radius: 3px; background: #04060b; color: var(--ah-sky); font: 700 0.62rem/1.3 var(--ah-mono); letter-spacing: 0.16em; text-align: center; }
.sm-sb__leds { display: flex; flex: none; align-items: center; gap: 10px; }
.sm-sb__led { width: 10px; height: 10px; border-radius: 50%; background: #3a2f12; box-shadow: 0 0 0 1.5px var(--ah-950); }
.sm-sb.is-built .sm-sb__led--1 { background: #5fe39b; box-shadow: 0 0 0 1.5px var(--ah-950), 0 0 7px rgba(95, 227, 155, 0.85); }
.sm-sb.is-built .sm-sb__led--2 { background: var(--sm-ember-hi); box-shadow: 0 0 0 1.5px var(--ah-950), 0 0 7px rgba(255, 91, 31, 0.85); }
@media (prefers-reduced-motion: no-preference) {
  .sm-sb.is-building .sm-sb__led--1 { animation: sm-led 0.8s ease-in-out 6; }
  .sm-sb.is-building .sm-sb__led--2 { animation: sm-led 0.8s ease-in-out 0.4s 6; }
}
@keyframes sm-led { 50% { background: var(--sm-ember-hi); box-shadow: 0 0 0 1.5px var(--ah-950), 0 0 7px rgba(255, 91, 31, 0.85); } }
.sm-sb__tag { position: absolute; right: 14px; bottom: calc(100% + 12px); padding: 9px 14px; border: 2px solid var(--ah-950); border-radius: 8px; background-color: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink); font: 700 0.84rem/1.35 var(--ah-body); white-space: nowrap; box-shadow: 4px 4px 0 var(--sm-ember); opacity: 0; transform: translateY(7px); transition: opacity 0.25s, transform 0.25s; pointer-events: none; }
.sm-sb__tag::after { content: ""; position: absolute; right: 26px; top: 100%; border: 7px solid transparent; border-top-color: var(--ah-950); }
.sm-sb__server:hover .sm-sb__tag, .sm-sb__server:focus-visible .sm-sb__tag, .sm-sb__server.is-open .sm-sb__tag { opacity: 1; transform: none; }
.sm-sb__note { margin-top: 40px; }
@media (max-width: 640px) {
  .sm-sb__scene { padding-bottom: 0; }
  .sm-sb__browser { width: 100%; rotate: none; }
  .sm-sb__nav { display: none; }
  .sm-sb__tabbar { padding: 8px 10px 0; } .sm-sb__urlbar { padding: 8px 10px; }
  .sm-sb__viewport { min-height: 198px; padding: 12px; gap: 9px; }
  .sm-sb__hero { padding: 14px; } .sm-sb__hero-title { font-size: 1.35rem; }
  .sm-sb__chips { width: 100%; margin-left: 0; }
  .sm-sb__hours { gap: 7px; padding: 9px 11px; font-size: 0.62rem; }
  .sm-sb__server { position: relative; left: 0; translate: none; width: 100%; height: auto; min-height: 60px; margin-top: 16px; }
  .sm-sb__row { gap: 8px; min-height: 60px; padding: 8px 28px; }
  .sm-sb__vents { width: 30px; height: 28px; }
  .sm-sb__plate { padding: 5px 6px 4px; font-size: 0.58rem; letter-spacing: 0.06em; }
  .sm-sb__tag { left: 10px; right: 10px; white-space: normal; text-align: center; }
  .sm-sb__tag::after { right: 50%; margin-right: -7px; }
}

/* --------------------------------------------------------------------------
   18. The machines: the Shmello app's left menu, each item a link to its page
   -------------------------------------------------------------------------- */
.sm-menu { width: min(100%, 520px); justify-self: center; overflow: hidden; border: 3px solid var(--ah-950); border-radius: 14px; background: #0b1528; box-shadow: 9px 9px 0 var(--sm-ember); rotate: -0.4deg; }
.sm-menu__head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 2px solid var(--ah-950); background: #101d33; }
.sm-menu__head img { flex: none; width: 34px; height: 34px; }
.sm-menu__head b { color: var(--ah-paper); font: 900 1.45rem/1 var(--ah-display); letter-spacing: 0.04em; text-transform: uppercase; }
.sm-menu__dots { display: flex; gap: 5px; margin-left: auto; }
.sm-menu__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ah-mute); }
.sm-menu__list { display: grid; gap: 4px; margin: 0; padding: 8px; list-style: none; }
.sm-menu__item { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 12px; border: 2px solid transparent; border-radius: 10px; color: var(--ah-paper); text-decoration: none; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s, color 0.2s; }
.sm-menu__item:hover, .sm-menu__item:focus-visible { border-color: var(--ah-950); background: var(--ah-cream); color: var(--ah-ink); box-shadow: 3px 3px 0 var(--sm-ember); }
.sm-menu__item:focus-visible { outline: 3px solid var(--ah-sky); outline-offset: 2px; }
.sm-menu__ic { flex: none; color: var(--sm-ember-hi); font-size: 1.4rem; }
.sm-menu__item:hover .sm-menu__ic, .sm-menu__item:focus-visible .sm-menu__ic { color: var(--sm-ember-ink); }
.sm-menu__txt { display: grid; flex: 1; gap: 3px; min-width: 0; }
.sm-menu__txt b { font: 900 clamp(1.15rem, 1rem + 0.5vw, 1.4rem)/1.04 var(--ah-display); letter-spacing: 0.02em; text-transform: uppercase; }
.sm-menu__txt span { color: var(--ah-fog); font-size: 0.94rem; line-height: 1.35; }
.sm-menu__item:hover .sm-menu__txt span, .sm-menu__item:focus-visible .sm-menu__txt span { color: var(--ah-ink-2); }
.sm-menu__go { flex: none; color: var(--ah-mute); font-size: 1.1rem; }
.sm-menu__item:hover .sm-menu__go, .sm-menu__item:focus-visible .sm-menu__go { color: var(--ah-ink); }

/* --------------------------------------------------------------------------
   19. The value stack: the long receipt, and the marked-down price tag
   -------------------------------------------------------------------------- */
.sm-savings { --deco-at: 100% 100%; --deco-size: 38% 46%; }
.sm-vs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; align-items: center; justify-items: center; max-width: 940px; margin: 0 auto; }
@media (min-width: 860px) { .sm-vs { grid-template-columns: minmax(0, 1.05fr) auto minmax(0, 0.95fr); gap: 36px; } .sm-vs__totals { display: contents; } .sm-vs__arrow { rotate: -90deg; } }
.sm-vs__receipt { width: min(100%, 440px); --tilt: -1deg; }
.sm-vs__head { margin-bottom: 10px; padding-bottom: 12px; }
.sm-vs__code { display: block; width: 62%; height: 30px; margin: 0 auto; background: repeating-linear-gradient(90deg, var(--ah-ink) 0 2px, transparent 2px 4px, var(--ah-ink) 4px 7px, transparent 7px 8px, var(--ah-ink) 8px 9px, transparent 9px 12px); }
.sm-vs__receipt .ah-receipt__lines li { padding: 3px 0; font-size: 0.86rem; }
.sm-vs__receipt .ah-receipt__lines li b small { color: var(--ah-ink-2); font-size: 0.8em; font-weight: 700; }
.sm-vs__other b { color: var(--ah-red-ink); text-decoration: line-through; text-decoration-thickness: 3px; }
.sm-vs__other b small { font-size: 0.55em; text-decoration: none; }
.sm-vs__arrow { display: grid; place-items: center; width: 64px; height: 64px; border: 2px solid var(--ah-950); border-radius: 50%; background: #11151d; color: var(--sm-ember-hi); font-size: 2rem; box-shadow: 3px 3px 0 var(--sm-ember); }
.sm-vs__arrow .sm-i { stroke-width: 2.6; }
.sm-vs__tag { position: relative; padding-top: 50px; filter: var(--ah-outline) drop-shadow(7px 7px 0 var(--sm-ember)); rotate: 1.8deg; transform-origin: 50% 0; }
.sm-vs__string { position: absolute; left: 50%; top: 0; z-index: 2; width: 2.5px; height: 80px; margin-left: -1.25px; background: #e8dcc0; box-shadow: 0 0 0 1px var(--ah-950); }
.sm-vs__tagbody { position: relative; display: grid; justify-items: center; gap: 6px; width: min(86vw, 330px); padding: 64px 26px 28px; background-color: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink); text-align: center; clip-path: polygon(18% 0, 82% 0, 100% 44px, 100% 100%, 0 100%, 0 44px); }
.sm-vs__hole { position: absolute; left: 50%; top: 16px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: var(--ah-850); box-shadow: 0 0 0 2px var(--ah-950), 0 0 0 6px var(--ah-brass), 0 0 0 8px var(--ah-950); }
.sm-vs__label { display: inline-block; padding: 5px 12px 4px; background: var(--ah-ink); color: var(--ah-sky); font: 900 1.05rem/1.1 var(--ah-display); letter-spacing: 0.12em; text-transform: uppercase; rotate: -1.5deg; }
.sm-vs__num { color: var(--ah-ink); font: 900 clamp(3.6rem, 2.6rem + 3vw, 5rem)/0.9 var(--ah-display); text-shadow: 0.05em 0.05em 0 var(--sm-ember); white-space: nowrap; }
.sm-vs__num small { margin-left: 4px; color: var(--ah-ink-2); font-size: 0.36em; letter-spacing: 0.04em; text-shadow: none; }
.sm-vs__save { margin-top: 6px; padding: 6px 10px 5px; border: 3px solid var(--ah-blue-ink); border-radius: 8px; color: var(--ah-blue-ink); font: 900 1rem/1.15 var(--ah-display); letter-spacing: 0.06em; text-transform: uppercase; rotate: -3deg; box-shadow: inset 0 0 0 2px var(--ah-cream), inset 0 0 0 3.5px var(--ah-blue-ink); }
.sm-vs__btn { grid-column: 1 / -1; margin-top: 6px; }
@media (min-width: 860px) { .sm-vs__btn { grid-column: 3; margin-top: -6px; } }
.sm-vs__glovebox { max-width: 640px; margin-top: 60px; }
.sm-vs__glovebox b { font-weight: 800; }
@media (max-width: 380px) { .sm-vs__btn { width: 100%; } }

/* --------------------------------------------------------------------------
   20. The name: the squishable s'more on the counter
   -------------------------------------------------------------------------- */
.sm-smore { position: relative; display: grid; justify-items: center; padding-left: 0; }
.sm-smore__stack { position: relative; z-index: 2; display: grid; justify-items: center; width: min(100%, 300px); padding: 0; border: 0; border-radius: 16px; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform 0.2s var(--ease-out); }
.sm-smore__stack:active { transform: scale(0.97); }
.sm-smore__stack:focus-visible { outline-offset: 8px; }
.sm-smore__layer { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; border: 3px solid var(--ah-950); transition: transform 0.35s var(--ease-back); }
.sm-smore__layer--cracker {
  width: 100%; height: 56px; border-radius: 9px; color: #4a2c0c;
  background: radial-gradient(circle, #a8642a 0 2px, transparent 2.6px) 10px 8px / 22px 18px, linear-gradient(180deg, #e8b077, #cf8a4b 60%, #b9733a);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.55), inset 0 2px 0 rgba(255, 230, 190, 0.5);
}
.sm-smore__layer--top { z-index: 3; } .sm-smore__layer--bottom { z-index: 1; }
.sm-smore__layer--choc { z-index: 2; width: 92%; height: 36px; margin: -3px 0; border-radius: 4px; color: var(--ah-cream); background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 2px), rgba(0, 0, 0, 0.35) calc(25% - 2px) 25%), linear-gradient(180deg, #6b3b22, #4a2614); }
.sm-smore__layer--mallow { z-index: 2; width: 97%; height: 98px; margin: -3px 0; border-radius: 26px; color: var(--ah-ink); background: linear-gradient(180deg, #e9b98c, #fff3e2 30%, #fffaf0 60%, #f1dcc0); }
.sm-smore__layer--mallow img { width: 58px; height: 58px; }
.sm-smore__word { font: 900 1.05rem/1 var(--ah-display); letter-spacing: 0.14em; text-transform: uppercase; }
.sm-smore__mname { font: 900 1.55rem/1 var(--ah-display); letter-spacing: 0.04em; text-transform: uppercase; }
.sm-smore__tag { padding: 4px 9px 3px; border: 2px solid var(--ah-950); border-radius: 3px; background: #11151d; color: #e8edf3; font: 800 0.66rem/1.2 var(--ah-mono); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; box-shadow: 2px 2px 0 var(--ah-blue); }
.sm-smore__layer--mallow .sm-smore__tag { box-shadow: 2px 2px 0 var(--sm-ember); }
.sm-smore__stack.is-squish .sm-smore__layer--mallow { transform: scaleY(0.6) scaleX(1.12); }
.sm-smore__stack.is-squish .sm-smore__layer--top { transform: translateY(20px); }
.sm-smore__stack.is-squish .sm-smore__layer--bottom { transform: translateY(-20px); }
.sm-smore__stack.is-squish .sm-smore__layer--choc { transform: translateY(-6px); }
.sm-smore__stack.is-squish .sm-smore__layer--choc ~ .sm-smore__layer--choc { transform: translateY(6px); }
.sm-smore__plate { position: relative; z-index: 1; display: block; width: min(100%, 360px); height: 26px; margin-top: -10px; border: 3px solid var(--ah-950); border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, #f2f5f9 0 40%, #cfd7e1 60%, #9aa7b8); box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.5); }
.sm-smore__hint { margin-top: 18px; color: var(--ah-sky); font: 800 0.8rem/1.3 var(--ah-mono); letter-spacing: 0.16em; text-transform: uppercase; }
/* phones: each layer's label rides inside it; wide screens: label-maker strips to the left, on leader lines */
@media (max-width: 979px) {
  .sm-smore__layer--cracker, .sm-smore__layer--choc { flex-direction: column; gap: 4px; }
  .sm-smore__layer--cracker { height: 64px; } .sm-smore__layer--choc { height: 54px; }
  .sm-smore__layer--mallow { height: 112px; flex-wrap: wrap; align-content: center; column-gap: 10px; row-gap: 4px; }
  .sm-smore__layer--mallow .sm-smore__tag { flex-basis: auto; }
  .sm-smore__tag { padding: 3px 7px 2px; font-size: 0.6rem; }
}
@media (min-width: 980px) {
  .sm-smore { padding-left: 150px; }
  .sm-smore__tag { position: absolute; right: calc(100% + 30px); top: 50%; translate: 0 -50%; }
  .sm-smore__tag::after { content: ""; position: absolute; left: 100%; top: 50%; width: 30px; height: 2px; background: rgba(173, 229, 255, 0.55); }
  .sm-smore__layer--choc .sm-smore__tag { right: calc(100% + 30px + 4%); }
  .sm-smore__layer--choc .sm-smore__tag::after { width: calc(30px + 4%); }
  .sm-smore__plate { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   21. Pricing: two pawn tickets
   -------------------------------------------------------------------------- */
.sm-pricing .ah-pkgs { max-width: 820px; margin: 0 auto; }
@media (min-width: 760px) { .sm-pricing .ah-pkgs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; } }
.sm-pricing .ah-pkg__head { gap: 10px; }
.sm-pricing__mark { flex: none; width: 30px; height: 30px; }
.sm-pricing .ah-pkg--flag .ah-pkg__head { border-bottom-color: var(--sm-ember); }
.sm-pricing .ah-pkg--flag { box-shadow: 7px 7px 0 var(--sm-ember); }
.sm-pricing__notes { display: grid; justify-items: center; gap: 26px; margin-top: 56px; }
.sm-pricing__math { max-width: 620px; }
.sm-pricing__price-note { display: flex; align-items: center; justify-content: center; gap: 12px; max-width: 34em; color: var(--ah-fog); font-size: 1.02rem; font-weight: 600; text-align: left; }
.sm-pricing__price-note img { flex: none; width: 48px; height: 48px; rotate: -8deg; }

/* --------------------------------------------------------------------------
   22. FAQ: claim tickets in two columns
   -------------------------------------------------------------------------- */
.sm-faq__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 980px) { .sm-faq__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; } }
.sm-faq .ah-faq { max-width: none; margin: 0; }

/* --------------------------------------------------------------------------
   23. The booking band (Shmello texts its own booking calendar) and the closing
   band (the neon text bubble). The words and the closing line are the kit's.
   -------------------------------------------------------------------------- */
.sm-book .ah-book__copy p { max-width: 28em; }
.sm-bk { position: relative; width: min(100%, 330px); margin: 0 auto; rotate: 2deg; }
.sm-bk__body { position: relative; padding: 10px; border: 3px solid var(--ah-950); border-radius: 42px; background: linear-gradient(160deg, #3a4456, #1a202c 40%, #11151d); box-shadow: 9px 9px 0 var(--sm-ember), inset 0 0 0 2px rgba(255, 255, 255, 0.12); }
.sm-bk__island { position: absolute; z-index: 3; left: 50%; top: 20px; width: 30%; height: 20px; margin-left: -15%; border-radius: 999px; background: #05070c; }
.sm-bk__screen { position: relative; overflow: hidden; border: 2px solid var(--ah-950); border-radius: 32px; background-color: #f8f2e2; background-image: var(--ah-fiber); color: var(--ah-ink); }
.sm-bk__top { display: flex; align-items: center; gap: 10px; padding: 44px 16px 12px; border-bottom: 1.5px solid rgba(11, 20, 36, 0.15); background: #fbf7ec; }
.sm-bk__top img { flex: none; width: 40px; height: 40px; padding: 3px; border: 2px solid var(--ah-950); border-radius: 50%; background: #fff; }
.sm-bk__who { display: grid; gap: 1px; }
.sm-bk__who b { font: 800 0.98rem/1.15 var(--ah-body); }
.sm-bk__who span { color: var(--ah-ink-2); font-size: 0.74rem; font-weight: 700; }
.sm-bk__thread { display: grid; gap: 10px; padding: 18px 14px 26px; }
.sm-bk__bub { justify-self: start; max-width: 94%; padding: 11px 14px 10px; border: 2px solid var(--ah-950); border-radius: 18px 18px 18px 5px; background: #fff; box-shadow: 3px 3px 0 var(--ah-blue); }
/* the card's heading, written the way a text reads (sentence case, body type), not as a poster */
.sm-bk__h { color: var(--ah-ink); font: 800 1.14rem/1.3 var(--ah-body); letter-spacing: 0; text-transform: none; }
.sm-bk__p { color: var(--ah-ink-2); font-size: 0.98rem; font-weight: 600; line-height: 1.42; }
.sm-bk__slots { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0 0 0 4px; list-style: none; }
.sm-bk__slots li { padding: 7px 11px 6px; border: 2px solid var(--ah-950); border-radius: 999px; background: var(--ah-cream-2); color: var(--ah-ink); font: 800 0.78rem/1 var(--ah-body); }
.sm-bk__slots li:nth-child(2) { background: var(--ah-sky); box-shadow: 2px 2px 0 var(--ah-ink); }
.sm-bk__reply { justify-self: end; margin-top: 6px; }
.sm-bk__btn { --btn-shadow: var(--ah-ink); border-radius: 26px 26px 6px 26px; }
@media (prefers-reduced-motion: no-preference) {
  html.motion .sm-bk:not(.is-play) .sm-bk__bub, html.motion .sm-bk:not(.is-play) .sm-bk__slots li, html.motion .sm-bk:not(.is-play) .sm-bk__reply { opacity: 0; transform: translateY(10px) scale(0.92); }
  .sm-bk__bub, .sm-bk__slots li, .sm-bk__reply { transition: opacity 0.3s var(--ease-out), transform 0.5s var(--ease-back); }
  .sm-bk__slots li:nth-child(1) { transition-delay: 0.4s; } .sm-bk__slots li:nth-child(2) { transition-delay: 0.5s; } .sm-bk__slots li:nth-child(3) { transition-delay: 0.6s; }
  .sm-bk__bub--2 { transition-delay: 0.9s; } .sm-bk__reply { transition-delay: 1.35s; }
}

/* the closing band's sign: a neon text bubble on chains. Typing dots by default; a tap lights Delivered. */
.sm-nb { position: relative; display: block; width: min(100%, 460px); margin: 0 auto 50px; padding: 66px 0 0; border: 0; background: none; cursor: pointer; transform-origin: 50% 0; -webkit-tap-highlight-color: transparent; }
.sm-nb:focus-visible { outline: none; }
.sm-nb:focus-visible .sm-nb__svg { outline: 3px solid var(--ah-sky); outline-offset: 6px; border-radius: 16px; }
.sm-nb__chain { position: absolute; top: 0; width: 8px; height: 82px; background: radial-gradient(ellipse 45% 40% at 50% 50%, transparent 52%, #9aa7b8 58%, #5d6a7d 85%, transparent 90%) 0 0 / 100% 10px repeat-y; }
.sm-nb__chain--l { left: 18%; } .sm-nb__chain--r { right: 18%; }
.sm-nb__svg { display: block; width: 100%; height: auto; overflow: visible; }
.sm-nb__svg text { font: 900 46px/1 var(--ah-display); letter-spacing: 0.06em; }
.sm-nb__cord { position: absolute; right: 6%; top: calc(100% - 30px); width: 34px; height: 30px; border-left: 3px solid #1f2736; border-bottom: 3px solid #1f2736; border-radius: 0 0 0 16px; }
.sm-nb__cord::after { content: ""; position: absolute; right: -24px; bottom: -10px; width: 24px; height: 16px; border: 2px solid var(--ah-950); border-radius: 4px; background: linear-gradient(180deg, #4a5568, #1a202c); }
.nb-grid rect, .nb-grid path { fill: none; stroke: #1a2232; stroke-width: 3; }
.nb-glass path, .nb-glass circle { fill: none; stroke: rgba(255, 230, 220, 0.14); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.nb-lit path, .nb-lit circle { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.nb-lit .nb-halo { stroke-width: 20; opacity: 0.8; }
.nb-lit .nb-tube { stroke-width: 8.5; }
.nb-lit .nb-core { stroke-width: 3; }
.nb-lit--bubble .nb-halo, .nb-lit--bubble .nb-tube { stroke: var(--sm-ember); }
.nb-lit--bubble .nb-core { stroke: var(--sm-ember-core); }
.nb-lit--dots .nb-halo, .nb-lit--dots .nb-tube, .nb-lit--done .nb-halo, .nb-lit--done .nb-tube { stroke: var(--ah-neon-sky); }
.nb-lit--done .nb-core { stroke: var(--ah-neon-blue-core); }
.nb-lit--dots .nb-halo { stroke-width: 16; }
.nb-lit--dots .nb-tube { fill: var(--ah-neon-sky); stroke-width: 4; }
.nb-lit--dots .nb-core { fill: var(--ah-neon-blue-core); stroke: none; }
.nb-thalo { fill: var(--ah-neon-sky); opacity: 0.75; }
.nb-ttube { fill: var(--ah-neon-blue-core); stroke: var(--ah-neon-sky); stroke-width: 2.5; paint-order: stroke; }
.nb-hw circle { fill: #141c2c; stroke: var(--ah-950); stroke-width: 2; }
.nb-lit--dots, .nb-lit--done { transition: opacity 0.3s ease; }
.nb-lit--done { opacity: 0; }
.sm-nb[aria-pressed="true"] .nb-lit--done { opacity: 1; }
.sm-nb[aria-pressed="true"] .nb-lit--dots { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  html.motion .ah-final:not(.is-play) .nb-lit--bubble, html.motion .ah-final:not(.is-play) .nb-lit--dots { opacity: 0.05; }
  .ah-final.is-play .nb-lit--bubble { animation: ah-ignite 1.1s 0.1s both; }
  .ah-final.is-play .nb-dot { animation: sm-nbdot 1.1s ease-in-out 1s 3 both; }
  .ah-final.is-play .nb-dot--2 { animation-delay: 1.18s; } .ah-final.is-play .nb-dot--3 { animation-delay: 1.36s; }
  .sm-nb.is-relight .nb-lit--done { animation: ah-ignite2 0.8s 0.05s both; }
  .sm-nb:hover { animation: ah-sway 1.4s ease-in-out; }
}
@keyframes sm-nbdot { 0%, 100% { opacity: 1; } 45% { opacity: 0.18; } }

/* --------------------------------------------------------------------------
   24. The feature viewer (the original's lightbox modal, re-dressed as paper)
   -------------------------------------------------------------------------- */
.sm-modal { width: min(94vw, 780px); max-height: 92vh; padding: 0; border: 0; background: transparent; color: var(--ah-ink); overflow: visible; }
.sm-modal::backdrop { background: rgba(3, 6, 13, 0.86); }
.sm-modal__panel { position: relative; max-height: 92vh; overflow: auto; padding: 24px 24px 22px; border: 2px solid var(--ah-950); border-radius: 10px; background-color: var(--ah-cream); background-image: var(--ah-fiber); box-shadow: 8px 8px 0 var(--sm-ember); overscroll-behavior: contain; }
.sm-modal__title { padding-right: 40px; color: var(--ah-ink); font: 900 clamp(1.5rem, 1.15rem + 1.2vw, 2.1rem)/1.04 var(--ah-display); letter-spacing: 0.02em; text-transform: uppercase; }
.sm-modal__desc { max-width: 42em; margin: 10px 0 16px; color: var(--ah-ink-2); font-size: 1rem; line-height: 1.55; }
.sm-modal__shot { display: block; width: 100%; height: auto; border: 2px solid var(--ah-950); border-radius: 6px; background: #fff; }
.sm-modal__x { position: absolute; z-index: 3; top: -16px; right: -10px; display: grid; place-items: center; width: 46px; height: 46px; margin: 0; padding: 0; border: 2px solid var(--ah-950); border-radius: 50%; background: var(--ah-cream); box-shadow: 3px 3px 0 var(--ah-950); cursor: pointer; }
.sm-modal__x svg { width: 14px; height: 14px; stroke: var(--ah-ink); stroke-width: 2.4; stroke-linecap: round; }
.sm-modal__x:focus-visible { outline-color: var(--sm-ember-hi); }
.sm-modal__mascot { position: absolute; z-index: 3; right: -14px; bottom: -26px; width: 86px; height: 86px; rotate: 10deg; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .sm-modal[open] .sm-modal__panel { animation: ah-pop 0.4s var(--ease-back) both; } }
@media (max-width: 520px) { .sm-modal__panel { padding: 20px 16px 18px; } .sm-modal__mascot { width: 64px; height: 64px; right: -6px; bottom: -18px; } }

/* --------------------------------------------------------------------------
   25. The Shmello scroll guide (Jeff KEEP): a sticker that talks, section by
   section. It lives only in a real side gutter (1440px and up), never over the
   content, never bottom-right, and stays off phones and small laptops.
   -------------------------------------------------------------------------- */
.sm-guide { position: fixed; z-index: 40; left: 10px; bottom: calc(18px + env(safe-area-inset-bottom)); display: none; flex-direction: column-reverse; align-items: flex-start; gap: 8px; width: calc((100vw - 1200px) / 2 - 22px); pointer-events: none; opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
@media (min-width: 1440px) { .sm-guide { display: flex; } }
.sm-guide.is-on { opacity: 1; transform: none; }
.sm-guide__bubble { max-width: 100%; padding: 8px 10px 7px; border: 2px solid var(--ah-950); border-radius: 14px 14px 14px 4px; background: var(--ah-cream); color: var(--ah-ink); font: 700 0.8rem/1.3 var(--ah-body); box-shadow: 3px 3px 0 var(--sm-ember); opacity: 0; transform: translateY(6px); transition: opacity 0.35s ease, transform 0.35s ease; }
.sm-guide.is-talk .sm-guide__bubble { opacity: 1; transform: none; }
.sm-guide__img { width: 64px; height: 64px; transition: transform 0.3s var(--ease-back); }
.sm-guide.is-talk .sm-guide__img { transform: scale(1.08) rotate(-3deg); }
body.menu-open .sm-guide { opacity: 0; }
@media print { .sm-guide, .sm-modal { display: none !important; } }