/* Mayor of Your Town funnel (v19, 2026-10-19). Loads after fletcher.css; only adds what the Mayor pages need.
   1. The opt-in phone: a local post getting comments from neighbors (assets/js/mayor-phone.js animates it).
   2. Watch page sections that follow the AA script: problems, three moves, the method board. */

/* ---------- 1. feed phone ---------- */
.fb-asset .phone.feed-phone{font-size:12px}
.feed-phone .feed-app{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:4px 12px 7px;border-bottom:1px solid #E4E4E7;background:#fff}
.feed-app b{font:700 1.25em/1 var(--sans);color:#111;letter-spacing:-.01em}
.feed-app span{font-size:.85em;color:#6B6B70}
.feed-head{flex:0 0 auto;background:#fff;padding:8px 10px 7px;display:grid;gap:6px;border-bottom:1px solid #EDEDF0;position:relative;z-index:1}
.feed-view{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background:#fff}
.feed-scroll{display:flex;flex-direction:column;padding:0 0 10px;will-change:transform}
.feed-post{background:#fff;padding:7px 10px 8px;display:grid;gap:7px}
.feed-by{display:flex;align-items:center;gap:7px}
.feed-av{width:2.4em;height:2.4em;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font:700 .95em/1 var(--sans);color:#fff;background:#8E8E93}
.feed-av.me{background:var(--red)}
.feed-who{display:grid;line-height:1.2}
.feed-who b{font-size:1em;color:#111}
.feed-who span{font-size:.82em;color:#6B6B70}
.feed-text{margin:0;font-size:1em;line-height:1.32;color:#111}
.feed-media{position:relative;border-radius:8px;overflow:hidden;aspect-ratio:16/10;background:linear-gradient(160deg,#1c1c1f 0%,#2b0f0d 100%);color:#fff;display:grid;align-content:end;padding:8px 9px}
.feed-media::before{content:"";position:absolute;right:-12%;top:-30%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(236,34,24,.55),rgba(236,34,24,0) 70%)}
.feed-media i{position:absolute;top:7px;left:8px;font:700 .72em/1 var(--sans);font-style:normal;letter-spacing:.08em;background:var(--red);padding:3px 5px;border-radius:3px}
.feed-media em{position:absolute;top:7px;right:8px;font:600 .72em/1 var(--sans);font-style:normal;background:rgba(0,0,0,.55);padding:3px 5px;border-radius:3px}
.feed-media strong{position:relative;font:700 1.22em/1.08 var(--head);text-transform:uppercase;letter-spacing:.01em}
.feed-media small{position:relative;font-size:.78em;opacity:.85;margin-top:2px}
.feed-stats{display:flex;justify-content:space-between;font-size:.82em;color:#6B6B70;border-bottom:1px solid #EDEDF0;padding-bottom:6px}
.feed-stats b{color:#111;font-variant-numeric:tabular-nums}
.feed-heart{display:inline-grid;place-items:center;width:1.35em;height:1.35em;border-radius:50%;background:var(--red);color:#fff;font-size:.8em;margin-right:3px;vertical-align:-.15em}
.feed-comments{display:grid;gap:6px}
.feed-c{display:flex;gap:6px;align-items:flex-start;overflow:hidden}
.feed-c .feed-av{width:2em;height:2em;font-size:.85em}
.feed-c p{margin:0;background:#F0F1F4;border-radius:12px;padding:5px 9px;font-size:.92em;line-height:1.28;color:#111;max-width:88%}
.feed-c p b{display:block;font-size:.86em;color:#111}
.feed-c.hot p{background:#FFE1DE}
.feed-typing{display:none;align-items:center;gap:3px;padding:2px 0 0 2.6em;font-size:.8em;color:#6B6B70}
.feed-typing i{width:5px;height:5px;border-radius:50%;background:#8E8E93;animation:dot 1s infinite ease-in-out}
.feed-typing i:nth-child(2){animation-delay:.15s}.feed-typing i:nth-child(3){animation-delay:.3s}
.feed-input{flex:0 0 auto;display:flex;align-items:center;gap:7px;padding:7px 10px 14px;background:#fff;border-top:1px solid #E4E4E7}
.feed-input span{flex:1;height:26px;border:1px solid #c8c8cc;border-radius:14px;padding:0 10px;display:flex;align-items:center;font-size:.92em;color:#8e8e93}
/* animated start state: only with JS, motion allowed and GSAP loaded (mayor-phone.js removes nothing it did not add) */
html.js:not(.rm):not(.nogsap) .feed-phone .feed-c{height:0;opacity:0}
html.js:not(.rm):not(.nogsap) .feed-phone .feed-typing{display:flex;opacity:0}

.fb-optin-copy .fb-eyebrow{text-wrap:balance}
@media (max-width:760px){
  .fb-asset .phone.feed-phone{font-size:8.6px}
  .feed-phone .feed-app{padding:3px 8px 5px}
  .feed-head{padding:5px 7px;gap:4px}
  .feed-post{padding:5px 7px;gap:5px}
  .feed-scroll{padding:0 0 8px}
  .feed-c{gap:4px}
  .feed-c p{padding:4px 6px;border-radius:9px}
  .feed-typing i{width:4px;height:4px}
  .feed-input{padding:5px 7px 10px}
  .feed-input span{height:19px;padding:0 7px}
}
@media (max-width:359px){.fb-asset .phone.feed-phone{font-size:7.6px}}

/* product sheet ratio: the Mayor sheet is letter size (600x776), taller than the script mockup */
.fb-product-sheet.mayor-sheet{aspect-ratio:600/776}

/* ---------- 2. watch page sections ---------- */
.mz-sec{padding-block:52px}
.mz-sec.alt{background:var(--mist)}
.mz-lede{font-size:clamp(17px,2vw,20px);line-height:1.5;color:var(--ink);text-align:center;max-width:40em;margin:-8px auto 28px}
.mz-quote{max-width:760px;margin:0 auto 24px;background:#fff;border-left:5px solid var(--red);padding:16px 20px;border-radius:4px;font-size:clamp(18px,2.2vw,22px);line-height:1.4;color:var(--ink);font-style:italic}
.mz-quote cite{display:block;margin-top:6px;font-style:normal;font-size:14px;color:var(--mute)}
.mz-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;max-width:980px;margin:0 auto}
.mz-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:20px;display:grid;gap:10px;align-content:start;box-shadow:0 12px 26px -20px #0006}
.mz-card h3{margin:0;font:700 22px/1.12 var(--head);text-transform:uppercase;color:var(--ink)}
.mz-card p{margin:0;font-size:16.5px;line-height:1.5;color:var(--body)}
.mz-card .fb-num{width:40px;height:40px;font-size:20px}
.mz-card.move{border-top:5px solid var(--red)}
.mz-note{text-align:center;margin:26px auto 0;max-width:40em;font-size:17px;color:var(--ink)}
.mz-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:980px;margin:0 auto}
.mz-phase{background:var(--black);color:#fff;border-radius:8px;padding:18px;display:grid;gap:10px;align-content:start}
.mz-phase h3{margin:0;font:700 22px/1.1 var(--head);text-transform:uppercase;color:#fff}
.mz-phase p{margin:0;font-size:15px;line-height:1.45;color:#C9C9CC}
.mz-phase ol{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.mz-phase li{font-size:15px;line-height:1.3;padding:8px 10px;border-radius:5px;background:#1E1E21;color:#E6E6E8}
.mz-phase li.on{background:var(--red);color:#fff;font-weight:700}
.mz-action{max-width:760px;margin:0 auto;display:grid;gap:18px;text-align:center}
.mz-action p{margin:0;font-size:18px;line-height:1.5;color:var(--ink)}
@media (max-width:760px){
  .mz-sec{padding-block:40px}
  .mz-grid,.mz-board{grid-template-columns:minmax(0,1fr)}
}