/* ==========================================================================
   Google Ads page only (google-ads.html). Loads after css/core.css and css/lawn.css.
   Page-only art uses the .ga- prefix; kit classes are only restyled under a .ga- scope.
   ========================================================================== */

/* ---------- 1. Hero: the phone over the shaggy yard ---------- */
/* the deck's three desktop lines ("They're searching" / "lawn care near me" right now. / Be the
   name they find.): a slab sized so the quoted search never splits, and a wider copy column.
   Phones keep the one break before the marker line. */
.ga-br { display: none; }
@media (min-width: 700px) {
  .ga-br { display: inline; }
  .ga-q { white-space: nowrap; }
}
@media (min-width: 1000px) {
  #top .fc-phero__grid { grid-template-columns: minmax(0, 1.26fr) minmax(0, 0.74fr); }   /* the quote line stays whole at the kit's --long size */
}
.ga-cue { margin-top: 14px; font-size: 0.95rem; }
.ga-cue .fc-link,
.ga-punch--left .fc-link { display: inline-flex; align-items: center; min-height: 44px; }
.ga-shag { position: relative; display: grid; justify-items: center; width: min(100%, 520px); padding-top: 8px; }
.ga-shag__yard {
  display: block;
  grid-area: 1 / 1;
  align-self: end;
  width: 100%;
  height: auto;
  border: var(--fc-line);
  border-radius: var(--fc-r3);
  box-shadow: var(--fc-chunk-lg);
}
.ga-shag__hold { position: relative; grid-area: 1 / 1; align-self: start; margin-bottom: 64px; }
.ga-shag__phone { --pw: 232px; transform: rotate(-3deg); }
/* z-index 3: above the phone (.fc-phone is its own z-index 2 layer, hand included) so the
   hand never paints over the pause control or its focus ring */
.ga-shag__pause { position: absolute; right: -64px; bottom: 40px; z-index: 3; }
.ga-shag__cap { grid-area: 2 / 1; justify-self: center; max-width: 22em; margin-top: 20px; text-align: center; }
@media (max-width: 600px) {
  .ga-shag__phone { --pw: 206px; }
  .ga-shag__hold { margin-bottom: 48px; }
  .ga-shag__pause { right: -54px; }
}
/* keep the focus ring clear of the hero's clipped edge on the narrowest phones */
@media (max-width: 360px) { .ga-shag__pause { right: -40px; } }
/* the typing loop stands still without JS and with reduced motion (site.js), so its pause
   button goes too */
html:not(.js) .ga-shag__pause { display: none; }
@media (prefers-reduced-motion: reduce) { .ga-shag__pause { display: none; } }

/* ---------- 2. The video on the dash ---------- */
.ga-dash { padding-bottom: calc(var(--sf-pad) * 0.4 + 60px); }
.ga-dash .fc-dash { width: 100%; padding-bottom: 20px; }
/* the sticky rides the tablet's lower bezel, clear of the player and its controls */
.ga-dash .fc-dash__note { position: relative; right: auto; bottom: auto; display: table; max-width: none; margin: 16px 12px 0 auto; }
@media (max-width: 600px) { .ga-dash .fc-dash__note { margin: 14px 4px 0 auto; } }
.ga-coffee { position: absolute; left: 7%; bottom: 36px; z-index: 2; width: 44px; height: 52px; }
/* the poster button: Wistia's own poster frame over the kit's drawn screen (which shows if the
   frame ever fails), an orange play disc, the run time. The Wistia player (about 760 KB with its
   scripts, a first video segment and a Sentry bundle) loads only on press (js/pages/google-ads.js).
   The screen clips an outside ring, so focus draws inside it: a white band, then an ink ring. */
.ga-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fc-ink-deep);
  cursor: pointer;
}
html:not(.js) .ga-play { visibility: hidden; }
.ga-play::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 8px; pointer-events: none; }
/* the ring rides the ::after layer: the poster image is its own positioned layer and would
   paint over an outline on the button itself */
.ga-play:focus-visible { outline: none; }
.ga-play:focus-visible::after { outline: 3px solid var(--fc-ink); outline-offset: -7px; box-shadow: inset 0 0 0 4px var(--fc-white); }
.ga-play__disc {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: var(--fc-line);
  border-radius: 50%;
  background: var(--fc-orange);
  box-shadow: var(--fc-chunk);
  transition: transform 0.2s var(--fc-bounce), box-shadow 0.2s var(--fc-ease);
}
.ga-play__disc svg { width: 26px; height: 26px; margin-left: 4px; fill: currentColor; }
.ga-play:focus-visible .ga-play__disc { transform: translate(-2px, -2px) scale(1.06); box-shadow: var(--fc-chunk-lg); }
@media (hover: hover) { .ga-play:hover .ga-play__disc { transform: translate(-2px, -2px) scale(1.06); box-shadow: var(--fc-chunk-lg); } }
.ga-play:active .ga-play__disc { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--fc-ink); }
.ga-play__time { position: absolute; left: 12px; bottom: 12px; z-index: 1; padding: 3px 9px; border: var(--fc-line); border-radius: 999px; background: var(--fc-white); font-family: var(--fc-mono); font-size: 0.8rem; font-weight: 700; line-height: 1.2; }
@media (max-width: 600px) {
  .ga-play__disc { width: 60px; height: 60px; }
  .ga-play__disc svg { width: 22px; height: 22px; }
  .ga-play__time { left: 8px; bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { .ga-play__disc { transition: none; } }

/* ---------- 3. The route map ---------- */
/* the split starts at 960px; until the copy column widens, a touch smaller keeps the head at 3 lines */
@media (min-width: 960px) and (max-width: 999px) { #radius .fc-h2--sm { font-size: 1.85rem; } }
.ga-routeboard { width: 100%; max-width: 620px; justify-self: center; }
.ga-map {
  position: relative;
  aspect-ratio: 1 / 0.92;
  overflow: hidden;
  border: 1.5px dashed rgba(22, 58, 37, 0.35);
  border-radius: 10px;
  background:
    linear-gradient(90deg, transparent 49.6%, rgba(22, 58, 37, 0.12) 49.6% 50.4%, transparent 50.4%),
    linear-gradient(transparent 49.6%, rgba(22, 58, 37, 0.12) 49.6% 50.4%, transparent 50.4%),
    radial-gradient(circle at 30% 70%, rgba(124, 196, 107, 0.2), transparent 30%),
    radial-gradient(circle at 75% 25%, rgba(124, 196, 107, 0.18), transparent 26%);
}
.ga-map__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.ga-map__ring--ads {
  width: 44.8%;
  height: 41.2%;
  border: 3px solid var(--fc-orange);
  background: rgba(255, 107, 44, 0.12);
  transition: width 0.25s var(--fc-ease), height 0.25s var(--fc-ease);
}
/* the Maps ring and its tag sit over the searcher dots and the flags; the home pin stays on top */
.ga-map__ring--maps { z-index: 3; width: 13.4%; height: 12.4%; border: 2.5px dashed var(--fc-ink); background: rgba(22, 58, 37, 0.06); }
.ga-map__tag {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  padding: 2px 8px;
  border: 1.5px solid var(--fc-ink);
  border-radius: 999px;
  background: var(--fc-white);
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
  transform: translateX(-50%);
}
/* the pin's point is the home base; its label rides above the pin, off the Maps ring */
.ga-map__home { position: absolute; top: 50%; left: 50%; z-index: 4; display: grid; justify-items: center; transform: translate(-50%, -100%); pointer-events: none; }
.ga-map__home svg { width: 26px; height: 32px; }
.ga-map__home span { order: -1; margin-bottom: 2px; padding: 1px 6px; border-radius: 4px; background: var(--fc-ink); color: var(--fc-chalk); font-size: 0.66rem; font-weight: 800; white-space: nowrap; }
@media (max-width: 480px) { .ga-map__home svg { width: 20px; height: 25px; } }
.ga-map__flag { --flag: 18px; position: absolute; top: var(--y); left: var(--x); z-index: 2; transform: translate(-30%, -100%); }
.ga-dot {
  position: absolute;
  z-index: 1;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border: 1.5px solid var(--fc-ink);
  border-radius: 50%;
  background: var(--fc-white);
  opacity: 0.55;
  transition: background-color 0.2s, opacity 0.2s, transform 0.2s;
}
.ga-dot.is-lit { background: var(--fc-orange); opacity: 1; animation: ga-ping 2.4s ease-in-out 1; }   /* one ping, under 5 s with its delay */
@keyframes ga-ping { 50% { transform: scale(1.35); } }
.ga-map__legend { display: flex; gap: 16px; margin-top: 10px; font-size: 0.8rem; font-weight: 800; }
.ga-map__legend > span { display: inline-flex; align-items: flex-end; gap: 6px; }
.ga-map__controls { display: grid; gap: 6px; margin-top: 14px; }
.ga-map__read { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; font-family: var(--fc-mono); font-size: 0.95rem; font-weight: 700; }
.ga-map__read span:first-child { color: var(--fc-orange-ink); }
.ga-map__label { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fc-ink-2); }
.ga-map__range { width: 100%; min-height: 44px; margin: 0; accent-color: var(--fc-orange); cursor: pointer; }
.ga-map__ends { display: flex; justify-content: space-between; font-size: 0.75rem; font-weight: 700; color: var(--fc-ink-2); }
.ga-map__fine { margin-top: 10px; font-size: 0.75rem; font-weight: 600; color: var(--fc-ink-2); }
html:not(.js) .ga-map__controls { display: none; }

/* the punch line after a scene */
.ga-punch { display: grid; gap: 6px; max-width: 40rem; margin: clamp(48px, 6vw, 72px) auto clamp(40px, 5vw, 56px); text-align: center; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); font-weight: 600; line-height: 1.45; }
.ga-punch p:first-child { font-family: var(--fc-display); font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2.1rem); font-weight: 400; line-height: 1.15; }
.ga-punch:not(.ga-punch--left) p:first-child strong { font-weight: 400; }   /* the slab has one weight */
.ga-punch--left { max-width: 44rem; margin-left: 0; text-align: left; }
.ga-punch--left p:first-child { font-family: var(--fc-body); font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem); font-weight: 700; line-height: 1.45; }
#season .ga-punch { margin-bottom: clamp(28px, 4vw, 44px); font-family: var(--fc-display); font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2.1rem); font-weight: 400; line-height: 1.15; }

/* ---------- 4. Two phones on the tailgate, the tape strips under it ---------- */
.ga-gate { max-width: 980px; margin: 0 auto; }
.ga-gate .fc-surface__row { gap: clamp(28px, 7vw, 110px); }
.ga-gate__slot { display: grid; justify-items: center; gap: 12px; }
.ga-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 24px; }
.ga-chips .fc-pill { font-size: 0.78rem; }
.ga-leaning { position: relative; transform: rotate(-3deg); transform-origin: 50% 100%; }
.ga-leaning--right { transform: rotate(3deg); }
.ga-flip { display: block; margin: 0; font: inherit; text-align: left; color: inherit; cursor: pointer; }
.ga-flip .fc-phone__screen { display: block; }
.ga-flip .fc-search,
.ga-flip .fc-result,
.ga-state { display: grid; }
.ga-flip .fc-search { display: flex; }
.ga-state { gap: 7px; margin-top: 10px; }
html.js .ga-flip:not(.is-flipped) .ga-state--b,
html.js .ga-flip.is-flipped .ga-state--a { display: none; }
.ga-flip.is-turning .fc-phone__screen { animation: fc-tagturn 0.4s var(--fc-ease); }
.ga-sticker {
  justify-self: center;
  text-wrap: balance;
  margin-top: 6px;
  padding: 5px 10px 6px;
  border: var(--fc-line);
  border-radius: 8px;
  background: var(--fc-red-tint);
  color: var(--fc-red-ink);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  transform: rotate(-3deg);
}
.ga-sticker--good { background: var(--fc-mint); color: var(--fc-green-ink); }
.ga-taphint { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-family: var(--fc-hand); font-size: 0.95rem; color: var(--fc-ink-2); }
html:not(.js) .ga-taphint { display: none; }
@media (max-width: 700px) {
  /* phones: each phone stands on its own stretch of the tailgate */
  .ga-gate.fc-surface--tailgate { padding-bottom: 0; }
  .ga-gate.fc-surface--tailgate::before,
  .ga-gate.fc-surface--tailgate::after { display: none; }
  .ga-gate__slot { position: relative; width: 100%; padding-bottom: 44px; }
  .ga-gate__slot::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40px;
    border: var(--fc-line);
    border-radius: 8px 8px 14px 14px;
    background: linear-gradient(transparent 0 10px, rgba(0, 0, 0, 0.14) 10px 12px, transparent 12px), linear-gradient(rgba(255, 255, 255, 0.22), transparent 40%), var(--fc-clover-2);
    box-shadow: var(--fc-chunk);
  }
  .ga-gate .fc-surface__row { row-gap: 36px; }
  /* each tape strip sits right under its own phone */
  #searches .fc-wrap { display: flex; flex-direction: column; }
  #searches .ga-gate,
  #searches .ga-gate .fc-surface__row,
  #searches .ga-strips { display: contents; }
  #searches .ga-gate__slot:nth-child(1) { order: 1; }
  #searches .ga-strip:nth-child(1) { order: 2; margin: 20px 0 44px; }
  #searches .ga-gate__slot:nth-child(2) { order: 3; }
  #searches .ga-strip:nth-child(2) { order: 4; margin-top: 20px; }
}
.ga-strips { display: grid; gap: 30px; max-width: 980px; margin: 44px auto 0; }
@media (min-width: 860px) { .ga-strips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 7vw, 110px); } }
.ga-strip {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 22px 22px 20px;
  background: rgba(244, 230, 190, 0.96);
  box-shadow: 2px 3px 0 rgba(22, 58, 37, 0.2);
  clip-path: polygon(0 1%, 5px 12%, 0 26%, 4px 44%, 0 62%, 5px 80%, 0 100%, 100% 100%, calc(100% - 5px) 84%, 100% 66%, calc(100% - 4px) 46%, 100% 28%, calc(100% - 5px) 12%, 100% 0);
  transform: rotate(-0.6deg);
}
.ga-strip--right { transform: rotate(0.6deg); }
.ga-strip__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; font-family: var(--fc-hand); font-size: 1.1rem; line-height: 1.3; }

/* ---------- 5. The storyboard and the pipe ---------- */
.ga-story { display: grid; gap: 0; }
.ga-story__panels { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .ga-story__panels { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 600px) and (max-width: 899px) { .ga-story__panels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ga-panel {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 10px 10px 16px;
  border: var(--fc-line);
  border-radius: 6px;
  background: var(--fc-white);
  box-shadow: var(--fc-chunk);
}
.ga-panel__art { overflow: hidden; border: var(--fc-line); border-radius: 3px; }
.ga-panel__art svg { display: block; width: 100%; height: auto; }
.ga-panel p { font-size: 0.975rem; line-height: 1.45; }
.ga-panel p b { font-family: var(--fc-display); font-weight: 400; font-size: 1.05rem; }
.ga-panel--win { border-color: var(--fc-ink); box-shadow: 4px 4px 0 var(--fc-orange), 4px 4px 0 2px var(--fc-ink); }
/* desktop: one comic strip, four frames in one border, not four cards */
@media (min-width: 900px) {
  .ga-story__panels { gap: 0; border: var(--fc-line); border-radius: 6px; background: var(--fc-white); box-shadow: var(--fc-chunk-lg); }
  .ga-panel { border: 0; border-right: var(--fc-line); border-radius: 0; box-shadow: none; background: none; }
  .ga-panel:last-child { border-right: 0; }
  .ga-panel--win { border-radius: 0 4px 4px 0; box-shadow: inset 0 -6px 0 var(--fc-orange); }
}
/* phones: a small frame beside its caption, so the caption keeps a wide column (about 3 to 5
   lines); the narrowest phones stack the frame over the caption instead */
@media (max-width: 599px) { .ga-panel { grid-template-columns: clamp(96px, 30vw - 20px, 144px) minmax(0, 1fr); gap: 12px; align-items: center; } }
@media (max-width: 359px) { .ga-panel { grid-template-columns: minmax(0, 1fr); } }
.ga-pipe { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0; margin-top: 26px; }
.ga-pipe__node { display: grid; gap: 2px; max-width: 14rem; text-wrap: balance; padding: 10px 14px; border: var(--fc-line); border-radius: var(--fc-r1); background: var(--fc-sun-2); box-shadow: 3px 3px 0 var(--fc-ink); font-size: 0.9rem; line-height: 1.25; }
.ga-pipe__node--end { background: var(--fc-mint); text-align: right; }
.ga-pipe__node small { font-size: 0.78rem; font-weight: 600; color: var(--fc-ink-2); }
.ga-pipe__run { position: relative; height: 16px; border-block: var(--fc-line); background: linear-gradient(90deg, rgba(255, 107, 44, 0.25), rgba(124, 196, 107, 0.45)); overflow: hidden; }
.ga-pipe__run i { position: absolute; top: 2px; left: -20px; width: 18px; height: 8px; border-radius: 4px; background: var(--fc-orange); box-shadow: 0 0 8px rgba(255, 107, 44, 0.8); animation: ga-pulse 2.4s linear 1; opacity: 0; }   /* one run each, done in 4 s */
.ga-pipe__run i:nth-child(2) { animation-delay: 0.8s; }
.ga-pipe__run i:nth-child(3) { animation-delay: 1.6s; }
@keyframes ga-pulse { 0% { left: -20px; opacity: 1; } 100% { left: 100%; opacity: 1; } }
@media (max-width: 599px) {
  .ga-pipe { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .ga-pipe__run { width: 16px; height: 44px; border-block: 0; border-inline: var(--fc-line); }
  .ga-pipe__run i { display: none; }
  .ga-pipe__node, .ga-pipe__node--end { text-align: center; }
}

/* ---------- 6. The season board ---------- */
.ga-seasonhead { max-width: 900px; }
#season .fc-split { align-items: start; }
.ga-board { margin: 0; }
.ga-board__head { font-family: var(--fc-hand); font-size: 1.3rem; }
.ga-board__months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; height: 170px; margin: 8px 0 0; padding: 0; list-style: none; border-bottom: 2px solid rgba(22, 58, 37, 0.35); }
.ga-board__months li { position: relative; display: grid; justify-items: center; height: 100%; border-left: 1.5px dashed rgba(22, 58, 37, 0.14); }
.ga-board__months li:first-child { border-left: 0; }
.ga-board__months .fc-magnet {
  top: auto;
  bottom: calc(22px + (var(--lv) - 1) * 26px);
  width: 22px;
  height: 22px;
  margin-left: -11px;
  transition: bottom 0.8s var(--fc-bounce);
  transition-delay: calc(var(--lv) * 60ms);
}
html.js .ga-board[data-play-on-view]:not(.is-playing) .fc-magnet { bottom: 22px; }
.ga-board__months b { position: absolute; bottom: 2px; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fc-ink-2); }
.ga-board__notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px 14px; margin: 14px 0 0; padding: 0; list-style: none; }
.ga-board__notes li { padding: 4px 2px; border-top: 3px solid var(--fc-ballpoint); color: var(--fc-ballpoint); font-size: 0.8rem; font-weight: 600; line-height: 1.3; }
.ga-board__notes li b { display: block; font-family: var(--fc-hand); font-size: 0.95rem; font-weight: 400; }
.ga-board__marker { display: grid; gap: 6px; margin-top: 16px; padding-top: 12px; border-top: 1.5px dashed rgba(22, 58, 37, 0.2); font-family: var(--fc-hand); font-size: 1.05rem; line-height: 1.3; }
.ga-board__wont { color: var(--fc-red-ink); }
.ga-board__will { color: var(--fc-green-ink); }
.ga-board__marker b { margin-right: 6px; font-weight: 400; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ga-board__corner { margin-top: 12px; font-size: 0.95rem; color: var(--fc-ink-2); }
.ga-board__tray { position: absolute; left: 10%; bottom: -44px; font-size: 0.72rem; font-weight: 700; color: var(--fc-ink-2); }
@media (max-width: 699px) {
  /* phones: the months run down the board; the notes stack under them */
  .ga-board__months { grid-template-columns: repeat(6, minmax(0, 1fr)); height: auto; row-gap: 12px; border-bottom: 0; }
  .ga-board__months li { height: 92px; border-left: 0; border-bottom: 2px solid rgba(22, 58, 37, 0.3); }
  .ga-board__months .fc-magnet { bottom: calc(20px + (var(--lv) - 1) * 13px); }
  .ga-board__notes { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 7. The register tapes on the corkboard ---------- */
.ga-cork { margin-top: 10px; }
.ga-tapes { display: grid; gap: 34px 24px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .ga-tapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ga-tapes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ga-tape .fc-receipt { width: 100%; max-width: 360px; }
@media (max-width: 759px) {
  /* phones: the tapes become a row you swipe through */
  .ga-cork { padding-inline: 0; }
  .ga-tapes { display: flex; gap: 18px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 14px; padding: 16px 14px 18px; scrollbar-width: none; }
  .ga-tapes::-webkit-scrollbar { display: none; }
  .ga-tape { flex: 0 0 88%; scroll-snap-align: center; }
  /* each label gets its own line; the leader and the value run under it */
  .ga-tape .fc-receipt__lines li { flex-wrap: wrap; }
  .ga-tape .fc-receipt__lines li > span:first-child { flex: 1 1 100%; }
}
.ga-tape:nth-child(2n) .fc-receipt { transform: rotate(0.8deg); }
.ga-tape .fc-receipt__head { display: grid; justify-items: center; gap: 8px; }
.ga-tape .fc-receipt__head .fc-stamp { position: static; transform: rotate(-4deg); }
.ga-tape .fc-receipt__paper { font-size: 0.85rem; }
.ga-tape--blank .fc-receipt__paper { background: var(--fc-white); }
.ga-tally { margin-top: 30px; text-align: center; }
.ga-tally .fc-labeltape { white-space: normal; }
.ga-caveat { max-width: 36em; margin: 14px auto 0; text-align: center; font-weight: 600; color: var(--fc-chalk-2); }

/* ---------- 8. The blank area work order ---------- */
.ga-workorder { width: 100%; max-width: 560px; justify-self: center; }
.ga-fields { margin-top: 16px; gap: 12px; }
.ga-fields div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.ga-fields dd { min-height: 26px; }
/* the stamp sits under the last row on phones and in the narrow split (960 to 1199px); where the
   sheet is wide enough it lands across the blank end of the last row, clear of the header rule */
.ga-workorder__stamp { position: static; display: inline-block; margin-top: 16px; transform: rotate(-4deg); }
@media (min-width: 601px) and (max-width: 959px), (min-width: 1200px) {
  .ga-workorder__stamp { position: absolute; bottom: 92px; right: 20px; margin: 0; transform: rotate(-8deg); }
}
.ga-workorder__note { display: block; margin-top: 18px; font-size: 1rem; color: var(--fc-ink-2); transform: rotate(-1.5deg); }

/* ---------- 9. Two door hangers on the front door, the yard sign beside ---------- */
.ga-porch { display: grid; gap: 40px; align-items: end; margin-top: 10px; }
@media (min-width: 1000px) { .ga-porch { grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; } }
.ga-door {
  position: relative;
  padding: 80px clamp(14px, 3vw, 36px) 36px;
  border: var(--fc-line);
  border-bottom-width: 10px;
  border-radius: 10px 10px 0 0;
  background:
    linear-gradient(90deg, transparent 0 10%, rgba(22, 58, 37, 0.14) 10% calc(10% + 2px), transparent calc(10% + 2px) calc(90% - 2px), rgba(22, 58, 37, 0.14) calc(90% - 2px) 90%, transparent 90%),
    linear-gradient(var(--fc-clover-2), var(--fc-clover));
  box-shadow: 0 0 0 12px var(--fc-white), 0 0 0 14px var(--fc-ink), var(--fc-chunk-lg);
  margin: 14px 14px 0;
}
.ga-door__knob {
  position: absolute;
  top: 40px;
  left: 50%;
  width: 30px;
  height: 30px;
  margin-left: -15px;
  border: var(--fc-line);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--fc-brass-hi), var(--fc-brass) 60%, var(--fc-brass-lo));
}
.ga-door__hangers { display: grid; gap: 30px; max-width: 760px; margin: 0 auto; }
@media (min-width: 760px) {
  .ga-door__hangers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  /* Premium hangs a little lower, in front */
  .ga-door__hangers > .fc-hanger:last-child { z-index: 2; margin-top: 22px; }
}
.ga-door .fc-hanger { --fc-hole: var(--fc-clover-2); }
.ga-door .fc-hanger__knob { display: none; }
.ga-porch__sign { justify-self: center; }
.ga-porch > .ga-porch__sign { --tilt: calc(var(--fc-tilt-sheet) * -1); }   /* the rule runs 3 lines in the 300px column */
.ga-porch__rule { font-family: var(--fc-display); font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem); font-weight: 400; line-height: 1.1; text-wrap: balance; }
.ga-under { display: grid; gap: 12px; max-width: 44rem; margin-top: clamp(44px, 6vw, 64px); }
.ga-under__book { min-height: 44px; margin: 0 6px; vertical-align: middle; }

/* ---------- 10. The curb sign, and the phone leaning on its stake ---------- */
#check .ga-signhead { font-family: var(--fc-display); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.05; }
#check .fc-cta__paper .fc-note { max-width: none; }
#check .fc-cta__copy { display: grid; gap: 14px; }
#check .fc-cta__board--sign .fc-cta__paper { padding-bottom: 112px; }
.ga-leaner { position: absolute; right: 7%; bottom: -96px; z-index: 3; transform: rotate(8deg); }
.ga-leaner .fc-phone { box-shadow: 4px 4px 0 var(--fc-ink); }
.ga-leaner .fc-phone__screen { padding: 26px 6px 8px; }
.ga-leaner .fc-search { min-height: 22px; padding: 0 6px; font-size: 0.55rem; }
.ga-leaner .fc-result { margin-top: 6px; padding: 5px 6px; font-size: 0.55rem; }
.ga-leaner .fc-result__title { font-size: 0.62rem; }
@media (max-width: 600px) { #check .fc-cta__board--sign .fc-cta__paper { padding-bottom: 26px; } }
@media (max-width: 600px) { .ga-leaner { display: none; } }