/* Appily Ninetyseven — Washline Foot (sitewide shared footer)
   Clothesline poles · hanging clip-tags · laundry-bag newsletter · ground sill
   Not wave+4-col · newsletter→trust→5-col · tape strips · glass colo · monogram ·
   dual-tone split · ticket stub · Terrace Cascade · Chordboard · Accord Fold ·
   Bearing Cross · Lucida Frame · Conservatory · Poster Rack · Parade · Lantern ·
   Sawtooth · ledger/isobar/seam */

.wl-foot {
  --wl-ink: #1A2744;
  --wl-sky: #E3F2FD;
  --wl-mist: #BBDEFB;
  --wl-plate: #FFFFFF;
  --wl-hot: #FF1744;
  --wl-hot-deep: #D50032;
  --wl-blue: #2979FF;
  --wl-blue-deep: #1565C0;
  --wl-clip: #FFEA00;
  --wl-mute: #4A5563;
  --wl-line: #90CAF9;
  --wl-font-display: "Fredoka", "Segoe UI", sans-serif;
  --wl-font-body: "Karla", "Segoe UI", sans-serif;

  margin-top: clamp(40px, 6vw, 72px);
  background:
    radial-gradient(ellipse 50% 40% at 10% 0%, rgba(255, 23, 68, 0.1), transparent 55%),
    radial-gradient(ellipse 45% 35% at 90% 10%, rgba(41, 121, 255, 0.12), transparent 50%),
    linear-gradient(180deg, var(--wl-sky) 0%, var(--wl-mist) 100%);
  color: var(--wl-ink);
  font-family: var(--wl-font-body);
  border-top: 3px solid var(--wl-ink);
  overflow: hidden;
}

.wl-foot *,
.wl-foot *::before,
.wl-foot *::after { box-sizing: border-box; }

.wl-foot a {
  color: inherit;
}

/* —— Yard: poles + line —— */
.wl-yard {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 44px) clamp(16px, 4vw, 32px) 20px;
  position: relative;
}

.wl-poles {
  display: grid;
  grid-template-columns: minmax(200px, 0.95fr) minmax(220px, 0.85fr);
  gap: 20px 28px;
  align-items: start;
  margin-bottom: 8px;
}

.wl-pole {
  background: var(--wl-plate);
  border: 2.5px solid var(--wl-ink);
  border-radius: 14px 14px 8px 8px;
  padding: 18px 18px 16px;
  box-shadow: 5px 5px 0 var(--wl-blue);
  position: relative;
}
.wl-pole--brand { box-shadow: 5px 5px 0 var(--wl-hot); }
.wl-pole::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  width: 14px;
  height: 18px;
  margin-left: -7px;
  background: var(--wl-ink);
  border-radius: 3px 3px 0 0;
}

.wl-pole-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--wl-ink);
  margin-bottom: 8px;
}
.wl-pole-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--wl-hot);
  color: #fff;
  font-family: var(--wl-font-display);
  font-weight: 600;
  font-size: 1rem;
  border: 2px solid var(--wl-ink);
  box-shadow: 2px 2px 0 var(--wl-clip);
}
.wl-pole-word {
  font-family: var(--wl-font-display);
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 600;
  line-height: 1.05;
  margin: 0;
}
.wl-pole-copy {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--wl-mute);
  max-width: 28rem;
}
.wl-pole-meta {
  margin: 10px 0 0;
  font-size: 0.88rem;
  font-weight: 700;
}
.wl-pole-meta a {
  color: var(--wl-blue-deep);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  text-decoration-color: var(--wl-hot);
}
.wl-pole-meta a:hover,
.wl-pole-meta a:focus-visible {
  color: var(--wl-hot-deep);
  outline: none;
}

/* Laundry-bag newsletter */
.wl-bag-kicker {
  margin: 0 0 4px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wl-hot-deep);
}
.wl-bag-title {
  font-family: var(--wl-font-display);
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 10px;
  line-height: 1.15;
}
.wl-bag-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wl-bag-form label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.wl-bag-form input[type="email"] {
  flex: 1 1 140px;
  min-width: 0;
  border: 2px solid var(--wl-ink);
  border-radius: 999px;
  padding: 10px 14px;
  font-family: var(--wl-font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--wl-ink);
  background: var(--wl-sky);
}
.wl-bag-form input[type="email"]::placeholder {
  color: #556274;
}
.wl-bag-form input[type="email"]:focus {
  outline: 3px solid var(--wl-blue);
  outline-offset: 1px;
  background: #fff;
}
.wl-bag-submit {
  appearance: none;
  border: 2px solid var(--wl-hot-deep);
  background: var(--wl-hot);
  color: #fff;
  font-family: var(--wl-font-display);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 3px 0 var(--wl-hot-deep);
  transition: transform 220ms cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 220ms ease;
}
.wl-bag-submit::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 234, 0, 0.55) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
}
.wl-bag-submit:hover,
.wl-bag-submit:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 5px 0 var(--wl-hot-deep);
  outline: none;
}
.wl-bag-submit:hover::after,
.wl-bag-submit:focus-visible::after {
  transform: translateX(120%);
}
.wl-bag-submit:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--wl-hot-deep);
}
.wl-bag-note {
  margin: 8px 0 0;
  font-size: 0.8rem;
  color: var(--wl-mute);
  font-weight: 600;
}

/* SVG clothesline */
.wl-line-wrap {
  position: relative;
  height: 36px;
  margin: 4px 0 6px;
}
.wl-line-svg {
  width: 100%;
  height: 36px;
  display: block;
  overflow: visible;
}
.wl-line-svg path {
  fill: none;
  stroke: var(--wl-ink);
  stroke-width: 3.5;
  stroke-linecap: round;
}

/* Hanging tags */
.wl-tags {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 16px;
  list-style: none;
  margin: 0;
  padding: 0 0 8px;
}
.wl-tag {
  background: var(--wl-plate);
  border: 2px solid var(--wl-ink);
  border-radius: 4px 4px 12px 12px;
  padding: 22px 14px 14px;
  position: relative;
  box-shadow: 3px 4px 0 rgba(26, 39, 68, 0.12);
  transform-origin: 50% 0;
  transition: transform 280ms cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 220ms ease;
}
.wl-tag:nth-child(1) { transform: rotate(-1.8deg); box-shadow: 3px 4px 0 var(--wl-hot); }
.wl-tag:nth-child(2) { transform: rotate(1.4deg); box-shadow: 3px 4px 0 var(--wl-blue); }
.wl-tag:nth-child(3) { transform: rotate(-1.1deg); box-shadow: 3px 4px 0 var(--wl-clip); }
.wl-tag:nth-child(4) { transform: rotate(1.8deg); box-shadow: 3px 4px 0 var(--wl-hot); }

.wl-tag-clip {
  position: absolute;
  top: -10px;
  left: 50%;
  width: 18px;
  height: 14px;
  margin-left: -9px;
  background: radial-gradient(circle at 30% 30%, #fff 0 20%, var(--wl-clip) 21%);
  border: 2px solid var(--wl-ink);
  border-radius: 40%;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
  z-index: 2;
}
.wl-tag:nth-child(2) .wl-tag-clip {
  background: radial-gradient(circle at 30% 30%, #fff 0 20%, var(--wl-blue) 21%);
}
.wl-tag:nth-child(3) .wl-tag-clip {
  background: radial-gradient(circle at 30% 30%, #fff 0 20%, var(--wl-hot) 21%);
}

.wl-tag h4 {
  margin: 0 0 8px;
  font-family: var(--wl-font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--wl-ink);
}
.wl-tag a {
  display: block;
  padding: 0.28rem 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--wl-mute);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 180ms ease, border-color 180ms ease, padding-left 180ms ease;
}
.wl-tag a:hover,
.wl-tag a:focus-visible {
  color: var(--wl-hot-deep);
  border-bottom-color: var(--wl-blue);
  padding-left: 4px;
  outline: none;
}

.wl-tag:hover,
.wl-tag:focus-within {
  transform: rotate(0deg) translateY(-6px);
  box-shadow: 4px 8px 0 var(--wl-ink);
  z-index: 2;
}

/* Aisle chips on the line */
.wl-aisles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.wl-aisle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--wl-plate);
  border: 2px dashed var(--wl-blue);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--wl-ink);
  text-decoration: none;
  transition: background 180ms ease, border-color 180ms ease, transform 220ms cubic-bezier(0.34, 1.4, 0.64, 1);
}
.wl-aisle::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wl-hot);
  flex-shrink: 0;
}
.wl-aisle:nth-child(2n)::before { background: var(--wl-blue); }
.wl-aisle:nth-child(3n)::before { background: var(--wl-clip); border: 1px solid var(--wl-ink); }
.wl-aisle:hover,
.wl-aisle:focus-visible {
  background: var(--wl-clip);
  border-style: solid;
  border-color: var(--wl-ink);
  transform: translateY(-3px);
  outline: none;
}

/* Ground sill */
.wl-sill {
  background: var(--wl-ink);
  color: #E8F0FA;
  padding: 14px clamp(16px, 4vw, 32px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.85rem;
  font-weight: 600;
}
.wl-sill span { color: #C5D4E8; }
.wl-sill-pay {
  color: var(--wl-clip) !important;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.wl-rise {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 2px solid var(--wl-clip);
  border-radius: 50%;
  background: var(--wl-hot);
  color: #fff;
  font-size: 1.15rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--wl-hot-deep);
  transition: transform 220ms cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 200ms ease;
}
.wl-rise:hover,
.wl-rise:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 6px 0 var(--wl-hot-deep);
  outline: none;
}
.wl-rise:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 var(--wl-hot-deep);
}

/* Mobile: laundry stack */
@media (max-width: 900px) {
  .wl-poles { grid-template-columns: 1fr; }
  .wl-tags { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .wl-tags { grid-template-columns: 1fr; }
  .wl-tag,
  .wl-tag:nth-child(n) {
    transform: none;
  }
  .wl-tag.is-stacked {
    animation: wl-stack-in 420ms cubic-bezier(0.34, 1.4, 0.64, 1) both;
  }
  .wl-tag:hover,
  .wl-tag:focus-within {
    transform: translateY(-4px);
  }
  .wl-line-wrap { height: 24px; }
  .wl-sill { flex-direction: column; align-items: flex-start; }
}

@keyframes wl-stack-in {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .wl-tag,
  .wl-bag-submit,
  .wl-rise,
  .wl-aisle {
    transition: none !important;
    animation: none !important;
  }
  .wl-bag-submit::after { display: none; }
}