/* ==========================================================================
   Facebook Ads page only (facebook-ads.html). Loads after css/core.css and css/lawn.css.
   Page-only art uses the .fb- prefix; kit classes are only restyled under a .fb- scope or a
   section id. Every scene is drawn finished; motion only replays it.
   ========================================================================== */

/* the deck's desktop line breaks: only where the head has the room for them */
.fb-br { display: none; }
@media (min-width: 1000px) { .fb-br { display: inline; } }
.fb-head-wide { max-width: none; }
/* the interrupt head on phones: three lines, with "interrupt their scroll." (and its one
   highlighter slab) kept on the last; 7.6vw is the size at which that phrase fits down to 320px */
@media (max-width: 599px) { #interrupt .fc-h2 { font-size: clamp(1.5rem, 7.6vw, 2rem); } }
/* a word that must not break on its hyphen (non-compete), or a label kept whole */
.fb-nowrap { white-space: nowrap; }

/* a small avatar dot (initials or the brand letter) used inside the drawn phones */
.fb-av {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--fc-ink);
  border-radius: 50%;
  background: var(--av, var(--fc-leaf));
  color: var(--fc-ink);
  font-size: 0.6rem;
  font-weight: 800;
  line-height: 1;
}
.fb-av--brand { --av: var(--fc-orange); color: var(--fc-ink-deep); font-family: var(--fc-display); font-weight: 400; font-size: 0.8rem; }

/* a drawn post in a feed: your sponsored video, and the gray posts around it */
.fb-adpost {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 8px 8px 9px;
  border: var(--fc-line);
  border-radius: 12px;
  background: var(--fc-pure);
  box-shadow: 2px 2px 0 var(--fc-ink);
}
.fb-adpost__who { display: flex; align-items: center; gap: 6px; font-size: 0.66rem; font-weight: 600; line-height: 1.25; color: var(--fc-ink-2); }
.fb-adpost__who b { font-weight: 800; color: var(--fc-ink); }
.fb-adpost__copy { font-size: 0.74rem; font-weight: 600; line-height: 1.35; }
.fb-video {
  position: relative;
  display: grid;
  place-items: center;
  height: 96px;
  overflow: hidden;
  border: 1.5px solid var(--fc-ink);
  border-radius: 8px;
  background: repeating-linear-gradient(90deg, var(--fc-lawn-a) 0 14px, var(--fc-lawn-b) 14px 28px);
}
/* before (thin, patchy) on the left, after (thick, striped) on the right */
.fb-video--split {
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), var(--fc-white) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    radial-gradient(circle at 20% 30%, var(--fc-sun-3) 0 6px, transparent 7px),
    radial-gradient(circle at 34% 70%, var(--fc-kraft) 0 8px, transparent 9px),
    radial-gradient(circle at 12% 78%, var(--fc-sun-3) 0 5px, transparent 6px),
    linear-gradient(90deg, var(--fc-leaf) 0 50%, transparent 50%),
    repeating-linear-gradient(90deg, var(--fc-lawn-a) 0 12px, var(--fc-lawn-b) 12px 24px);
}
.fb-video--tall { height: 150px; }
.fb-video--plugs {
  height: 78px;
  background:
    radial-gradient(ellipse 5px 7px, var(--fc-soil) 0 90%, transparent 100%) 0 0 / 22px 20px,
    repeating-linear-gradient(90deg, var(--fc-lawn-a) 0 12px, var(--fc-lawn-b) 12px 24px);
}
.fb-video__play {
  width: 34px;
  height: 34px;
  border: var(--fc-line);
  border-radius: 50%;
  background: var(--fc-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 3.8L12 8l-6.5 4.2z' fill='%23163A25'/%3E%3C/svg%3E") 55% 50% / 16px no-repeat;
  box-shadow: 2px 2px 0 var(--fc-ink);
}
.fb-video__time {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--fc-ink);
  color: var(--fc-chalk);
  font-family: var(--fc-mono);
  font-size: 0.66rem;
  font-weight: 700;
}
.fb-gray {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 6px 8px;
  align-content: start;
  padding: 9px;
  border: 1.5px solid rgba(22, 58, 37, 0.18);
  border-radius: 12px;
  background: var(--fc-paper-2);
}
.fb-gray i { display: block; height: 7px; border-radius: 4px; background: var(--fc-smoke); }
.fb-gray i:first-child { grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; }
.fb-gray i:nth-child(3) { grid-column: 1 / -1; height: 54px; border-radius: 8px; }
.fb-gray--short i:nth-child(2) { width: 60%; }

/* ==========================================================================
   1. Hero: the street at dusk
   ========================================================================== */
.fb-hero__head { min-width: 0; }
.fb-cue { margin-top: 10px; font-size: 0.95rem; }
.fb-cue .fc-link { display: inline-flex; align-items: center; min-height: 44px; }
#top .fb-hero__sub2 { margin-top: -10px; }
@media (min-width: 1000px) {
  /* the head spans both columns, so the h1 keeps the deck's two lines */
  .fb-hero__grid { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); row-gap: 26px; align-items: start; }
  .fb-hero__head { grid-column: 1 / -1; }
  .fb-h1 { margin-bottom: 0; }
  #top .fc-phero__copy { padding-top: 6px; }
}
@media (max-width: 999px) {
  .fb-hero__grid { row-gap: 14px; }
  #top .fc-phero__object { margin-top: 30px; }
}
@media (max-width: 600px) {
  #top .fc-phero__sub { font-size: 1rem; line-height: 1.5; }
  #top .fb-hero__sub2 { margin-top: -8px; }
}

.fb-street { position: relative; width: 100%; max-width: 680px; margin: 0; }
.fb-street > .fc-sample--pin { top: -12px; right: auto; left: 22px; }
.fb-street__frame {
  /* dusk: the yards and the walks sit in shadow; only your customers' lawns keep full color */
  --fb-yard-dusk: color-mix(in srgb, var(--fc-lawn-b), var(--fc-night) 40%);
  --fb-back-dusk: color-mix(in srgb, var(--fc-clover), var(--fc-night) 42%);
  --fb-walk-dusk: color-mix(in srgb, var(--fc-walk), var(--fc-night) 34%);
  position: relative;
  container-type: inline-size;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: var(--fc-line);
  border-radius: var(--fc-r3);
  /* dusk sky, the back yards, the walk, the front yards, the sidewalk, the curb, the road */
  background:
    linear-gradient(transparent 83.4%, var(--fc-ink) 83.4% 83.8%, var(--fc-curb-a) 83.8% 86.4%, var(--fc-ink) 86.4% 87%, var(--fc-asphalt) 87%),
    linear-gradient(transparent 80%, var(--fb-walk-dusk) 80% 83.4%, transparent 83.4%),
    linear-gradient(transparent 45%, var(--fb-walk-dusk) 45% 47.6%, transparent 47.6%),
    linear-gradient(transparent 28%, var(--fb-back-dusk) 28% 45%, transparent 45% 47.6%, var(--fb-yard-dusk) 47.6% 80%, transparent 80%),
    linear-gradient(var(--fc-dusk-b), var(--fc-dusk-a) 30%);
  box-shadow: var(--fc-chunk-lg);
}
.fb-street__sky { position: absolute; top: 0; left: 0; right: 0; height: 29%; }
.fb-street__skyart { display: block; width: 100%; height: 100%; }
.fb-street__road {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 13%;
  background: repeating-linear-gradient(90deg, var(--fc-sun) 0 6cqw, transparent 6cqw 11cqw) 0 55% / 100% 0.6cqw no-repeat;
  pointer-events: none;
}
.fb-street__row { position: absolute; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; }
.fb-street__row--back { z-index: 1; top: 7.6cqw; left: 3.2%; right: 3.2%; column-gap: 2.2cqw; }
.fb-street__row--front { z-index: 2; top: 25.8cqw; left: 1.2%; right: 1.2%; column-gap: 1.2cqw; }
.fb-street__row--back .fb-house__lawn { background: var(--fc-clover); }

/* one house = one button; state lives in custom properties the drawing reads */
.fb-house {
  --win: var(--fc-night);
  --lamp: var(--fc-ink-3);
  --dusk: 0.6;
  --glow: 0;
  --halo: 0;
  --phone: 0;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 120 / 124;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fb-house > svg { position: relative; z-index: 1; display: block; width: 100%; height: auto; aspect-ratio: 120 / 110; overflow: visible; }
.fb-house.is-lit,
.fb-house.is-ping { --win: var(--fc-glow); --lamp: var(--fc-sun); --dusk: 0.06; --glow: 0.55; --halo: 0.75; --phone: 1; --aura: 0.7; }
.fb-house.is-ping > svg { animation: fb-ping 1.6s var(--fc-ease); }
.fb-house.is-pop > svg { animation: fb-pop 0.5s var(--fc-bounce); }
.fb-house:hover:not(.is-lit) > svg { transform: translateY(-2px); }
.fb-house:focus-visible { outline: 3px solid var(--fc-sun); outline-offset: 2px; }
@keyframes fb-pop { 40% { transform: translateY(-5%) scale(1.04); } }
@keyframes fb-ping { 12% { transform: scale(1.05); } 30%, 100% { transform: none; } }
/* the yard in front of each house; your customers' yards are mowed in stripes */
.fb-house__lawn {
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: 0;
  z-index: 0;
  height: 29%;
  border-top: 2px solid var(--fc-ink);
  background: var(--fc-lawn-b);
}
.fb-house.is-customer .fb-house__lawn { background: repeating-linear-gradient(90deg, var(--fc-lawn-a) 0 1.5cqw, var(--fc-lawn-b) 1.5cqw 3cqw); }
/* a dark house's yard is in the dusk; lit, it comes back to full green */
.fb-house:not(.is-lit):not(.is-ping) .fb-house__lawn { background: var(--fb-yard-dusk); }
.fb-street__row--back .fb-house:not(.is-lit):not(.is-ping) .fb-house__lawn { background: var(--fb-back-dusk); }
.fb-house > svg { transition: filter 0.4s var(--fc-ease); }
.fb-house:not(.is-lit):not(.is-ping) > svg { filter: saturate(0.7) brightness(0.9); }
/* a mailbox at the curb in front of each house on the near side */
.fb-street__row--front .fb-house::after {
  content: "";
  position: absolute;
  right: 3%;
  bottom: -1.2cqw;
  z-index: 2;
  width: 2.4cqw;
  height: 4.6cqw;
  background:
    linear-gradient(var(--fc-ink), var(--fc-ink)) 50% 100% / 0.45cqw 58% no-repeat,
    linear-gradient(var(--box, var(--fc-white)), var(--box, var(--fc-white))) 0 0 / 100% 42% no-repeat;
  filter: drop-shadow(1px 0 0 var(--fc-ink)) drop-shadow(-1px 0 0 var(--fc-ink)) drop-shadow(0 -1px 0 var(--fc-ink));
}
.fb-street__row--front .fb-house:nth-child(2)::after { --box: var(--fc-sun); }
.fb-street__row--front .fb-house:nth-child(4)::after { --box: var(--fc-sky); }
/* a hedge beside some houses on the far side */
.fb-street__row--back .fb-house:nth-child(odd)::before {
  content: "";
  position: absolute;
  left: -6%;
  bottom: 27%;
  z-index: 2;
  width: 26%;
  height: 15%;
  border: 1.5px solid var(--fc-ink);
  border-radius: 50% 50% 30% 30% / 70% 70% 30% 30%;
  background: var(--fc-bush);
}
/* the little yard sign, stakes into the stripes */
.fb-house__sign {
  position: absolute;
  left: 5%;
  bottom: 9%;
  z-index: 2;
  display: grid;
  padding: 0.35cqw 0.6cqw 0.3cqw;
  border: 1.5px solid var(--fc-ink);
  border-radius: 3px;
  background: var(--fc-white);
  color: var(--fc-ink);
  font-size: max(6px, 1.2cqw);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.12;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 1px 1px 0 var(--fc-ink);
  transform: rotate(-3deg);
}
.fb-house__sign::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 22%;
  right: 22%;
  height: 1.6cqw;
  border-inline: 1.5px solid var(--fc-ink);
}

/* your ad, up in the dusk sky: the thing that drops into the windows */
.fb-street__ad { position: absolute; top: 1.8cqw; right: 2.6cqw; z-index: 3; animation: fb-float 4.5s ease-in-out 1; }
@keyframes fb-float { 50% { transform: translateY(-5px) rotate(-1deg); } }
.fb-adcard {
  display: inline-flex;
  align-items: center;
  gap: 0.9cqw;
  padding: 0.8cqw 0.9cqw 0.8cqw 0.8cqw;
  border: var(--fc-line);
  border-radius: 999px;
  background: var(--fc-white);
  box-shadow: 3px 3px 0 var(--fc-ink), 0 0 0 5px rgba(255, 233, 168, 0.35);
  color: var(--fc-ink);
  font-size: max(9px, 1.75cqw);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.fb-adcard b { font-weight: 800; }
.fb-adcard__av {
  display: grid;
  place-items: center;
  width: 3.6cqw;
  height: 3.6cqw;
  min-width: 18px;
  min-height: 18px;
  border: 1.5px solid var(--fc-ink);
  border-radius: 50%;
  background: var(--fc-orange);
  font-family: var(--fc-display);
  font-size: max(9px, 1.7cqw);
  font-weight: 400;
}
.fb-adcard__vid {
  width: 5cqw;
  height: 3.6cqw;
  min-width: 24px;
  min-height: 18px;
  border: 1.5px solid var(--fc-ink);
  border-radius: 4px;
  background: repeating-linear-gradient(90deg, var(--fc-lawn-a) 0 4px, var(--fc-lawn-b) 4px 8px);
}
/* the copy that flies into a window (made by the page script) */
.fb-flyer { position: absolute; z-index: 4; top: 0; left: 0; pointer-events: none; transform-origin: 0 0; }

.fb-street__foot { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
.fb-street__cap {
  max-width: 34em;
  text-wrap: balance;
  padding: 9px 16px 10px;
  border: var(--fc-line);
  border-radius: 14px;
  background: var(--fc-white);
  box-shadow: 3px 3px 0 var(--fc-ink);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  transform: rotate(-0.6deg);
}
.fb-street__cap b { font-weight: 800; }
.fb-street__pausebox { flex: none; }
html:not(.js) .fb-street__pausebox { display: none; }
@media (prefers-reduced-motion: reduce) { .fb-street__pausebox { display: none; } }
@media (max-width: 600px) {
  .fb-adcard { gap: 4px; padding: 3px 7px 3px 3px; font-size: 8px; }
  .fb-adcard__av { min-width: 15px; min-height: 15px; font-size: 8px; }
  .fb-adcard__vid { display: none; }
  .fb-street__foot { gap: 10px; margin-top: 14px; }
  .fb-street__cap { font-size: 0.875rem; padding: 8px 12px 9px; }
}

/* ==========================================================================
   2. The switch: Dana's post, and the two front windows
   ========================================================================== */
@media (min-width: 960px) {
  .fb-switch { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  /* the words stay beside the tall phone while it scrolls past */
  .fb-switch__copy { position: sticky; top: calc(var(--fc-header-h) + 32px); align-self: start; padding-top: 40px; }
}
.fb-switch__marker { margin-top: 26px; font-size: clamp(1.45rem, 1.1rem + 1vw, 1.9rem); color: var(--fc-orange-ink); }
.fb-switch__marker .fc-hand__arrow { width: 74px; height: 40px; }
@media (max-width: 959px) {
  /* the arrow starts under the words and points down to the phone */
  .fb-switch__marker .fc-hand__arrow { display: block; margin: 8px 0 0 40%; transform: rotate(80deg); }
}
.fb-post { display: grid; justify-items: center; gap: 22px; }
.fb-post__tag { text-align: center; }
/* the phone is a little taller than the kit's, so the thumb holds it below Dana's reply */
.fb-post__phone { --pw: 282px; height: calc(var(--pw) * 2.2); }
.fb-post__phone .fc-phone__screen { display: grid; align-content: start; gap: 10px; padding-top: 38px; }
.fb-group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 -10px;
  padding: 0 12px 8px;
  border-bottom: 1.5px solid rgba(22, 58, 37, 0.18);
  font-size: 0.8rem;
  font-weight: 800;
}
.fb-group__icon {
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--fc-ink);
  border-radius: 7px;
  background:
    linear-gradient(var(--fc-white), var(--fc-white)) 50% 70% / 8px 7px no-repeat,
    conic-gradient(from 135deg at 50% 22%, var(--fc-orange) 0 90deg, transparent 90deg) 0 0 / 100% 55% no-repeat,
    var(--fc-mint);
}
.fb-gpost { display: grid; gap: 6px; padding: 9px 10px 10px; border: var(--fc-line); border-radius: 12px; background: var(--fc-pure); box-shadow: 2px 2px 0 var(--fc-ink); }
.fb-gpost__who { display: flex; align-items: center; gap: 7px; font-size: 0.8rem; }
.fb-gpost__text { font-size: 0.8rem; font-weight: 600; line-height: 1.35; }
.fb-replies { display: grid; gap: 7px; margin: 0; padding: 0 0 0 10px; list-style: none; border-left: 2px solid rgba(22, 58, 37, 0.14); }
.fb-reply { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 6px; align-items: start; }
.fb-reply .fb-av { width: 24px; height: 24px; font-size: 0.55rem; }
.fb-reply p { padding: 5px 9px 6px; border: 1.5px solid var(--fc-ink); border-radius: 4px 12px 12px 12px; background: var(--fc-bubble); font-size: 0.74rem; font-weight: 600; line-height: 1.3; }
.fb-reply p b { display: block; font-size: 0.68rem; font-weight: 800; }
.fb-reply--dana p { background: var(--fc-sticky-mint); }
.fb-reply { transition: opacity 0.45s var(--fc-ease), transform 0.55s var(--fc-bounce); transition-delay: calc(var(--i) * 650ms + 300ms); }
html.js .fb-post__hold[data-play-on-view]:not(.is-playing) .fb-reply { opacity: 0; transform: translateY(14px) scale(0.96); }
@media (max-width: 600px) {
  .fb-post__phone { --pw: 268px; height: calc(var(--pw) * 2.3); }
  .fb-post__phone .fc-phone__screen { gap: 8px; }
  .fb-gpost__text { font-size: 0.76rem; }
  .fb-reply p { font-size: 0.7rem; padding: 4px 8px 5px; }
  .fb-reply p b { font-size: 0.64rem; }
}

.fb-ways__lead { margin: clamp(64px, 8vw, 96px) 0 30px; font-family: var(--fc-display); font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); font-weight: 400; line-height: 1.1; }
.fb-ways { display: grid; gap: 44px; }
@media (min-width: 760px) {
  /* two houses on one street, not a grid: the second sits lower and a step closer */
  .fb-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); }
  .fb-way--right { margin-top: clamp(40px, 5vw, 72px); }
  .fb-way--right .fb-way__art { z-index: 1; margin-left: -14px; }
}
.fb-way__art > .fc-sample--pin { top: auto; right: auto; bottom: -12px; left: 18px; z-index: 3; }
.fb-way--right .fb-way__art > .fc-sample--pin { left: auto; right: 18px; }
.fb-way { display: grid; gap: 14px; align-content: start; }
.fb-way__label { margin-bottom: -4px; }
.fb-way__art { position: relative; transform: rotate(-0.8deg); }
.fb-way--right .fb-way__art { transform: rotate(0.8deg); }
.fb-way__art > svg { display: block; width: 100%; height: auto; border: var(--fc-line); border-radius: var(--fc-r2); box-shadow: var(--fc-chunk); }
/* the thought bubble rises over the lawn, little puffs back down to the window */
.fb-think {
  position: absolute;
  top: 6%;
  right: 4%;
  z-index: 2;
  max-width: 13em;
  padding: 10px 16px 11px;
  border: var(--fc-line);
  border-radius: 999px;
  background: var(--fc-white);
  box-shadow: 3px 3px 0 var(--fc-ink);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  transform: rotate(2deg);
}
.fb-think::before,
.fb-think::after {
  content: "";
  position: absolute;
  border: var(--fc-line);
  border-radius: 50%;
  background: var(--fc-white);
}
.fb-think::before { top: calc(100% + 4px); left: 18%; width: 16px; height: 16px; }
.fb-think::after { top: calc(100% + 24px); left: 12%; width: 9px; height: 9px; }
.fb-think--right { right: auto; left: 4%; transform: rotate(-2deg); }
.fb-think--right::before { left: auto; right: 22%; }
.fb-think--right::after { left: auto; right: 18%; }
.fb-way figcaption { max-width: 32em; font-size: 1.02rem; line-height: 1.55; }
@media (max-width: 600px) {
  .fb-think { font-size: 0.85rem; padding: 7px 12px 8px; max-width: 11em; }
}

/* ==========================================================================
   3. Dana's fridge door
   ========================================================================== */
@media (min-width: 960px) {
  .fb-known { grid-template-columns: minmax(0, 5.3fr) minmax(0, 6.7fr); }
}
.fb-pull {
  margin-top: 10px;
  padding-top: 20px;
  border-top: 3px dashed rgba(22, 58, 37, 0.25);
  font-size: clamp(1.2rem, 1rem + 0.6vw, 1.45rem);
  font-weight: 700;
  line-height: 1.4;
}
.fb-fridge { margin: 0; padding-top: 30px; padding-bottom: 36px; }
.fb-fridge > .fc-sample--pin { right: 60px; }
.fb-fridge__title {
  position: relative;
  margin: 8px auto 26px;
  padding: 12px 18px 10px;
  border: var(--fc-line);
  border-radius: 4px;
  background: var(--fc-white);
  box-shadow: 3px 3px 0 rgba(22, 58, 37, 0.35);
  font-family: var(--fc-hand);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  line-height: 1.25;
  text-align: center;
  transform: rotate(-0.8deg);
}
.fb-fridge__board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; align-items: start; }
.fb-note {
  --r: -2deg;
  position: relative;
  justify-self: center;
  width: min(100%, 12.5em);
  padding: 22px 14px 14px;
  border: var(--fc-line);
  border-radius: 3px 3px 3px 16px;
  background: var(--note, var(--fc-sticky));
  box-shadow: 3px 3px 0 rgba(22, 58, 37, 0.8);
  font-family: var(--fc-hand);
  font-size: 1.02rem;
  line-height: 1.25;
  transform: rotate(var(--r));
}
.fb-note--1 { --r: -0.9deg; }
.fb-note--2 { --r: 0.8deg; --note: var(--fc-sticky-mint); margin-top: 14px; }
.fb-note--3 { --r: 0.7deg; --note: var(--fc-white); margin-left: 10px; }
.fb-note--4 { --r: -0.8deg; --note: var(--fc-sun-2); margin-right: 12px; }
.fb-note--5 { --r: 0.9deg; --note: var(--fc-sticky-mint); }
.fb-note--last { --r: -3deg; --note: var(--fc-white); font-size: 1.25rem; padding-block: 24px 16px; text-align: center; }
.fb-note--last .fc-circle::after { inset: -0.4em -0.5em -0.34em -0.46em; }
.fb-hanger {
  --r: -1deg;
  position: relative;
  grid-row: span 2;
  justify-self: center;
  width: min(100%, 11em);
  min-height: 250px;
  padding: 104px 16px 18px;
  border: var(--fc-line);
  border-radius: 10px 10px 4px 4px;
  background:
    linear-gradient(104deg, transparent 38%, rgba(22, 58, 37, 0.07) 38.5% 40%, transparent 40.5%),
    linear-gradient(76deg, transparent 58%, rgba(22, 58, 37, 0.06) 58.5% 60%, transparent 60.5%),
    linear-gradient(12deg, transparent 70%, rgba(22, 58, 37, 0.06) 70.5% 72%, transparent 72.5%),
    var(--fc-white);
  box-shadow: 4px 4px 0 rgba(22, 58, 37, 0.8);
  font-family: var(--fc-hand);
  font-size: 1.02rem;
  line-height: 1.25;
  transform: rotate(var(--r));
}
.fb-hanger__hole {
  position: absolute;
  top: 16px;
  left: 50%;
  width: 46px;
  height: 46px;
  margin-left: -23px;
  border: var(--fc-line);
  border-radius: 50%;
  background: var(--fc-fridge);
}
.fb-hanger__hole::after {
  content: "";
  position: absolute;
  top: 38px;
  left: 18px;
  width: 6px;
  height: 20px;
  border-inline: 2px solid var(--fc-ink);
  background: var(--fc-fridge);
}
.fb-hanger__band {
  position: absolute;
  top: 74px;
  left: 0;
  right: 0;
  height: 16px;
  border-block: var(--fc-line);
  background: repeating-linear-gradient(90deg, var(--fc-lawn-a) 0 10px, var(--fc-lawn-b) 10px 20px);
}
.fb-hanger > .fc-magnet { top: 70px; left: 82%; }
.fb-fridge .fc-magnet { z-index: 3; }
.fb-note,
.fb-hanger { transition: opacity 0.4s var(--fc-ease), transform 0.55s var(--fc-bounce); transition-delay: calc(var(--i) * 260ms + 150ms); }
html.js .fb-fridge[data-play-on-view]:not(.is-playing) .fb-note,
html.js .fb-fridge[data-play-on-view]:not(.is-playing) .fb-hanger { opacity: 0; transform: translateY(-16px) rotate(var(--r)) scale(1.06); }
@media (max-width: 600px) {
  /* the notes stay clear of the door handle */
  .fb-fridge__board { gap: 26px 12px; padding-right: 28px; }
  .fb-note { font-size: 0.92rem; padding: 20px 10px 12px; }
  .fb-note--last { font-size: 1.1rem; }
  .fb-hanger { --r: -0.6deg; min-height: 230px; padding: 100px 10px 14px; font-size: 0.92rem; }
}

/* ==========================================================================
   4. The search trap: two phones on a porch rail
   ========================================================================== */
.fb-search__copy { display: grid; gap: 14px 48px; max-width: 1040px; margin-bottom: clamp(40px, 5vw, 64px); }
@media (min-width: 860px) { .fb-search__copy { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fb-trap { position: relative; margin: 0 auto; max-width: 980px; }
.fb-trap__phones { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 48px clamp(40px, 12vw, 170px); }
.fb-trap__slot { display: grid; justify-items: center; gap: 14px; }
.fb-trap__lean { position: relative; transform-origin: 50% 100%; }
.fb-trap__lean--left { transform: rotate(-2.4deg); }
.fb-trap__lean--right { transform: rotate(1deg); }
.fb-trap__phone { --pw: 240px; }
.fb-trap__phone .fc-phone__screen { padding-top: 38px; }
.fb-pile { gap: 6px; }
/* one line of text, not flex pieces, so "Sponsored ·" stays with the name after it */
.fb-pile .fc-result__site { display: block; font-size: 0.72rem; line-height: 1.35; overflow-wrap: normal; }
.fb-pile .fc-result__site::before { display: inline-block; margin-right: 5px; vertical-align: -2px; }
.fb-pack { gap: 5px; background: var(--fc-sun-2); }
.fb-pack__head { font-size: 0.74rem; font-weight: 800; }
.fb-pack__map {
  position: relative;
  display: block;
  height: 58px;
  border: 1.5px solid var(--fc-ink);
  border-radius: 7px;
  background:
    linear-gradient(90deg, transparent 46%, var(--fc-white) 46% 52%, transparent 52%),
    linear-gradient(transparent 58%, var(--fc-white) 58% 66%, transparent 66%),
    var(--fc-mint);
}
.fb-pack__map i {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: 12px;
  height: 15px;
  margin: -15px 0 0 -6px;
  border: 1.5px solid var(--fc-ink);
  border-radius: 50% 50% 50% 0;
  background: var(--fc-can);
  transform: rotate(-45deg);
}
.fb-pack__pins { font-size: 0.66rem; font-weight: 700; color: var(--fc-ink-2); }
.fb-pile__item { transition: opacity 0.3s var(--fc-ease), transform 0.45s var(--fc-bounce); transition-delay: calc(var(--i) * 170ms); }
html.js .fb-trap:not(.is-open) .fb-pile__item { opacity: 0; transform: translateY(-22px); }
/* the marker scrawl over the pile */
.fb-scrawl { position: absolute; left: 8px; right: 8px; top: 80px; bottom: 20px; z-index: 3; pointer-events: none; }
.fb-scrawl svg { width: 100%; height: 100%; overflow: visible; }
.fb-scrawl path {
  fill: none;
  stroke: var(--fc-red-ink);
  stroke-width: 3.4px;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.55;
  stroke-dasharray: 1400;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s cubic-bezier(0.55, 0, 0.3, 1) 1s;
}
.fb-scrawl__word {
  position: absolute;
  z-index: 7;
  right: -34px;
  top: 47%;
  padding: 2px 12px 4px;
  border: 3px solid var(--fc-red-ink);
  border-radius: 12px;
  background: var(--fc-white);
  color: var(--fc-red-ink);
  font-family: var(--fc-hand);
  font-size: 1.6rem;
  line-height: 1.1;
  box-shadow: 3px 3px 0 var(--fc-ink);
  transform: rotate(-9deg);
  transition: opacity 0.3s 1.7s, transform 0.4s var(--fc-bounce) 1.7s;
}
html.js .fb-trap:not(.is-open) .fb-scrawl path { stroke-dashoffset: 1400; }
html.js .fb-trap:not(.is-open) .fb-scrawl__word { opacity: 0; transform: rotate(-9deg) scale(1.6); }
/* the calm feed: your post slides into view */
.fb-feed { overflow: hidden; }
.fb-feed__track { display: grid; gap: 10px; transform: translateY(-148px); transition: transform 1.3s var(--fc-ease); }
html.js .fb-trap:not(.is-settled) .fb-feed__track { transform: translateY(0); }
.fb-trap .fb-gray { min-height: 92px; }
.fb-trap .fb-gray--short { min-height: 52px; }
.fb-trap .fb-adpost { box-shadow: 3px 3px 0 var(--fc-ink), 0 0 0 4px rgba(255, 107, 44, 0.18); }
.fb-trap .fb-video { height: 120px; }
/* the porch rail the phones lean on */
.fb-rail { position: relative; z-index: 1; height: 116px; margin: -16px -2% 0; }
.fb-rail__top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 24px;
  border: var(--fc-line);
  border-radius: 6px;
  background:
    repeating-linear-gradient(90deg, transparent 0 90px, rgba(122, 75, 42, 0.18) 90px 92px, transparent 92px 210px),
    linear-gradient(transparent 0 8px, rgba(122, 75, 42, 0.14) 8px 9px, transparent 9px 15px, rgba(122, 75, 42, 0.12) 15px 16px, transparent 16px),
    var(--fc-wood);
  box-shadow: var(--fc-chunk);
}
.fb-rail__posts {
  position: absolute;
  left: 3%;
  right: 3%;
  top: 24px;
  bottom: 0;
  border-bottom: 12px solid var(--fc-wood);
  background: repeating-linear-gradient(90deg, var(--fc-ink) 0 2px, var(--fc-white) 2px 20px, var(--fc-ink) 20px 22px, transparent 22px 52px);
  box-shadow: 0 2px 0 var(--fc-ink);
}
.fb-trap__cap { position: relative; z-index: 2; max-width: 34em; margin: 28px auto 0; font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); font-weight: 600; line-height: 1.45; text-align: center; }
.fb-trap__cap strong { font-weight: 800; background: linear-gradient(transparent 56%, var(--fc-sun) 56% 92%, transparent 92%); }
@media (max-width: 640px) {
  .fb-trap__lean--left { transform: rotate(-1deg); }
  .fb-trap__phones { flex-direction: column; align-items: center; row-gap: 44px; }
  .fb-trap__slot { position: relative; width: 100%; padding-bottom: 30px; }
  .fb-trap__slot::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 24px;
    border: var(--fc-line);
    border-radius: 6px;
    background: var(--fc-wood);
    box-shadow: var(--fc-chunk);
  }
  .fb-rail { display: none; }
  .fb-trap__phone { --pw: 232px; }
}

/* ==========================================================================
   5. Interrupt marketing: the dictionary, the slates, the feed on a loop
   ========================================================================== */
.fb-interrupt { display: grid; gap: 56px; align-items: start; }
@media (min-width: 960px) { .fb-interrupt { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(40px, 5vw, 80px); } }
.fb-interrupt__paper { display: grid; gap: 44px; min-width: 0; }
.fb-dict { max-width: 38rem; padding-top: 30px; transform: rotate(-0.7deg); }
.fb-dict .fc-dict__word { padding-right: 34px; }
.fb-dict .fc-dict__word b { font-size: clamp(1.45rem, 1.05rem + 1.5vw, 2.4rem); }
.fb-dict__pos { margin-top: 10px; font-size: 0.975rem; color: var(--fc-ink-2); }
.fb-dict .fc-dict__defs { font-size: 1.05rem; line-height: 1.55; }
.fb-slates { display: grid; gap: 16px; }
.fb-slates__label { font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fc-orange-ink); }
.fb-slates__stack { display: grid; gap: 20px; max-width: 34rem; margin: 14px 0 0; padding: 0; list-style: none; }
.fb-slate { position: relative; display: grid; margin-left: calc(var(--i) * 10px); transform: rotate(calc((var(--i) - 2.5) * 0.3deg)); }
.fb-slate__clap {
  position: relative;
  z-index: 1;
  display: block;
  width: 40%;
  height: 15px;
  border: var(--fc-line);
  border-radius: 3px 3px 0 0;
  background: repeating-linear-gradient(-55deg, var(--fc-ink) 0 9px, var(--fc-chalk) 9px 18px);
  transform: rotate(-7deg) translateY(-2px);
  transform-origin: 4px 100%;
}
.fb-slate__clap::before {
  content: "";
  position: absolute;
  left: -3px;
  bottom: -5px;
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--fc-ink);
  border-radius: 50%;
  background: var(--fc-steel-b);
}
.fb-slate__board {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 14px 12px;
  border: var(--fc-line);
  border-radius: 0 8px 8px 8px;
  background: var(--fc-ink);
  box-shadow: 4px 4px 0 rgba(22, 58, 37, 0.35);
  color: var(--fc-chalk);
}
.fb-slate__board b { font-size: 1.02rem; font-weight: 700; line-height: 1.3; }
.fb-slate__no { font-family: var(--fc-display); font-size: 1.2rem; line-height: 1; color: var(--fc-sun); }
.fb-slate__time { padding: 2px 7px; border: 1.5px solid var(--fc-chalk-3); border-radius: 5px; font-family: var(--fc-mono); font-size: 0.8rem; font-weight: 700; color: var(--fc-chalk-2); }
.fb-slate--more .fb-slate__board { background: var(--fc-orange); color: var(--fc-ink-deep); box-shadow: 4px 4px 0 var(--fc-ink); }
.fb-slate--more .fb-slate__no { color: var(--fc-ink-deep); }
.fb-slate--more .fb-slate__clap { background: repeating-linear-gradient(-55deg, var(--fc-ink) 0 10px, var(--fc-sun) 10px 20px); }
.fb-slates__note { max-width: 32em; font-weight: 600; color: var(--fc-ink-2); }
@media (max-width: 600px) {
  .fb-slate { margin-left: calc(var(--i) * 4px); }
  .fb-slate__board { gap: 9px; padding: 10px 11px; }
  .fb-slate__board b { font-size: 0.95rem; }
}

.fb-loop { display: grid; justify-items: center; gap: 22px; margin: 0; }
@media (min-width: 960px) { .fb-loop { position: sticky; top: calc(var(--fc-header-h) + 40px); } }
.fb-loop__hold { position: relative; }
.fb-loop__phone { --pw: 262px; }
.fb-feed--loop { padding-top: 34px; }
.fb-loop__track { display: grid; gap: 10px; transform: translateY(-68px); animation: fb-feed 11s var(--fc-ease) 1.2s infinite; }
.fb-loop__half { display: grid; gap: 10px; }
.fb-feed--loop .fb-gray { height: 108px; }
.fb-feed--loop .fb-gray--short { height: 70px; }
.fb-feed--loop .fb-adpost { height: 226px; }
.fb-feed--loop .fb-video { height: 118px; }
/* scroll, stop on your post; scroll, stop on it again; one half later it loops without a seam */
@keyframes fb-feed {
  0%, 22% { transform: translateY(-68px); }
  40%, 62% { transform: translateY(-502px); }
  80%, 100% { transform: translateY(-936px); }
}
.fb-loop__hold.is-paused .fb-loop__track { animation-play-state: paused; }
.fb-loop__pause { position: absolute; right: -64px; bottom: 40px; }
html:not(.js) .fb-loop__pause { display: none; }
.fb-loop__cap { font-size: 1.25rem; }
@media (prefers-reduced-motion: reduce) {
  .fb-loop__track { animation: none; }
  .fb-loop__pause { display: none; }
}
@media (max-width: 600px) {
  .fb-loop__phone { --pw: 240px; }
  .fb-loop__pause { right: -56px; }
}
@media (max-width: 380px) {
  /* no room beside the phone: the pause button sits under it, inside the screen's width */
  .fb-loop__hold { margin-bottom: 58px; }
  .fb-loop__pause { right: auto; bottom: -60px; left: 50%; transform: translateX(-50%); }
}

.fb-mega { margin: clamp(64px, 8vw, 104px) auto 0; max-width: 1180px; text-align: center; }
.fb-mega p { font-family: var(--fc-display); font-size: clamp(1.55rem, 0.9rem + 2.2vw, 2.95rem); font-weight: 400; line-height: 1.14; text-wrap: balance; }

/* ==========================================================================
   6. The funnel: three phones on one mowed stripe
   ========================================================================== */
.fb-funnel { position: relative; display: grid; gap: 56px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .fb-funnel { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); } }
.fb-step { position: relative; z-index: 1; display: grid; justify-items: start; align-content: start; gap: 10px; min-width: 0; }
.fb-step__phone { position: relative; justify-self: center; margin-bottom: 18px; }
.fb-fphone { --pw: 232px; }
.fb-fphone .fc-phone__screen { display: grid; align-content: start; gap: 10px; padding-top: 38px; }
.fb-fphone .fb-toast { position: absolute; left: 10px; right: 10px; bottom: 14px; margin: 0; box-shadow: 0 4px 0 rgba(8, 24, 14, 0.3); }
.fb-fphone .fb-gray { opacity: 0.85; }
.fb-step__mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: var(--fc-line);
  border-radius: 50%;
  background: var(--fc-white);
  box-shadow: 2px 2px 0 var(--fc-ink);
  font-family: var(--fc-display);
  font-size: 1.05rem;
  line-height: 1;
}
.fb-step .fc-h3 { font-size: clamp(1.15rem, 1.05rem + 0.35vw, 1.35rem); }
.fb-step > p { max-width: 24em; color: var(--fc-ink-2); }
.fb-signup {
  justify-self: stretch;
  padding: 7px 0 8px;
  border: var(--fc-line);
  border-radius: 10px;
  background: var(--fc-orange);
  box-shadow: 2px 2px 0 var(--fc-ink);
  color: var(--fc-ink-deep);
  font-size: 0.8rem;
  font-weight: 800;
  text-align: center;
}
.fb-toast {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  padding: 8px 10px;
  border: var(--fc-line);
  border-radius: 12px;
  background: var(--fc-ink);
  color: var(--fc-chalk);
  font-size: 0.78rem;
  font-weight: 700;
}
.fb-toast::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--fc-lawn-a) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.4l2.3 2.3 4.7-5' fill='none' stroke='%23163A25' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}
/* the whole thread sits above the keyboard: a shorter keyboard, tighter bubbles */
.fb-fphone .fc-phone__screen:has(.fc-keyboard) { padding-top: 34px; }
.fb-fphone .fc-keyboard { height: 24%; max-height: 104px; }
.fb-fthread { gap: 8px; }
.fb-fthread .fc-bubble { max-width: 92%; padding: 7px 10px 8px; font-size: 0.74rem; line-height: 1.32; }
/* the stripe: a mowed path from the first phone to the third */
.fb-funnel__stripe { position: absolute; z-index: 0; top: 200px; left: 14%; right: 14%; height: 50px; pointer-events: none; }
.fb-funnel__cut {
  position: absolute;
  inset: 0;
  border: var(--fc-line);
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, var(--fc-lawn-a) 0 22px, var(--fc-lawn-b) 22px 44px);
  box-shadow: 3px 3px 0 rgba(22, 58, 37, 0.25);
  clip-path: inset(-6px -6px -6px -6px);
  transition: clip-path 2.6s cubic-bezier(0.45, 0, 0.25, 1) 0.2s;
}
html.js .fb-funnel[data-play-on-view]:not(.is-playing) .fb-funnel__cut { clip-path: inset(-6px 100% -6px -6px); }
@media (max-width: 899px) {
  .fb-funnel { padding-left: 62px; }
  .fb-funnel__stripe { top: 0; bottom: 0; left: 6px; right: auto; width: 34px; height: auto; }
  .fb-funnel__cut { background: repeating-linear-gradient(0deg, var(--fc-lawn-a) 0 18px, var(--fc-lawn-b) 18px 36px); }
  html.js .fb-funnel[data-play-on-view]:not(.is-playing) .fb-funnel__cut { clip-path: inset(-6px -6px 100% -6px); }
  .fb-step__mark { position: absolute; top: 0; left: -64px; }
  .fb-step__phone { justify-self: start; }
}
@media (max-width: 600px) {
  .fb-funnel { padding-left: 50px; }
  .fb-funnel__stripe { left: 0; width: 28px; }
  .fb-step__mark { left: -56px; width: 36px; height: 36px; }
  .fb-fphone { --pw: 228px; }
}

#funnel .fc-fence,
#noncompete .fc-fence { margin-top: clamp(48px, 6vw, 80px); }

/* ==========================================================================
   7. Market share: two streets, drawn as two oceans
   ========================================================================== */
.fb-oceans { position: relative; display: grid; gap: 18px; margin: 0; }
@media (min-width: 860px) { .fb-oceans { grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1fr); gap: 0; align-items: stretch; } }
.fb-ocean { position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: var(--fc-line); border-radius: var(--fc-r2); box-shadow: var(--fc-chunk-lg); }
.fb-ocean--red { background: var(--fc-red-tint); }
.fb-ocean--blue { background: var(--fc-sky-2); }
.fb-ocean__label { display: grid; gap: 4px; padding: 18px 20px 14px; border-bottom: var(--fc-line); }
.fb-ocean__label b { font-family: var(--fc-display); font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem); font-weight: 400; line-height: 1; }
.fb-ocean--red .fb-ocean__label b { color: var(--fc-red-ink); }
.fb-ocean--blue .fb-ocean__label b { color: var(--fc-ballpoint); }
.fb-ocean__label span { font-weight: 800; line-height: 1.35; }
.fb-ocean__label small { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; color: var(--fc-ink-2); }
.fb-ocean__map { display: block; width: 100%; height: auto; }
.fb-ocean__tag { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); white-space: nowrap; }
.fb-ocean__arrow { display: grid; justify-items: center; align-content: center; gap: 4px; }
.fb-ocean__arrow .fc-hand { font-size: 1.3rem; color: var(--fc-orange-ink); }
.fb-ocean__arrow svg { width: 92px; height: 50px; }
@media (max-width: 859px) {
  .fb-ocean__arrow { grid-auto-flow: column; gap: 10px; }
  .fb-ocean__arrow svg { width: 70px; height: 38px; transform: rotate(90deg); }
}
.fb-share__copy { max-width: none; }
.fb-cols { display: grid; gap: 14px 48px; max-width: 1040px; }
@media (min-width: 860px) { .fb-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==========================================================================
   8. The protocol: a job-spec sheet on a scuffed aluminum clipboard
   ========================================================================== */
.fb-alum.fc-board {
  width: 100%;
  max-width: 760px;
  background-color: var(--fc-steel-b);
  background-image:
    linear-gradient(118deg, transparent 20%, rgba(255, 255, 255, 0.35) 21%, transparent 23%),
    linear-gradient(64deg, transparent 72%, rgba(22, 58, 37, 0.1) 72.5%, transparent 74%),
    linear-gradient(160deg, transparent 84%, rgba(255, 255, 255, 0.4) 84.5%, transparent 86%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 2px, transparent 2px 5px),
    linear-gradient(135deg, var(--fc-steel-a), var(--fc-steel-b) 55%, var(--fc-steel-a));
  box-shadow: var(--fc-chunk-lg), inset 0 0 0 5px rgba(255, 255, 255, 0.35);
}
.fb-spec > .fc-ring { top: auto; right: auto; bottom: 18px; left: 44%; }
.fb-spec__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; padding-bottom: 12px; border-bottom: 4px double var(--fc-ink); }
.fb-spec__title { font-family: var(--fc-display); font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem); letter-spacing: 0.06em; text-transform: uppercase; }
.fb-spec__field { font-family: var(--fc-hand); font-size: 1.1rem; color: var(--fc-ballpoint); }
.fb-spec__rows { margin: 0; padding: 0; list-style: none; }
.fb-spec__row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 76px;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1.5px dashed rgba(22, 58, 37, 0.25);
}
.fb-spec__row:last-child { border-bottom: 0; padding-bottom: 4px; }
.fb-spec__no { align-self: start; padding-top: 2px; font-family: var(--fc-display); font-size: 1.25rem; line-height: 1; color: var(--fc-red-ink); }
.fb-spec__row h3 { font-size: 1.06rem; line-height: 1.25; }
.fb-spec__row p { margin-top: 3px; font-size: 0.95rem; line-height: 1.5; color: var(--fc-ink-2); }
.fb-rstamp {
  width: 76px;
  height: 76px;
  transform: rotate(-12deg);
  -webkit-mask: url("../../assets/lawn/paint.svg") 0 0 / 150px;
  mask: url("../../assets/lawn/paint.svg") 0 0 / 150px;
}
.fb-spec__row:nth-child(even) .fb-rstamp { transform: rotate(9deg); }
@media (max-width: 600px) {
  /* phones: the stamp sits beside the title, the text runs the full width under it */
  .fb-spec__row { grid-template-columns: 26px minmax(0, 1fr) 50px; gap: 4px 10px; align-items: start; }
  .fb-spec__row > div { display: contents; }
  .fb-spec__row h3 { grid-column: 2; grid-row: 1; align-self: center; }
  .fb-spec__row p { grid-column: 2 / -1; grid-row: 2; margin-top: 0; }
  .fb-spec__no { grid-row: 1; align-self: center; padding-top: 0; }
  .fb-rstamp { grid-column: 3; grid-row: 1; width: 50px; height: 50px; }
}

/* ==========================================================================
   9. Three work orders on the shop wall, the year on a wall calendar under them
   ========================================================================== */
#jobs .fc-lead { max-width: 46em; }
.fb-wall { padding-top: clamp(40px, 5vw, 60px); }
.fb-wos { display: grid; gap: 48px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) {
  /* hung by hand: each on its own nail height, the middle one lapped over its neighbors */
  .fb-wos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); align-items: start; }
  .fb-wo:nth-child(2) { z-index: 2; margin: 64px -14px 0; }
  .fb-wo:nth-child(3) { margin-top: 20px; }
}
.fb-wo { --r: -0.9deg; position: relative; padding-top: 22px; transform: rotate(var(--r)); }
.fb-wo:nth-child(2) { --r: 0.8deg; }
.fb-wo:nth-child(3) { --r: -0.5deg; }
/* the nail and the bulldog clip */
.fb-wo__clip {
  position: absolute;
  top: -6px;
  left: 50%;
  z-index: 4;
  width: 70px;
  height: 36px;
  margin-left: -35px;
  border: var(--fc-line);
  border-radius: 8px 8px 4px 4px;
  background: linear-gradient(var(--fc-steel-a), var(--fc-steel-b) 60%, var(--fc-steel-c));
  box-shadow: 2px 3px 0 rgba(22, 58, 37, 0.35);
}
.fb-wo__clip::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 50%;
  width: 26px;
  height: 22px;
  margin-left: -13px;
  border: var(--fc-line);
  border-bottom: 0;
  border-radius: 13px 13px 0 0;
  background: transparent;
}
.fb-wo__clip::after {
  content: "";
  position: absolute;
  top: -24px;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border: var(--fc-line);
  border-radius: 50%;
  background: var(--fc-nail);
}
.fb-wo__copy { position: absolute; inset: 22px 0 8px; border: var(--fc-line); border-radius: 5px; }
.fb-wo__copy--pink { background: var(--fc-carbon-pink); transform: translate(10px, 10px) rotate(1.4deg); }
.fb-wo__copy--yellow { background: var(--fc-carbon-yellow); transform: translate(5px, 5px) rotate(0.7deg); }
.fb-wo__sheet { position: relative; filter: var(--fc-outline) drop-shadow(4px 4px 0 rgba(22, 58, 37, 0.3)); }
.fb-wo__paper {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 30px 20px 48px;
  border-radius: 5px 5px 0 0;
  background: var(--fc-sheet);
  -webkit-mask:
    linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 11px) no-repeat,
    url("../../assets/lawn/tear.svg") 0 100% / 160px 12px repeat-x;
  mask:
    linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 11px) no-repeat,
    url("../../assets/lawn/tear.svg") 0 100% / 160px 12px repeat-x;
}
.fb-wo__top { padding-bottom: 9px; border-bottom: 4px double var(--fc-ink); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; }
.fb-wo__kind { color: var(--fc-red-ink); }
.fb-wo__title { font-family: var(--fc-display); font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.7rem); font-weight: 400; line-height: 1.08; }
.fb-wo__paper > p:not(.fb-wo__top) { color: var(--fc-ink-2); line-height: 1.5; }
.fb-wo__stamp { justify-self: end; margin-top: 6px; font-size: 0.85rem; }
.fb-wo:nth-child(2) .fb-wo__stamp { transform: rotate(5deg); }

/* the year, March to February: a strip of tape per season across its months */
.fb-year.fc-season { max-width: 1120px; margin: clamp(56px, 7vw, 88px) auto 0; padding: 0 clamp(14px, 2vw, 24px) clamp(18px, 2.4vw, 26px); }
.fb-year__label {
  display: inline-block;
  margin: -2px 0 14px -2px;
  padding: 8px 16px 9px;
  border: var(--fc-line);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  background: var(--fc-ink);
  color: var(--fc-chalk);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-wrap: balance;
  text-transform: uppercase;
}
.fb-year__rows {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 16px 0 0;
  list-style: none;
  background-image: linear-gradient(90deg, rgba(22, 58, 37, 0.1) 1px, transparent 1px);
  background-size: calc(100% / 12) 100%;
}
.fb-year__row { color: var(--fc-ink-2); font-size: 0.95rem; line-height: 1.4; }
.fb-year__txt { text-wrap: pretty; }
/* the " · " between a season and its words: read aloud, drawn only on phones */
.fb-sep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fb-year__name { font-family: var(--fc-display); font-weight: 400; color: var(--fc-ink); }
@media (min-width: 900px) {
  /* a Gantt of the year: the season's name is lettered on its tape, the words run beside it */
  .fb-year__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; min-height: 46px; }
  .fb-year__name {
    grid-row: 1;
    grid-column: var(--from) / span var(--span);
    align-self: stretch;
    display: grid;
    place-items: center;
    padding: 6px 10px;
    border: var(--fc-line);
    border-radius: 4px;
    background: var(--tape);
    box-shadow: 3px 3px 0 rgba(22, 58, 37, 0.3);
    font-size: clamp(0.95rem, 0.7rem + 0.45vw, 1.15rem);
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
    transform: rotate(-0.6deg);
  }
  .fb-year__row:nth-child(even) .fb-year__name { transform: rotate(0.7deg); }
  .fb-year__txt { grid-row: 1; grid-column: var(--txt); padding: 0 0 0 16px; }
  .fb-year__row--end .fb-year__txt { padding: 0 16px 0 0; text-align: right; }
}
@media (max-width: 600px) {
  /* twelve months in a phone's width: the narrower body face, so each name keeps its own column */
  .fb-year__months li { font-family: var(--fc-body); font-size: 0.6rem; font-weight: 800; letter-spacing: 0; }
}
@media (max-width: 899px) {
  .fb-year__rows { gap: 16px; }
  .fb-year__name { font-size: 1.05rem; }
  .fb-year .fb-sep { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; color: var(--fc-ink); }
  /* the tape sits under the words, at its months */
  .fb-year__row::after {
    content: "";
    display: block;
    width: calc(var(--span) * 100% / 12);
    height: 14px;
    margin: 6px 0 0 calc((var(--from) - 1) * 100% / 12);
    border: 1.5px solid var(--fc-ink);
    border-radius: 3px;
    background: var(--tape);
    box-shadow: 2px 2px 0 rgba(22, 58, 37, 0.25);
  }
}

/* ==========================================================================
   10. The garden hose: ads in one end, Shmello at the other
   ========================================================================== */
.fb-arrowlink { display: inline-flex; align-items: center; min-height: 44px; }
.fb-hose { position: relative; margin: 0; }
.fb-hose__stage { position: relative; container-type: inline-size; aspect-ratio: 640 / 360; }
.fb-hose__svg { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.fb-hose__phone { position: absolute; left: 1%; top: 6%; z-index: 2; width: 19%; transform: rotate(-4deg); }
.fb-hose__shmello { position: absolute; right: -1%; top: 20%; z-index: 2; width: 27%; }
.fb-hose__shmello .fc-sticker { max-width: 100%; }
.fb-hose__end { position: absolute; z-index: 4; bottom: -4%; }
.fb-hose__end--in { left: 0; }
.fb-hose__end--out { right: 0; }
.fb-hose__end .fc-masking { font-size: max(0.8rem, 2.3cqw); white-space: nowrap; }
.fb-hose__phone > .fc-sample--pin { top: -16px; right: auto; left: -10px; }
@media (max-width: 420px) {
  /* a narrow stage: "Ads bring them in" stays on one line, so it never climbs into the
     Opt-in tag; the Shmello label keeps to its own half, on two lines */
  .fb-hose__end--out { max-width: 47%; text-align: right; }
  .fb-hose__end--out .fc-masking { white-space: normal; }
}
@media (max-width: 359px) {
  /* the smallest phones: slimmer tape ends and a little lower, clear of the Opt-in tag */
  .fb-hose__end { bottom: -12px; }
  .fb-hose__end .fc-masking { padding-inline: 10px; }
}
.fb-hose__pause { position: absolute; right: 0; top: -8px; z-index: 4; }
.fb-drop__tag { transform-box: fill-box; transform-origin: 50% 100%; }
@media (max-width: 600px) {
  .fb-drop__tag { transform: scale(1.5); }
  .fb-hose__stage { margin-top: 30px; }
}
html:not(.js) .fb-hose__pause { display: none; }
@media (prefers-reduced-motion: reduce) { .fb-hose__pause { display: none; } }
/* a small phone drawn at any size (the hose's phone) */
.fb-minip {
  --pw: 100%;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1.9;
  padding: 5%;
  border-radius: 16%/9%;
  background-image: none;
  box-shadow: 4px 4px 0 var(--fc-ink);
}
.fb-minip::before { display: none; }
.fb-minip .fc-phone__screen { display: grid; align-content: start; gap: 6px; padding: 18% 7% 8%; border-radius: 12%/6.5%; }
.fb-minip .fc-phone__notch { top: 5%; width: 36%; height: 5%; margin-left: -18%; }
.fb-minip .fb-adpost__who { font-size: max(0.5rem, 1.4cqw); gap: 4px; }
.fb-minip .fb-av { width: 16px; height: 16px; font-size: 0.55rem; }
.fb-minip .fb-video { height: auto; aspect-ratio: 1.2; }
.fb-minip .fb-video__play { width: 22px; height: 22px; background-size: 11px; }
.fb-minip__lines { display: grid; gap: 5px; }
.fb-minip__lines i { display: block; height: 6px; border-radius: 3px; background: var(--fc-smoke); }
.fb-minip__lines i + i { width: 70%; }

/* ==========================================================================
   11. Packages: three estimates, sized by mower
   ========================================================================== */
#packages .fc-line__item { text-wrap: pretty; }
.fb-under { display: grid; justify-items: center; gap: 12px; max-width: 44rem; margin: clamp(44px, 5vw, 64px) auto 0; text-align: center; }
.fb-under > p:first-child { font-size: 1.1rem; font-weight: 600; line-height: 1.5; }
.fb-under__fine { font-size: 0.95rem; color: var(--fc-ink-2); }

/* ==========================================================================
   12. The LL-50 Market Scope
   ========================================================================== */
.fb-density__head { display: grid; gap: 18px 56px; align-items: end; }
@media (min-width: 960px) { .fb-density__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.fb-density__copy { display: grid; gap: 12px; }
.fb-density__foot { max-width: 40em; margin: 40px auto 0; font-size: 1.1rem; font-weight: 600; line-height: 1.5; text-align: center; }
.fb-scope { margin-top: clamp(36px, 5vw, 56px); }
.fb-scope__chassis {
  position: relative;
  display: grid;
  gap: 24px 36px;
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(22px, 3vw, 36px);
  border: var(--fc-line);
  border-radius: var(--fc-r3);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0 2px, transparent 2px 5px),
    linear-gradient(170deg, var(--fc-steel-a), var(--fc-steel-b) 70%, var(--fc-steel-a));
  box-shadow: var(--fc-chunk-lg), inset 0 0 0 5px rgba(255, 255, 255, 0.4), inset 0 0 0 7px rgba(22, 58, 37, 0.14);
}
@media (min-width: 860px) {
  .fb-scope__chassis { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); grid-template-areas: "head head" "glass panel" "legend legend"; align-items: center; }
  .fb-scope__head { grid-area: head; }
  .fb-scope__glasswrap { grid-area: glass; }
  .fb-scope__panel { grid-area: panel; }
  .fb-scope__legend { grid-area: legend; }
}
.fb-scope__screw {
  position: absolute;
  width: 16px;
  height: 16px;
  border: var(--fc-line);
  border-radius: 50%;
  background: linear-gradient(135deg, transparent 44%, var(--fc-ink) 44% 56%, transparent 56%), radial-gradient(circle at 35% 35%, var(--fc-steel-a), var(--fc-steel-c));
}
.fb-scope__screw--1 { top: 12px; left: 12px; }
.fb-scope__screw--2 { top: 12px; right: 12px; }
.fb-scope__screw--3 { bottom: 12px; left: 12px; }
.fb-scope__screw--4 { bottom: 12px; right: 12px; }
.fb-scope__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 0 18px; }
.fb-scope__etch { font-family: var(--fc-mono); font-size: clamp(1rem, 0.9rem + 0.5vw, 1.3rem); font-weight: 800; letter-spacing: 0.22em; color: var(--fc-ink-2); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); }
.fb-scope__placard {
  padding: 6px 12px;
  border: var(--fc-line);
  border-radius: 6px;
  background: linear-gradient(var(--fc-brass-hi), var(--fc-brass));
  box-shadow: 2px 2px 0 var(--fc-ink);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.3;
}
.fb-scope__glasswrap { display: grid; place-items: center; }
.fb-scope__glass {
  position: relative;
  width: min(100%, 390px);
  aspect-ratio: 1;
  overflow: hidden;
  border: 12px solid var(--fc-rubber);
  border-radius: 50%;
  background: var(--fc-ink);
  box-shadow: 0 0 0 2px var(--fc-ink), 5px 6px 0 2px var(--fc-ink), inset 0 0 0 2px var(--fc-ink);
}
.fb-scope__glass svg { display: block; width: 100%; height: 100%; }
.fb-scope__grid line { stroke: var(--fc-chalk); stroke-opacity: 0.1; stroke-width: 1; }
.fb-scope__grid line.is-art { stroke-opacity: 0.22; stroke-width: 1.6; }
.fb-scope__hwy { fill: none; stroke: var(--fc-sun-3); stroke-opacity: 0.55; stroke-width: 3; }
.fb-scope__ring { fill: none; stroke: var(--fc-chalk); stroke-opacity: 0.5; stroke-width: 1.5; stroke-dasharray: 5 6; }
.fb-scope__r50 { fill: none; stroke: var(--fc-orange); stroke-width: 2.5; }
.fb-scope__rlab { fill: var(--fc-chalk); font-family: var(--fc-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-anchor: middle; }
.fb-scope__tag circle { fill: var(--fc-orange); }
.fb-scope__tag path { stroke: var(--fc-orange); stroke-width: 1.5; }
.fb-scope__tag text { fill: var(--fc-orange); font-family: var(--fc-mono); font-size: 13px; font-weight: 800; letter-spacing: 0.08em; }
.fb-scope__pin path { fill: var(--fc-sun); stroke: var(--fc-ink); stroke-width: 1.5; }
.fb-scope__halo { fill: var(--fc-sun); fill-opacity: 0.25; }
.fb-scope__pin text { fill: var(--fc-sun); font-family: var(--fc-mono); font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-anchor: middle; }
.fb-scope__dot { fill: var(--fc-lawn-a); }
.fb-scope__layer { opacity: 0; transition: opacity 0.7s var(--fc-ease); }
.fb-scope__layer.is-on { opacity: 1; }
.fb-scope__layer:nth-child(2) { transition-delay: 0.15s; }
.fb-scope__layer:nth-child(3) { transition-delay: 0.3s; }
/* no JS: the Growth dots are drawn by the script, so the glass just shows its streets and rings */
.fb-scope__sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255, 210, 63, 0.34), transparent 70deg);
  transform: rotate(210deg);
  pointer-events: none;
}
.fb-scope__sweep.is-sweeping { animation: fb-sweep 2.4s linear; }
@keyframes fb-sweep { from { transform: rotate(0deg); } to { transform: rotate(570deg); } }
.fb-scope__glare { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(ellipse at 30% 22%, rgba(255, 255, 255, 0.18), transparent 38%); pointer-events: none; }
.fb-scope__panel { display: grid; gap: 22px; justify-items: center; }
.fb-scope__ro { display: grid; justify-items: center; gap: 8px; width: 100%; }
.fb-scope__rolabel { font-family: var(--fc-mono); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.18em; color: var(--fc-ink-2); }
.fb-scope__seg {
  position: relative;
  display: inline-grid;
  padding: 8px 16px;
  border: var(--fc-line);
  border-radius: 10px;
  background: var(--fc-lcd);
  box-shadow: var(--fc-chunk), inset 0 3px 6px rgba(0, 0, 0, 0.18);
  color: var(--fc-lcd-ink);
  font-family: var(--fc-mono);
  font-size: clamp(2.2rem, 1.6rem + 2vw, 3.1rem);
  font-style: italic;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.fb-scope__ghost,
.fb-scope__val { grid-area: 1 / 1; text-align: right; }
.fb-scope__ghost { opacity: 0.11; }
.fb-scope__math { font-family: var(--fc-mono); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-align: center; color: var(--fc-ink); }
/* the impressions figure: ink on a sun label (orange-ink fails on the brushed metal) */
.fb-scope__math b { padding: 1px 5px; border-radius: 4px; background: var(--fc-sun); color: var(--fc-ink); font-weight: 800; }
.fb-scope__knobwrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 26px; }
.fb-scope__dial { position: relative; display: grid; place-items: center; width: 132px; height: 132px; }
.fb-scope__tick { position: absolute; top: 0; left: 50%; width: 4px; height: 66px; margin-left: -2px; transform: rotate(var(--a)); transform-origin: 50% 100%; }
.fb-scope__tick::before { content: ""; display: block; width: 4px; height: 12px; border-radius: 2px; background: var(--fc-ink); }
.fb-scope__knob {
  position: relative;
  width: 100px;
  height: 100px;
  padding: 0;
  border: var(--fc-line);
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.1) 0 6deg, transparent 6deg 12deg),
    radial-gradient(circle at 38% 32%, var(--fc-rubber-2), var(--fc-rubber) 70%);
  box-shadow: var(--fc-chunk), inset 0 -6px 0 rgba(0, 0, 0, 0.2);
  cursor: grab;
  touch-action: none;
}
.fb-scope__knob.is-drag { cursor: grabbing; }
.fb-scope__knob:focus-visible { outline: 3px solid var(--fc-ink); outline-offset: 5px; }
.fb-scope__face { position: absolute; inset: 10px; border: 2px solid rgba(255, 255, 255, 0.14); border-radius: 50%; transform: rotate(0deg); transition: transform 0.45s var(--fc-bounce); }
.fb-scope__knob.is-drag .fb-scope__face { transition: none; }
.fb-scope__face::before { content: ""; position: absolute; top: 4px; left: 50%; width: 6px; height: 26px; margin-left: -3px; border: 1.5px solid var(--fc-ink); border-radius: 3px; background: var(--fc-orange); }
.fb-scope__dets { display: flex; gap: 8px; }
.fb-scope__det {
  display: grid;
  justify-items: center;
  min-width: 64px;
  min-height: 52px;
  padding: 6px 8px;
  border: var(--fc-line);
  border-radius: 10px;
  background: var(--fc-white);
  box-shadow: 3px 3px 0 var(--fc-ink);
  color: var(--fc-ink);
  font-family: var(--fc-mono);
  line-height: 1.1;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background-color 0.15s;
}
.fb-scope__det b { font-size: 1rem; font-weight: 800; }
.fb-scope__det small { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; }
.fb-scope__det.is-cur { background: var(--fc-sun); transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--fc-ink); }
.fb-scope__legend { display: grid; gap: 10px; }
@media (min-width: 700px) { .fb-scope__legend { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fb-scope__tier {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "lamp name" "lamp range" "lamp price";
  align-items: center;
  gap: 0 12px;
  min-height: 48px;
  padding: 10px 14px;
  border: var(--fc-line);
  border-radius: 12px;
  background: var(--fc-ink);
  color: var(--fc-chalk);
  font-family: var(--fc-mono);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.fb-scope__tier:focus-visible { outline: 3px solid var(--fc-ink); outline-offset: 3px; }
.fb-scope__lamp { grid-area: lamp; width: 20px; height: 20px; border: 2px solid var(--fc-chalk-3); border-radius: 50%; background: var(--fc-rubber-2); }
.fb-scope__tn { grid-area: name; font-size: 0.85rem; font-weight: 800; letter-spacing: 0.08em; }
.fb-scope__tr { grid-area: range; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; color: var(--fc-chalk-2); }
.fb-scope__tp { grid-area: price; font-size: 0.78rem; font-weight: 800; color: var(--fc-sun); }
.fb-scope__tier.is-on { box-shadow: 0 0 0 3px var(--fc-sun), 4px 4px 0 3px var(--fc-ink); }
.fb-scope__tier.is-on .fb-scope__lamp { border-color: var(--fc-ink); background: var(--fc-sun); box-shadow: 0 0 0 4px rgba(255, 210, 63, 0.35), 0 0 14px rgba(255, 210, 63, 0.8); }
@media (max-width: 600px) {
  .fb-scope__head { padding: 0 10px; }
  .fb-scope__glass { border-width: 9px; }
}

/* ==========================================================================
   13. The non-compete: two yard signs in a fresh-striped lawn
   ========================================================================== */
@media (min-width: 960px) { .fb-nc { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.fb-nc__yard { min-width: 0; }
.fb-signs.fc-signs { grid-template-columns: minmax(0, 1fr); gap: 60px 30px; max-width: 700px; padding-bottom: 20px; }
.fb-signs > .fc-sign:nth-child(1) { --tilt: -2.6deg; }
.fb-signs > .fc-sign:nth-child(2) { --tilt: 2.2deg; }
.fb-signs > .fc-sign { padding-bottom: 60px; }
.fb-signs .fc-sign__board { flex: none; padding: 26px 14px 20px; }
.fb-signs .fc-sign__num { font-size: clamp(1.6rem, 1.1rem + 1.2vw, 2.05rem); white-space: nowrap; }
.fb-signs .fc-sign__stakes { top: 40%; height: auto; bottom: -14px; }
.fb-signtag {
  position: relative;
  z-index: 2;
  align-self: center;
  width: 82%;
  margin-top: 30px;
  padding: 18px 14px 14px;
  border: var(--fc-line);
  border-radius: 6px;
  background: var(--fc-kraft);
  box-shadow: 3px 3px 0 rgba(22, 58, 37, 0.35);
  color: var(--fc-ink);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.45;
  transform: rotate(calc(var(--tilt) * -1 + 0.4deg));
  transform-origin: 50% 0;
}
.fb-signtag > .fc-ziptie { top: -26px; }
.fb-nc__note { max-width: 34em; margin-top: 36px; font-weight: 600; color: var(--fc-ink-2); }
@media (min-width: 600px) {
  /* one yard at two depths: 20 MILES planted up front, 1 PER METRO smaller, set back up the lawn */
  .fb-signs.fc-signs { grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr); align-items: end; column-gap: 20px; padding-bottom: 12px; }
  .fb-signs > .fc-sign { padding-bottom: 26px; }
  .fb-signs > .fc-sign:nth-child(1) { z-index: 2; }
  .fb-signs > .fc-sign:nth-child(2) { z-index: 1; margin-bottom: 72px; }
  .fb-signs > .fc-sign:nth-child(2) .fc-sign__board { padding: 18px 10px 14px; }
  .fb-signs > .fc-sign:nth-child(2) .fc-sign__num { font-size: clamp(1.2rem, 0.85rem + 0.9vw, 1.55rem); }
  .fb-signs > .fc-sign:nth-child(2) .fb-signtag { margin-top: 18px; font-size: 0.84rem; }
  .fb-signs .fc-sign__stakes { bottom: 6px; }
  /* the lawn both signs stand in, deep enough to show which one is further back */
  .fb-signs > .fc-sign:nth-child(1) .fc-sign__num { font-size: clamp(1.8rem, 1.2rem + 1.4vw, 2.45rem); }
  /* the stripes run away from you, thinner as they go back */
  .fb-signs.fc-signs--lawn::after {
    display: block;
    z-index: 0;
    height: 116px;
    border-radius: 16px;
    background: linear-gradient(var(--fc-lawn-a) 0 8px, var(--fc-lawn-b) 8px 18px, var(--fc-lawn-a) 18px 30px, var(--fc-lawn-b) 30px 45px, var(--fc-lawn-a) 45px 63px, var(--fc-lawn-b) 63px 84px, var(--fc-lawn-a) 84px 116px);
  }
  .fb-signs.fc-signs--lawn > .fc-sign::after { display: none; }
}
@media (max-width: 599px) {
  .fb-signs.fc-signs { max-width: 330px; }
  /* the stakes end in the grass strip, not below it */
  .fb-signs .fc-sign__stakes { bottom: 2px; }
  .fb-signs.fc-signs--lawn > .fc-sign::after { z-index: 1; }
}

/* ==========================================================================
   14. The territory map: an atlas page, 81 pins, the zone card
   ========================================================================== */
.fb-mapwrap { display: grid; gap: 32px; align-items: start; }
@media (min-width: 1000px) { .fb-mapwrap { grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; } }
.fb-atlas {
  position: relative;
  padding: clamp(14px, 2.4vw, 30px) clamp(10px, 2vw, 26px) clamp(20px, 3vw, 36px);
  border: var(--fc-line);
  border-radius: var(--fc-r2);
  background:
    linear-gradient(90deg, transparent calc(50% - 10px), rgba(22, 58, 37, 0.07) 50%, transparent calc(50% + 10px)),
    linear-gradient(rgba(62, 155, 79, 0.08) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, rgba(62, 155, 79, 0.08) 1px, transparent 1px) 0 0 / 22px 22px,
    var(--fc-white);
  box-shadow: var(--fc-chunk-lg);
}
.fb-atlas__compass { position: absolute; right: 16px; bottom: 12px; width: 52px; height: 52px; }
.fb-usmap { position: relative; }
.fb-usmap__img { display: block; width: 100%; height: auto; }
/* the hit area is wider than the dot; overlaps resolve to the dot nearest the pointer (the page script) */
.fb-pin {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.fb-pin::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border: 2px solid var(--fc-ink);
  border-radius: 50%;
  background: var(--fc-sun);
  transition: transform 0.2s var(--fc-bounce);
}
/* the pulse: rings out twice when the map scrolls in, then rests drawn as a halo */
.fb-pin::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border: 2px solid var(--fc-orange-ink);
  border-radius: 50%;
  opacity: 0.45;
  transform: scale(1.9);
}
.fb-usmap.is-playing .fb-pin--open::after { animation: fb-pulse 2.2s var(--fc-ease) 2; animation-delay: var(--d, 0s); }
@keyframes fb-pulse { 0% { opacity: 0.9; transform: scale(0.8); } 100% { opacity: 0; transform: scale(2.8); } }
.fb-pin--major { z-index: 3; }
.fb-pin--rest { pointer-events: none; }
.fb-pin.is-near,
.fb-pin:focus-visible,
.fb-pin.is-cur { z-index: 6; }
.fb-pin.is-near::before,
.fb-pin.is-cur::before { transform: scale(1.45); background: var(--fc-orange); }
.fb-pin:focus-visible { outline: 3px solid var(--fc-ink); outline-offset: 0; }
.fb-pin--taken::before { width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 4px; background: var(--fc-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='2.5' y='5.5' width='7' height='5' rx='1' fill='%23FFD23F'/%3E%3Cpath d='M4 5.5V4a2 2 0 0 1 4 0v1.5' fill='none' stroke='%23FFD23F' stroke-width='1.4'/%3E%3C/svg%3E") center / 10px no-repeat; }
.fb-pin--taken::after { display: none; }
.fb-pin__label {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  display: grid;
  padding: 5px 9px 6px;
  border: var(--fc-line);
  border-radius: 8px;
  background: var(--fc-ink);
  color: var(--fc-chalk);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.25;
  text-align: left;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 4px);
  transition: opacity 0.15s, transform 0.15s, visibility 0s linear 0.15s;
  pointer-events: none;
}
.fb-pin__label b { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fc-sun); }
.fb-pin.is-near .fb-pin__label,
.fb-pin:focus-visible .fb-pin__label { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.fb-usmap.has-card .fb-pin__label { display: none; }
@media (max-width: 600px) {
  .fb-pin { width: 28px; height: 28px; margin: -14px 0 0 -14px; }
  .fb-pin::before, .fb-pin::after { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; }
  .fb-pin__label { display: none; }
}
/* the zone card: a small work tag over the pin, kept inside the map */
.fb-zone {
  position: absolute;
  z-index: 20;
  width: 244px;
  padding: 16px 16px 12px;
  border: var(--fc-line);
  border-radius: 14px;
  background: var(--fc-white);
  box-shadow: var(--fc-chunk);
  color: var(--fc-ink);
  animation: fb-zone 0.3s var(--fc-bounce);
}
@keyframes fb-zone { from { opacity: 0; transform: translateY(8px) scale(0.96); } }
.fb-zone:focus { outline: none; }
.fb-zone:focus-visible { outline: 3px solid var(--fc-ink); outline-offset: 3px; }
.fb-zone__x {
  position: absolute;
  top: 2px;
  right: 2px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.fb-zone__x::before {
  content: "\00D7";
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: var(--fc-line);
  border-radius: 50%;
  background: var(--fc-white);
  color: var(--fc-ink);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
}
.fb-zone__x:hover::before { background: var(--fc-sun); }
.fb-zone__status { display: flex; align-items: center; gap: 7px; padding-right: 34px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fc-green-ink); }
.fb-zone__live { width: 10px; height: 10px; border: 1.5px solid var(--fc-ink); border-radius: 50%; background: var(--fc-lawn-a); box-shadow: 0 0 0 3px rgba(124, 196, 107, 0.35); }
.fb-zone--taken .fb-zone__status { color: var(--fc-red-ink); }
.fb-zone--taken .fb-zone__live { border-radius: 3px; background: var(--fc-ink); }
.fb-zone__name { margin: 6px 0 6px; padding-right: 20px; font-family: var(--fc-display); font-size: 1.25rem; font-weight: 400; line-height: 1.1; }
.fb-zone__note { font-size: 0.875rem; line-height: 1.45; color: var(--fc-ink-2); }
.fb-zone__cta { width: 100%; min-height: 48px; margin-top: 12px; font-size: 0.95rem; }
.fb-zone__book { display: flex; align-items: center; justify-content: center; min-height: 44px; font-size: 0.9rem; }
@media (max-width: 600px) {
  /* a phone's map is short: a compact card still fits inside it */
  .fb-zone { width: 218px; padding: 10px 12px 4px; }
  .fb-zone__status { font-size: 0.66rem; }
  .fb-zone__name { margin: 3px 0; font-size: 1.05rem; }
  .fb-zone__note { font-size: 0.78rem; line-height: 1.35; }
  .fb-zone__cta { min-height: 44px; margin-top: 8px; font-size: 0.9rem; }
  .fb-zone__x { top: -2px; right: -2px; }
  .fb-atlas { padding: 12px 8px 16px; }
  .fb-atlas__compass { width: 36px; height: 36px; right: 8px; bottom: 6px; }
}

.fb-mapside { display: grid; gap: 18px; align-content: start; }
.fb-counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fb-count {
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 14px 14px 12px;
  border: var(--fc-line);
  border-radius: 14px;
  background: var(--fc-white);
  box-shadow: 3px 3px 0 var(--fc-ink);
}
.fb-count--open { background: var(--fc-sun-2); }
.fb-count .fb-count__ro { --ro: 1.9rem; }
.fb-count__txt { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.fb-legend { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-weight: 700; line-height: 1.35; }
.fb-legend li { display: flex; align-items: center; gap: 10px; }
.fb-legend__sw { position: relative; flex: none; width: 22px; height: 22px; }
.fb-legend__sw--open::before { content: ""; position: absolute; inset: 5px; border: 2px solid var(--fc-ink); border-radius: 50%; background: var(--fc-sun); }
.fb-legend__sw--open::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--fc-orange-ink); border-radius: 50%; opacity: 0.5; }
.fb-legend__sw--taken { border: 2px solid var(--fc-ink); border-radius: 5px; background: var(--fc-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='2.5' y='5.5' width='7' height='5' rx='1' fill='%23FFD23F'/%3E%3Cpath d='M4 5.5V4a2 2 0 0 1 4 0v1.5' fill='none' stroke='%23FFD23F' stroke-width='1.4'/%3E%3C/svg%3E") center / 14px no-repeat; }
.fb-find { display: block; }
.fb-find select {
  width: 100%;
  min-height: 50px;
  padding: 0 44px 0 14px;
  border: var(--fc-line);
  border-radius: var(--fc-r1);
  background: var(--fc-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23163A25' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center / 16px no-repeat;
  box-shadow: 3px 3px 0 var(--fc-ink);
  color: var(--fc-ink);
  font: inherit;
  font-weight: 700;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.fb-find select:focus-visible { outline: 3px solid var(--fc-ink); outline-offset: 2px; }
html:not(.js) .fb-find { display: none; }
.fb-mapside__note { font-size: 0.9rem; line-height: 1.5; color: var(--fc-ink-2); }
.fb-locked { padding-top: 14px; border-top: 2px dashed rgba(22, 58, 37, 0.3); }
.fb-locked__head { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.fb-locked__head::before { content: ""; width: 16px; height: 16px; border-radius: 4px; background: var(--fc-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='2.5' y='5.5' width='7' height='5' rx='1' fill='%23FFD23F'/%3E%3Cpath d='M4 5.5V4a2 2 0 0 1 4 0v1.5' fill='none' stroke='%23FFD23F' stroke-width='1.4'/%3E%3C/svg%3E") center / 11px no-repeat; }
.fb-locked__none { margin-top: 6px; font-style: italic; color: var(--fc-ink-2); }
.fb-locked ul { display: grid; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; font-weight: 600; }

/* ==========================================================================
   15. The receipts: a register tape, lines that tear open
   ========================================================================== */
.fb-receipts { display: grid; gap: 44px; align-items: start; }
@media (min-width: 960px) { .fb-receipts { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 80px); } }
.fb-receipts__head { margin: 0; gap: 16px; }
/* the honest line sits under the receipt, as the deck has it */
.fb-honest { max-width: 34em; margin-top: -18px; padding-top: 16px; border-top: 2px dashed rgba(255, 248, 230, 0.35); color: var(--fc-chalk-2); line-height: 1.55; }
@media (min-width: 960px) { .fb-honest { grid-column: 2; justify-self: center; width: min(100%, 580px); } }
.fb-honest strong { color: var(--fc-chalk); }
.fb-register { position: relative; width: 100%; max-width: 580px; justify-self: center; padding-bottom: 30px; }
.fb-register__top {
  position: relative;
  z-index: 2;
  display: block;
  height: 64px;
  border: var(--fc-line);
  border-radius: 16px 16px 8px 8px;
  background: linear-gradient(var(--fc-steel-a), var(--fc-steel-b));
  box-shadow: var(--fc-chunk);
}
.fb-register__slot { position: absolute; left: 7%; right: 7%; bottom: 12px; height: 8px; border-radius: 4px; background: var(--fc-ink); }
.fb-register__keys { position: absolute; top: 12px; right: 18px; display: grid; grid-template-columns: repeat(3, 14px); gap: 4px; }
.fb-register__keys i { width: 14px; height: 8px; border: 1.5px solid var(--fc-ink); border-radius: 3px; background: var(--fc-white); }
.fb-register__keys i:nth-child(3) { background: var(--fc-orange); }
.fb-tape.fc-accs { position: relative; z-index: 1; margin: -14px 7% 0; padding-top: 22px; border-top: 0; border-radius: 0 0 4px 4px; transform: rotate(0.4deg); color: var(--fc-ink); }
.fb-tape__head { display: grid; gap: 4px; padding: 6px 0 14px; border-bottom: 2px dashed rgba(22, 58, 37, 0.3); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.14em; text-align: center; }
.fb-tape__head small { font-size: 0.72rem; letter-spacing: 0.24em; color: var(--fc-ink-2); }
.fb-tape .acc-head { flex-wrap: nowrap; align-items: center; gap: 8px 12px; min-height: 64px; }
@media (max-width: 600px) { .fb-tape .acc-head { flex-wrap: wrap; } }
.fb-tape__line { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; }
.fb-tape__num { font-family: var(--fc-display); font-size: clamp(1.7rem, 1.3rem + 1.1vw, 2.3rem); font-weight: 400; line-height: 1; white-space: nowrap; }
.fb-tape__num--long { font-size: clamp(1.5rem, 1.2rem + 0.8vw, 1.95rem); }
.fb-tape__label { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fc-ink-2); }
.fb-tape__stamp { flex: none; }
.fb-tape .acc-body p { line-height: 1.55; }
.fb-tape__foot { padding: 14px 0 12px; border-top: 2px dashed rgba(22, 58, 37, 0.3); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-align: center; color: var(--fc-ink-2); }
.fb-tape__curl {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 0;
  height: 36px;
  border: var(--fc-line);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: linear-gradient(var(--fc-thermal), var(--fc-paper-2) 45%, var(--fc-smoke));
  transform: rotate(0.4deg);
}
.fb-tape__curl::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 8px;
  height: 12px;
  border-radius: 50%;
  border-top: 2px solid rgba(22, 58, 37, 0.25);
}
@media (max-width: 600px) {
  .fb-tape.fc-accs { margin-inline: 4%; }
  .fb-tape__curl { left: 4%; right: 4%; }
}

/* ==========================================================================
   16. The closing band: the call agenda on a truck seat, a stopwatch clipped on top
   ========================================================================== */
#check .fc-cta__copy { display: grid; gap: 18px; }
/* the ZIP form on a slip of white paper taped to the band, so the orange button stands on paper */
.fb-ctaslip {
  position: relative;
  display: grid;
  gap: 16px;
  justify-items: start;
  max-width: 540px;
  margin-top: 10px;
  padding: 26px 22px 22px;
  border: var(--fc-line);
  border-radius: var(--fc-r2);
  background: var(--fc-white);
  box-shadow: var(--fc-chunk);
  color: var(--fc-ink);
}
.fb-ctaslip > .fc-tapestrip { left: 32px; transform: rotate(-4deg); }
#check .fb-ctaslip .fc-note { max-width: none; color: var(--fc-ink); }
#check .fb-ctaslip .fc-actions { margin: 0; }
#check .fb-ctaslip .btn-ghost { border-color: var(--fc-ink); color: var(--fc-ink); }
#check .area-err { color: var(--fc-orange-ink); }   /* on the white slip: 5.9 to 1 */
#check .fb-ctaform { max-width: 520px; }
@media (max-width: 600px) {
  .fb-ctaslip { justify-items: stretch; padding: 24px 14px 16px; }
  #check .fb-ctaslip .btn-ghost { width: 100%; }
}
@media (min-width: 960px) { #check .fb-seat { grid-area: board; } }
.fb-seat {
  position: relative;
  padding: 58px clamp(18px, 3vw, 40px) clamp(24px, 3vw, 40px);
  border: var(--fc-line);
  border-radius: 40px 40px 26px 26px;
  background:
    repeating-linear-gradient(90deg, transparent 0 58px, rgba(0, 0, 0, 0.18) 58px 60px, rgba(255, 255, 255, 0.06) 60px 62px, transparent 62px 120px),
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.14), transparent 60%),
    var(--fc-rubber);
  box-shadow: var(--fc-chunk-lg), inset 0 0 0 6px rgba(0, 0, 0, 0.14), inset 0 0 0 8px rgba(255, 255, 255, 0.05);
}
.fb-seat::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 14px;
  height: 10px;
  border-radius: 6px;
  border: 2px dashed rgba(255, 255, 255, 0.18);
}
#check .fb-agenda { margin: 0; padding-top: 70px; }
.fb-agenda__watch { --ro: 1.5rem; position: absolute; top: -48px; left: 50%; z-index: 3; transform: translateX(-50%) rotate(-6deg); }
.fb-agenda__title { font-family: var(--fc-display); font-size: clamp(1.4rem, 1.2rem + 0.7vw, 1.8rem); line-height: 1.05; }
.fb-agenda__list { width: 100%; gap: 14px; }
.fb-agenda__list li { font-family: var(--fc-hand); font-size: 1.12rem; font-weight: 400; line-height: 1.3; color: var(--fc-ballpoint); }
.fb-agenda__list li::before { border-color: var(--fc-ballpoint); border-radius: 3px 5px 4px 6px; }
@media (max-width: 600px) {
  .fb-seat { padding: 54px 12px 16px; border-radius: 30px 30px 20px 20px; }
  .fb-agenda__list li { font-size: 1.02rem; }
}

/* ==========================================================================
   The sample ad that follows you (a .fc-companion: the kit shows one from 1440px)
   ========================================================================== */
.fb-adphone { --companion: 96px; transition: opacity 0.35s, transform 0.5s var(--fc-bounce), visibility 0s; }
/* page content is 1280px wide: the phone waits for a gutter it fits in (1480px), so it never
   sits over words or controls */
@media (max-width: 1479px) { .fb-adphone { display: none; } }
html.js .fb-adphone:not(.is-on) { opacity: 0; visibility: hidden; transform: translateY(30px); transition: opacity 0.25s, transform 0.25s, visibility 0s linear 0.25s; }
.fb-adphone__art { width: var(--companion); }
.fb-adphone__shell {
  position: relative;
  display: grid;
  gap: 5px;
  width: 100%;
  padding: 18px 5px 7px;
  border: 5px solid var(--fc-case-ink);
  border-radius: 18px;
  background: var(--fc-white);
  box-shadow: 0 0 0 2px var(--fc-ink), 5px 5px 0 2px var(--fc-ink);
  color: var(--fc-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.fb-adphone__shell:focus-visible { outline: 3px solid var(--fc-ink); outline-offset: 5px; }
.fb-adphone__shell.is-boost { animation: fb-squish 0.45s var(--fc-bounce); }
@keyframes fb-squish { 30% { transform: scale(0.92, 0.88); } 60% { transform: scale(1.04, 1.06); } }
.fb-adphone__tag.fc-sample { position: absolute; top: -18px; left: -14px; z-index: 3; padding: 3px 7px 3px 5px; font-size: 0.58rem; letter-spacing: 0.1em; }
.fb-adphone__notch { position: absolute; top: 5px; left: 50%; width: 30%; height: 6px; margin-left: -15%; border-radius: 4px; background: var(--fc-ink-black); }
.fb-adphone__head { display: flex; align-items: center; gap: 4px; min-width: 0; }
.fb-adphone__head .fb-av { width: 18px; height: 18px; font-size: 0.6rem; }
.fb-adphone__who { display: grid; min-width: 0; line-height: 1.15; }
.fb-adphone__who b { font-size: 0.56rem; font-weight: 800; }
.fb-adphone__who i { display: none; font-size: 0.62rem; font-style: normal; font-weight: 600; color: var(--fc-ink-2); }
.fb-adphone__body { display: none; font-size: 0.78rem; font-weight: 600; line-height: 1.35; }
.fb-adphone__body.is-typing::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 1px; vertical-align: -0.15em; background: var(--fc-orange-ink); }
.fb-adphone__vid { height: 52px; }
.fb-adphone__vid .fb-video__play { width: 22px; height: 22px; background-size: 11px; }
.fb-adphone__foot { display: flex; align-items: center; gap: 4px; font-size: 0.62rem; font-weight: 800; }
.fb-adphone__reacts { display: inline-flex; }
.fb-adphone__reacts svg { width: 13px; height: 13px; }
.fb-adphone__reacts svg + svg { margin-left: -4px; }
.fb-adphone__boost { display: none; margin-left: auto; font-size: 0.64rem; font-weight: 700; color: var(--fc-orange-ink); }
.fb-adphone__burst { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.fb-adphone__burst svg { position: absolute; bottom: 30%; width: 22px; height: 22px; animation: fb-burst 1.1s var(--fc-ease) forwards; }
@keyframes fb-burst { 0% { opacity: 0; transform: translateY(0) scale(0.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-110px) scale(1.25) rotate(var(--spin, 10deg)); } }
/* the speech bubble sits above the phone, never beside it over the words */
.fb-adphone .fb-adphone__say { right: 0; bottom: calc(100% + 16px); max-width: 230px; border-radius: 16px 16px 4px 16px; }
.fb-adphone .fb-adphone__say.is-talk { animation: fb-talk 0.5s var(--fc-bounce); }
@keyframes fb-talk { 0% { transform: scale(0.7) translateY(10px); opacity: 0; } }
/* the kit shows the bubble for good from 1700px; here it waits for the large phone's gutter */
@media (min-width: 1700px) and (max-width: 1759px) {
  .fb-adphone .fb-adphone__say { opacity: 0; visibility: hidden; }
  .fb-adphone:hover .fb-adphone__say,
  .fb-adphone:focus-within .fb-adphone__say { opacity: 1; visibility: visible; }
}
@media (min-width: 1760px) {
  .fb-adphone { --companion: 214px; right: 28px; bottom: 26px; }
  .fb-adphone__shell { gap: 8px; padding: 24px 10px 10px; border-width: 7px; border-radius: 28px; }
  .fb-adphone__notch { top: 7px; height: 9px; }
  .fb-adphone__head { gap: 7px; }
  .fb-adphone__head .fb-av { width: 26px; height: 26px; font-size: 0.8rem; }
  .fb-adphone__who b { font-size: 0.78rem; }
  .fb-adphone__who i { display: block; }
  .fb-adphone__body { display: block; min-height: 4.1em; }
  .fb-adphone__vid { height: 110px; }
  .fb-adphone__vid .fb-video__play { width: 32px; height: 32px; background-size: 15px; }
  .fb-adphone__foot { gap: 6px; font-size: 0.78rem; }
  .fb-adphone__reacts svg { width: 18px; height: 18px; }
  .fb-adphone__boost { display: inline; }
  .fb-adphone__tag.fc-sample { font-size: 0.66rem; padding: 4px 9px 4px 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .fb-adphone__burst { display: none; }
}

/* motion off: every scene rests finished (core.css zeroes the staggered delays) */
@media (prefers-reduced-motion: reduce) {
  .fb-street__ad { animation: none; }
}

/* the hose's little phone: on a narrow stage it shows the avatar and the video only */
.fb-minip .fb-adpost__who span:not(.fb-av) { display: none; }