:root {
  --bg:        #07090e;
  --bg-2:      #0d1118;
  --bg-3:      #131822;
  --night:     #050811;
  --water:     #0a1325;
  --ink:       #f4ece0;
  --ink-dim:   #b9aa97;
  --ink-mute:  #7a6c5c;
  --amber:     #f5a623;
  --amber-2:   #ffc857;
  --orange:    #ff6a00;
  --teal:      #1a8fa3;
  --teal-2:    #25c7d6;
  --rule:      #1c2333;
  --maxw:      1200px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--amber-2); text-decoration: none; }
a:hover { color: var(--amber); }
h1, h2, h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700; letter-spacing: -0.015em; line-height: 1.1;
  margin: 0 0 0.5em;
}
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.2rem; }
p  { margin: 0 0 1em; color: var(--ink-dim); }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* header */
header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7, 9, 14, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.brand-mark {
  width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, var(--amber-2), var(--amber) 55%, #6a3a13);
  display: grid; place-items: center;
  font-family: 'Anton', sans-serif; font-size: 0.95rem; color: #1a0f06;
  box-shadow: 0 0 0 2px rgba(245,166,35,0.18), 0 4px 14px rgba(245,166,35,0.28);
}
.brand-name { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1rem; }
.brand-name em { color: var(--amber-2); font-style: normal; font-weight: 700; }
nav ul { display: flex; gap: 26px; list-style: none; padding: 0; margin: 0; }
nav a { color: var(--ink-dim); font-size: 0.93rem; }
nav a:hover { color: var(--ink); }
@media (max-width: 720px) { nav ul { display: none; } }

/* hero */
.hero {
  position: relative; overflow: hidden;
  min-height: 92vh;
  display: flex; align-items: stretch;
  background: linear-gradient(180deg, #050810 0%, #0a0f1d 50%, var(--water) 100%);
}
.hero-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero-inner {
  position: relative; z-index: 2;
  width: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 60px 24px 80px;
  max-width: var(--maxw);
  margin: 0 auto;
}
.duuuval {
  font-family: 'Anton', 'Fraunces', sans-serif;
  font-size: clamp(4rem, 18vw, 14rem);
  line-height: 0.86;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: transparent;
  background: linear-gradient(180deg, #ffe4a3 0%, var(--amber) 60%, #c46f0e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 40px rgba(245,166,35,0.18);
}
.duuuval .dot { color: var(--orange); -webkit-text-fill-color: var(--orange); }
.duuuval .small {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.75rem, 1.5vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.4em; text-transform: uppercase;
  background: none; -webkit-text-fill-color: var(--ink-dim);
  color: var(--ink-dim);
  margin-bottom: 18px;
  text-shadow: none;
}
.hero-tagline {
  font-family: 'Fraunces', serif; font-weight: 600;
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  line-height: 1.25;
  color: var(--ink);
  max-width: 800px;
  margin-top: 28px;
}
.hero-tagline em { color: var(--amber-2); font-style: normal; }
.hero-sub {
  color: var(--ink-dim);
  max-width: 640px;
  margin-top: 14px;
  font-size: clamp(0.98rem, 1.4vw, 1.12rem);
}
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 600; font-size: 0.95rem;
  transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn-primary { background: var(--amber); color: #1a0f06; }
.btn-primary:hover { background: var(--amber-2); transform: translateY(-1px); }
.btn-ghost { color: var(--ink); border: 1px solid var(--rule); background: rgba(255,255,255,0.02); }
.btn-ghost:hover { border-color: var(--amber); color: var(--amber-2); }
.bridge-lights .light { animation: pulse 3s ease-in-out infinite; }
.bridge-lights .light:nth-child(2n) { animation-delay: 0.5s; }
.bridge-lights .light:nth-child(3n) { animation-delay: 1s; }
@keyframes pulse {
  0%,100% { opacity: 0.55; }
  50%     { opacity: 1; }
}

/* sections */
section { padding: 92px 0; border-top: 1px solid var(--rule); position: relative; }
.sec-eyebrow { font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--amber); margin-bottom: 12px; font-weight: 600; }
.sec-head { max-width: 760px; margin-bottom: 40px; }
.sec-head h2 { color: var(--ink); }
.sec-head h2 em { font-style: normal; color: var(--amber-2); }
.sec-head p { font-size: 1.06rem; }

/* directory */
#directory { padding-bottom: 110px; }
.dir-meta { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.dir-meta .count { font-family: 'Anton', sans-serif; font-size: 2rem; color: var(--amber); line-height: 1; }
.dir-meta .count-label { color: var(--ink-mute); font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.filters > div { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; }
.chip {
  padding: 7px 14px; border-radius: 999px;
  background: var(--bg-2); border: 1px solid var(--rule);
  color: var(--ink-dim); font-size: 0.85rem;
  cursor: pointer; user-select: none;
  transition: all 0.15s ease;
  font-family: inherit;
}
.chip:hover { color: var(--ink); border-color: rgba(245,166,35,0.4); }
.chip.active { background: var(--amber); color: #1a0f06; border-color: var(--amber); }
.filters .label-row { width: 100%; margin-bottom: 4px; gap: 0; }
.filters .label-row span { color: var(--ink-mute); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; }
#map {
  height: 520px;
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--rule);
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,0.35);
  background: var(--bg-2);
}
@media (max-width: 700px) { #map { height: 400px; } }
.leaflet-container { background: var(--bg-2) !important; font-family: inherit; }
.leaflet-popup-content-wrapper {
  background: var(--bg-3); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 10px;
}
.leaflet-popup-tip { background: var(--bg-3); }
.leaflet-popup-content { margin: 12px 14px; font-size: 0.92rem; line-height: 1.5; }
.leaflet-popup-content .pop-name { font-family: 'Fraunces', serif; font-weight: 700; font-size: 1.05rem; color: var(--ink); margin-bottom: 2px; }
.leaflet-popup-content .pop-meta { color: var(--ink-mute); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 6px; }
.leaflet-popup-content .pop-blurb { color: var(--ink-dim); }
.leaflet-popup-content a { color: var(--amber-2); }
.leaflet-control-attribution { background: rgba(7,9,14,0.7) !important; color: var(--ink-mute) !important; }
.leaflet-control-attribution a { color: var(--ink-dim) !important; }
.marker-pin {
  background: var(--amber);
  width: 22px; height: 22px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 2px solid #1a0f06;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}
.marker-pin.t-bar       { background: #d6566f; }
.marker-pin.t-brewery   { background: var(--teal-2); }
.marker-pin.t-coffee    { background: #c2823a; }
.marker-pin.t-bookstore { background: #b48cf2; }
.marker-pin.t-venue     { background: var(--amber); }
.marker-pin.t-partner   { background: #4ade80; box-shadow: 0 0 0 2px rgba(74,222,128,0.25), 0 4px 10px rgba(0,0,0,0.5); }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
  margin-top: 26px;
}
.card {
  background: linear-gradient(180deg, var(--bg-2), var(--bg-3));
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 20px 22px;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
  display: flex; flex-direction: column;
  text-align: left;
  font-family: inherit;
  color: inherit;
}
.card:hover { transform: translateY(-2px); border-color: rgba(245,166,35,0.45); }
.card.dim { opacity: 0.25; pointer-events: none; }
.card .meta-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; }
.card .type-badge {
  padding: 3px 10px; border-radius: 999px;
  background: rgba(245,166,35,0.12); color: var(--amber);
  font-weight: 600;
}
.card .type-badge.t-bar       { color: #ff859b; background: rgba(214,86,111,0.14); }
.card .type-badge.t-brewery   { color: var(--teal-2); background: rgba(37,199,214,0.12); }
.card .type-badge.t-coffee    { color: #d4914a; background: rgba(194,130,58,0.14); }
.card .type-badge.t-bookstore { color: #c4a3ff; background: rgba(180,140,242,0.14); }
.card .type-badge.t-venue     { color: var(--amber); background: rgba(245,166,35,0.12); }
.card .type-badge.t-partner   { color: #4ade80; background: rgba(74,222,128,0.14); }
.card[data-type="partner"]    { border-color: rgba(74,222,128,0.35); }
.card[data-type="partner"]:hover { border-color: rgba(74,222,128,0.65); }
.card .neighborhood { color: var(--ink-mute); }
.card h3 { color: var(--ink); margin-bottom: 4px; font-size: 1.18rem; }
.card .blurb { color: var(--ink-dim); font-size: 0.94rem; margin: 0 0 10px; flex-grow: 1; }
.card .foot { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-size: 0.85rem; }
.card .foot a { color: var(--amber-2); }
.card .since { color: var(--ink-mute); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; }

/* about */
.about-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: start; }
@media (max-width: 800px) { .about-grid { grid-template-columns: 1fr; gap: 36px; } }
.pull {
  border-left: 3px solid var(--amber);
  padding: 4px 0 4px 22px;
  color: var(--ink);
  font-family: 'Fraunces', serif;
  font-size: 1.32rem;
  line-height: 1.45;
}
.verbs { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.verbs span {
  padding: 6px 14px;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 0.86rem; color: var(--ink-dim);
}
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; }
@media (max-width: 800px) { .principles { grid-template-columns: 1fr; } }
.principle {
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 26px;
}
.principle .num { font-family: 'Anton', sans-serif; color: var(--amber); font-size: 1.1rem; letter-spacing: 0.15em; margin-bottom: 12px; }
.principle h3 { color: var(--ink); margin-bottom: 6px; }
.principle p  { margin: 0; font-size: 0.96rem; }
.founders { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 32px; }
@media (max-width: 800px) { .founders { grid-template-columns: 1fr; } }
.founder { background: var(--bg-2); border: 1px solid var(--rule); border-radius: 16px; padding: 32px; }
.founder-head { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
.avatar {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 30% 30%, #3a2918, #1a120c 70%);
  border: 1px solid var(--rule);
  display: grid; place-items: center;
  font-family: 'Anton', sans-serif; font-size: 1.4rem;
  color: var(--amber-2);
}
.founder h3 { color: var(--ink); margin: 0; font-size: 1.25rem; }
.founder .role { color: var(--ink-mute); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 4px; }

/* contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
@media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; gap: 36px; } }
.contact-info p { color: var(--ink-dim); margin: 4px 0; }
.contact-info .label { color: var(--ink-mute); font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; margin-top: 22px; }
form { display: grid; gap: 14px; }
label { font-size: 0.78rem; color: var(--ink-mute); letter-spacing: 0.16em; text-transform: uppercase; }
input, textarea {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  color: var(--ink);
  border-radius: 10px;
  padding: 12px 14px;
  font: inherit;
  transition: border-color 0.15s ease;
}
input:focus, textarea:focus { outline: none; border-color: var(--amber); }
textarea { min-height: 130px; resize: vertical; }
.field { display: grid; gap: 6px; }
form button {
  justify-self: start;
  background: var(--amber);
  color: #1a0f06;
  border: 0;
  padding: 13px 28px;
  border-radius: 999px;
  font: inherit; font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}
form button:hover { background: var(--amber-2); transform: translateY(-1px); }
.form-note { font-size: 0.85rem; color: var(--ink-mute); }

/* footer */
footer {
  border-top: 1px solid var(--rule);
  padding: 36px 0 56px;
  color: var(--ink-mute);
  font-size: 0.88rem;
  background: var(--bg-2);
}
footer .row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
footer .small { font-size: 0.78rem; }
footer strong { color: var(--ink-dim); }

.err {
  background: var(--bg-2); border: 1px solid var(--rule); border-radius: 12px;
  padding: 22px; color: var(--ink-dim); font-size: 0.95rem;
}

/* === tech-flair polish === */

/* Twinkling stars */
.twinkle circle { animation: twinkle 4s ease-in-out infinite; }
.twinkle circle:nth-child(2) { animation-delay: 1.2s; }
.twinkle circle:nth-child(3) { animation-delay: 2.1s; }
.twinkle circle:nth-child(4) { animation-delay: 0.7s; }
@keyframes twinkle { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }

/* BoA tower red beacon */
.beacon { animation: beacon 1.8s ease-in-out infinite; transform-origin: center; }
@keyframes beacon { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }

/* Modis spire pulse */
.spire { animation: spire 2.4s ease-in-out infinite; }
@keyframes spire { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }

/* Acosta bridge purple lights — slow shimmer */
.acosta-lights circle { animation: acosta 5s ease-in-out infinite; }
.acosta-lights circle:nth-child(3n)  { animation-delay: 0.8s; }
.acosta-lights circle:nth-child(3n+1){ animation-delay: 1.6s; }
.acosta-lights circle:nth-child(3n+2){ animation-delay: 2.4s; }
@keyframes acosta { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }

/* Window lights — subtle organic flicker on a few windows */
.windows rect:nth-child(7n)  { animation: flicker-a 6s ease-in-out infinite; }
.windows rect:nth-child(11n) { animation: flicker-b 9s ease-in-out infinite; }
@keyframes flicker-a { 0%,100% { opacity: 0.85; } 50% { opacity: 0.35; } }
@keyframes flicker-b { 0%,100% { opacity: 0.7; }  60% { opacity: 0.25; } }

/* Section reveal (driven by IntersectionObserver) */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* Card hover — subtle inner glow */
.card { will-change: transform; }
.card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(245,166,35,0); transition: box-shadow 0.2s ease;
}
.card { position: relative; }
.card:hover::after { box-shadow: inset 0 0 0 1px rgba(245,166,35,0.25); }

/* Custom map marker pulse (for partner type — emphasized) */
.marker-pin.t-partner { animation: partner-pulse 3s ease-in-out infinite; }
@keyframes partner-pulse {
  0%,100% { box-shadow: 0 0 0 2px rgba(74,222,128,0.25), 0 4px 10px rgba(0,0,0,0.5); }
  50%     { box-shadow: 0 0 0 6px rgba(74,222,128,0.10), 0 4px 10px rgba(0,0,0,0.5); }
}

/* Live status pill in header */
.live-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px;
  background: rgba(74,222,128,0.08); color: #4ade80;
  border: 1px solid rgba(74,222,128,0.25);
  border-radius: 999px;
  font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase;
  font-family: 'Inter', monospace;
}
.live-pill .dot {
  width: 6px; height: 6px; border-radius: 50%; background: #4ade80;
  animation: live-dot 1.6s ease-in-out infinite;
}
@keyframes live-dot { 0%,100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } }
@media (max-width: 720px) { .live-pill { display: none; } }

/* Build badge in footer */
.build-badge {
  display: inline-block;
  font-family: 'Inter', monospace;
  font-size: 0.72rem; letter-spacing: 0.1em;
  color: var(--ink-mute);
  padding: 3px 9px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  margin-left: 8px;
}
.build-badge .hash { color: var(--amber); }

/* Counter — uses a steady-state look while animating */
.dir-meta .count { font-variant-numeric: tabular-nums; }

/* ============================================================
   Hero readability + responsiveness (2026-05-31)
   A bottom scrim keeps text clean over the skyline at any size.
   ============================================================ */
.hero::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(5,8,17,0) 0%,
    rgba(5,8,17,0) 26%,
    rgba(5,8,17,0.30) 46%,
    rgba(5,8,17,0.72) 72%,
    rgba(5,8,17,0.94) 100%
  );
}
.hero-inner { gap: 0; max-width: var(--maxw); }
.hero-tagline,
.hero-sub { text-shadow: 0 2px 18px rgba(5,8,17,0.85), 0 1px 3px rgba(5,8,17,0.9); }
.hero-tagline { max-width: 760px; }
.hero-sub {
  max-width: 600px;
  color: var(--ink-dim);
}
.duuuval .small { text-shadow: 0 1px 10px rgba(5,8,17,0.8); }

/* Tablet */
@media (max-width: 760px) {
  .hero { min-height: 88vh; }
  .hero-inner { padding: 56px 22px 64px; }
  .hero-tagline { margin-top: 20px; font-size: clamp(1.25rem, 4.6vw, 1.7rem); }
  .hero-sub { margin-top: 12px; }
  .duuuval { font-size: clamp(3.4rem, 21vw, 8rem); }
}
/* Phones */
@media (max-width: 480px) {
  .hero { min-height: 84vh; }
  .hero-inner { padding: 44px 18px 52px; }
  .duuuval .small { letter-spacing: 0.2em; font-size: 0.66rem; margin-bottom: 12px; }
  .cta-row { gap: 10px; }
  .cta-row .btn { flex: 1 1 auto; text-align: center; }
}
@media (max-width: 360px) {
  .duuuval .small { letter-spacing: 0.12em; }
}

/* ============================================================
   "Get on the map" section
   ============================================================ */
#get-listed { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); }
.listed-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 820px) { .listed-grid { grid-template-columns: 1fr; gap: 34px; } }
.listed-perks { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 14px; }
.listed-perks li {
  position: relative; padding-left: 30px;
  color: var(--ink-dim); font-size: 0.98rem;
}
.listed-perks li::before {
  content: "\2713"; position: absolute; left: 0; top: 0;
  color: #4ade80; font-weight: 700;
}
.listed-perks li strong { color: var(--ink); }
.listed-note {
  margin-top: 24px; padding: 16px 18px;
  background: rgba(74,222,128,0.06);
  border: 1px solid rgba(74,222,128,0.22);
  border-radius: 12px;
  font-size: 0.92rem; color: var(--ink-dim);
}
.listed-note strong { color: #6ee7a0; }

/* ============================================================
   Spam guard + form UX (honeypot, verify, status messages)
   ============================================================ */
/* Honeypot — visually hidden, off-screen, kept out of tab order in JS */
.hp-field {
  position: absolute !important;
  left: -9999px !important; top: auto !important;
  width: 1px; height: 1px; overflow: hidden;
  opacity: 0;
}
.form-status {
  font-size: 0.9rem;
  border-radius: 10px;
  padding: 0;
  margin: 0;
  color: var(--ink-mute);
  transition: all 0.2s ease;
}
.form-status.show { padding: 12px 14px; margin-top: 4px; }
.form-status.working { background: rgba(245,166,35,0.08); border: 1px solid rgba(245,166,35,0.25); color: var(--amber-2); }
.form-status.ok { background: rgba(74,222,128,0.08); border: 1px solid rgba(74,222,128,0.28); color: #6ee7a0; }
.form-status.bad { background: rgba(214,86,111,0.10); border: 1px solid rgba(214,86,111,0.3); color: #ff859b; }
.form-status .spin {
  display: inline-block; width: 12px; height: 12px; margin-right: 8px;
  border: 2px solid rgba(245,166,35,0.35); border-top-color: var(--amber);
  border-radius: 50%; vertical-align: -1px;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
form button[disabled] { opacity: 0.55; cursor: progress; }
.privacy-line { font-size: 0.8rem; color: var(--ink-mute); margin-top: 2px; }
.privacy-line svg { vertical-align: -2px; margin-right: 5px; }