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


/* ---------- drawing classes for the page's inline SVG (fills come from the tokens) ---------- */
.ab-svg :where(path, rect, circle, ellipse, polygon) {
  stroke: var(--fc-ink);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.ab-svg .s-flat { stroke: none; }
.ab-svg .s-none { fill: none; }
.ab-svg .s-ink { fill: var(--fc-ink); }
.ab-svg .s-white { fill: var(--fc-white); }
.ab-svg .s-sky { fill: var(--fc-sky); }
.ab-svg .s-glass { fill: var(--fc-sky-2); }
.ab-svg .s-glint { fill: none; stroke: var(--fc-pure); stroke-width: 3; stroke-opacity: 0.85; }
.ab-svg .s-rubber { fill: var(--fc-rubber); }
.ab-svg .s-steel { fill: var(--fc-steel-a); }
.ab-svg .s-steel2 { fill: var(--fc-steel-b); }
.ab-svg .s-steel3 { fill: var(--fc-steel-c); }
.ab-svg .s-plate { fill: var(--fc-steel-a); stroke-width: 1.6; }
.ab-svg .s-lawn { fill: var(--fc-lawn-a); }
.ab-svg .s-lawn2 { fill: var(--fc-lawn-b); }
.ab-svg .s-sun { fill: var(--fc-sun); }
.ab-svg .s-orange { fill: var(--fc-orange); }
.ab-svg .s-clover { fill: var(--fc-clover-2); }
.ab-svg .s-can { fill: var(--fc-can); }
.ab-svg .s-glow { fill: var(--fc-glow); }
.ab-svg .s-wood { fill: var(--fc-board); }
.ab-svg .s-asph { fill: var(--fc-asphalt); }
.ab-svg .s-well { fill: var(--fc-asphalt-2); }
.ab-svg .s-smoke { fill: var(--fc-smoke); stroke-opacity: 0.4; }
.ab-svg .s-yard { fill: var(--fc-yard); }
.ab-svg .s-bush { fill: var(--fc-bush); stroke-opacity: 0.5; }
.ab-svg .s-spool { stroke: var(--fc-sun); stroke-width: 12; stroke-dasharray: 3 2; vector-effect: none; }
.ab-svg .s-drive { fill: var(--fc-drive); }
.ab-svg .s-roof { fill: var(--roof, var(--fc-peach)); }
.ab-svg .s-walk { fill: var(--fc-walk); }
.ab-svg .s-tree { fill: var(--fc-tree); }
.ab-svg .s-treehi { fill: var(--fc-tree-hi); }
.ab-svg .s-skin { fill: var(--fc-skin-1); }
.ab-svg .s-sleeve { fill: var(--fc-clover-2); }
.ab-svg .s-nail { fill: var(--fc-pure); fill-opacity: 0.55; stroke-width: 1.4; }
.ab-svg .s-crease { stroke-opacity: 0.35; }
.ab-svg .s-thin { fill: none; stroke-width: 1.5; stroke-opacity: 0.45; }
.ab-svg .s-spoke { fill: none; stroke-width: 2; }
.ab-svg .s-hook { fill: none; stroke: var(--fc-steel-c); stroke-width: 5; }
.ab-svg .s-ghostline { fill: var(--fc-ink); fill-opacity: 0.35; stroke: none; }
/* strokes that belong to the drawing's scale, not the screen's */
.ab-svg .s-roadline { fill: none; stroke: var(--fc-chalk); stroke-width: 4; stroke-dasharray: 34 26; stroke-opacity: 0.7; vector-effect: none; }
.ab-svg .s-stripe { fill: none; stroke: var(--fc-lawn-b); stroke-width: 10; stroke-linecap: butt; vector-effect: none; }
.ab-svg .s-strapout { fill: none; stroke-width: 7; }
.ab-svg .s-strap { fill: none; stroke: var(--fc-sun); stroke-width: 3.6; }
.ab-svg .s-ring { fill: none; stroke-dasharray: 5 5; }
.ab-svg .s-lead { fill: none; stroke-dasharray: 6 6; }
.ab-svg .s-route { fill: none; stroke: var(--fc-sun); stroke-width: 6; stroke-dasharray: 16 9.6; stroke-linecap: butt; vector-effect: none; }

/* ==========================================================================
   1. Hero: the lead ping, swiped away
   ========================================================================== */
@media (min-width: 1000px) {
  #top .fc-phero__grid { grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); }
}
.ab-hero .fc-phero__sub { margin-bottom: 12px; }
.ab-hero__new .fc-hl { white-space: nowrap; }
.ab-hero__new {
  margin: 2px 0 24px;
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  font-weight: 800;
  line-height: 1.35;
}
@media (max-width: 600px) {
  .ab-hero .fc-phero__sub { margin-bottom: 10px; font-size: 1rem; line-height: 1.5; }
  .ab-hero__new { margin-bottom: 18px; font-size: 1.05rem; }
}

.ab-ping { --pw: clamp(148px, 37cqw, 204px); position: relative; width: min(100%, 540px); container: ab-ping / inline-size; }
.ab-ping__glass {
  --sf-pad: 34px;
  padding: 34px 26px calc(66px + 16px);
}
/* depth: the dash is in front of the lawn, so the sign's stakes go down behind it; the phone
   in its mount stays in front of the dash */
.ab-ping__glass::after { z-index: 1; }
.ab-ping .ab-ping__row { z-index: 2; justify-content: flex-end; }
.ab-ping .fc-sample--pin { top: -26px; right: 22px; }
/* the street through the windshield */
.ab-ping__street {
  position: absolute;
  left: 3%;
  bottom: 54%;
  z-index: 0;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  opacity: 0.95;
}
.ab-ping__mirror {
  position: absolute;
  top: -2px;
  left: 30%;
  z-index: 1;
  width: 96px;
  height: auto;
}
.ab-ping__note {
  position: absolute;
  top: 24px;
  left: 7%;
  z-index: 1;
  max-width: 8.5em;
}
.ab-ping__note .fc-hand { font-size: 1.12rem; }
/* the marker arrow on the glass, from the note down to the yard sign */
.ab-ping__arrow {
  position: absolute;
  top: 84px;
  left: 8%;
  z-index: 1;
  width: 11%;
  height: calc(100% - 84px - 96px - 108px);
  overflow: visible;
  pointer-events: none;
}
.ab-ping__arrow path {
  fill: none;
  stroke: var(--fc-ink);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.ab-ping__arrow .ab-ping__halo { stroke: var(--fc-white); stroke-width: 7; stroke-opacity: 0.85; }
/* the yard sign in the striped lawn, seen through the glass (the dash hides its feet) */
.ab-ping__sign {
  position: absolute;
  left: 6%;
  bottom: 96px;
  z-index: 0;
  width: 36%;
  max-width: 196px;
  transform: rotate(-3deg);
  transform-origin: 50% 100%;
}
.ab-ping__board {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 4px;
  justify-items: center;
  padding: 12px 10px 11px;
  border: var(--fc-line);
  border-radius: 10px;
  background-color: var(--fc-white);
  background-image: repeating-linear-gradient(0deg, rgba(22, 58, 37, 0.045) 0 1px, transparent 1px 6px);
  box-shadow: var(--fc-chunk);
  text-align: center;
}
.ab-ping__board .fc-letter {
  font-size: clamp(0.9rem, 3.3cqw, 1.2rem);
  line-height: 1;
  color: var(--fc-clover-2);
  white-space: nowrap;
}
.ab-ping__small { display: grid; gap: 1px; font-size: 0.74rem; font-weight: 800; line-height: 1.25; color: var(--fc-ink); }
.ab-ping__small > span { display: block; white-space: nowrap; }
.ab-ping__stakes {
  position: absolute;
  left: 26%;
  right: 26%;
  top: calc(100% - 12px);
  height: 58px;
  border-inline: 3px solid var(--fc-ink);
}
/* the phone in its mount, with the notification hanging off it; the stem runs down to the dash */
.ab-ping__mount { z-index: 2; margin: 0 2% -20px 0; }
.ab-ping__mount .fc-dash__mount { bottom: 4px; height: 102px; }
.ab-ping .ab-ping__phone { z-index: 4; }
.ab-ping__mount.fc-dash--phone::before { bottom: calc(64px + (100% - 64px) * 0.12); }
.ab-ping__phone { --pw: inherit; --cw: max(172px, calc(var(--pw) * 0.92)); }
.ab-ping__phone .fc-phone__time { margin-top: 2px; }
.ab-ping__card {
  position: absolute;
  top: calc(var(--pw) * 0.5);
  left: 50%;
  z-index: 4;
  width: var(--cw);
  margin: 0 0 0 calc(var(--cw) / -2);
  padding: 10px 12px 12px;
  transform: translateX(var(--swipe, -46%)) rotate(-4deg);
  transform-origin: 70% 50%;
  box-shadow: 0 5px 0 rgba(8, 24, 14, 0.4), var(--fc-chunk);
}
.ab-ping__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; }
.ab-ping__card .fc-notif__title { font-size: 0.9rem; }
.ab-ping__quote {
  margin-top: 8px;
  padding: 6px 10px 7px;
  border: var(--fc-line);
  border-radius: 12px 12px 12px 4px;
  background: var(--fc-bubble);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
}
.ab-ping__quote > span { display: block; white-space: nowrap; }
.ab-ping__thumb {
  position: absolute;
  top: calc(var(--pw) * 0.62);
  left: calc(var(--pw) * 0.2);
  z-index: 5;
  width: calc(var(--pw) * 0.5);
  height: auto;
  max-width: none;
  overflow: visible;
  transform: rotate(-35deg);
  transform-origin: 47% 1%;
  pointer-events: none;
}
.ab-ping__whoosh {
  position: absolute;
  top: calc(var(--pw) * 0.5);
  left: calc(var(--pw) * 0.66);
  z-index: 4;
  width: 40px;
  height: 40px;
  overflow: visible;
}
.ab-ping__whoosh path { stroke-width: 3; stroke-dasharray: 10 6; }
@media (max-width: 600px) {
  .ab-ping { --pw: 150px; }
  .ab-ping__glass { padding: 34px 10px calc(66px + 12px); }
  .ab-ping__sign { left: 2%; bottom: 76px; width: 44%; }
  .ab-ping__board { padding: 9px 5px 8px; }
  .ab-ping__board .fc-letter { font-size: min(0.92rem, 4.2cqw); }
  .ab-ping__small { font-size: 0.72rem; }
  .ab-ping__stakes { height: 36px; }
  .ab-ping__note { top: 16px; left: 5%; max-width: 8.5em; }
  .ab-ping__note .fc-hand { font-size: 1rem; }
  .ab-ping__arrow { top: 68px; left: 6%; width: 12%; height: calc(100% - 68px - 76px - 100px); }
  .ab-ping__mirror { display: none; }
  .ab-ping__street .fc-house { --house: 50px !important; }
  .ab-ping__phone { --cw: 166px; }
  /* the phone rides a little higher on its stem, so the card clears the clock and the sign */
  .ab-ping__mount { margin-bottom: -8px; }
  .ab-ping__mount .fc-dash__mount { bottom: -4px; height: 110px; }
  .ab-ping__phone .fc-phone__screen { padding-top: 36px; }
  .ab-ping__phone .fc-phone__time { font-size: 2.2rem; }
  .ab-ping__card { top: calc(var(--pw) * 0.47); padding: 8px 10px 9px; }
  .ab-ping__whoosh { top: calc(var(--pw) * 0.68); left: calc(var(--pw) * 0.72); }
  .ab-ping__thumb { width: calc(var(--pw) * 0.44); }
  .ab-ping__head { margin-bottom: 4px; }
  .ab-ping__card .fc-notif__title { font-size: 0.82rem; }
  .ab-ping__card .fc-notif__warn { font-size: 0.74rem; }
  .ab-ping__quote { margin-top: 6px; padding: 4px 6px 5px; font-size: 0.7rem; }
}
/* the smallest phones: a smaller phone riding higher on its stem, a shorter swipe and tighter
   sign lettering, so the sign stays clear of the phone and the notification */
@media (max-width: 359px) {
  .ab-ping { --pw: 138px; }
  .ab-ping__board { padding-inline: 4px; }
  .ab-ping__board .fc-letter { font-size: 0.78rem; }
  .ab-ping__mount { margin-bottom: 10px; }
  .ab-ping__mount .fc-dash__mount { bottom: -22px; height: 128px; }
  .ab-ping__card { --swipe: -30%; }
}
/* two columns with a narrow scene (about 1000 to 1270px wide: iPad landscape, small laptops):
   no mirror, a steady phone size, a shorter swipe and the sign a little lower, so the note,
   the sign and the notification each stay clear */
@media (min-width: 1000px) {
  @container ab-ping (max-width: 539px) {
    .ab-ping__mirror { display: none; }
    .ab-ping__phone { --pw: 184px; --cw: 180px; }
    .ab-ping__card { --swipe: -32%; }
    .ab-ping__sign { bottom: 80px; }
  }
}
/* the swipe: plays once when the hero comes into view (site.js [data-play-on-view]) */
html.js .ab-ping[data-play-on-view]:not(.is-playing) .ab-ping__card { transform: none; }
html.js .ab-ping[data-play-on-view]:not(.is-playing) .ab-ping__thumb,
html.js .ab-ping[data-play-on-view]:not(.is-playing) .ab-ping__whoosh { opacity: 0; }
.ab-ping.is-playing .ab-ping__card { animation: ab-swipe-card 2.2s cubic-bezier(0.3, 0.7, 0.2, 1) 0.5s both; }
.ab-ping.is-playing .ab-ping__thumb { animation: ab-swipe-thumb 2.2s cubic-bezier(0.3, 0.7, 0.2, 1) 0.5s both; }
.ab-ping.is-playing .ab-ping__whoosh { animation: ab-whoosh 2.2s ease-out 0.5s both; }
@keyframes ab-swipe-card {
  0%, 36% { transform: none; }
  74% { transform: translateX(calc(var(--swipe, -46%) - 7%)) rotate(-5deg); }
  100% { transform: translateX(var(--swipe, -46%)) rotate(-4deg); }
}
@keyframes ab-swipe-thumb {
  0% { opacity: 0; transform: translate(calc(var(--cw) * 0.7), calc(var(--pw) * 0.5)) rotate(-35deg); }
  20% { opacity: 1; transform: translate(calc(var(--cw) * 0.46), 0) rotate(-35deg); }
  36% { transform: translate(calc(var(--cw) * 0.46), 3px) rotate(-35deg) scale(0.97); }
  74% { transform: translate(calc(var(--pw) * -0.04), 0) rotate(-38deg); }
  100% { opacity: 1; transform: rotate(-35deg); }
}
@keyframes ab-whoosh {
  0%, 50% { opacity: 0; transform: translateX(-10px); }
  75% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

/* ==========================================================================
   2. Who we are: the truck and trailer (the rig rolls in; parked with reduced motion)
   ========================================================================== */
.ab-rig { position: relative; }
.ab-rig__art { position: relative; container-type: inline-size; overflow-x: clip; }
.ab-rig__draw { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 400; overflow: hidden; }
.ab-rig__wheel { transform-box: fill-box; transform-origin: 50% 50%; }
.ab-rig__marks text { font-family: var(--fc-body); font-size: 36px; font-weight: 800; fill: var(--fc-ink-deep); stroke: none; text-anchor: middle; }
.ab-rig__dust { opacity: 0; }
.ab-rig__veh { transition: transform 2.4s cubic-bezier(0.22, 0.8, 0.3, 1); }
html.js .ab-rig[data-play-on-view]:not(.is-playing) .ab-rig__veh { transform: translateX(800px); }
.ab-rig.is-playing .ab-rig__wheel { animation: ab-roll 2.4s cubic-bezier(0.22, 0.8, 0.3, 1) both; }
.ab-rig.is-playing .ab-rig__dust { animation: ab-dust 2.4s ease-out both; }
@keyframes ab-roll { from { transform: rotate(900deg); } to { transform: none; } }
@keyframes ab-dust {
  0% { opacity: 0.9; transform: none; }
  70% { opacity: 0.5; }
  100% { opacity: 0; transform: translateX(60px); }
}
/* the lettering: laid on the truck on wide screens, set out under it on phones */
.ab-rig__decal b { display: block; line-height: 1; letter-spacing: 0.03em; color: var(--fc-clover-2); white-space: nowrap; }
.ab-rig__decal-sub { display: block; font-weight: 700; line-height: 1.25; color: var(--fc-ink); text-wrap: balance; }
.ab-rig__sticker-in {
  display: block;
  padding: 6px 10px 7px;
  border: var(--fc-line);
  border-radius: 6px;
  background: var(--fc-sun);
  box-shadow: 2px 2px 0 rgba(22, 58, 37, 0.5);
  font-weight: 800;
  line-height: 1.25;
  color: var(--fc-ink);
}
.ab-rig__sticker-in > span { display: block; }
.ab-rig__plate { --pl-a: var(--fc-steel-a); gap: 6px; padding: 20px 22px 18px; }
.ab-rig__plate .fc-plate__title b { font-weight: 400; }
.ab-rig__plate .fc-plate__title { font-size: clamp(0.95rem, 0.8rem + 0.4vw, 1.15rem); letter-spacing: 0.04em; text-transform: none; }
/* the rows share one column for the numbers (as wide as "A decade"), so the words line up */
.ab-rig__plate .fc-plate__rows { grid-template-columns: max-content minmax(0, 1fr); column-gap: 10px; }
.ab-rig__plate .fc-plate__rows div { display: grid; grid-column: 1 / -1; grid-template-columns: 5.6em minmax(0, 1fr); grid-template-columns: subgrid; align-items: baseline; }
.ab-rig__plate .fc-plate__rows dt {
  font-family: var(--fc-display);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
}
.ab-rig__plate .fc-plate__rows dd { margin: 0; font-family: var(--fc-body); font-size: 0.85rem; font-weight: 700; line-height: 1.3; }
.ab-rig__stamp { position: absolute; right: 12px; bottom: -14px; z-index: 2; background: var(--fc-steel-a); }
.ab-rig__n {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border: var(--fc-line);
  border-radius: 50%;
  background: var(--fc-orange);
  box-shadow: 2px 2px 0 var(--fc-ink);
  font-family: var(--fc-body);
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  color: var(--fc-ink-deep);
  text-shadow: none;
}
.ab-rig__cap { margin-top: 22px; text-align: center; }
.ab-rig__cap .fc-labeltape { font-size: 0.82rem; }
@media (min-width: 900px) {
  .ab-rig { padding-top: clamp(0px, 110px - 7vw, 48px); }
  .ab-rig__parts { position: absolute; inset: 0; z-index: 2; transition: transform 2.4s cubic-bezier(0.22, 0.8, 0.3, 1); }
  html.js .ab-rig[data-play-on-view]:not(.is-playing) .ab-rig__parts { transform: translateX(80%); }
  .ab-rig__ghost, .ab-rig__marks, .ab-rig__n { display: none; }
  .ab-rig__decal { position: absolute; left: 20%; top: 51.5%; width: 22.6%; text-align: center; }
  .ab-rig__decal b { font-size: clamp(1.15rem, 2.55cqw, 1.95rem); }
  .ab-rig__decal-sub { margin-top: 0.35em; font-size: clamp(0.76rem, 1.12cqw, 0.9rem); }
  .ab-rig__sticker { position: absolute; left: 46.4%; top: 58.6%; width: 17.6%; transform: rotate(-1deg); }
  .ab-rig__sticker-in { padding: 4px 7px 5px; font-size: clamp(0.72rem, 1cqw, 0.8rem); text-align: center; }
  .ab-rig__plate { position: absolute; left: 67.5%; bottom: 59.5%; width: 30.5%; }
  .ab-rig__plate { transition: opacity 0.4s ease 2.1s, transform 0.6s var(--fc-bounce) 2.1s; }
  html.js .ab-rig[data-play-on-view]:not(.is-playing) .ab-rig__plate { opacity: 0; transform: translateY(16px) scale(0.96); }
}
@media (min-width: 900px) and (max-width: 1180px) {
  .ab-rig { padding-top: 64px; }
  /* the sticker's lettering wraps to three lines here, so it sits higher on the bed side */
  .ab-rig__sticker { top: 52.5%; width: 18.8%; }
  .ab-rig__plate { left: 62.5%; width: 37%; padding: 18px 22px 16px; }
  .ab-rig__plate .fc-plate__title { font-size: 0.88rem; letter-spacing: 0.02em; }
  .ab-rig__plate .fc-plate__rows dt { font-size: 0.95rem; }
  .ab-rig__plate .fc-plate__rows dd { font-size: 0.76rem; }
}
@media (max-width: 899px) {
  .ab-rig__lead { display: none; }
  .ab-rig__art { margin-top: -9%; }
  .ab-rig__parts { display: grid; gap: 22px; justify-items: start; margin-top: 18px; }
  .ab-rig__decal {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 12px;
    align-items: center;
    padding: 12px 16px 13px;
    border: var(--fc-line);
    border-radius: 12px;
    background: var(--fc-white);
    box-shadow: var(--fc-chunk);
  }
  .ab-rig__decal .ab-rig__n { grid-row: span 2; }
  .ab-rig__decal b { font-size: 1.45rem; }
  .ab-rig__decal-sub { margin-top: 4px; font-size: 0.85rem; }
  .ab-rig__sticker { display: flex; align-items: center; gap: 12px; }
  .ab-rig__sticker-in { font-size: 0.85rem; transform: rotate(-1deg); }
  /* the plate's badge rides its top edge, between the rivets (the art clips anything past its
     left edge), the way the proof stamp rides the bottom edge */
  .ab-rig__plate { width: 100%; max-width: 420px; margin-top: 6px; }
  .ab-rig__plate > .ab-rig__n { position: absolute; top: -15px; left: 30px; }
  .ab-rig__cap { margin-top: 30px; }
}
#who-we-are .fc-stage__copy { align-items: start; }
.ab-stagehead { display: grid; gap: 14px; }

/* ==========================================================================
   3. How we work: the rule sheet zip-tied inside the trailer door
   ========================================================================== */
.ab-shop {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  grid-template-rows: auto 58px;
}
.ab-shop__door {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 1;
  padding: 16px;
  border: var(--fc-line);
  border-radius: 12px 12px 4px 4px;
  background:
    radial-gradient(circle at 50% 50%, var(--fc-steel-a) 0 2px, var(--fc-ink) 2.4px 3.6px, transparent 4px) 0 0 / 100% 34px repeat-y,
    linear-gradient(90deg, var(--fc-steel-b), var(--fc-steel-a) 30%, var(--fc-steel-b) 70%, var(--fc-steel-c));
  background-size: 8px 34px, 100% 100%;
  background-position: 4px 10px, 0 0;
  box-shadow: var(--fc-chunk-lg);
}
.ab-shop__panel {
  padding: clamp(34px, 4vw, 48px) clamp(14px, 2.4vw, 30px) clamp(24px, 3vw, 34px);
  border: var(--fc-line);
  border-radius: 4px;
  background-color: var(--fc-wood);
  background-image:
    var(--fc-grain),
    repeating-linear-gradient(90deg, transparent 0 calc(33.33% - 1px), rgba(122, 75, 42, 0.35) calc(33.33% - 1px) 33.33%),
    repeating-linear-gradient(92deg, rgba(122, 75, 42, 0.06) 0 3px, transparent 3px 11px);
}
.ab-shop__hinge {
  position: absolute;
  left: -10px;
  z-index: 3;
  width: 22px;
  height: 46px;
  border: var(--fc-line);
  border-radius: 4px;
  background: linear-gradient(var(--fc-steel-a), var(--fc-steel-c));
}
.ab-shop__hinge--1 { top: 60px; }
.ab-shop__hinge--2 { top: calc(50% - 23px); }
.ab-shop__hinge--3 { bottom: 60px; }
.ab-shop__bar {
  position: absolute;
  top: 26px;
  bottom: 26px;
  right: 30px;
  z-index: 0;
  width: 10px;
  border: var(--fc-line);
  border-radius: 5px;
  background: linear-gradient(90deg, var(--fc-steel-c), var(--fc-steel-a) 50%, var(--fc-steel-c));
}
.ab-shop__wall {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  margin: 18px 0 0 -8px;
  padding: 14px 0 0 8px;
  border: var(--fc-line);
  border-left: 0;
  border-radius: 0 10px 0 0;
  background-color: var(--fc-board);
  background-image:
    var(--fc-grain),
    radial-gradient(rgba(84, 44, 14, 0.28) 1px, transparent 1.6px) 0 0 / 9px 11px,
    radial-gradient(rgba(255, 236, 205, 0.22) 1px, transparent 1.6px) 4px 6px / 13px 7px;
  box-shadow: inset 14px 0 0 rgba(22, 58, 37, 0.18);
}
.ab-shop__rack { display: block; width: 100%; height: auto; }
.ab-shop__rack--flat { display: none; }
.ab-shop__floor {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: -2px;
  border: var(--fc-line);
  border-radius: 0 0 10px 10px;
  background-color: var(--fc-rail-c);
  background-image: repeating-linear-gradient(90deg, transparent 0 58px, rgba(22, 58, 37, 0.3) 58px 60px);
  box-shadow: var(--fc-chunk-lg);
}
.ab-shop__can { position: absolute; right: 26px; bottom: 16px; z-index: 3; width: 84px; height: auto; overflow: visible; }
/* the laminated sheet */
.ab-rules.fc-laminate { max-width: none; transform: rotate(-0.6deg); }
.ab-rules .fc-ziptie { top: -26px; }
.ab-rules .ab-rules__tie--l { left: 12%; }
.ab-rules .ab-rules__tie--r { left: 88%; }
.ab-rules.fc-laminate::after { background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.16) 38%, transparent 46%); }
.ab-rules .fc-laminate__card { gap: 0; padding: 22px clamp(14px, 2.6vw, 26px) 12px; }
.ab-rules__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding-bottom: 10px;
  border-bottom: 4px double var(--fc-ink);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--fc-ink-2);
}
.ab-rules__head b { font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem); letter-spacing: 0.08em; color: var(--fc-ink); }
.ab-rules__list { margin: 0; padding: 0; list-style: none; }
.ab-rule {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 46px;
  gap: 12px;
  align-items: start;
  padding: 18px 0 16px;
  border-bottom: 1.5px dashed rgba(22, 58, 37, 0.28);
}
.ab-rule:last-child { border-bottom: 0; }
.ab-rule__no {
  font-family: var(--fc-hand);
  font-size: 2rem;
  line-height: 1;
  color: var(--fc-orange-ink);
  transform: rotate(-6deg);
}
.ab-rule__h { font-family: var(--fc-hand); font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.55rem); font-weight: 400; line-height: 1.2; }
.ab-rule__note { margin-top: 8px; font-family: var(--fc-mono); font-size: 0.875rem; line-height: 1.6; color: var(--fc-ink-2); }
.ab-rule__check { width: 46px; height: 42px; margin-top: -4px; overflow: visible; }
.ab-rule__check path {
  fill: none;
  stroke: var(--fc-green-ink);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
html.js .ab-shop[data-play-on-view]:not(.is-playing) .ab-rule__check path { stroke-dashoffset: 1; }
.ab-shop.is-playing .ab-rule__check path { transition: stroke-dashoffset 0.55s cubic-bezier(0.5, 0, 0.3, 1) 0.2s; }
.ab-shop.is-playing .ab-rule:nth-child(2) .ab-rule__check path { transition-delay: 0.85s; }
.ab-shop.is-playing .ab-rule:nth-child(3) .ab-rule__check path { transition-delay: 1.5s; }
@media (max-width: 1180px) {
  .ab-shop { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 58px; }
  .ab-shop__wall { grid-column: 1; grid-row: 2; margin: -8px 0 0; padding: 22px 14px 10px; border-left: var(--fc-line); border-top: 0; border-radius: 0; }
  .ab-shop__floor { grid-row: 3; }
  .ab-shop__rack--up { display: none; }
  .ab-shop__rack--flat { display: block; max-width: 330px; }
}
@media (max-width: 700px) {
  .ab-shop__door { padding: 12px 12px 14px; }
  .ab-shop__hinge { left: -8px; width: 18px; }
  .ab-shop__bar { right: 18px; }
  .ab-shop__panel { padding: 30px 8px 16px; }
  .ab-rules.fc-laminate { padding: 8px; }
  .ab-rules .fc-laminate__card { padding: 18px 12px 8px; }
  .ab-rules__head { font-size: 0.7rem; letter-spacing: 0.08em; }
  .ab-rules__head b { font-size: 1.1rem; letter-spacing: 0.05em; }
  .ab-rule { display: block; position: relative; padding: 16px 38px 14px 0; }
  .ab-rule__no { position: absolute; top: 14px; left: 0; font-size: 1.5rem; }
  .ab-rule__body { padding-left: 24px; }
  .ab-rule__check { position: absolute; top: 12px; right: 0; width: 34px; height: 32px; margin: 0; }
  .ab-rule__note { margin: 8px -38px 0 -24px; font-size: 0.8rem; line-height: 1.55; }
  .ab-shop__rack--flat { max-width: 236px; }
  .ab-shop__can { right: 12px; width: 64px; }
}

/* ==========================================================================
   4. The team: the time-card rack by the shop door
   ========================================================================== */
.ab-clock { display: grid; justify-items: center; max-width: 1180px; margin: 0 auto; }
.ab-clock__sign {
  position: relative;
  z-index: 3;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px 10px;
  margin-bottom: -10px;
  padding: 12px 40px 13px;
  border: var(--fc-line);
  border-radius: 8px;
  background-color: var(--fc-wood);
  background-image: var(--fc-grain), repeating-linear-gradient(0deg, rgba(122, 75, 42, 0.08) 0 2px, transparent 2px 9px);
  box-shadow: var(--fc-chunk);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--fc-ink);
  transform: rotate(-1deg);
}
.ab-clock__sign b { font-size: 1.45rem; letter-spacing: 0.1em; }
.ab-clock__nail {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border: 2px solid var(--fc-ink);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--fc-steel-a), var(--fc-steel-c));
}
.ab-clock__nail:first-child { left: 13px; }
.ab-clock__nail:last-child { right: 13px; }
.ab-rack {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 26px 16px;
  width: 100%;
  margin: 0;
  padding: 40px 22px 22px;
  list-style: none;
  border: var(--fc-line);
  border-radius: 16px;
  background:
    radial-gradient(circle, var(--fc-steel-a) 0 2.4px, var(--fc-ink) 2.8px 4.4px, transparent 4.8px) 10px 10px / 12px 12px no-repeat,
    radial-gradient(circle, var(--fc-steel-a) 0 2.4px, var(--fc-ink) 2.8px 4.4px, transparent 4.8px) calc(100% - 10px) 10px / 12px 12px no-repeat,
    radial-gradient(circle, var(--fc-steel-a) 0 2.4px, var(--fc-ink) 2.8px 4.4px, transparent 4.8px) 10px calc(100% - 10px) / 12px 12px no-repeat,
    radial-gradient(circle, var(--fc-steel-a) 0 2.4px, var(--fc-ink) 2.8px 4.4px, transparent 4.8px) calc(100% - 10px) calc(100% - 10px) / 12px 12px no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 1px, transparent 1px 4px),
    linear-gradient(var(--fc-steel-a), var(--fc-steel-b));
  box-shadow: var(--fc-chunk-lg), inset 0 0 0 5px rgba(255, 255, 255, 0.35);
}
.ab-slot { position: relative; display: flex; flex-direction: column; min-width: 0; }
.ab-card {
  --tilt: 0deg;
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 10px 12px 96px;
  border: var(--fc-line);
  border-radius: 4px;
  background-color: var(--fc-kraft);
  background-image: var(--fc-grain);
  box-shadow: 2px 2px 0 rgba(22, 58, 37, 0.3);
  transform: rotate(var(--tilt));
  transition: transform 0.35s var(--fc-bounce);
  -webkit-tap-highlight-color: transparent;
}
/* the hover sits on the slot, which never moves, so a resting pointer can't make the card bob */
@media (hover: hover) {
  .ab-slot:hover .ab-card { transform: translateY(-14px) rotate(var(--tilt)); }
}
.ab-card.is-up { transform: translateY(-14px) rotate(var(--tilt)); }
.ab-card__head {
  padding-bottom: 5px;
  border-bottom: 2px solid var(--fc-red-ink);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--fc-red-ink);
}
.ab-card__photo {
  position: relative;
  display: block;
  width: 86%;
  margin: 10px 0 6px 4%;
  padding: 5px 5px 9px;
  border: 2px solid var(--fc-ink);
  background: var(--fc-white);
  box-shadow: 2px 2px 0 rgba(22, 58, 37, 0.35);
  transform: rotate(2.4deg);
}
.ab-card__photo img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border: 1.5px solid var(--fc-ink); }
.ab-card__clip {
  position: absolute;
  top: -16px;
  left: 18px;
  width: 13px;
  height: 36px;
  border: 3px solid var(--fc-steel-c);
  border-radius: 7px;
  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)) drop-shadow(0 -1px 0 var(--fc-ink));
  transform: rotate(-8deg);
}
.ab-card__clip::after {
  content: "";
  position: absolute;
  inset: 5px 1px 8px;
  border: 2.5px solid var(--fc-steel-c);
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
}
.ab-card__name { font-family: var(--fc-mono); font-size: 0.9rem; font-weight: 700; line-height: 1.25; }
.ab-card__role { font-family: var(--fc-hand); font-size: 1rem; line-height: 1.2; color: var(--fc-ballpoint); }
.ab-card__in { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; }
/* the kit's green ink for kraft and grained paper (AA on grained kraft, about 5.4:1 flat) */
.ab-card .fc-stamp { border-color: var(--fc-green-ink-2); color: var(--fc-green-ink-2); font-size: 0.8rem; transform: rotate(-8deg); }
.ab-card__amp { font-family: var(--fc-body); font-weight: 800; }
.ab-card__treats { font-family: var(--fc-hand); font-size: 0.9rem; line-height: 1.1; color: var(--fc-ballpoint); }
.ab-card__grid {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 12px;
  height: 78px;
  border: 1.5px solid rgba(180, 35, 24, 0.5);
  background:
    repeating-linear-gradient(0deg, transparent 0 12px, rgba(180, 35, 24, 0.3) 12px 13px),
    linear-gradient(90deg, transparent 32%, rgba(180, 35, 24, 0.3) 32% calc(32% + 1px), transparent calc(32% + 1px) 66%, rgba(180, 35, 24, 0.3) 66% calc(66% + 1px), transparent calc(66% + 1px));
}
.ab-card__more {
  margin: 14px 0 8px;
  font-size: clamp(2.4rem, 1.6rem + 1.8vw, 3.3rem);
  line-height: 1;
  color: var(--fc-clover-2);
}
.ab-slot__lip {
  position: absolute;
  left: -7px;
  right: -7px;
  bottom: 0;
  z-index: 2;
  height: 86px;
  border: var(--fc-line);
  border-radius: 6px 6px 10px 10px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.55), transparent 22%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 4px),
    linear-gradient(var(--fc-steel-b), var(--fc-steel-c));
  box-shadow: 0 4px 0 rgba(22, 58, 37, 0.35);
  pointer-events: none;
}
.ab-card__ghost {
  position: absolute;
  top: 6px;
  left: 3px;
  right: 3px;
  bottom: 20px;
  z-index: 0;
  border: var(--fc-line);
  border-radius: 4px;
  background: var(--fc-kraft);
}
.ab-card__ghost--1 { transform: rotate(-4deg) translate(-4px, -2px); }
.ab-card__ghost--2 { transform: rotate(3deg) translate(5px, -6px); background: var(--fc-sheet-warm); }
@media (max-width: 1100px) {
  .ab-rack { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 720px; row-gap: 30px; }
}
@media (max-width: 600px) {
  .ab-rack { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 12px; padding: 34px 12px 14px; }
  .ab-clock__sign { padding: 10px 32px 11px; font-size: 0.85rem; }
  .ab-clock__sign b { font-size: 1.2rem; }
  .ab-card { padding: 9px 9px 64px; }
  .ab-slot__lip { height: 58px; }
  .ab-card__grid { height: 50px; }
  .ab-card__name { font-size: 0.82rem; }
  .ab-card__role { font-size: 0.95rem; }
}

/* ==========================================================================
   5. What we run all day: the daily route sheet (rows light up; checks land as they scroll in)
   ========================================================================== */
@media (min-width: 960px) {
  #run .fc-split--wide { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
}
#run .fc-fence { margin-top: var(--fc-pad-y); }
.ab-routeboard { justify-self: center; width: 100%; max-width: 820px; }
.ab-route .fc-ring { top: auto; right: auto; bottom: 18px; left: 26px; transform: rotate(-14deg); }
.ab-route__table { width: 100%; margin-top: 4px; border-collapse: collapse; }
.ab-route__table thead th {
  padding: 12px 8px 8px;
  border-bottom: 2px solid var(--fc-ink);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-align: left;
  text-transform: uppercase;
  color: var(--fc-ink-2);
}
.ab-route__c1 { width: 60px; }
.ab-route__c2 { width: 28%; }
.ab-route__table thead .ab-route__c4 { width: 58px; text-align: center; }
.ab-stop > * { padding: 16px 8px; border-bottom: 1.5px solid rgba(22, 58, 37, 0.16); vertical-align: top; text-align: left; }
.ab-stop:last-child > * { border-bottom: 0; }
.ab-stop__no { position: relative; }
.ab-stop__no::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: calc(-1 * clamp(10px, 2.2vw, 22px));
  width: 6px;
  border-radius: 3px;
  background: var(--fc-orange);
  transform: scaleY(0);
  transition: transform 0.3s var(--fc-ease);
}
.ab-stop__no > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: var(--fc-line);
  border-radius: 50% 50% 50% 6px;
  background: var(--fc-white);
  font-family: var(--fc-display);
  font-size: 1rem;
  line-height: 1;
  color: var(--fc-ink);
  transform: rotate(-8deg);
  transition: background-color 0.25s, transform 0.3s var(--fc-bounce);
}
.ab-stop__job { font-size: 1.02rem; font-weight: 800; line-height: 1.3; text-wrap: balance; }
.ab-stop__note p { font-size: 0.95rem; line-height: 1.5; color: var(--fc-ink-2); }
.ab-stop__note a { font-weight: 700; color: var(--fc-ink); text-decoration-color: var(--fc-orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ab-stop__note a:hover { text-decoration-style: wavy; }
@media (min-width: 701px) {
  .ab-stop__note a[href="/websites"],
  .ab-stop__note a[href="/shmo-cards"] { white-space: nowrap; }
}
.ab-stop__aside { margin-top: 8px; padding: 2px 0 2px 10px; border-left: 3px solid var(--fc-sun); font-size: 0.85rem; }
.ab-stop__done { text-align: center; }
.ab-box {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-top: 4px;
  border: 2.5px solid var(--fc-ink);
  border-radius: 5px;
  background: var(--fc-pure);
  transition: transform 0.3s var(--fc-bounce);
}
.ab-box svg { position: absolute; left: -4px; top: -13px; width: 40px; height: 40px; overflow: visible; }
.ab-box path {
  fill: none;
  stroke: var(--fc-clover-2);
  stroke-width: 4.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.45s cubic-bezier(0.5, 0, 0.3, 1);
}
.ab-route.is-armed .ab-stop:not(.is-done) .ab-box path { stroke-dashoffset: 1; }
/* hover or keyboard focus lights a stop, like the dispatcher's finger on the row */
.ab-stop:hover .ab-stop__no::before,
.ab-stop:focus-within .ab-stop__no::before { transform: scaleY(1); }
.ab-stop:hover .ab-stop__no > span,
.ab-stop:focus-within .ab-stop__no > span { background-color: var(--fc-orange); color: var(--fc-ink-deep); transform: rotate(-8deg) scale(1.06); }
.ab-stop:hover .ab-box,
.ab-stop:focus-within .ab-box { transform: scale(1.16); }
.ab-route__foot { display: flex; justify-content: flex-end; margin-top: 14px; padding-right: 6px; }
.ab-route__stamp { font-size: 1.1rem; transform: rotate(-6deg); }
.ab-route.is-armed:not(.is-complete) .ab-route__stamp { opacity: 0; transform: scale(1.8) rotate(-16deg); }
.ab-route.is-complete .ab-route__stamp { transition: opacity 0.15s, transform 0.45s var(--fc-bounce); }
@media (max-width: 700px) {
  .ab-route__table,
  .ab-route__table tbody { display: block; }
  .ab-route__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ab-stop {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 34px;
    grid-template-areas: "no job done" "no note note";
    column-gap: 10px;
    row-gap: 4px;
    padding: 16px 0;
    border-bottom: 1.5px solid rgba(22, 58, 37, 0.16);
  }
  .ab-stop:last-child { border-bottom: 0; }
  .ab-stop > * { padding: 0; border: 0; }
  .ab-stop__no { grid-area: no; }
  .ab-stop__job { grid-area: job; }
  .ab-stop__note { grid-area: note; }
  .ab-stop__done { grid-area: done; }
  .ab-stop__no::before { top: 0; bottom: 0; left: -12px; }
  .ab-stop__no > span { width: 34px; height: 34px; font-size: 0.92rem; }
  .ab-stop__note p { font-size: 0.92rem; }
}

/* ==========================================================================
   6. The flywheel: the cul-de-sac (the route laps once every 36 seconds; paused and
   finished with reduced motion)
   ========================================================================== */
#flywheel .fc-split { align-items: center; }
.ab-fly__copy { align-self: center; }
.ab-sac { position: relative; justify-self: center; width: min(100%, 580px); }
.ab-sac .fc-sample--pin { top: -14px; right: 24px; }
.ab-sac__map {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 1;
  overflow: hidden;
  border: var(--fc-line);
  border-radius: var(--fc-r3);
  background: var(--fc-yard);
  box-shadow: var(--fc-chunk-lg);
}
.ab-sac__draw,
.ab-sac__lap { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.ab-sac__sign {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  justify-items: center;
  padding: 6px 10px 5px;
  border: var(--fc-line);
  border-radius: 7px;
  background: var(--fc-white);
  box-shadow: 3px 3px 0 var(--fc-ink);
  text-align: center;
  transform: translate(-50%, -64%) rotate(-2deg);
}
.ab-sac__sign b { font-size: clamp(0.7rem, 2.9cqw, 1.05rem); line-height: 1.05; color: var(--fc-clover-2); white-space: nowrap; }
.ab-sac__sign span { font-family: var(--fc-hand); font-size: clamp(0.72rem, 2.7cqw, 1rem); line-height: 1.2; color: var(--fc-orange-ink); white-space: nowrap; }
.ab-sac__sign::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 32%;
  right: 32%;
  height: clamp(8px, 2.6cqw, 16px);
  border-inline: 3px solid var(--fc-ink);
}
.ab-sac__flags { margin: 0; padding: 0; list-style: none; }
.ab-sac__flag { --flag: clamp(22px, 5.2cqw, 32px); position: absolute; top: var(--y); left: var(--x); z-index: 3; width: 0; height: 0; }
.ab-sac__flag .fc-flag { position: absolute; bottom: 0; left: calc(var(--flag) * -0.25); transform-origin: 25% 100%; }
.ab-sac__tag {
  position: absolute;
  display: grid;
  padding: 4px 8px 5px;
  border: var(--fc-line);
  border-radius: 8px;
  background: var(--fc-white);
  box-shadow: 2px 2px 0 var(--fc-ink);
  font-size: clamp(0.7rem, 2.6cqw, 0.86rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--fc-ink);
  white-space: nowrap;
}
.ab-sac__tag > span { display: block; }
.ab-sac__flag--r .ab-sac__tag { left: calc(var(--flag) * 0.72); bottom: calc(var(--flag) * 0.3); }
.ab-sac__flag--l .ab-sac__tag { right: calc(var(--flag) * 0.2); bottom: calc(var(--flag) * 0.3); }
.ab-sac__flag--b .ab-sac__tag { top: 6px; left: 50%; transform: translateX(-50%); text-align: center; }
.ab-sac__pause { position: absolute; left: 14px; top: 14px; z-index: 4; }
/* the narrowest maps (phones about 350px and under): slimmer tags, each tucked closer to its
   flag, so the two middle tags never meet */
@container (max-width: 330px) {
  .ab-sac__tag { padding: 3px 6px 4px; font-size: 0.66rem; }
  .ab-sac__flag--r .ab-sac__tag { left: calc(var(--flag) * 0.5); }
  .ab-sac__flag--l .ab-sac__tag { right: 0; }
}
/* phones: the Sample pin moves to the bottom corner, clear of the top tag */
@media (max-width: 600px) {
  .ab-sac .fc-sample--pin { top: auto; bottom: -12px; }
}
/* without JavaScript the pause button can't work, so the map rests (drawn finished) */
html:not(.js) .ab-sac__pause { display: none; }
html:not(.js) .ab-sac__lap,
html:not(.js) .ab-sac__stripes,
html:not(.js) .ab-sac__flag .fc-flag { animation: none; }
/* the lap: the route and the mower share one layer (.ab-sac__lap, the map's own size, so its
   middle is the middle of the circle) and it turns once every 36 seconds. The route has exactly
   27 dashes, so turning it reads the same as the dashes marching round, and the browser can spin
   the layer on the compositor instead of redrawing the map every frame. At rest the mower waits
   at the mouth of the circle, clear of the flags; the lap starts it at the top, by the first flag
   (the negative delay), so each flag pops as it passes */
.ab-sac__lap { transform-origin: 50% 50%; animation: ab-lap 36s linear -18s infinite; }
.ab-sac__stripes { animation: ab-fresh 36s linear infinite; }
.ab-sac__flag .fc-flag { animation: ab-pop 36s linear infinite; animation-delay: calc(var(--i) * 7.2s); }
.ab-sac__lot--2 .ab-sac__stripes { animation-delay: 7.2s; }
.ab-sac__lot--3 .ab-sac__stripes { animation-delay: 14.4s; }
.ab-sac__lot--4 .ab-sac__stripes { animation-delay: 21.6s; }
.ab-sac__lot--5 .ab-sac__stripes { animation-delay: 28.8s; }
.ab-sac.is-paused .ab-sac__lap,
.ab-sac.is-paused .ab-sac__stripes,
.ab-sac.is-paused .fc-flag { animation-play-state: paused; }
@keyframes ab-lap { to { transform: rotate(360deg); } }
@keyframes ab-fresh {
  0% { opacity: 1; }
  50%, 100% { opacity: 0.4; }
}
@keyframes ab-pop {
  0% { transform: none; }
  1.2% { transform: translateY(-9px) scale(1.3) rotate(-6deg); }
  3% { transform: none; }
  100% { transform: none; }
}

/* ==========================================================================
   7. Who we're for: two door hangers on two front doors
   ========================================================================== */
.ab-doors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 60px);
  align-items: stretch;
  max-width: 1000px;
  margin: 0 auto;
}
.ab-door {
  --door: var(--fc-rail-c);
  --fc-hole: var(--door);
  position: relative;
  padding: 118px clamp(18px, 3vw, 38px) 64px;
  border: var(--fc-line);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background-color: var(--door);
  background-image:
    linear-gradient(var(--fc-ink), var(--fc-ink)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 9px, rgba(0, 0, 0, 0.05) 9px 11px, transparent 11px 17px);
  background-size: 100% 2px, 100% 100%;
  background-position: 0 100%, 0 0;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 12px var(--fc-white), inset 0 0 0 14px var(--fc-ink), var(--fc-chunk-lg);
}
/* two raised panels above the hanger, and the kick plate under it */
.ab-door::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 30px;
  right: 30px;
  height: 58px;
  border-radius: 4px;
  background:
    linear-gradient(90deg, transparent calc(50% - 8px), var(--fc-hole) calc(50% - 8px) calc(50% + 8px), transparent calc(50% + 8px));
  box-shadow: inset 0 0 0 2px rgba(22, 58, 37, 0.55), inset 4px 4px 0 rgba(255, 255, 255, 0.14), inset -4px -4px 0 rgba(0, 0, 0, 0.14);
}
.ab-door::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 34px;
  border-top: var(--fc-line);
  background: linear-gradient(var(--fc-brass-hi), var(--fc-brass) 60%, var(--fc-brass-lo));
}
.ab-door--ink { --door: var(--fc-night); }
.ab-door__lock {
  position: absolute;
  top: 100px;
  left: 50%;
  z-index: 1;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  border: var(--fc-line);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--fc-ink) 0 2px, transparent 2.5px), radial-gradient(circle at 35% 35%, var(--fc-brass-hi), var(--fc-brass) 60%, var(--fc-brass-lo));
}
.ab-door__slot {
  position: absolute;
  left: 50%;
  bottom: 96px;
  z-index: 1;
  width: 38%;
  height: 26px;
  border: var(--fc-line);
  border-radius: 5px;
  background: linear-gradient(var(--fc-ink), var(--fc-ink)) 50% 50% / calc(100% - 22px) 5px no-repeat, linear-gradient(var(--fc-brass-hi), var(--fc-brass) 60%, var(--fc-brass-lo));
  transform: translateX(-50%);
}
.ab-door__mat {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -20px;
  z-index: 3;
  height: 24px;
  border: var(--fc-line);
  border-radius: 6px;
  background-color: var(--fc-board);
  background-image: repeating-linear-gradient(90deg, rgba(90, 45, 14, 0.35) 0 2px, transparent 2px 5px);
  box-shadow: 3px 3px 0 var(--fc-ink);
}
.ab-hang { position: relative; z-index: 2; }
.ab-hang .fc-hanger__card { gap: 14px; }
.ab-hang--yes { --hg: var(--fc-leaf); --hg-ink: var(--fc-ink); }
.ab-hang--no { --tilt: var(--fc-tilt-sheet); --hg: var(--fc-red-tint); --hg-ink: var(--fc-ink); }
.ab-hang--no h3 { color: var(--fc-red-ink); }
/* the red one: plain, and a little crumpled */
.ab-hang--no .fc-hanger__card {
  background-image:
    linear-gradient(118deg, transparent 38%, rgba(255, 255, 255, 0.7) 38.6%, transparent 41%),
    linear-gradient(64deg, transparent 58%, rgba(180, 35, 24, 0.1) 58.5%, transparent 63%),
    linear-gradient(170deg, transparent 72%, rgba(255, 255, 255, 0.55) 72.5%, transparent 75%),
    linear-gradient(12deg, transparent 20%, rgba(180, 35, 24, 0.07) 20.5%, transparent 26%);
  border-radius: 30px 26px 18px 24px;
}
.ab-hang__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ab-hang__tags li {
  padding: 5px 12px 6px;
  border: var(--fc-line);
  border-radius: 999px;
  background: var(--fc-white);
  box-shadow: 2px 2px 0 var(--fc-ink);
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.3;
}
.ab-hang__stub {
  position: relative;
  display: grid;
  justify-items: start;
  gap: 12px;
  border-top-style: dashed;
  border-top-width: 2.5px;
}
.ab-hang__stub::before,
.ab-hang__stub::after {
  content: "";
  position: absolute;
  top: -11px;
  width: 20px;
  height: 20px;
  border: var(--fc-line);
  border-radius: 50%;
  background: var(--fc-hole);
}
.ab-hang__stub::before { left: -12px; clip-path: inset(0 0 0 50%); }
.ab-hang__stub::after { right: -12px; clip-path: inset(0 50% 0 0); }
.ab-hang__stubline { font-weight: 800; text-wrap: balance; }
@media (max-width: 800px) {
  .ab-doors { grid-template-columns: minmax(0, 1fr); max-width: 460px; gap: 64px; }
}
@media (max-width: 600px) {
  .ab-door { padding: 108px 16px 58px; }
  .ab-door::before { left: 26px; right: 26px; top: 28px; height: 52px; }
  .ab-door__lock { top: 92px; }
}

/* ==========================================================================
   8. Is your area still open? The estimate pad, turned around, on a tailgate
   ========================================================================== */
#check .ab-pad__gate { padding: 0 clamp(8px, 2vw, 22px) 86px; }
#check .ab-pad__gate .fc-surface__row { display: block; }
#check .fc-cta__paper { gap: 16px; }
#check .fc-cta__copy { display: grid; gap: 16px; }
#check .ab-pad .fc-zip__row { padding-bottom: 10px; border-bottom: 1.5px solid var(--fc-ink); }
.ab-pad__fields { display: grid; gap: 6px; width: 100%; margin: 0; }
.ab-pad__fields div {
  display: grid;
  grid-template-columns: 7.2em minmax(0, 1fr);
  align-items: baseline;
  gap: 10px;
  padding-bottom: 5px;
  border-bottom: 1.5px solid rgba(22, 58, 37, 0.28);
}
.ab-pad__fields dt { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fc-ink-2); }
.ab-pad__fields dd { margin: 0; font-size: 1.15rem; line-height: 1.3; }
@media (max-width: 600px) {
  .ab-pad__fields div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  #check .ab-pad__gate { padding: 0 0 82px; }
}

/* ==========================================================================
   Motion off: every scene is already drawn finished
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ab-sac__lap,
  .ab-sac__stripes,
  .ab-sac__flag .fc-flag,
  .ab-ping__card,
  .ab-ping__thumb,
  .ab-ping__whoosh,
  .ab-rig__wheel,
  .ab-rig__dust { animation: none !important; }
  .ab-sac__pause { display: none; }
  .ab-card { transition: none; }
  /* core.css zeroes durations but not delays: with these off, WebKit can't hold a play-on-view
     "before" state (the plate at opacity 0, an undrawn check) for the length of the delay */
  .ab-rig__veh,
  .ab-rig__parts,
  .ab-rig__plate,
  .ab-shop .ab-rule__check path,
  .ab-box path,
  .ab-route__stamp { transition: none !important; }
}