/* ═══════════════════════════════════════════════════════════════════════════
   Sudslink LLC public pages — the HOUSE LOOK (templates/setup.html tx-modern).
   Shared by the landing page (main.py LANDING_PAGE_HTML), the login page
   (apps/auth/login.py LOGIN_PAGE_HTML), the text-message enrollment page
   (sms_optin.html) and the three legal pages (sms_policy / privacy / terms).
   Tokens are the setup-flow tokens verbatim: brand blue #0047BB → #1E6CFF,
   ink #0B1220, ground #EEF2F7, amber #FAAC1C cue, red #EE2737 stop, green
   #1A7F37 done; Sora for headings, Manrope for body. Fonts are linked by each
   page (Google Fonts, Segoe UI fallback). Radius scale: card 22 / tile 18 /
   button 16 / input 14 / pill 999. Style-guardian pass 2026-09-04 applied.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --mx-blue:#0047bb;--mx-blue2:#1e6cff;--mx-ink:#0b1220;--mx-ink2:#475569;--mx-ink3:#7b8798;
  --mx-line:rgba(11,18,32,.09);--mx-soft:rgba(0,71,187,.08);--mx-ring:rgba(0,71,187,.22);
  --mx-amber:#faac1c;--mx-amber-ink:#8a5a00;--mx-amber-soft:rgba(250,172,28,.16);
  --mx-green:#1a7f37;--mx-green-soft:rgba(26,127,55,.1);--mx-red:#ee2737;--mx-red-ink:#c81e2b;--mx-red-soft:rgba(238,39,55,.08);
  --mx-ground:#eef2f7;--mx-ground2:rgba(11,18,32,.04);
  --mx-shadow:0 18px 40px rgba(11,18,32,.10),0 2px 6px rgba(11,18,32,.06);
  --mx-head:Sora,Manrope,"Segoe UI",system-ui,-apple-system,sans-serif;
  --mx-body:Manrope,"Segoe UI",system-ui,-apple-system,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body.pub{margin:0;background:var(--mx-ground);color:var(--mx-ink);font-family:var(--mx-body);font-weight:500;line-height:1.55;min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.pub a{color:var(--mx-blue)}
body.pub img{max-width:100%}
body.pub h1,body.pub h2,body.pub h3{font-family:var(--mx-head);color:var(--mx-ink);letter-spacing:-.015em;margin:0}
/* anchors must clear the sticky nav (68px, 60px on phones) */
.pub-section[id],.pub-legal .pub-card[id],.pub-card[id]{scroll-margin-top:84px}

/* ── layout ── */
.pub-section{padding:clamp(36px,6vw,80px) clamp(18px,5vw,64px);max-width:1120px;margin:0 auto}
.pub-section+.pub-section{padding-top:0}
.pub-narrow{max-width:600px;margin:0 auto;padding:clamp(18px,4vw,36px) 16px 56px}
.pub-wide{max-width:900px;margin:0 auto;padding:clamp(18px,4vw,36px) 16px 56px}
.sec-head{text-align:center;margin:0 auto 32px;max-width:720px}
.sec-head .pub-h2{margin-top:8px}
.sec-head .pub-sub{margin:12px auto 0}

/* ── type (house scale 17 / 16 / 15) ── */
.pub-eyebrow{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mx-blue)}
.pub-h1{font-size:clamp(30px,5vw,46px);line-height:1.08;font-weight:700;text-wrap:balance}
.pub-h1.sm{font-size:clamp(26px,4.5vw,34px);line-height:1.15}
.pub-h2{font-size:clamp(24px,3.2vw,32px);line-height:1.15;font-weight:700;text-wrap:balance}
.pub-h2.sm{font-size:24px;line-height:1.18}
.pub-h3{font-size:19px;line-height:1.25;font-weight:700;text-wrap:balance}
.pub-sub{font-size:17px;font-weight:600;color:var(--mx-ink2);line-height:1.5;margin:0}
.pub-body{font-size:17px;line-height:1.6}
.pub-body p{margin:0 0 12px}
.pub-fine{font-size:13.5px;font-weight:600;color:var(--mx-ink2);line-height:1.5;margin:14px 0 0}
.pub-fine a{color:var(--mx-blue);font-weight:800;text-decoration:none}
.pub-fine a:hover{text-decoration:underline}
.pub-card .pub-eyebrow+.pub-h1{margin-top:8px}
.pub-card .pub-h1+.pub-sub{margin-top:10px}
.pub-card .pub-h2+.pub-sub{margin-top:8px}

/* ── nav ── */
.pub-nav{position:sticky;top:0;z-index:100;height:68px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 clamp(18px,5vw,64px);background:rgba(238,242,247,.86);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--mx-line)}
.pub-nav .brand{display:flex;align-items:center;text-decoration:none;flex:none}
.pub-nav .brand img{height:28px;display:block}
/* links = a scroll strip between the brand and the pinned action (never hidden, never pushes the button off-screen) */
.pub-nav .links{display:flex;align-items:center;gap:22px;min-width:0;margin-left:auto;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px 0}
.pub-nav .links::-webkit-scrollbar{display:none}
.pub-nav .links a.nl{font-weight:700;font-size:14px;color:var(--mx-ink2);text-decoration:none;white-space:nowrap}
.pub-nav .links a.nl:hover{color:var(--mx-blue)}
.pub-nav .cta{flex:none;position:relative;display:flex;align-items:center}
/* self-retiring shim: the landing served BEFORE the 09-04 restart still keeps its Sign In card inside .links;
   on phones hide the text links there so the button stays on screen. Unmatched (inert) once the
   restarted landing ships the .cta markup. */
@media(max-width:600px){.pub-nav .links:has(.nav-wrap) a.nl{display:none}}

/* ── buttons (the flows' Continue / Back) ── */
.pub-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:16px;padding:16px 18px;font-family:var(--mx-body);font-size:17px;font-weight:800;line-height:1.1;text-decoration:none;cursor:pointer;border:2px solid transparent;transition:transform .15s,box-shadow .2s,background .2s,border-color .2s;-webkit-tap-highlight-color:transparent}
.pub-btn.primary{color:#fff;background:linear-gradient(135deg,var(--mx-blue),var(--mx-blue2));box-shadow:0 12px 26px rgba(0,71,187,.32)}
.pub-btn.primary:hover{transform:translateY(-1px);box-shadow:0 16px 30px rgba(0,71,187,.36)}
.pub-btn.primary:disabled{opacity:.42;box-shadow:none;transform:none;cursor:not-allowed}
.pub-btn.ghost{color:var(--mx-ink);background:#fff;border-color:var(--mx-line)}
.pub-btn.ghost:hover{border-color:var(--mx-ring);box-shadow:0 6px 16px rgba(11,18,32,.06)}
.pub-btn.sm{padding:10px 16px;font-size:14px;border-radius:14px}
.pub-btn.wide{width:100%}
.pub-btn:focus-visible,.pub-tile:focus-visible,.pub-toc a:focus-visible,.pub-check input:focus-visible{outline:none;box-shadow:0 0 0 4px var(--mx-ring)}

/* ── cards ── */
.pub-card{background:#fff;border:1px solid var(--mx-line);border-radius:22px;box-shadow:var(--mx-shadow);padding:26px 24px;margin:0 0 16px}
.pub-card.flat{box-shadow:0 6px 16px rgba(11,18,32,.06)}
.pub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pub-grid.two{grid-template-columns:repeat(2,1fr)}
.pub-grid .pub-card{margin:0}
.pub-icon{width:52px;height:52px;border-radius:14px;background:var(--mx-soft);color:var(--mx-blue);display:flex;align-items:center;justify-content:center;margin:0 0 16px}
.pub-icon svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pub-card .pub-h3{margin-bottom:8px}
.pub-card .pub-body{font-size:16px;color:var(--mx-ink2)}
.pub-list{margin:8px 0 0;padding:0;list-style:none}
.pub-list li{position:relative;padding:5px 0 5px 24px;font-size:15px;font-weight:600;color:var(--mx-ink2);line-height:1.45}
.pub-list li::before{content:"";position:absolute;left:2px;top:12px;width:9px;height:9px;border-radius:50%;background:var(--mx-blue)}
/* the house image bed (the flows' .mimg + .mcap) for any photo a page adds */
.pub-media{background:var(--mx-ink);border-radius:16px;box-shadow:0 10px 24px rgba(11,18,32,.12);overflow:hidden;margin:0 0 14px}
.pub-media img{display:block;width:100%;max-height:42dvh;object-fit:cover}

/* ── pill (the per-unit pill of the flows) ── */
.pub-pill{display:inline-flex;align-items:center;gap:9px;background:var(--mx-soft);color:var(--mx-blue);border-radius:999px;padding:6px 14px 6px 6px;font-weight:800;font-size:13px;margin:0 0 14px;line-height:1.2}
.pub-pill i{width:26px;height:26px;border-radius:50%;background:var(--mx-blue);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-family:var(--mx-head);font-size:14px;flex:none}
.pub-pill small{display:block;font-weight:700;font-size:12px;color:var(--mx-ink2)}
.pub-pill.amber{background:var(--mx-amber-soft);color:var(--mx-amber-ink)}
.pub-pill.amber i{background:var(--mx-amber);color:#1a1200}
.pub-pill.green{background:var(--mx-green-soft);color:var(--mx-green)}
.pub-pill.green i{background:var(--mx-green)}

/* ── callouts (the flow's photo caption strip — text stays ink, like .mcap) ── */
.pub-callout{border-left:4px solid var(--mx-blue);background:var(--mx-soft);border-radius:0 12px 12px 0;padding:12px 14px;font-size:15px;font-weight:700;line-height:1.45;margin:14px 0}
.pub-callout.amber{border-left-color:var(--mx-amber);background:var(--mx-amber-soft);color:var(--mx-amber-ink)}
.pub-callout.stop{border-left-color:var(--mx-red);background:var(--mx-red-soft)}
.pub-callout.green{border-left-color:var(--mx-green);background:var(--mx-green-soft)}
.pub-clause{background:var(--mx-soft);border:2px solid var(--mx-ring);border-radius:16px;padding:14px 16px;font-size:16px;font-weight:800;line-height:1.5;margin:14px 0}

/* ── the dark address / keyword chip (white text wins over the link color) ── */
.pub-addr{display:block;background:var(--mx-ink);color:#fff;border-radius:14px;padding:12px 16px;margin:8px 0;font-family:var(--mx-head);font-weight:700;font-size:19px;text-align:center;letter-spacing:.01em;white-space:normal;user-select:all;text-decoration:none}
body.pub a.pub-addr{color:#fff}
body.pub a.pub-addr:hover{background:#16213a}
.pub-addr small{display:block;font-family:var(--mx-body);font-size:12.5px;font-weight:700;color:rgba(255,255,255,.7);letter-spacing:.04em;text-transform:uppercase;margin-bottom:2px}

/* ── choice tiles ── */
.pub-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0 6px}
.pub-tile{position:relative;text-align:left;background:#fff;border:2px solid var(--mx-line);border-radius:18px;padding:18px 16px;font-family:var(--mx-body);cursor:pointer;transition:border-color .15s,box-shadow .2s,transform .15s;box-shadow:0 6px 16px rgba(11,18,32,.06);color:var(--mx-ink)}
.pub-tile:hover{border-color:var(--mx-ring)}
.pub-tile b{display:block;font-family:var(--mx-head);font-size:18px;font-weight:700;line-height:1.2;margin-bottom:6px;padding-right:22px}
.pub-tile span{display:block;font-size:13.5px;font-weight:600;color:var(--mx-ink2);line-height:1.4}
.pub-tile em{display:block;font-style:normal;font-size:12.5px;font-weight:800;color:var(--mx-blue);margin-top:10px}
.pub-tile.sel{border-color:var(--mx-blue);box-shadow:0 0 0 4px var(--mx-ring),0 14px 28px rgba(0,71,187,.18)}
.pub-tile.sel::after{content:"";position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;background:var(--mx-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/16px no-repeat;animation:mxpop .22s cubic-bezier(.22,1.4,.36,1)}
@keyframes mxpop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}

/* ── fields ── */
.pub-label{display:block;font-size:12px;font-weight:800;color:var(--mx-ink2);text-transform:uppercase;letter-spacing:.1em;margin:18px 0 8px}
.pub-input{width:100%;border-radius:14px;border:2px solid var(--mx-line);background:#fff;padding:14px 16px;font-family:var(--mx-body);font-size:18px;font-weight:700;color:var(--mx-ink);outline:none;transition:border-color .15s,box-shadow .15s}
.pub-input:focus{border-color:var(--mx-blue);box-shadow:0 0 0 4px var(--mx-ring)}
.pub-input::placeholder{color:var(--mx-ink3);font-weight:600}
.pub-check{display:flex;gap:12px;align-items:flex-start;margin:16px 0 0;cursor:pointer;font-size:14.5px;font-weight:600;line-height:1.45;color:var(--mx-ink)}
.pub-check input{width:24px;height:24px;flex:0 0 auto;margin:1px 0 0;accent-color:var(--mx-blue);cursor:pointer;border-radius:6px}

/* ── progress rail (verbatim .mxrail — its 12px/ink3 meta is the house's own) ── */
.pub-rail{display:flex;flex-direction:column;gap:7px;padding:2px 4px 14px}
.pub-rail .bar{height:6px;border-radius:999px;background:rgba(11,18,32,.09);overflow:hidden}
.pub-rail .bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--mx-blue),var(--mx-blue2));transition:width .35s cubic-bezier(.22,1,.36,1)}
.pub-rail .meta{display:flex;justify-content:space-between;font-size:12px;font-weight:700;color:var(--mx-ink3)}
.pub-rail .meta b{color:var(--mx-ink2);font-weight:800}

/* ── phone mock (what the texts look like) ── */
.pub-phone{background:var(--mx-ground2);border:2px solid var(--mx-line);border-radius:22px;padding:16px 14px;margin:12px 0 0}
.pub-phone .from{font-size:12px;font-weight:800;color:var(--mx-ink2);text-align:center;letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}
.pub-msg{max-width:88%;border-radius:18px;padding:10px 13px;font-size:14px;font-weight:600;line-height:1.45;margin:6px 0;word-break:break-word}
.pub-msg.in{background:#fff;border:1px solid var(--mx-line);color:var(--mx-ink);border-bottom-left-radius:6px}
.pub-msg.out{background:linear-gradient(135deg,var(--mx-blue),var(--mx-blue2));color:#fff;margin-left:auto;border-bottom-right-radius:6px;font-weight:800}
.pub-msg .t{display:block;font-size:11px;font-weight:700;color:var(--mx-ink2);margin-bottom:3px;letter-spacing:.04em;text-transform:uppercase}
.pub-msg.out .t{color:rgba(255,255,255,.75)}

/* ── steps row (how enrollment works) ── */
.pub-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:22px 0 0}
.pub-step{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--mx-line);border-radius:18px;padding:16px;box-shadow:0 6px 16px rgba(11,18,32,.06)}
.pub-step i{width:30px;height:30px;border-radius:50%;background:var(--mx-blue);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-family:var(--mx-head);font-size:15px;font-weight:700;flex:none}
.pub-step b{display:block;font-family:var(--mx-head);font-size:15.5px;font-weight:700;margin-bottom:3px}
.pub-step span{font-size:13.5px;font-weight:600;color:var(--mx-ink2);line-height:1.4}

/* ── quote (the representative's script) ── */
.pub-quote{border:2px dashed var(--mx-ring);background:#fff;border-radius:16px;padding:14px 16px;font-size:15px;font-weight:600;line-height:1.55;color:var(--mx-ink);margin:10px 0}
.pub-quote b{color:var(--mx-blue)}

/* ── done state ── */
.pub-ok{width:64px;height:64px;border-radius:50%;background:var(--mx-green-soft);color:var(--mx-green);display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.pub-ok svg{width:32px;height:32px;stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pub-ok.warn{background:var(--mx-amber-soft);color:var(--mx-amber-ink)}
.pub-ok.stop{background:var(--mx-red-soft);color:var(--mx-red)}

/* ── legal prose (measure held to ~68ch like the flows' 45ch column) ── */
.pub-legal .pub-card h2{font-size:20px;margin:0 0 10px}
.pub-legal .pub-card .pub-h3{margin-top:22px}
.pub-legal .pub-card p,.pub-legal .pub-card li{font-size:15.5px;font-weight:500;color:var(--mx-ink);line-height:1.6;max-width:68ch}
.pub-legal .pub-card p{margin:0 0 10px}
.pub-legal .pub-card p:last-child{margin-bottom:0}
.pub-legal .pub-card ul{margin:6px 0 10px;padding-left:22px}
.pub-legal .pub-card li{margin:4px 0}
.pub-legal .pub-card b{font-weight:800}
.pub-legal .pub-card code{font-family:"Cascadia Code",Consolas,monospace;font-size:14px;font-weight:700;background:var(--mx-soft);color:var(--mx-blue);border-radius:8px;padding:2px 8px}
.pub-toc{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.pub-toc a{font-size:13px;font-weight:800;color:var(--mx-blue);background:var(--mx-soft);border-radius:999px;padding:7px 13px;text-decoration:none}
.pub-toc a:hover{background:var(--mx-ring)}

/* ── footer ── */
.pub-footer{text-align:center;padding:36px clamp(18px,5vw,64px) 44px;border-top:1px solid var(--mx-line);background:#fff}
.pub-footer img{height:18px;opacity:.5;display:block;margin:0 auto 8px}
.pub-footer p{font-size:12.5px;color:var(--mx-ink2);font-weight:600;line-height:2;margin:0}
.pub-footer a{color:var(--mx-blue);text-decoration:none;font-weight:800}
.pub-footer a:hover{text-decoration:underline}

/* ── motion ── */
.pub-in{animation:mxin .32s cubic-bezier(.22,1,.36,1)}
@keyframes mxin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.pub-in,.pub-tile.sel::after{animation:none}html{scroll-behavior:auto}}

/* ── responsive (house breakpoints 860 / 600) ── */
@media(max-width:860px){.pub-grid,.pub-grid.two{grid-template-columns:1fr}.pub-steps{grid-template-columns:1fr}}
@media(max-width:600px){
  .pub-nav{height:60px;gap:10px}
  .pub-nav .links{gap:14px}
  .pub-nav .links a.nl{font-size:13px}
  .pub-section[id],.pub-legal .pub-card[id],.pub-card[id]{scroll-margin-top:76px}
  .pub-card{padding:22px 18px}
  .pub-tiles{grid-template-columns:1fr}
  .pub-addr{font-size:17px}
}