/* ==========================================================================
   AFTER HOURS: Websites (prefix ws-)
   This page's own shop: the browser window. Shared pieces come from css/theme.css.
   hero: real client homepages hang in the shop window (the desktop site, and the same site on a phone)
   work: the pegboard wall of real homepages captured to the footer; each glides down to its own
         "Made by Pawn Leads" credit, circled in ink; phones get the phone capture in a phone frame
   credit: a real client footer in a small browser, the credit circled ("there it is"), the brass nameplate
   does: the claim ticket (four rows) + the website wired into the shop: cords to Ads, List, Reviews
   speed: the parking lot test, two phones on the dash at night (FAST and SLOW, no seconds)
   price: the empty peg: a blank browser (yourshop.com, a blinking cursor) with the price tag on a string
   book: your site, under review: a dated placeholder site, grease pencil, the sticky note with Book Your Call
   final: a neon browser window that lights block by block like a page loading (tap re-runs it)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared bits: the phone frame (hero, speed) and the pink grease-pencil ink
   -------------------------------------------------------------------------- */
.ws-ph {
  position: relative; padding: 5px; border: 2.5px solid var(--ah-950); border-radius: 22px;
  background: linear-gradient(160deg, #3a4456, #1a202c 40%, #11151d);
  box-shadow: 6px 6px 0 var(--ah-blue), inset 0 0 0 1.5px rgba(255, 255, 255, 0.12);
}
.ws-ph__screen { position: relative; display: block; aspect-ratio: 9 / 19.2; overflow: hidden; border: 1.5px solid var(--ah-950); border-radius: 16px; background: #fbfaf6; }
.ws-ph__screen > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.ws-ph__island { position: absolute; z-index: 3; left: 50%; top: 10px; width: 30%; height: 8px; margin-left: -15%; border-radius: 99px; background: #05070c; }

/* the ink ring: a hand-drawn loop in hot pink over a dark under-stroke, so it reads on any footer color.
   It sits over the credit (positions in container units: --x/--b/--w/--h, set per site from the capture) */
.ws-ink { position: absolute; z-index: 2; left: calc(var(--x, 30) * 1cqw); bottom: calc(var(--b, 2) * 1cqw); width: calc(var(--w, 20) * 1cqw); height: calc(var(--h, 5) * 1cqw); overflow: visible; pointer-events: none; }
.ws-ink path { fill: none; stroke: var(--ah-neon-pink); stroke-width: 4px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 0.6px #03060d) drop-shadow(1.5px 1.5px 0 rgba(3, 6, 13, 0.85)); }

/* --------------------------------------------------------------------------
   HERO: the shop window. Three real homepages hang on chains, fanned like
   cards; the front one (bigdogpawn.com) scrolls itself slowly, and the same
   site on a phone leans on it and scrolls in step. One pause holds both.
   -------------------------------------------------------------------------- */
.ws-hero .ah-phero__copy { position: relative; z-index: 2; }
.ws-stack { position: relative; width: min(100%, 560px); margin: 0 auto; padding-bottom: 78px; }
/* the window's light printed on the bricks behind (halftone, no blur) */
.ws-stack::before {
  content: ""; position: absolute; z-index: -1; left: -14%; right: -14%; top: 0; bottom: 20px; pointer-events: none;
  background: radial-gradient(circle, rgba(47, 155, 255, 0.34) 1.5px, transparent 1.9px) 0 0 / 10px 10px;
  -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 100%); mask-image: radial-gradient(closest-side, #000 20%, transparent 100%);
}
.ws-stack__hang { position: relative; padding: 58px 9% 0 3%; }
.ws-stack__chain {
  position: absolute; z-index: 4; top: 0; width: 8px; height: 66px;
  background: radial-gradient(ellipse 45% 40% at 50% 50%, transparent 52%, #9aa7b8 58%, #5d6a7d 85%, transparent 90%) 0 0 / 100% 10px repeat-y;
}
.ws-stack__chain--l { left: 18%; } .ws-stack__chain--r { right: 25%; }
.ws-stack .ah-browser__screen { aspect-ratio: 4 / 3; }
/* the front frame: screw eyes where the chains hook in */
.ws-stack__front { --tilt: -1.2deg; z-index: 3; transform-origin: 50% 0; }
.ws-stack__front::before, .ws-stack__front::after {
  content: ""; position: absolute; z-index: 5; top: -10px; width: 16px; height: 16px; border: 3px solid #9aa7b8; border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--ah-950), inset 0 0 0 1.5px var(--ah-950);
}
.ws-stack__front::before { left: calc(17% - 4px); } .ws-stack__front::after { right: calc(18.5% - 4px); }
.ws-stack__front .ah-browser__win { position: relative; box-shadow: 8px 8px 0 var(--ah-blue); }
/* the scrolling screenshots keep their own height; the loop slides them up the window and back */
.ws-stack__screen > img, .ws-stack__pscreen > img { height: auto; object-fit: fill; }
/* the two behind sit back in the dark */
.ws-stack__back { position: absolute; z-index: 1; top: 58px; left: 3%; right: 9%; width: auto; max-width: none; }
.ws-stack__back .ah-browser__win { position: relative; box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.6); }
.ws-stack__back .ah-browser__win::after { content: ""; position: absolute; inset: 0; background: rgba(5, 9, 18, 0.42); }
.ws-stack__back--a { --tilt: 6.5deg; translate: 12% -10%; scale: 0.86; }
.ws-stack__back--b { --tilt: -5.5deg; translate: -14% 12%; scale: 0.86; }
/* the same site on a phone, leaning on the front frame */
.ws-stack__phone { position: absolute; z-index: 5; right: -1%; bottom: -44px; width: 25%; rotate: 4deg; }
/* the Live light on the address bar */
.ws-live {
  flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px 2px;
  border: 1.5px solid var(--ah-950); border-radius: 4px; background: #11151d; color: var(--ah-sky);
  font: 800 0.62rem/1 var(--ah-mono); letter-spacing: 0.14em; text-transform: uppercase;
}
.ws-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ah-neon-sky); box-shadow: 0 0 5px 1px rgba(143, 214, 255, 0.85); }
/* the honest tag on the front frame */
.ws-stack__tag {
  position: absolute; z-index: 6; left: 18px; bottom: -13px;
  padding: 4px 10px 3px; border: 1.5px solid var(--ah-950); border-radius: 3px; background: var(--ah-blue); color: var(--ah-ink);
  font: 800 0.72rem/1.2 var(--ah-mono); letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 0 rgba(3, 6, 13, 0.18), 2px 2px 0 var(--ah-950); rotate: -2.5deg;
}
.ws-stack__hand { position: absolute; z-index: 6; left: 34%; bottom: -66px; flex-direction: row-reverse; rotate: -3deg; }
.ws-stack__hand .ah-hand__arrow { scale: -1 -1; translate: 0 -10px; }
.ws-stack__pause { position: absolute; z-index: 7; left: 3%; bottom: 0; }
@media (prefers-reduced-motion: no-preference) {
  html.motion .ws-stack__screen > img, html.motion .ws-stack__pscreen > img { animation: ws-scroll 22s ease-in-out infinite; }
}
/* both screenshots show 41.6% of their height in their windows (the desktop one is 1589 tall on 880 in a 4:3
   window; the phone one is 2000 css px of a 390 wide page in a 9:19.2 screen), so one loop fits both */
@keyframes ws-scroll {
  0%, 8% { transform: translateY(0); }
  46%, 58% { transform: translateY(-58.4%); }
  92%, 100% { transform: translateY(0); }
}
@media (max-width: 999px) and (min-width: 768px) { .ws-hero__object { margin-top: 10px; } }

/* PHONES: the first screen is headline, a compact picture (the desktop frame + the phone, about 290px), the
   first lead line and the buttons; the rest of the lead moves under them. (Page-scoped version of the kit's
   planned phone hero order: the shared kit change is not in theme.css yet.) */
@media (max-width: 767px) {
  .ws-hero .ah-phero__grid { gap: 0; }
  .ws-hero .ah-phero__copy { display: contents; }
  .ws-hero .ah-crumbs { order: 1; margin-bottom: 16px; }
  .ws-hero .ah-kicker { order: 2; margin-bottom: 12px; }
  .ws-hero .ah-phero__h { order: 3; margin-bottom: 14px; }
  .ws-hero .ws-hero__object { order: 4; margin: 0 0 40px; }
  .ws-hero .ws-hero__lead1 { order: 5; margin-bottom: 20px; }
  .ws-hero .ws-hero__actions { order: 6; }
  .ws-hero .ws-hero__lead2 { order: 7; margin: 26px 0 0; }
  .ws-hero .ws-hero__note { order: 8; }
  .ws-stack { width: 100%; max-width: 440px; padding-bottom: 0; }
  .ws-stack::before { left: -6%; right: -6%; }
  .ws-stack__hang { padding: 34px 31% 0 0; }
  .ws-stack__chain { height: 42px; }
  .ws-stack__chain--l { left: 13%; } .ws-stack__chain--r { right: calc(31% + 13%); }
  .ws-stack__front::before { left: calc(13% - 4px); } .ws-stack__front::after { right: calc(13% - 4px); }
  .ws-stack__front .ah-browser__win { box-shadow: 6px 6px 0 var(--ah-blue); }
  .ws-stack .ah-browser__bar { height: 30px; padding: 0 8px; gap: 5px; }
  .ws-stack .ah-browser__bar i { width: 9px; height: 9px; }
  .ws-stack .ah-browser__url { margin-left: 2px; padding: 2px 8px; font-size: 0.7rem; }
  .ws-stack .ws-live { padding: 2px 5px 1px; font-size: 0.56rem; letter-spacing: 0.1em; }
  .ws-stack__back, .ws-stack__hand { display: none; }
  .ws-stack__phone { right: 0; bottom: -26px; width: 30%; rotate: 3deg; }
  .ws-ph.ws-stack__phone { padding: 4px; border-radius: 18px; box-shadow: 4px 4px 0 var(--ah-blue), inset 0 0 0 1.5px rgba(255, 255, 255, 0.12); }
  .ws-stack__phone .ws-ph__screen { border-radius: 13px; }
  .ws-stack__phone .ws-ph__island { top: 8px; height: 6px; }
  .ws-stack__tag { left: 10px; bottom: -12px; font-size: 0.64rem; }
  .ws-stack__pause { left: auto; right: calc(31% + 10px); bottom: -24px; }
}

/* --------------------------------------------------------------------------
   WORK: the pegboard wall. Each real homepage hangs from a peg on a wire,
   tilted, with a cream name tag on a string under it (the tag is the only link).
   Hover or focus glides the page down to its own footer, where the credit gets
   circled in ink; touch screens glide once on view (websites.js adds .is-peek).
   Below 768px each frame turns into a phone holding the phone-width capture.
   -------------------------------------------------------------------------- */
.ws-folio { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 60px; max-width: 1140px; margin: 0 auto; padding: 0; list-style: none; }
@media (min-width: 768px) {
  .ws-folio { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 66px clamp(28px, 4vw, 48px); }
  .ws-site:nth-child(2n) { margin-top: 56px; }
}
@media (min-width: 1100px) {
  .ws-folio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 70px 44px; }
  .ws-site:nth-child(2n) { margin-top: 0; }
  .ws-site:nth-child(3n+2) { margin-top: 60px; }
  .ws-site:nth-child(3n) { margin-top: 22px; }
}
.ws-site { position: relative; min-width: 0; padding-top: 46px; --x: var(--dx); --b: var(--db); --w: var(--dw); --h: var(--dh); }
.ws-site__frame { --tilt: -1.3deg; max-width: none; transform-origin: 50% -36px; transition: rotate 0.45s var(--ease-back); }
.ws-site:nth-child(2) .ws-site__frame { --tilt: 1.2deg; }
.ws-site:nth-child(3) .ws-site__frame { --tilt: -0.6deg; }
.ws-site:nth-child(4) .ws-site__frame { --tilt: 1.5deg; }
.ws-site:nth-child(5) .ws-site__frame { --tilt: -1deg; }
.ws-site .ws-site__frame:focus-within, .ws-site .ws-site__frame.is-peek { --tilt: 0deg; }
.ws-site .ah-browser__win { position: relative; box-shadow: 7px 7px 0 rgba(3, 6, 13, 0.72); }
.ws-site__screen { aspect-ratio: 4 / 3.3; container-type: inline-size; }
.ws-site__screen picture { display: contents; }
.ws-site__screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: object-position 4.5s ease-in-out; }
.ws-site__frame:focus-within .ws-site__screen img, .ws-site__frame.is-peek .ws-site__screen img { object-position: 50% 100%; }
/* the ink ring waits for the glide to land on the footer, then sweeps itself around the credit (left to right) */
.ws-site .ws-ink { opacity: 0; clip-path: inset(0 100% 0 0); transition: opacity 0.15s, clip-path 0.1s; }
.ws-site__frame:focus-within .ws-ink, .ws-site__frame.is-peek .ws-ink { opacity: 1; clip-path: inset(0 0 0 0); transition: opacity 0.2s 4.35s, clip-path 0.75s var(--ease-out) 4.4s; }
/* hover only where there is a real pointer (a tap on iOS leaves :hover stuck, so touch screens use .is-peek, set by websites.js) */
@media (hover: hover) {
  .ws-site .ws-site__frame:hover { --tilt: 0deg; }
  .ws-site__frame:hover .ws-site__screen img { object-position: 50% 100%; }
  .ws-site__frame:hover .ws-ink { opacity: 1; clip-path: inset(0 0 0 0); transition: opacity 0.2s 4.35s, clip-path 0.75s var(--ease-out) 4.4s; }
}
/* the peg and the hanging wire */
.ws-site__peg { position: absolute; z-index: 3; left: 50%; top: -44px; width: 16px; height: 16px; margin-left: -8px; border: 2px solid var(--ah-950); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f2f5f9, #9aa7b8 55%, #5d6a7d); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5); }
.ws-site__wire { position: absolute; z-index: 2; left: 14%; width: 72%; top: -38px; height: 40px; overflow: visible; }
.ws-site__wire path, .ws-peg__wire path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ws-site__wire .w-ink, .ws-peg__wire .w-ink { stroke: var(--ah-950); stroke-width: 5; }
.ws-site__wire .w-in, .ws-peg__wire .w-in { stroke: #e8dcc0; stroke-width: 2.5; }
/* the name tag: a cream price tag on a string, the point toward the frame's corner */
.ws-site__tag { position: relative; z-index: 4; width: min(94%, 340px); margin: 22px 0 0 3%; rotate: var(--tag-r, 1.2deg); }
.ws-site:nth-child(2n) .ws-site__tag { margin-left: auto; margin-right: 3%; --tag-r: -1deg; }
.ws-site__link { display: block; border-radius: 8px; color: var(--ah-ink); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.ws-site__link:focus-visible { outline: 3px solid var(--ah-sky); outline-offset: 5px; }
.ws-site__paper { position: relative; filter: var(--ah-outline) drop-shadow(5px 5px 0 var(--ah-blue)); transition: filter 0.2s; }
.ws-site__paper::before { content: ""; position: absolute; z-index: 2; left: 31px; top: -24px; width: 2.5px; height: calc(50% + 24px); background: #e8dcc0; }
.ws-site__body {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 12px 14px 12px 56px;
  background-color: var(--ah-cream); background-image: var(--ah-fiber);
  clip-path: polygon(24px 0, 100% 0, 100% 100%, 24px 100%, 0 50%);
}
.ws-site__body::before { content: ""; position: absolute; left: 25px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: #0d1527; box-shadow: 0 0 0 2px var(--ah-950), 0 0 0 5px var(--ah-brass), 0 0 0 7px var(--ah-950); }
.ws-site__txt { flex: 1 1 auto; min-width: 0; }
.ws-site__name { font: 900 1.34rem/1.02 var(--ah-display); letter-spacing: 0.03em; text-transform: uppercase; color: var(--ah-ink); }
.ws-site__where { display: block; margin-top: 5px; color: var(--ah-ink-2); font: 700 0.76rem/1.3 var(--ah-mono); letter-spacing: 0; }
.ws-site__go { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid var(--ah-ink); border-radius: 50%; background: var(--ah-sky); transition: rotate 0.3s var(--ease-back), background-color 0.2s; }
.ws-site__go svg { width: 18px; height: 18px; fill: none; stroke: var(--ah-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ws-site__link:hover .ws-site__go, .ws-site__link:focus-visible .ws-site__go { background: var(--ah-blue); rotate: 45deg; }
.ws-site__link:hover .ws-site__name { color: var(--ah-blue-ink); }
.ws-site__link:hover .ws-site__paper { filter: var(--ah-outline) drop-shadow(7px 7px 0 var(--ah-blue)); }
/* the +30 tag on its own peg */
.ws-more { display: grid; justify-items: center; align-content: start; padding-top: 30px; }
.ws-more .ws-more__peg { top: 22px; }
.ws-more__tag { --str: 40px; width: min(100%, 320px); }
.ws-more .ah-ptag__body { padding-bottom: 30px; }
.ws-more .ah-ptag__num { margin-bottom: 12px; }

/* PHONES: each frame becomes a phone (bezel, island, a Safari-style address bar above the screen) holding the
   phone-width capture; two across (three from 560px), staggered on the pegboard */
@media (max-width: 767px) {
  .ws-site { --x: var(--mx); --b: var(--mb); --w: var(--mw); --h: var(--mh); padding-top: 40px; }
  .ws-folio { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 18px; }
  .ws-site:nth-child(2n) { margin-top: 38px; }
  .ws-site__frame { --tilt: -0.8deg; width: min(100%, 210px); margin-inline: auto; }
  .ws-site:nth-child(2n) .ws-site__frame { --tilt: 0.8deg; }
  .ws-site .ws-site__frame:focus-within, .ws-site .ws-site__frame.is-peek { --tilt: 0deg; }
  .ws-site__peg { top: -38px; }
  .ws-site__wire { top: -32px; height: 34px; left: 18%; width: 64%; }
  .ws-site .ah-browser__win { padding: 18px 5px 5px; border-width: 2.5px; border-radius: 24px; background: linear-gradient(160deg, #3a4456, #1a202c 40%, #11151d); box-shadow: 5px 5px 0 rgba(3, 6, 13, 0.72), inset 0 0 0 1.5px rgba(255, 255, 255, 0.12); }
  .ws-site .ah-browser__win::before { content: ""; position: absolute; left: 50%; top: 6px; width: 28%; height: 7px; margin-left: -14%; border-radius: 99px; background: #05070c; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); }
  .ws-site .ah-browser__bar { height: 24px; margin: 0 0 4px; padding: 0 4px 0 8px; gap: 4px; border: 1.5px solid var(--ah-950); border-radius: 99px; background: #f3f0e6; }
  .ws-site .ah-browser__bar i { display: none; }
  .ws-site .ah-browser__url { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; font-size: 0.6rem; }
  .ws-site .ws-live { gap: 3px; padding: 2px 4px 1px; font-size: 0.48rem; letter-spacing: 0.08em; }
  .ws-site .ws-live::before { width: 4px; height: 4px; }
  .ws-site__screen { aspect-ratio: 9 / 19.2; border: 1.5px solid var(--ah-950); border-radius: 16px; }
  .ws-site__tag { width: 100%; margin: 18px 0 0; --tag-r: 1deg; }
  .ws-site:nth-child(2n) .ws-site__tag { margin: 18px 0 0; --tag-r: -1deg; }
  .ws-site__paper::before { left: 18px; top: -20px; height: calc(50% + 20px); }
  .ws-site__body { gap: 6px; min-height: 60px; padding: 9px 8px 9px 34px; clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%); }
  .ws-site__body::before { left: 14px; width: 9px; height: 9px; margin-top: -4.5px; box-shadow: 0 0 0 2px var(--ah-950), 0 0 0 4px var(--ah-brass), 0 0 0 5.5px var(--ah-950); }
  .ws-site__name { font-size: 1.02rem; overflow-wrap: anywhere; }
  .ws-site__where { margin-top: 3px; font-size: 0.66rem; }
  .ws-site__go { width: 30px; height: 30px; }
  .ws-site__go svg { width: 14px; height: 14px; }
  .ws-more { padding-top: 26px; }
  .ws-more .ws-more__peg { top: 18px; }
  .ws-more__tag { --str: 30px; }
  .ws-more .ah-ptag__body { padding: 46px 12px 22px; }
  .ws-more .ah-ptag__num { font-size: 2.8rem; }
  .ws-more .ah-ptag__body p:not(.ah-ptag__num) { font-size: 0.92rem; line-height: 1.45; }
}
@media (min-width: 560px) and (max-width: 767px) {
  .ws-folio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ws-site:nth-child(2n) { margin-top: 0; }
  .ws-site:nth-child(3n+2) { margin-top: 44px; }
  .ws-site:nth-child(3n) { margin-top: 16px; }
}
@media (max-width: 359px) {
  .ws-folio { gap: 40px 12px; }
  .ws-site__body { padding-left: 28px; }
  .ws-site__go { display: none; }
}

/* the signature: a real client footer in a small browser, the credit circled; the brass maker's plate as its label */
.ah-wall__foot.ws-credit { display: grid; justify-items: center; gap: 22px; max-width: 900px; }
.ah-wall__foot.ws-credit p + p { margin-top: 0; }
.ws-credit__lead { color: var(--ah-fog); }
.ws-credit__shot { position: relative; display: grid; justify-items: center; width: min(100%, 600px); margin: 0; }
.ws-credit__frame { --tilt: -0.8deg; }
.ws-credit__frame .ah-browser__win { box-shadow: 7px 7px 0 rgba(3, 6, 13, 0.72); }
.ws-credit__screen { aspect-ratio: auto; container-type: inline-size; }
.ws-credit__screen > img { height: auto; object-fit: fill; }
@media (prefers-reduced-motion: no-preference) {
  html.motion .ws-credit:not(.is-play) .ws-ink--static { clip-path: inset(0 100% 0 0); }
  .ws-credit .ws-ink--static { transition: clip-path 0.9s var(--ease-out) 0.5s; }
  html.motion .ws-credit:not(.is-play) .ws-credit__hand { opacity: 0; translate: 0 8px; }
  .ws-credit__hand { transition: opacity 0.3s 1.2s, translate 0.4s var(--ease-back) 1.2s; }
}
.ws-credit__hand { position: absolute; z-index: 3; right: 2%; bottom: 4px; rotate: -5deg; color: var(--ah-sky); }
.ws-credit__hand .ah-hand__arrow { rotate: 200deg; translate: 0 -12px; }
.ws-credit__sig { margin-top: 26px; }
.ws-sig { font-size: 1.35rem; rotate: -1deg; }
@media (max-width: 640px) {
  .ws-credit__hand { right: 0; bottom: -40px; font-size: 0.98rem; }
  .ws-credit__sig { margin-top: 46px; }
}

/* --------------------------------------------------------------------------
   DOES: the claim ticket for a Pawn Leads website. Four rows tick in turn;
   each row's stamp is a picture (shield, footprints, list, megaphone).
   Beside it, the website plugged into the shop: cords to Ads, List, Reviews.
   -------------------------------------------------------------------------- */
.ws-does .ah-split { align-items: start; }
.ws-does .ah-split__copy .ah-h2 { max-width: 8.6em; }
.ws-ticket { width: 100%; max-width: 660px; margin: 0 auto; }
.ws-ticket__no { letter-spacing: 0.12em; text-transform: uppercase; }
/* a round rubber seal (double ring) with the row's picture, inked a little crooked */
.ws-stamp { display: grid; place-items: center; width: 58px; height: 58px; padding: 0; border-radius: 50%; }
.ws-stamp svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.ws-nobr { white-space: nowrap; }
.ws-ticket .ah-trow p + p { margin-top: 6px; }
.ws-ticket .ah-trow:nth-child(2) .ws-stamp { rotate: 8deg; }
.ws-ticket .ah-trow:nth-child(3) .ws-stamp { rotate: -12deg; }
.ws-ticket .ah-trow:nth-child(4) .ws-stamp { rotate: 4deg; }
@media (prefers-reduced-motion: no-preference) {
  .ws-ticket .ah-trow:nth-child(3) .ah-trow__box svg { transition-delay: 0.95s; }
  .ws-ticket .ah-trow:nth-child(4) .ah-trow__box svg { transition-delay: 1.25s; }
  .ws-ticket .ah-trow:nth-child(4) .ah-stamp { transition-delay: 1.65s, 1.65s; }
}
/* phones: the seal is stamped in the left margin under the tick and the number (never on a row of its own) */
@media (max-width: 700px) {
  .ws-ticket .ah-trow { grid-template-areas: "box n txt" "stamp stamp txt"; grid-template-rows: auto 1fr; }
  .ws-stamp { grid-area: stamp; justify-self: center; align-self: start; width: 46px; height: 46px; margin: 4px 0 0; border-width: 3px; }
  .ws-stamp svg { width: 22px; height: 22px; }
}
/* the website wired into the shop */
.ws-wired { position: relative; width: min(100%, 440px); margin: clamp(30px, 4vw, 46px) 0 0; }
.ws-wired__art { display: block; width: 100%; height: auto; overflow: visible; }
.ws-wired__art .wr-site rect:first-child { fill: var(--ah-cream); stroke: var(--ah-950); stroke-width: 2.5; }
.ws-wired__art .wr-bar { stroke: var(--ah-950); stroke-width: 2.5; }
.ws-wired__art .wr-d1, .ws-wired__art .wr-d2, .ws-wired__art .wr-d3 { stroke: var(--ah-950); stroke-width: 1.5; }
.ws-wired__art .wr-d1 { fill: var(--ah-neon-pink); } .ws-wired__art .wr-d2 { fill: var(--ah-gold); } .ws-wired__art .wr-d3 { fill: var(--ah-sky); }
.ws-wired__art .wr-blk { fill: #cfe6f7; stroke: var(--ah-950); stroke-width: 1.5; }
.ws-wired__art .wr-blk--2 { fill: #e3d9bf; }
.ws-wired__art .wr-cord-ink { fill: none; stroke: var(--ah-950); stroke-width: 8; stroke-linecap: round; }
.ws-wired__art .wr-cord { fill: none; stroke: #c9d1dc; stroke-width: 4.5; stroke-linecap: round; }
.ws-wired__art .wr-strip { fill: #5d6a7d; stroke: var(--ah-950); stroke-width: 2.5; }
.ws-wired__art .wr-out rect { fill: #1a202c; stroke: var(--ah-950); stroke-width: 2; }
.ws-wired__art .wr-plug rect { fill: #e3e9f0; stroke: var(--ah-950); stroke-width: 2; }
.ws-wired__art .wr-switch { fill: #2a3142; stroke: var(--ah-950); stroke-width: 2; }
.ws-wired__art .wr-led { fill: var(--ah-neon-pink); stroke: var(--ah-950); stroke-width: 1.5; filter: drop-shadow(0 0 4px var(--ah-neon-pink)); }
.ws-wired__tags { position: relative; height: 38px; margin: 2px 0 0; padding: 0; list-style: none; }
.ws-wired__tag {
  position: absolute; top: 4px; translate: -50% 0; padding: 4px 10px 3px; border: 1.5px solid var(--ah-950); border-radius: 3px;
  background: #11151d; color: #e8edf3; font: 800 0.74rem/1.2 var(--ah-mono); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.07), 2px 2px 0 var(--ah-blue);
}
.ws-wired__tag--1 { left: 35.7%; rotate: -2deg; } .ws-wired__tag--2 { left: 54.8%; rotate: 1.5deg; } .ws-wired__tag--3 { left: 73.8%; rotate: -1deg; }
.ws-wired__cap { margin-top: 18px; }
.ws-wired__cap p { color: var(--ah-fog); font-size: 1.08rem; line-height: 1.55; }
.ws-wired__cap p:first-child { color: var(--ah-paper); font-weight: 800; }
.ws-wired__cap p + p { margin-top: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .ws-wired .wr-cord, .ws-wired .wr-cord-ink { stroke-dasharray: 1; stroke-dashoffset: 0; }
  html.motion .ws-wired:not(.is-play) .wr-cord, html.motion .ws-wired:not(.is-play) .wr-cord-ink { stroke-dashoffset: 1; }
  html.motion .ws-wired:not(.is-play) .wr-led { opacity: 0.15; }
  html.motion .ws-wired:not(.is-play) .ws-wired__tag { opacity: 0; translate: -50% 8px; }
  .ws-wired .wr-cord, .ws-wired .wr-cord-ink { transition: stroke-dashoffset 0.8s var(--ease-out); }
  .ws-wired .wr-cord--2, .ws-wired .wr-cord-ink--2 { transition-delay: 0.2s; }
  .ws-wired .wr-cord--3, .ws-wired .wr-cord-ink--3 { transition-delay: 0.4s; }
  .ws-wired .wr-led { transition: opacity 0.2s steps(2) 1.1s; }
  .ws-wired__tag { transition: opacity 0.3s, translate 0.45s var(--ease-back); transition-delay: 0.9s; }
  .ws-wired__tag--2 { transition-delay: 1.05s; } .ws-wired__tag--3 { transition-delay: 1.2s; }
}
@media (max-width: 979px) { .ws-wired { margin-inline: auto; } }
/* phones: smaller tags, and the middle one hangs a little lower so List and Reviews never touch */
@media (max-width: 520px) {
  .ws-wired__tags { height: 50px; }
  .ws-wired__tag { padding: 3px 6px 2px; font-size: 0.64rem; letter-spacing: 0.08em; }
  .ws-wired__tag--2 { top: 18px; }
}

/* --------------------------------------------------------------------------
   SPEED: the parking lot test. The windshield at night, the lit shop ahead,
   two phones on the dash. Ours is there at once; the template spins until a
   thumb taps back ("never mind."). Finished at rest; plays once on view; the
   round button runs it again (about 4.5 seconds, finite).
   -------------------------------------------------------------------------- */
.ws-speed { --deco-at: 0 0; --deco-size: 42% 60%; }
.ws-lot { position: relative; width: min(100%, 940px); margin: 0 auto; }
.ws-lot__scene {
  position: relative; aspect-ratio: 16 / 9.4; overflow: hidden; border: 3px solid var(--ah-950); border-radius: 34px 34px 16px 16px;
  background: #070d1a; box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.55); container-type: inline-size;
}
.ws-lot__glass { position: absolute; inset: 0 0 26% 0; overflow: hidden; }
.ws-lot__view { position: absolute; inset: 0; width: 100%; height: 100%; }
.ws-lot__view .lv-sky { fill: #0a1222; }
.ws-lot__view .lv-far { fill: #0d1628; }
.ws-lot__view .lv-shop { fill: #1a2234; stroke: var(--ah-950); stroke-width: 3; }
.ws-lot__view .lv-roof { fill: none; stroke: #2c3850; stroke-width: 6; stroke-linecap: round; }
.ws-lot__view .lv-sign { fill: #fff1d6; stroke: var(--ah-950); stroke-width: 3; }
.ws-lot__view .lv-signtxt { fill: var(--ah-ink); font: 900 26px/1 var(--ah-display); letter-spacing: 0.24em; text-anchor: middle; }
.ws-lot__view .lv-win { fill: #3b2f1c; stroke: var(--ah-950); stroke-width: 3; }
.ws-lot__view .lv-glow { opacity: 0.85; }
.ws-lot__view .lv-door { fill: #2a2418; stroke: var(--ah-950); stroke-width: 3; }
.ws-lot__view .lv-bracket { fill: none; stroke: #9aa7b8; stroke-width: 3; }
.ws-lot__view .lv-ball { fill: var(--ah-gold); stroke: var(--ah-950); stroke-width: 2; }
.ws-lot__view .lv-lot { fill: #111827; }
.ws-lot__view .lv-spill { opacity: 0.55; }
.ws-lot__view .lv-line { fill: none; stroke: rgba(238, 244, 251, 0.5); stroke-width: 4; }
.ws-lot__view .lv-stop { fill: none; stroke: rgba(238, 244, 251, 0.35); stroke-width: 6; }
/* the glass: a cool streak of reflection and the two pillars */
.ws-lot__glass::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(118deg, transparent 0 22%, rgba(200, 230, 255, 0.07) 22% 31%, transparent 31% 35%, rgba(200, 230, 255, 0.05) 35% 38%, transparent 38%); }
.ws-lot__glass::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(100deg, #05080f 0 3.5%, transparent 3.6% 96.4%, #05080f 96.5%); }
.ws-lot__mirror { position: absolute; z-index: 2; left: 50%; top: 0; width: 17%; height: 9%; translate: -50% 0; border: 2.5px solid var(--ah-950); border-top: 0; border-radius: 0 0 14px 14px; background: linear-gradient(180deg, #2a3142, #11151d); box-shadow: inset 0 -3px 0 rgba(173, 229, 255, 0.12); }
.ws-lot__dash {
  position: absolute; z-index: 2; left: -4%; right: -4%; bottom: 0; height: 32%;
  border-top: 3px solid var(--ah-950); border-radius: 50% 50% 0 0 / 30% 30% 0 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1.4px) 0 0 / 6px 6px, linear-gradient(180deg, #232b3a, #141a26 40%, #0c111b);
}
.ws-lot__vent { position: absolute; bottom: 22%; width: 13%; height: 16%; border: 2px solid var(--ah-950); border-radius: 8px; background: repeating-linear-gradient(180deg, #05080f 0 3px, #2a3142 3px 6px); }
.ws-lot__vent--l { left: 9%; } .ws-lot__vent--r { right: 9%; }
.ws-lot__lanes { position: absolute; z-index: 3; inset: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12%; align-items: end; padding: 0 15% 3.5%; }
.ws-lane { position: relative; display: grid; justify-items: center; gap: 8px; min-width: 0; }
.ws-lane__who {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px 4px; border: 2px solid var(--ah-950); border-radius: 4px; background: #11151d; color: #e8edf3;
  font: 700 0.74rem/1.25 var(--ah-mono); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.07), 2px 2px 0 var(--ah-blue); rotate: -1deg;
}
.ws-lane__who::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ah-neon-sky); box-shadow: 0 0 0 2px #11151d, 0 0 8px var(--ah-neon-sky); }
.ws-lane--theirs .ws-lane__who { rotate: 1deg; box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.07), 2px 2px 0 var(--ah-neon-pink); }
.ws-lane--theirs .ws-lane__who::before { background: var(--ah-neon-pink); box-shadow: 0 0 0 2px #11151d, 0 0 8px var(--ah-neon-pink); }
.ws-dash { position: relative; width: min(100%, 18.6cqw); padding-bottom: 12px; }
.ws-dash__phone { z-index: 2; }
.ws-lane--ours .ws-dash__phone { rotate: -2deg; }
.ws-lane--theirs .ws-dash__phone { rotate: 2deg; }
.ws-dash__arm { position: absolute; z-index: 1; left: 50%; bottom: 0; width: 26%; height: 22px; translate: -50% 0; border: 2px solid var(--ah-950); border-radius: 6px 6px 3px 3px; background: linear-gradient(90deg, #2a3142, #4a5568 50%, #2a3142); }
.ws-lane__word { justify-self: center; min-width: 4.4em; text-align: center; text-transform: uppercase; font-size: 1.1rem; }
/* ours: the real homepage, there at once */
.ws-lane__screen { background: #fbfaf6; }
.ws-lane__blank { position: absolute; z-index: 2; inset: 0; background: #fbfaf6; opacity: 0; }
/* theirs: the template, a progress bar that crawls and a spinner that spins */
.ws-tpl { display: flex; flex-direction: column; gap: 6%; padding: 0 0 8%; background: #e9ebef; }
.ws-tpl__bar { display: flex; align-items: center; gap: 6%; height: 10%; padding: 22% 6% 0; box-sizing: content-box; background: #d5d9df; }
.ws-tpl__back { display: grid; place-items: center; width: 18%; aspect-ratio: 1; border-radius: 50%; background: #fbfbfc; }
.ws-tpl__back svg { width: 62%; height: 62%; fill: none; stroke: #1565c0; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ws-tpl__url { flex: 1; height: 46%; border-radius: 99px; background: #fbfbfc; }
.ws-tpl__prog { position: relative; height: 1.4%; min-height: 3px; margin-top: -6%; background: #d5d9df; }
.ws-tpl__prog span { position: absolute; left: 0; top: 0; bottom: 0; width: 30%; background: var(--ah-blue); }
.ws-tpl__blk { height: 7%; margin: 0 8%; border-radius: 4px; background: #d5d9df; }
.ws-tpl__blk--hero { height: 24%; margin-top: 2%; }
.ws-tpl__blk--short { width: 50%; }
.ws-tpl__spin { position: absolute; left: 50%; top: 52%; width: 30%; aspect-ratio: 1; translate: -50% -50%; border: 4px solid #c3c9d2; border-top-color: var(--ah-blue); border-radius: 50%; rotate: 40deg; }
/* the thumb (cream, ink outline) on the back arrow; the hand note */
.ws-thumb { position: absolute; z-index: 4; left: 4%; top: 15%; width: 40%; pointer-events: none; rotate: 24deg; transform-origin: 50% 0; }
.ws-thumb svg { display: block; width: 100%; height: auto; overflow: visible; }
.ws-thumb .th-skin { fill: var(--ah-cream); stroke: var(--ah-950); stroke-width: 3; }
.ws-thumb .th-nail { fill: #fff8ea; stroke: var(--ah-950); stroke-width: 2; }
.ws-thumb .th-line { fill: none; stroke: var(--ah-950); stroke-width: 2; stroke-linecap: round; }
.ws-lane__hand { position: absolute; z-index: 5; right: -30%; top: 28%; font-size: 1.15rem; rotate: -6deg; color: var(--ah-sky); text-shadow: 0 0 3px #070d1a, 0 0 2px #070d1a; }
.ws-lot .ah-sample { z-index: 6; }
.ws-lot__again { position: absolute; z-index: 6; top: 14px; right: 14px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 2px solid var(--ah-paper); border-radius: 50%; background: var(--ah-800); color: var(--ah-paper); box-shadow: 3px 3px 0 var(--ah-blue); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: translate 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out); }
.ws-lot__again:hover, .ws-lot__again:focus-visible { translate: -2px -2px; box-shadow: 5px 5px 0 var(--ah-blue); }
.ws-lot__again:active { translate: 2px 2px; box-shadow: 1px 1px 0 var(--ah-blue); }
.ws-lot__again[hidden] { display: none; }
.ws-lot__again svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ws-lot__note { margin-top: 22px; text-align: center; color: var(--ah-fog); font-size: 1rem; font-weight: 600; }
/* the race (motion only; without it the scene rests on the result) */
@media (prefers-reduced-motion: no-preference) {
  html.motion .ws-lot .ws-lane__blank { opacity: 1; }
  html.motion .ws-lot .ws-lane__word { opacity: 0.14; }
  html.motion .ws-lot .ws-tpl__prog span { width: 2%; }
  html.motion .ws-lot .ws-thumb { opacity: 0; translate: 90% 160%; }
  html.motion .ws-lot .ws-lane__hand { opacity: 0; scale: 0.6; }
  html.motion .ws-lot.is-play .ws-lane__blank { animation: ws-gone 0.2s steps(1, end) 0.35s forwards; }
  html.motion .ws-lot.is-play .ws-lane--ours .ws-lane__word { animation: ws-lit 0.25s steps(2, end) 0.55s forwards; }
  html.motion .ws-lot.is-play .ws-tpl__prog span { animation: ws-crawl 3.4s cubic-bezier(0.2, 0.7, 0.3, 1) 0.2s forwards; }
  html.motion .ws-lot.is-play .ws-tpl__spin { animation: ah-spin 0.9s linear 4; }
  html.motion .ws-lot.is-play .ws-lane--theirs .ws-lane__word { animation: ws-lit 0.25s steps(2, end) 3.5s forwards; }
  html.motion .ws-lot.is-play .ws-thumb { animation: ws-thumb 0.8s var(--ease-out) 3.4s forwards; }
  html.motion .ws-lot.is-play .ws-lane__hand { animation: ws-note 0.5s var(--ease-back) 4.1s forwards; }
}
@keyframes ws-gone { to { opacity: 0; } }
@keyframes ws-lit { to { opacity: 1; } }
@keyframes ws-crawl { to { width: 30%; } }
@keyframes ws-thumb { 0% { opacity: 1; translate: 90% 160%; } 70% { opacity: 1; translate: 0 0; scale: 1; } 85% { scale: 0.92; } 100% { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes ws-note { to { opacity: 1; scale: 1; } }
@media (min-width: 561px) and (max-width: 860px) {
  .ws-lane__who { gap: 6px; padding: 4px 8px 3px; font-size: 0.64rem; letter-spacing: 0.08em; }
  .ws-lane__word { font-size: 0.95rem; }
  .ws-lane__hand { right: -40%; font-size: 1rem; }
}
/* phones: the scene grows to fit the two phones, and the shop (sign, lit windows, three balls) sits in a band
   across the top of the windshield, above the phone labels. The lot keeps going under the phones. */
@media (max-width: 560px) {
  .ws-lot__scene { aspect-ratio: auto; border-radius: 26px 26px 14px 14px; }
  .ws-lot__glass { bottom: 24%; background: #111827; }
  .ws-lot__dash { height: 26%; }
  .ws-lot__view { inset: 0 auto auto 50%; width: 400px; height: 150px; max-width: none; translate: -50% 0; }
  .ws-lot__mirror { width: 15%; height: 26px; }
  .ws-lot__lanes { position: relative; inset: auto; gap: 6%; padding: 112px 6% 18px; }
  .ws-lane__who { gap: 6px; padding: 4px 7px 3px; font-size: 0.6rem; letter-spacing: 0.08em; }
  .ws-dash { width: min(100%, 38cqw, 170px); }
  .ws-ph.ws-dash__phone { padding: 4px; border-radius: 18px; box-shadow: 4px 4px 0 var(--ah-blue), inset 0 0 0 1.5px rgba(255, 255, 255, 0.12); }
  .ws-dash__phone .ws-ph__screen { border-radius: 13px; }
  .ws-dash__phone .ws-ph__island { top: 8px; height: 6px; }
  .ws-lane__word { font-size: 0.95rem; }
  .ws-lane__hand { right: 2px; top: -33px; font-size: 0.95rem; white-space: nowrap; }
  .ws-lot__again { top: auto; right: auto; left: 50%; bottom: 10px; margin-left: -22px; }
  .ws-lot .ah-sample { font-size: 0.6rem; }
}
@media (max-width: 359px) { .ws-lane__hand { right: -8px; font-size: 0.86rem; } }

/* --------------------------------------------------------------------------
   PRICE: the empty peg at the end of the wall. The straight answer on the
   left; in the middle a blank browser on a peg (yourshop.com, the cursor
   blinks a few times and rests) with the price tag hanging from it; the fine
   print and the ask on the right. Stacks on phones.
   -------------------------------------------------------------------------- */
.ws-price-band { --vig-at: 50% 40%; }
.ws-price-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; align-items: center; justify-items: center; text-align: center; }
@media (min-width: 1000px) {
  .ws-price-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 470px) minmax(0, 1fr); gap: clamp(28px, 3vw, 52px); justify-items: stretch; }
  .ws-price__say { justify-self: end; text-align: right; }
  .ws-price__fine { text-align: left; }
}
.ws-price__say { max-width: 10em; color: var(--ah-paper); font: 900 clamp(2.1rem, 1.3rem + 2vw, 3.1rem)/0.98 var(--ah-display); letter-spacing: 0.01em; text-shadow: 0.035em 0.035em 0 var(--ah-950); text-wrap: balance; }
.ws-price__say .ah-accent { display: block; margin-bottom: 0.08em; }
.ws-peg { position: relative; display: grid; justify-items: center; width: min(100%, 470px); margin-inline: auto; padding-top: 50px; }
.ws-peg__nail { position: absolute; z-index: 3; left: 50%; top: 0; width: 18px; height: 18px; margin-left: -9px; border: 2px solid var(--ah-950); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f2f5f9, #9aa7b8 55%, #5d6a7d); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5); }
.ws-peg__wire { position: absolute; z-index: 2; left: 14%; top: 8px; width: 72%; height: 44px; overflow: visible; }
.ws-blank { --tilt: -1deg; transform-origin: 50% -40px; }
.ws-blank .ah-browser__win { position: relative; box-shadow: 8px 8px 0 rgba(3, 6, 13, 0.72); }
.ws-blank .ah-browser__url { display: flex; align-items: center; }
.ws-caret { flex: none; display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; background: var(--ah-ink); }
@media (prefers-reduced-motion: no-preference) { html.motion .ws-caret { animation: ah-blink 1s steps(1, end) 0.6s 4; } }
.ws-blank__screen {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto 1fr auto; gap: 5% 5%; padding: 6%;
  aspect-ratio: 16 / 10; background: #fbfaf6;
  background-image: radial-gradient(circle, rgba(21, 101, 192, 0.12) 1px, transparent 1.3px); background-size: 12px 12px;
}
.ws-blank__g { border: 2px dashed rgba(11, 20, 36, 0.24); border-radius: 6px; }
.ws-blank__g--nav { grid-column: 1 / -1; height: 18px; }
.ws-blank__g--hero { grid-column: 1 / -1; min-height: 40px; }
.ws-blank__g--c { height: 44px; }
/* the price tag on its string, under the frame */
.ws-price { --str: 34px; width: min(88%, 360px); margin-top: -6px; }
.ws-price .ah-ptag__body { padding-top: 50px; padding-bottom: 26px; }
.ws-price__h { display: grid; justify-items: center; gap: 12px; margin: 0; }
.ws-price__num { font: 900 clamp(3rem, 2rem + 3vw, 4.4rem)/0.86 var(--ah-display); letter-spacing: 0.005em; color: var(--ah-ink); text-shadow: 0.05em 0.05em 0 var(--ah-blue); white-space: nowrap; }
.ws-price__cap { max-width: 15em; font: 800 clamp(1rem, 0.94rem + 0.3vw, 1.18rem)/1.25 var(--ah-body); color: var(--ah-ink-2); text-wrap: balance; }
.ws-price__fine { max-width: 28em; }
.ws-price__fine p { color: var(--ah-fog); font-size: 1.1rem; line-height: 1.6; }
.ws-price__fine p + p { margin-top: 10px; }
.ws-price__fine .ah-actions { margin-top: 26px; justify-content: center; }
@media (min-width: 1000px) { .ws-price__fine .ah-actions { justify-content: flex-start; } }

/* --------------------------------------------------------------------------
   BOOK: your site, under review. A dated placeholder page (grey, no real
   business) on the counter, two grease-pencil circles that draw themselves,
   and the sticky note holding Book Your Call (the confirm card comes first).
   -------------------------------------------------------------------------- */
.ws-book__actions { margin-top: 26px; }
.ws-review { position: relative; width: min(100%, 520px); margin-inline: auto; padding: 22px 0 110px; }
.ws-review__label { position: absolute; z-index: 4; left: 16px; top: 0; }
.ws-review__frame { --tilt: 0.8deg; }
.ws-review__frame .ah-browser__win { position: relative; box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.55); }
.ws-old {
  display: flex; flex-direction: column; align-items: center; gap: 4%; padding: 5% 6% 4%; aspect-ratio: 400 / 260;
  background: #c5c9cf; color: #2c3440; font-family: "Times New Roman", Times, Georgia, serif; text-align: center;
}
.ws-old__head { color: #1f3a93; font-size: clamp(1.05rem, 0.8rem + 1.2vw, 1.5rem); font-weight: 700; font-style: italic; text-decoration: underline; text-underline-offset: 3px; }
.ws-old__strip { width: 72%; padding: 2px 0; border: 2px solid #4d5562; background: repeating-linear-gradient(135deg, #9ea6b1 0 10px, #d8dce1 10px 20px); color: #11151d; font: 700 0.86rem/1.4 "Courier New", Courier, monospace; letter-spacing: 0.12em; text-transform: uppercase; }
.ws-old__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4%; width: 88%; }
.ws-old__row i { aspect-ratio: 4 / 3; border: 2px outset #e7e9ec; background: #aeb4bc; }
.ws-old__lines { display: grid; gap: 6px; width: 80%; }
.ws-old__lines i { height: 6px; background: #9ea6b1; }
.ws-old__lines i:last-child { width: 60%; justify-self: center; }
.ws-old__foot { align-self: flex-start; margin-top: auto; padding-left: 2%; font: 0.74rem/1.3 "Times New Roman", Times, serif; color: #3a4250; }
.ws-old__foot b { font-weight: 400; }
.ws-pencil { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ws-pencil path { fill: none; stroke: #c4281c; stroke-width: 3px; stroke-linecap: round; stroke-linejoin: round; opacity: 0.92; stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  html.motion .ws-review:not(.is-play) .ws-pencil path { stroke-dashoffset: 1; }
  .ws-pencil path { transition: stroke-dashoffset 0.8s var(--ease-out) 0.3s; }
  .ws-pencil .ws-pencil__b { transition-delay: 0.9s; }
  .ws-pencil .ws-pencil__q { transition-delay: 1.5s; }
}
.ws-review__shelf { position: absolute; z-index: 0; left: -6%; right: -6%; bottom: 82px; height: 22px; border: 2px solid var(--ah-950); border-radius: 3px; background: linear-gradient(180deg, rgba(255, 220, 170, 0.18), transparent 3px), repeating-linear-gradient(177deg, rgba(0, 0, 0, 0.14) 0 2px, transparent 2px 11px), linear-gradient(180deg, #6a4428, #3a2414); box-shadow: 0 6px 0 rgba(0, 0, 0, 0.45); }
/* the sticky note: yellow stock, masking tape, ink text, the button */
.ws-note {
  position: absolute; z-index: 5; right: -2%; bottom: 0; display: grid; justify-items: start; gap: 10px; width: min(76%, 270px); padding: 26px 20px 20px;
  border: 2px solid var(--ah-950); border-radius: 3px; background-color: #ffef9a; background-image: var(--ah-fiber); color: var(--ah-ink);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.55); rotate: 2deg;
}
.ws-note::before { content: ""; position: absolute; left: 50%; top: -13px; width: 92px; height: 26px; margin-left: -46px; 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; }
.ws-note__h { font: 900 1.6rem/1 var(--ah-display); letter-spacing: 0.02em; text-transform: uppercase; color: var(--ah-ink); }
.ws-note__p { color: var(--ah-ink-2); font-size: 0.98rem; font-weight: 600; line-height: 1.4; }
.ws-note__btn { margin-top: 4px; }
.ws-note :focus-visible { outline-color: var(--ah-ink); }
@media (max-width: 520px) {
  .ws-review { padding-bottom: 0; }
  .ws-review__shelf { bottom: auto; top: calc(22px + 64vw * 0.66); display: none; }
  .ws-note { position: relative; right: auto; bottom: auto; width: min(92%, 300px); margin: 8px 0 0 auto; }
}

/* --------------------------------------------------------------------------
   FINAL: the neon browser window. The frame, the three dot bulbs, the address
   bar, then the page blocks light one after another like a site loading.
   Tap re-runs it (finite, under 2 seconds).
   -------------------------------------------------------------------------- */
.ws-neon { position: relative; display: block; width: min(100%, 470px); margin: 0 auto 54px; padding: 62px 0 0; border: 0; background: none; cursor: pointer; transform-origin: 50% 0; -webkit-tap-highlight-color: transparent; }
.ws-neon:focus-visible { outline: none; }
.ws-neon:focus-visible .ws-neon__svg { outline: 3px solid var(--ah-sky); outline-offset: 6px; border-radius: 18px; }
.ws-neon__chain { position: absolute; top: 0; width: 8px; height: 76px; background: radial-gradient(ellipse 45% 40% at 50% 50%, transparent 52%, #9aa7b8 58%, #5d6a7d 85%, transparent 90%) 0 0 / 100% 10px repeat-y; }
.ws-neon__chain--l { left: 18%; } .ws-neon__chain--r { right: 18%; }
.ws-neon__svg { display: block; width: 100%; height: auto; overflow: visible; }
.ws-neon__cord { position: absolute; left: 6%; top: calc(100% - 8px); width: 34px; height: 30px; border-right: 3px solid #1f2736; border-bottom: 3px solid #1f2736; border-radius: 0 0 16px 0; }
.ws-neon__cord::after { content: ""; position: absolute; left: -24px; bottom: -10px; width: 24px; height: 16px; border: 2px solid var(--ah-950); border-radius: 4px; background: linear-gradient(180deg, #4a5568, #1a202c); }
.wn-glass rect, .wn-glass path { fill: none; stroke: rgba(200, 230, 255, 0.14); stroke-width: 8; stroke-linecap: round; }
.wn path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.wn .wn-halo { stroke-width: 17; opacity: 0.8; }
.wn .wn-tube { stroke-width: 7; }
.wn .wn-core { stroke-width: 2.4; }
.wn .wn-halo, .wn .wn-tube { stroke: var(--ah-neon-blue); }
.wn .wn-core { stroke: var(--ah-neon-blue-core); }
.wn--pink .wn-halo, .wn--pink .wn-tube { stroke: var(--ah-neon-pink); }
.wn--pink .wn-core { stroke: var(--ah-neon-pink-core); }
.wn-bulb { stroke: var(--ah-950); stroke-width: 2; }
.wn-bulb--p { fill: var(--ah-neon-pink); filter: drop-shadow(0 0 5px var(--ah-neon-pink)); }
.wn-bulb--g { fill: var(--ah-neon-gold); filter: drop-shadow(0 0 5px var(--ah-neon-gold)); }
.wn-bulb--s { fill: var(--ah-neon-sky); filter: drop-shadow(0 0 5px var(--ah-neon-sky)); }
.wn-hw circle { fill: #141c2c; stroke: var(--ah-950); stroke-width: 2; }
@media (prefers-reduced-motion: no-preference) {
  html.motion .ws-final:not(.is-play) .wn { opacity: 0.06; }
  .ws-final.is-play .wn { animation: ah-ignite 0.9s var(--t, 0.1s) both; }
  .ws-neon.is-reload .wn { animation: ws-reload 0.9s var(--t, 0.05s) both; }
  .ws-neon:hover { animation: ws-sway 1.4s ease-in-out; }
}
@keyframes ws-reload { 0%, 10% { opacity: 0.06; } 24% { opacity: 1; } 30% { opacity: 0.2; } 40% { opacity: 1; } 46% { opacity: 0.5; } 56%, 100% { opacity: 1; } }
@keyframes ws-sway { 25% { rotate: 1.2deg; } 55% { rotate: -0.9deg; } 80% { rotate: 0.3deg; } }