/* ==========================================================================
   Websites page only (websites.html). Loads after css/core.css and css/lawn.css.
   Page-only art uses the .ws- prefix; kit classes are only restyled under a .ws- scope
   or a section id. Every scene is finished at rest: motion only replays it, and
   prefers-reduced-motion stops all of it (the block at the end).
   ========================================================================== */

/* ---------- 1. Hero: the headline, the kinetic stagger ---------- */
@media (min-width: 1000px) {
  #top .fc-phero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); column-gap: clamp(36px, 4vw, 64px); }
}
/* two lines on desktop, as the deck draws it (the kit's --long size keeps the long second line whole) */
.ws-h1__line { display: block; }
.ws-sub { margin-bottom: 22px; }
.ws-sub .fc-phero__sub { margin-bottom: 0; }
.ws-sub .fc-phero__sub + .fc-phero__sub { margin-top: 8px; }
.ws-sub strong { font-weight: 700; }
.ws-cue { margin-top: 8px; font-size: 0.95rem; }
.ws-cue .fc-link { display: inline-flex; align-items: center; min-height: 44px; }
#top .fc-note { margin-top: 6px; }
@media (max-width: 600px) {
  .ws-sub { margin-bottom: 18px; }
  .ws-sub .fc-phero__sub { font-size: 1rem; line-height: 1.5; }
  .ws-cue { margin-top: 2px; }
}

/* the deck's kinetic order (eyebrow, line 1, line 2, body, buttons, note) is the kit's .fc-k */

/* ---------- 1. Hero: the sample site, floating out front of the homeowner's gate ---------- */
/* one scene, sized off its own width (cqw): the yard panel stands on the bottom edge, the browser
   stack floats over it and reaches past its top, and the gate shows under the browser */
.ws-hero { position: relative; container-type: inline-size; width: min(100%, 520px); padding-top: 44px; }
.ws-hero__fig { position: relative; z-index: 1; margin: 0 6cqw 27cqw 5cqw; }
.ws-float { position: relative; animation: ws-float 7s ease-in-out infinite; }
@keyframes ws-float {
  0%, 100% { transform: translateY(0) rotate(-0.4deg); }
  50% { transform: translateY(-12px) rotate(0.4deg); }
}
.ws-browser { transform: rotate(0.8deg); }
.ws-browser .fc-browser__bar { padding: 9px 12px; }
.ws-view {
  aspect-ratio: 4 / 3.05;
  container-type: inline-size;
  border-radius: 0 0 12px 12px;
  background: var(--fc-pure);
}
.ws-hero.is-paused .ws-float,
.ws-hero.is-paused .ws-site,
.ws-hero.is-paused .ws-yard__shadow { animation-play-state: paused; }
.ws-hero__pause { position: absolute; left: 2.6cqw; bottom: 2.6cqw; z-index: 8; }
html:not(.js) .ws-hero__pause { display: none; }

/* the yard: sky, a tree, the picket fence and its gate, the mowed strip and the walk out front */
.ws-yard {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 84.62cqw; /* the art's 520 by 440, set in cqw: WebKit sizes an absolute aspect-ratio box 4px short */
  overflow: hidden;
  border: var(--fc-line);
  border-radius: var(--fc-r3);
  background: var(--fc-sky-2);
  box-shadow: var(--fc-chunk-lg);
}
.ws-yard svg { display: block; width: 100%; height: 100%; }
.ws-yard path, .ws-yard rect, .ws-yard circle { stroke: var(--fc-ink); stroke-width: 2.2; stroke-linejoin: round; }
.ws-yard .ws-yard__sky, .ws-yard .ws-yard__back, .ws-yard .ws-yard__front, .ws-yard pattern rect { stroke: none; }
.ws-yard__sky { fill: var(--fc-sky-2); }
.ws-yard__cloud { fill: var(--fc-white); }
.ws-yard__trunk { fill: var(--fc-rail-b); }
.ws-yard__leaf { fill: var(--fc-lawn-a); }
.ws-yard__leaf-hi { fill: var(--fc-leaf); }
.ws-yard__back { fill: var(--fc-lawn-b); }
.ws-yard__mow-a { fill: var(--fc-lawn-a); }
.ws-yard__mow-b { fill: var(--fc-leaf); }
.ws-yard .ws-yard__ink { fill: none; stroke-width: 2.6; }
.ws-yard__rail { fill: var(--fc-wood); }
.ws-yard__wood { fill: var(--fc-white); }
.ws-yard__brace { fill: var(--fc-wood); }
.ws-yard .ws-yard__hinge { fill: none; stroke-width: 4; stroke-linecap: round; }
.ws-yard__latch { fill: var(--fc-sun); }
.ws-yard__walk { fill: var(--fc-drive); }
/* the browser's shadow on the lawn: it shrinks as the browser rises */
.ws-yard .ws-yard__shadow {
  fill: var(--fc-ink);
  stroke: none;
  opacity: 0.2;
  transform-box: fill-box;
  transform-origin: center;
  animation: ws-shadow 7s ease-in-out infinite;
}
@keyframes ws-shadow {
  0%, 100% { transform: scaleX(1); opacity: 0.2; }
  50% { transform: scaleX(0.86); opacity: 0.12; }
}

/* the sticker slapped across the frame's top corner (the scene's Sample tag), above the address
   bar so the drawn URL and the drawn nav stay readable. Two lines: each one nowraps */
.ws-sticker {
  position: absolute;
  top: -40px;
  right: -14px;
  z-index: 7;
  display: grid;
  justify-items: center;
  gap: 1px;
  padding: 9px 16px 10px;
  border: var(--fc-line);
  border-radius: 16px;
  background: var(--fc-sun);
  color: var(--fc-ink);
  box-shadow: 0 0 0 5px var(--fc-white), 0 0 0 7px var(--fc-ink), 6px 7px 0 7px var(--fc-ink);
  white-space: nowrap;
  transform: rotate(7deg);
}
.ws-sticker b { font-family: var(--fc-display); font-size: 1.15rem; font-weight: 400; line-height: 1.1; white-space: nowrap; }
.ws-sticker span { font-family: var(--fc-hand); font-size: 0.95rem; line-height: 1.15; white-space: nowrap; }
@media (max-width: 600px) {
  .ws-hero { padding-top: 58px; }
  .ws-sticker { top: -56px; right: -4px; padding: 7px 12px 8px; }
  .ws-sticker b { font-size: 0.98rem; }
  .ws-sticker span { font-size: 0.82rem; }
}

/* the drawn homepage: sized in em off the window's width, so it keeps its proportions anywhere */
.ws-site {
  display: grid;
  font-size: 15px;
  font-size: calc(100cqi / 31);
  line-height: 1.25;
  color: var(--fc-ink);
  animation: ws-scroll 22s ease-in-out infinite;
}
@keyframes ws-scroll {
  0%, 8% { transform: translateY(0); }
  46%, 58% { transform: translateY(calc(-100% + 76.25cqi)); }
  92%, 100% { transform: translateY(0); }
}
.ws-site__nav { display: flex; align-items: center; gap: 1em; padding: 1.05em 1.5em; border-bottom: 1.5px solid rgba(22, 58, 37, 0.16); font-size: 0.6em; }
.ws-site__brand { display: inline-flex; align-items: center; gap: 0.5em; margin-right: auto; font-size: 1.22em; font-weight: 800; white-space: nowrap; }
.ws-site__mark {
  flex: none;
  width: 1.7em;
  height: 1.7em;
  border: 1.5px solid var(--fc-ink);
  border-radius: 50%;
  background: repeating-linear-gradient(90deg, var(--fc-lawn-a) 0 0.3em, var(--fc-lawn-b) 0.3em 0.6em);
}
.ws-site__links { display: inline-flex; gap: 1.2em; font-weight: 600; color: var(--fc-ink-2); white-space: nowrap; }
.ws-site__cta { padding: 0.5em 0.85em; border: 1.5px solid var(--fc-ink); border-radius: 0.55em; background: var(--fc-orange); color: var(--fc-ink-deep); font-weight: 800; white-space: nowrap; }
.ws-site__hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 0.9em;
  align-items: start;
  padding: 1.2em 1em 1.3em;
  border-bottom: 1.5px solid var(--fc-ink);
  background: repeating-linear-gradient(90deg, var(--fc-lawn-a) 0 2.3em, var(--fc-lawn-b) 2.3em 4.6em);
}
.ws-site__pitch { display: grid; gap: 0.5em; justify-items: start; }
.ws-site__h { padding: 0.35em 0.5em 0.4em; border-radius: 0.45em; background: rgba(255, 253, 246, 0.95); font-family: var(--fc-display); font-size: 1.12em; font-weight: 400; line-height: 1.1; }
.ws-site__lede { padding: 0.45em 0.7em; border-radius: 0.5em; background: rgba(255, 253, 246, 0.9); font-size: 0.6em; font-weight: 700; line-height: 1.35; }
.ws-site__truck { display: block; width: 7.6em; height: 3em; margin-top: 0.2em; }
.ws-site__est {
  display: grid;
  gap: 0.55em;
  padding: 0.9em 0.85em 0.95em;
  border: 1.5px solid var(--fc-ink);
  border-radius: 0.7em;
  background: var(--fc-white);
  box-shadow: 0.3em 0.3em 0 var(--fc-ink);
  font-size: 0.6em;
}
.ws-site__label { font-size: 0.9em; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fc-ink-2); }
.ws-site__field { display: flex; align-items: center; height: 2.5em; padding: 0 0.7em; border: 1.5px solid var(--fc-ink); border-radius: 0.5em; background: var(--fc-pure); }
.ws-site__field i { width: 1px; height: 1.2em; background: var(--fc-orange-ink); }
.ws-site__chips { display: flex; flex-wrap: wrap; gap: 0.4em; }
.ws-site__chips span { padding: 0.3em 0.75em; border: 1.5px solid rgba(22, 58, 37, 0.45); border-radius: 999px; font-weight: 700; white-space: nowrap; }
.ws-site__chips .is-on { border-color: var(--fc-ink); background: var(--fc-leaf); }
.ws-site__go { padding: 0.75em 0.6em; border: 1.5px solid var(--fc-ink); border-radius: 0.55em; background: var(--fc-orange); box-shadow: 0.2em 0.2em 0 var(--fc-ink); color: var(--fc-ink-deep); font-weight: 800; text-align: center; white-space: nowrap; }
.ws-site__route { display: flex; align-items: center; gap: 0.55em; padding: 0.75em 1.7em; border-bottom: 1.5px solid var(--fc-ink); background: var(--fc-sun); font-size: 0.66em; font-weight: 800; }
.ws-site__route svg { flex: none; width: 1em; height: 1.3em; }
.ws-site__block { padding: 1.1em 1em 1.2em; }
.ws-site__block--tint { background: var(--fc-mint); }
.ws-site__h2 { display: block; margin-bottom: 0.6em; font-family: var(--fc-display); font-size: 0.95em; font-weight: 400; }
.ws-site__svc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45em 0.6em; font-size: 0.6em; }
.ws-site__svc span { display: flex; align-items: center; gap: 0.6em; padding: 0.7em 0.8em; border: 1.5px solid rgba(22, 58, 37, 0.22); border-radius: 0.6em; font-weight: 700; white-space: nowrap; }
.ws-site__svc i { flex: none; width: 1.4em; height: 1.4em; border: 1.5px solid var(--fc-ink); border-radius: 50%; background: var(--fc-leaf); }
.ws-site__reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6em; }
.ws-site__review { display: grid; gap: 0.4em; padding: 0.65em 0.65em 0.75em; border: 1.5px solid rgba(22, 58, 37, 0.22); border-radius: 0.55em; background: var(--fc-pure); }
.ws-site__stars {
  width: 5.4em;
  height: 1em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2.2l2.3 5 5.3.5-4 3.6 1.2 5.3L10 13.9l-4.8 2.7 1.2-5.3-4-3.6 5.3-.5z' fill='none' stroke='%23163A25' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 0 50% / 1.08em 1em repeat-x;
}
.ws-site__ln { height: 0.36em; border-radius: 999px; background: var(--fc-keys); }
.ws-site__ln--short { width: 58%; }
.ws-site__vip { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 0.95em 1.6em; background: var(--fc-ink); color: var(--fc-chalk); font-size: 0.62em; font-weight: 700; }
.ws-site__join { flex: none; padding: 0.4em 1em; border-radius: 0.45em; background: var(--fc-sun); color: var(--fc-ink); font-weight: 800; }
.ws-site__foot { display: flex; justify-content: center; padding: 1.1em 1em 1.4em; background: var(--fc-ink-black); color: var(--fc-chalk); font-size: 0.62em; }
.ws-site__call { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.5em 1.1em; border: 1.5px solid var(--fc-chalk); border-radius: 999px; font-weight: 800; }
.ws-site__call svg { width: 1.1em; height: 1.1em; fill: var(--fc-chalk); }

/* ---------- 2. Two phones, one search ---------- */
.ws-twins { display: grid; gap: 26px; justify-items: center; min-width: 0; }
.ws-twins__row { display: flex; align-items: flex-start; justify-content: center; gap: clamp(24px, 3.4vw, 48px); }
.ws-twin { position: relative; display: grid; justify-items: center; }
.ws-twin--old { margin-top: 34px; transform: rotate(-1deg); }
.ws-twin--new { transform: rotate(1deg); }
.ws-twin__phone { --pw: 236px; }
.ws-twin .fc-sample--pin { top: -14px; right: 4px; }
.ws-twin__tag {
  position: relative;
  display: grid;
  justify-items: center;
  margin-top: 40px;
  padding: 26px 18px 12px;
  border: var(--fc-line);
  border-radius: 6px 6px 12px 12px;
  background: var(--fc-kraft);
  box-shadow: 3px 3px 0 rgba(22, 58, 37, 0.4);
  font-family: var(--fc-hand);
  font-size: 1.12rem;
  line-height: 1.2;
  text-align: center;
  transform: rotate(3deg);
  transform-origin: 50% 0;
}
.ws-twin__tag--new { background: var(--fc-sun); transform: rotate(-2.5deg); }
.ws-twin__tag span { display: block; white-space: nowrap; }
/* the string from the phone, and the punched hole it runs through */
.ws-twin__tag::before { content: ""; position: absolute; bottom: calc(100% - 13px); left: 50%; width: 2px; height: 56px; margin-left: -1px; background: var(--fc-ink); }
.ws-twin__tag::after { content: ""; position: absolute; top: 7px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border: 2px solid var(--fc-ink); border-radius: 50%; background: var(--fc-mint); }
.ws-twins__cap { font-size: 0.85rem; font-weight: 700; color: var(--fc-ink-2); text-align: center; }

/* version one: a tired page nobody runs */
.ws-fb { display: grid; justify-items: start; margin: 10px -10px 0; font-size: 0.78rem; line-height: 1.3; color: var(--fc-ink); }
.ws-fb__cover {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 84px;
  border-block: 1.5px solid rgba(22, 58, 37, 0.18);
  background: repeating-linear-gradient(135deg, var(--fc-smoke) 0 10px, var(--fc-paper-2) 10px 20px);
}
.ws-fb__noimg { width: 34px; height: 26px; fill: none; stroke: var(--fc-gray-2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ws-fb__web { position: absolute; top: 0; right: 0; width: 50px; height: 50px; fill: none; stroke: rgba(22, 58, 37, 0.32); stroke-width: 1; }
.ws-fb__avatar {
  position: relative;
  z-index: 1;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 12px;
  border: 3px solid var(--fc-white);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, var(--fc-gray-2) 0 7px, transparent 7.5px), radial-gradient(ellipse at 50% 100%, var(--fc-gray-2) 0 14px, transparent 14.5px), var(--fc-bubble);
  box-shadow: 0 0 0 1.5px var(--fc-gray-2);
}
.ws-fb__name { padding: 4px 12px 0; font-size: 0.98rem; font-weight: 800; }
.ws-fb__cat { padding: 0 12px 4px; font-size: 0.74rem; color: var(--fc-ink-3); }
.ws-fb__line { display: flex; align-items: center; gap: 6px; padding: 2px 12px; font-size: 0.72rem; font-weight: 600; color: var(--fc-ink-3); }
.ws-fb__line svg { flex: none; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ws-fb__line--stale { color: var(--fc-orange-ink); font-weight: 700; }
.ws-fb__btn { width: calc(100% - 24px); margin: 10px 12px 0; padding: 6px; border-radius: 8px; background: var(--fc-bubble); color: var(--fc-ink-2); font-size: 0.74rem; font-weight: 700; text-align: center; }
.ws-fb__bubble { display: flex; align-items: flex-end; gap: 6px; margin: 16px 12px 0; }
.ws-fb__bubble i { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--fc-gray-2); }
.ws-fb__bubble span { padding: 6px 11px 7px; border-radius: 14px 14px 14px 4px; background: var(--fc-bubble); font-size: 0.76rem; line-height: 1.3; }

/* version two: the sample site, on a phone */
.ws-mob { display: flex; flex-direction: column; height: calc(100% - 42px); margin: 8px -10px 0; }
.ws-mob__url { align-self: center; margin: 0 10px 6px; padding: 2px 12px; border-radius: 999px; background: var(--fc-paper-2); font-size: 0.66rem; font-weight: 700; color: var(--fc-ink-2); }
.ws-mob__nav { display: flex; align-items: center; justify-content: space-between; padding: 7px 12px; border-block: 1.5px solid rgba(22, 58, 37, 0.15); font-size: 12px; }
.ws-mob__burger { display: grid; gap: 3px; }
.ws-mob__burger i { width: 16px; height: 2px; border-radius: 2px; background: var(--fc-ink); }
.ws-mob__hero {
  display: grid;
  gap: 8px;
  padding: 14px 12px 16px;
  border-bottom: 1.5px solid var(--fc-ink);
  background: repeating-linear-gradient(90deg, var(--fc-lawn-a) 0 26px, var(--fc-lawn-b) 26px 52px);
}
.ws-mob__h { padding: 6px 8px 7px; border-radius: 8px; background: rgba(255, 253, 246, 0.95); font-family: var(--fc-display); font-size: 1.02rem; font-weight: 400; line-height: 1.12; }
.ws-mob__est,
.ws-mob__call { display: block; padding: 8px 6px; border: var(--fc-line); border-radius: 10px; font-size: 0.78rem; font-weight: 800; line-height: 1.2; text-align: center; }
.ws-mob__est { background: var(--fc-orange); box-shadow: 3px 3px 0 var(--fc-ink); color: var(--fc-ink-deep); }
/* one soft pulse, once the button itself is in view (js/pages/websites.js adds .is-pulsing) */
.ws-mob__est.is-pulsing { animation: ws-pulse 1.4s ease-in-out 0.3s 1; }
@keyframes ws-pulse {
  45% { transform: scale(1.06); box-shadow: 3px 3px 0 var(--fc-ink), 0 0 0 7px rgba(255, 107, 44, 0.35); }
}
.ws-mob__call { background: var(--fc-white); }
.ws-mob__route { display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-bottom: 1.5px solid var(--fc-ink); background: var(--fc-sun); font-size: 0.72rem; font-weight: 800; }
.ws-mob__route svg { flex: none; width: 11px; height: 14px; }
.ws-mob__vip { margin-top: auto; padding: 9px 12px; background: var(--fc-ink); color: var(--fc-chalk); font-size: 0.76rem; font-weight: 800; text-align: center; }

@media (max-width: 959px) {
  .ws-twins { margin-top: 10px; }
}
@media (max-width: 600px) {
  .ws-twins__row { flex-direction: column; align-items: center; gap: 44px; }
  .ws-twin--old { margin-top: 0; }
}

/* ---------- 3. The pegboard wall of real sites (the turf band) ---------- */
.ws-workhead { max-width: 820px; }
.ws-workhead__hint { max-width: 30em; margin-top: 4px; transform: rotate(-1deg); }
.ws-peg {
  padding: clamp(52px, 5vw, 68px) clamp(14px, 3vw, 44px) clamp(40px, 5vw, 60px);
  border: 10px solid var(--fc-rail-c);
  border-radius: 14px;
  box-shadow: 0 0 0 2px var(--fc-ink), inset 0 0 0 2px var(--fc-ink), 8px 8px 0 2px var(--fc-ink);
}
.ws-wall { display: grid; grid-template-columns: minmax(0, 1fr); gap: 64px 28px; margin: 0 auto; padding: 0; list-style: none; max-width: 460px; }
@media (min-width: 640px) {
  .ws-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; padding-bottom: 44px; }
  .ws-wall > :nth-child(even) { transform: translateY(44px); }
}
@media (min-width: 1000px) {
  .ws-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 70px clamp(24px, 3vw, 40px); padding-bottom: 60px; }
  .ws-wall > :nth-child(even) { transform: none; }
  .ws-wall > :nth-child(3n + 2) { transform: translateY(60px); }
  .ws-wall > :nth-child(3n) { transform: translateY(22px); }
}
.ws-frame { --hang: -0.7deg; min-width: 0; }
.ws-frame:nth-child(2) { --hang: 0.6deg; }
.ws-frame:nth-child(3) { --hang: -0.4deg; }
.ws-frame:nth-child(4) { --hang: 0.8deg; }
.ws-frame:nth-child(5) { --hang: -0.5deg; }
.ws-frame__win { color: var(--fc-ink); transform: rotate(var(--hang)); }
.ws-frame__tape { position: absolute; top: -13px; left: 50%; z-index: 7; font-size: 0.95rem; white-space: nowrap; transform: translateX(-50%) rotate(-2deg); }
.ws-frame__win .fc-browser__bar { padding: 9px 12px; }
.ws-frame__win .fc-browser__url { font-size: 0.74rem; }
.ws-frame__win .fc-browser__live::before { animation: ws-live 2.4s ease-in-out 0.6s 2; }
@keyframes ws-live { 50% { opacity: 0.35; box-shadow: 0 0 0 5px rgba(62, 155, 79, 0); } }
.ws-frame__win .fc-browser__view { border-radius: 0; border-bottom: var(--fc-line); }
.ws-shot { aspect-ratio: 4 / 3; background: var(--fc-paper-2); }
.ws-shot img { transform: translateY(0); transition: transform 1.2s var(--fc-ease); }
.ws-shot::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 -22px 24px -20px rgba(14, 40, 25, 0.5); pointer-events: none; }
.ws-frame:hover .ws-shot img,
.ws-frame:focus-within .ws-shot img,
.ws-frame.peek .ws-shot img { transform: translateY(var(--peek)); transition: transform 7s cubic-bezier(0.33, 0.1, 0.35, 1); }
.ws-frame__name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 10px 14px 12px 16px;
  border-radius: 0 0 12px 12px;
  color: var(--fc-ink);
  text-decoration: none;
}
.ws-frame__name b { display: block; font-family: var(--fc-display); font-size: 1.15rem; font-weight: 400; line-height: 1.15; }
.ws-frame__name small { display: block; margin-top: 2px; font-size: 0.82rem; font-weight: 600; line-height: 1.3; color: var(--fc-ink-2); }
.ws-frame__name svg { flex: none; width: 34px; height: 34px; padding: 8px; border: var(--fc-line); border-radius: 50%; background: var(--fc-sun); fill: none; stroke: var(--fc-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; box-shadow: 2px 2px 0 var(--fc-ink); transition: transform 0.25s var(--fc-bounce); }
a.ws-frame__name:hover b { text-decoration: underline wavy var(--fc-orange); text-underline-offset: 4px; }
a.ws-frame__name:hover svg { transform: translate(2px, -2px); }
#work .ws-frame__name:focus-visible { outline-color: var(--fc-ink); outline-offset: -5px; }
/* where the frames run narrow, the bar tightens so every domain shows in full beside Live */
@media (max-width: 399px), (min-width: 640px) and (max-width: 759px), (min-width: 1000px) and (max-width: 1119px) {
  .ws-frame__win .fc-browser__bar { gap: 8px; padding-inline: 10px; }
  .ws-frame__win .fc-browser__dots { gap: 4px; }
  .ws-frame__win .fc-browser__url { padding-inline: 8px; font-size: 0.68rem; }
}
@media (max-width: 359px), (min-width: 640px) and (max-width: 679px) {
  .ws-frame__win .fc-browser__bar { padding-inline: 8px; }
  .ws-frame__win .fc-browser__url { font-size: 0.64rem; }
  .ws-frame__win .fc-browser__live { letter-spacing: 0.06em; }
}
@media (max-width: 359px) {
  .ws-peg { padding-inline: 8px; border-width: 8px; }
}

/* the 30+ tag on a wire from the last hook */
.ws-wall__tagslot { display: grid; justify-items: center; align-content: start; padding-top: 34px; }
.ws-count { --tilt: -1deg; width: min(100%, 260px); }
.ws-count::before { width: 3px; height: 54px; margin-left: -1.5px; background: var(--fc-steel-c); box-shadow: 0 0 0 1px var(--fc-ink); }
.ws-count .fc-hook { top: -30px; }
.ws-count .fc-tag__body { gap: 6px; padding: 46px 22px 24px; text-align: center; }
.ws-count .fc-tag__body::before { background: var(--fc-peg); }
.ws-count .ws-count__big { font-family: var(--fc-display); font-size: clamp(3.4rem, 2.4rem + 2.6vw, 4.6rem); font-weight: 400; line-height: 1; color: var(--fc-orange-ink); }
.ws-count .fc-tag__body p + p { font-weight: 600; }

/* the painted signature strip under the board */
.ws-sig {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 26px;
  width: fit-content;
  max-width: 100%;
  margin: clamp(44px, 5vw, 64px) auto 0;
  padding: 20px clamp(26px, 4vw, 48px) 22px;
  background:
    repeating-linear-gradient(90deg, rgba(22, 58, 37, 0.035) 0 3px, transparent 3px 11px),
    var(--fc-chalk);
  color: var(--fc-ink);
  clip-path: polygon(1% 8%, 4% 0, 30% 3%, 62% 0, 97% 4%, 100% 20%, 98.6% 50%, 100% 82%, 97% 100%, 58% 97%, 26% 100%, 2% 96%, 0 70%, 1.4% 42%);
  transform: rotate(-0.6deg);
}
.ws-sig__line { max-width: 30em; font-weight: 700; line-height: 1.4; text-align: center; }
.ws-sig__stamp { position: relative; overflow: hidden; padding: 8px 18px 7px; font-size: 1.05rem; transform: rotate(-4deg); }
.ws-sig__stamp::after {
  content: "";
  position: absolute;
  inset: -4px;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.85) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: ws-sweep 4s ease-in-out 0.8s 1 both;
  pointer-events: none;
}
@keyframes ws-sweep {
  0% { transform: translateX(-120%); }
  40%, 100% { transform: translateX(120%); }
}

/* ---------- 4. The work order on a clipboard ---------- */
#jobs .fc-fence { margin-top: clamp(32px, 4vw, 48px); }
.ws-jobboard { width: 100%; padding: 50px clamp(10px, 2vw, 22px) 24px; transform: rotate(-0.6deg); }
.ws-jobboard .fc-order { max-width: none; }
.ws-order .fc-order__head { justify-content: flex-start; gap: 6px 12px; }
.ws-order__job { margin-right: auto; font-family: var(--fc-hand); font-size: 1.25rem; line-height: 1; color: var(--fc-ballpoint); }
.ws-order .fc-order__row { grid-template-columns: 40px 42px minmax(0, 1fr); align-items: start; }
.ws-order .fc-order__box { margin-top: 2px; }
.ws-order .fc-order__num { padding-top: 3px; }
.ws-order .fc-order__job p + p { margin-top: 6px; }
.ws-order.is-armed .fc-order__row:not(.is-checked) .fc-order__box path { stroke-dashoffset: 30; transition: none; }
.ws-order__note { display: flex; align-items: center; gap: 4px; margin-top: 18px; font-size: 1.35rem; line-height: 1.15; transform: rotate(-3deg); }
.ws-order__words span { white-space: nowrap; }
.ws-order__brace { display: none; }
@media (min-width: 1100px) {
  /* desktop: the note sits in the right margin, a marker brace spanning all four rows */
  .ws-order .fc-order__paper { padding-right: 168px; }
  .ws-order__note { position: absolute; top: 158px; right: 14px; bottom: 60px; width: 150px; margin: 0; gap: 10px; font-size: 1.3rem; transform: none; }
  .ws-order__words { transform: rotate(-5deg); }
  .ws-order__words span { display: block; }
  .ws-order__brace { display: block; flex: none; width: 24px; height: 100%; fill: none; stroke: var(--fc-orange-ink); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
  .ws-order__brace path { vector-effect: non-scaling-stroke; }
}
@media (max-width: 640px) {
  /* phones: the box and its number on one line, the job at full width under them */
  .ws-order .fc-order__row { grid-template-columns: 36px minmax(0, 1fr); grid-template-areas: "box num" "job job"; gap: 8px 10px; align-items: center; }
  .ws-order .fc-order__box { margin-top: 0; }
  .ws-order .fc-order__num { padding-top: 0; }
  .ws-order .fc-order__copy--pink { transform: translate(7px, 9px) rotate(0.8deg); }
  .ws-jobboard { padding-right: 16px; transform: rotate(-0.3deg); }
}

.ws-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.ws-hline { display: block; }

/* ---------- 5. Speed: how much lawn you could mow while it loads ---------- */
#speed .fc-sec-head .fc-lead { max-width: 36em; text-wrap: balance; }
.ws-race { --mw: 72px; display: grid; gap: 14px; max-width: 1000px; margin: 0 auto; }
.ws-race__cap { justify-self: start; margin-left: 6px; transform: rotate(-1.5deg); }
.ws-lawn {
  position: relative;
  display: grid;
  gap: 18px;
  padding: clamp(16px, 2.6vw, 26px);
  border: var(--fc-line);
  border-radius: var(--fc-r2);
  background: var(--fc-white);
  box-shadow: var(--fc-chunk-lg);
}
.ws-lane { display: grid; grid-template-columns: 150px minmax(0, 1fr) 76px; align-items: center; gap: 10px 16px; }
.ws-lane__label { font-weight: 800; line-height: 1.25; }
.ws-lane__track {
  position: relative;
  height: 92px;
  overflow: hidden;
  border: var(--fc-line);
  border-radius: 12px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 48'%3E%3Cpath d='M-3 48L1 8L5 48M3 48L8 16L12 48M10 48L15 4L19 48M17 48L22 14L26 48M24 48L29 6L33 48M31 48L36 18L40 48' fill='%234FA257' stroke='%23163A25' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 0 calc(100% - 8px) / 36px 48px repeat-x,
    var(--fc-sky-2);
}
/* the soil line along the bottom of both lanes */
.ws-lane__track::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 10px; border-top: var(--fc-line); background: var(--fc-soil); }
.ws-lane__cut {
  --p: 0.18;
  --dur: 0.3s;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: calc(var(--mw) + (100% - var(--mw)) * var(--p));
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 48'%3E%3Cpath d='M0 48V38L3 32L6 38L9 33L12 38L15 31L18 38L21 33L24 38L27 32L30 38L33 33L36 38V48Z' fill='%237CC46B' stroke='%23163A25' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 0 calc(100% - 8px) / 36px 48px repeat-x,
    var(--fc-sky-2);
}
.ws-lane--slow .ws-lane__cut { --p: 0.92; --dur: 1.4s; }
.ws-mower { position: absolute; right: -2px; bottom: 8px; width: 76px; height: 57px; }
.ws-lane__tag { justify-self: start; font-size: 0.85rem; }
.ws-race__note { font-size: 0.9rem; font-weight: 600; color: var(--fc-ink-2); text-align: center; }
/* JS arms the race (js/pages/websites.js); without it, or with reduced motion, it rests finished */
.ws-race.is-armed:not(.in) .ws-lane__cut { width: var(--mw); }
.ws-race.is-armed:not(.in) .ws-lane__tag { opacity: 0; transform: scale(1.7) rotate(-12deg); }
/* the transitions only exist once the race starts, so arming it snaps to the start line */
.ws-race.is-armed.in .ws-lane__cut { transition: width var(--dur) linear; }
.ws-race.is-armed.in .ws-lane__tag { transition: opacity 0.15s linear, transform 0.35s var(--fc-bounce); }
.ws-race.is-armed.in .ws-lane--fast .ws-lane__tag { transition-delay: 0.3s; }
.ws-race.is-armed.in .ws-lane--slow .ws-lane__tag { transition-delay: 1.4s; }
.ws-race.is-armed.in .ws-lane--fast .ws-mower { animation: ws-rumble 0.1s linear 3; }
.ws-race.is-armed.in .ws-lane--slow .ws-mower { animation: ws-rumble 0.1s linear 14; }
@keyframes ws-rumble { 50% { transform: translateY(-1.5px); } }
.ws-tape {
  position: relative;
  max-width: 640px;
  margin: clamp(40px, 5vw, 56px) auto 0;
  padding: 16px 30px 17px;
  background: var(--fc-sky);
  color: var(--fc-ink);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.5;
  box-shadow: 1px 3px 0 rgba(22, 58, 37, 0.2);
  clip-path: polygon(0 6%, 1% 24%, 0 44%, 1.2% 66%, 0 86%, 0.6% 100%, 100% 100%, 99% 78%, 100% 58%, 98.8% 36%, 100% 16%, 99.4% 0);
  transform: rotate(-0.8deg);
}
.ws-tape strong { font-weight: 800; }
@media (max-width: 700px) {
  .ws-race { --mw: 54px; }
  .ws-lane { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label tag" "track track"; gap: 8px 10px; }
  .ws-lane__label { grid-area: label; }
  .ws-lane__tag { grid-area: tag; justify-self: end; }
  .ws-lane__track { grid-area: track; height: 70px; }
  .ws-mower { width: 58px; height: 44px; }
  .ws-tape { padding: 14px 20px 15px; font-size: 1rem; }
}

/* ---------- 6. The price, on a yard sign ---------- */
.ws-price { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.ws-price__copy { display: grid; gap: 14px; max-width: 34rem; }
.ws-price__copy .fc-lead strong { font-weight: 700; color: var(--fc-ink); }
.ws-price__copy .fc-actions { margin-top: 10px; }
.ws-price__yard { position: relative; display: grid; justify-items: center; padding: 18px 0 34px; }
/* the freshly striped strip of lawn the sign is planted in */
.ws-price__yard::before {
  content: "";
  position: absolute;
  left: 2%;
  right: 2%;
  bottom: 6px;
  height: 84px;
  border: var(--fc-line);
  border-radius: 50% 50% 22px 22px / 42px 42px 22px 22px;
  background:
    repeating-linear-gradient(115deg, var(--fc-lawn-a) 0 34px, var(--fc-lawn-b) 34px 68px);
  box-shadow: var(--fc-chunk);
}
.ws-sign.fc-sign--solo { --tilt: -1.5deg; width: min(100%, 470px); margin: 0; padding-bottom: 110px; font-size: inherit; line-height: 1.1; }
.ws-sign .fc-sign__board { overflow: hidden; padding: 38px 24px 34px; }
.ws-sign .fc-sign__num { font-size: clamp(3.2rem, 1.9rem + 4vw, 5rem); }
.ws-sign .fc-sign__rider { bottom: 52px; font-family: var(--fc-body); font-size: 1rem; }
.ws-sign .fc-sign__stakes { bottom: 12px; }
.ws-sign .fc-sign__lawn { display: none; }
/* the sun glint across the sign, once as it comes into view (paused off screen by site.js) */
.ws-sign .fc-sign__board::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 34%, rgba(255, 255, 255, 0.9) 47%, rgba(255, 210, 63, 0.35) 53%, transparent 64%);
  transform: translateX(-110%);
  animation: ws-glint 5s ease-in-out 1s 1 both;
  pointer-events: none;
}
@keyframes ws-glint {
  0% { transform: translateX(-110%); }
  36%, 100% { transform: translateX(110%); }
}
@media (min-width: 960px) {
  .ws-price {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    grid-template-areas: "yard eyebrow" "yard copy";
    column-gap: clamp(48px, 6vw, 96px);
    row-gap: 18px;
    align-items: center;
  }
  .ws-price__eyebrow { grid-area: eyebrow; align-self: end; }
  .ws-price__yard { grid-area: yard; }
  .ws-price__copy { grid-area: copy; align-self: start; }
}
@media (max-width: 959px) {
  .ws-price__eyebrow { justify-self: center; text-align: center; }
  .ws-price__copy { justify-self: center; }
}
@media (max-width: 600px) {
  .ws-price__yard::before { height: 64px; }
  .ws-sign.fc-sign--solo { padding-bottom: 96px; }
  .ws-sign .fc-sign__rider { bottom: 44px; font-size: 0.9rem; }
}

/* ---------- 7. The closing band: the ZIP on a slip, the site walk sheet beside it ---------- */
.ws-cta .fc-cta__copy { display: grid; gap: 12px; }
.ws-cta__form {
  display: grid;
  gap: 14px;
  justify-items: start;
  max-width: 540px;
  margin-top: 14px;
  padding: 22px clamp(16px, 2.4vw, 26px) 20px;
  border: var(--fc-line);
  border-radius: var(--fc-r1);
  background: var(--fc-white);
  box-shadow: var(--fc-chunk-lg);
}
.ws-cta__form .fc-zip { width: 100%; }
.ws-walk { width: min(100%, 520px); justify-self: center; }
.ws-walk .fc-board__clip { z-index: 4; }
.ws-walk__paper { gap: 12px; padding-top: 36px; color: var(--fc-ink); }
.ws-walk__head { width: 100%; padding-bottom: 8px; border-bottom: 4px double var(--fc-ink); font-family: var(--fc-display); font-size: 1.45rem; font-weight: 400; letter-spacing: 0.14em; line-height: 1.1; text-transform: uppercase; }
.ws-walk__prop,
.ws-walk__by { font-weight: 700; line-height: 1.5; }
.ws-walk__by .fc-hw { font-size: 1.15rem; font-weight: 400; white-space: nowrap; }
.ws-walk__prop .fc-field-line { --w: 8.5em; }
.ws-walk__list { width: 100%; margin-top: 4px; gap: 11px; }
.ws-walk__list li { text-wrap: balance; }
.ws-walk__note { justify-self: end; margin-top: 2px; font-family: var(--fc-hand); font-size: 1.15rem; line-height: 1.2; color: var(--fc-ink-2); transform: rotate(-3deg); }
/* the pencil tucked under the clip */
.ws-pencil { position: absolute; top: -4px; left: 50%; z-index: 3; width: 200px; height: 24px; transform: translateX(-4%) rotate(-7deg); filter: drop-shadow(2px 3px 0 rgba(22, 58, 37, 0.3)); }
.ws-pencil path { stroke: var(--fc-ink); stroke-width: 2; stroke-linejoin: round; }
.ws-pencil__wood { fill: var(--fc-wood); }
.ws-pencil__lead { fill: var(--fc-ink); }
.ws-pencil__body { fill: var(--fc-sun); }
.ws-pencil__rib { stroke: rgba(22, 58, 37, 0.3); stroke-width: 1.2; }
.ws-pencil__band { fill: var(--fc-steel-b); }
.ws-pencil__eraser { fill: var(--fc-peach); }
@media (max-width: 600px) {
  .ws-cta__form { justify-items: stretch; }
  .ws-cta__form .btn-ghost { width: 100%; }
  .ws-pencil { width: 150px; height: 18px; }
}

/* ---------- the narrow edges ---------- */
@media (max-width: 640px) {
  /* the work order header stacks: the separator dot would start a line */
  .ws-order__dot { display: none; }
}
@media (max-width: 600px) {
  #speed .fc-h2 { font-size: clamp(1.5rem, 7.2vw, 2.1rem); }
}
@media (min-width: 960px) and (max-width: 1199px) {
  /* the eyebrow wraps in the two-column price: its trailing rule would hang alone */
  .ws-price__eyebrow::after { display: none; }
}
@media (max-width: 359px) {
  .ws-sign .fc-sign__num { font-size: 2.8rem; }
  .ws-sign .fc-sign__board { padding-inline: 18px; }
  .ws-sig { padding-inline: 16px; }
  .ws-sig__stamp { padding-inline: 14px; font-size: 0.95rem; }
  .ws-walk__paper { padding-inline: 12px; }
  .ws-walk__prop .fc-field-line { --w: 6em; }
  .ws-walk__by { font-size: 0.94rem; }
  .ws-walk__by .fc-hw { font-size: 0.98rem; }
}

/* ---------- reduced motion: everything rests finished; the pegboard's peek jumps, never scrolls ---------- */
@media (prefers-reduced-motion: reduce) {
  .ws-float,
  .ws-site,
  .ws-yard .ws-yard__shadow,
  .ws-mob__est,
  .ws-mob__est.is-pulsing,
  .ws-frame__win .fc-browser__live::before,
  .ws-sig__stamp::after,
  .ws-sign .fc-sign__board::after,
  .ws-mower { animation: none; }
  .ws-hero__pause { display: none; }
  .ws-shot img,
  .ws-frame:hover .ws-shot img,
  .ws-frame:focus-within .ws-shot img,
  .ws-frame.peek .ws-shot img { transition: none; }
  .ws-sig__stamp::after,
  .ws-sign .fc-sign__board::after { display: none; }
}