/* FastDash Pro — shared styling for the public site. Deliberately one stylesheet for all three pages so the legal pages look like they belong to the product, which is exactly what a campaign reviewer is checking when they follow the footer link. */ :root{ /* Same tokens as DASHBOARD/v1_56 and the homepage, so the site, the legal pages and the app are one identity rather than three. */ --bg:#0a0e1a; --panel:#161c2b; --rule:#1e2635; --ink:#dde4ec; --ink-2:#98a4b3; --muted:#8a94a3; --accent:#00ffff; --accent-dim:#1d4a52; --warn:#e8d34a; --brand:"Orbitron","Eurostile",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; } *{box-sizing:border-box} body{ margin:0; background:var(--bg); color:var(--ink); font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; padding:0 20px; -webkit-font-smoothing:antialiased; } .wrap{max-width:860px;margin:0 auto} .narrow{max-width:700px} a{color:var(--accent)} code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace} /* ---- masthead ---- */ .top{display:flex;align-items:center;justify-content:space-between; gap:16px;flex-wrap:wrap;padding:22px 0;border-bottom:1px solid var(--rule)} .brand{display:block;text-decoration:none;font-family:var(--brand);font-weight:900; font-size:20px;letter-spacing:.04em;line-height:1;color:#fff} .brand b{color:var(--accent);font-weight:900} /* display:block matters -- an inline element ignores width and height. */ .brand .accentbar{display:block;height:3px;width:100px;margin-top:6px;border-radius:2px; background:linear-gradient(90deg,var(--accent),rgba(0,255,255,0))} .top nav a{margin-left:20px;font-size:14px;color:var(--ink-2);text-decoration:none} .top nav a:hover{color:var(--accent)} /* ---- hero ---- */ .hero{padding:62px 0 42px} .hero h1{font-size:clamp(30px,5.4vw,46px);line-height:1.08;margin:0 0 16px; letter-spacing:-.02em;text-wrap:balance} .hero p{font-size:18px;color:var(--ink-2);max-width:58ch;margin:0 0 10px} .tag{display:inline-block;font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:var(--accent);border:1px solid var(--accent-dim);border-radius:2px; padding:4px 9px;margin-bottom:18px;font-weight:700} /* ---- feature grid ---- */ .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:3px; margin:34px 0 10px} .cell{background:var(--panel);padding:20px} .cell h3{margin:0 0 6px;font-size:16px} .cell p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.55} /* ---- legal pages ---- */ .doc{padding:44px 0 10px} .doc h1{font-family:var(--brand);font-weight:700;font-size:27px;margin:0 0 6px;line-height:1.15} .doc .updated{color:var(--muted);font-size:14px;margin:0} .doc h2{font-family:var(--brand);font-weight:700;font-size:15px;letter-spacing:.06em;margin:32px 0 10px;padding-top:18px;border-top:1px solid var(--rule)} .doc h2:first-of-type{border-top:0;padding-top:0} .doc p,.doc li{color:var(--ink-2)} .doc strong{color:var(--ink)} .doc ul{padding-left:20px} .key{background:#11201d;border-left:3px solid var(--accent);padding:14px 16px; border-radius:2px;margin:18px 0} .key p{margin:0;color:var(--ink)} footer{margin-top:52px;padding:22px 0 60px;border-top:1px solid var(--rule); color:var(--muted);font-size:14px;display:flex;justify-content:space-between; gap:14px;flex-wrap:wrap} footer a{color:var(--ink-2);text-decoration:none;margin-left:18px} footer a:first-child{margin-left:0} footer a:hover{color:var(--accent)} /* ===================================================================== THE SMS OPT-IN FORM. Added for carrier rejection 30909. The carriers do not accept a description of how consent is collected; they look for the form itself. Their sibling codes are specific: 30921 it must not be behind a login 30924 the consent wording must be in the flow, not linked from it 30925 the box must NOT be pre-ticked So the sentence sits beside the box, and the box starts empty. Do not "improve" this by checking it for the reader -- that single change fails the campaign. ===================================================================== */ .optin{display:flex;flex-direction:column;gap:8px;margin:22px 0 10px; background:var(--panel);border:1px solid var(--rule);border-radius:8px; padding:22px 22px 20px;max-width:520px} .optin label{font-family:var(--mono);font-size:11px;letter-spacing:.12em; text-transform:uppercase;color:var(--muted);margin-top:8px} .optin label:first-child{margin-top:0} .optin input[type=text],.optin input[type=tel]{ background:#0c1220;border:1px solid var(--rule);border-radius:6px; color:var(--ink);font:15px/1.4 var(--mono);padding:11px 12px;width:100%} .optin input[type=text]:focus,.optin input[type=tel]:focus{ outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #00ffff22} .optin .hint{font-size:13px;color:var(--muted);margin:2px 0 0;line-height:1.45} /* The consent row: box on the left, the agreed wording beside it. The wording is IN the form because 30924 requires it in the flow. */ .optin .check{display:grid;grid-template-columns:auto 1fr;gap:11px; align-items:start;margin-top:16px;text-transform:none; letter-spacing:0;font-family:inherit;font-size:14px; color:var(--ink-2);line-height:1.5;cursor:pointer} .optin .check input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--accent); cursor:pointer;flex:none} .optin button{margin-top:18px;align-self:flex-start;font-family:var(--mono); font-size:13px;letter-spacing:.1em;text-transform:uppercase; color:#04121a;background:var(--accent);border:0;border-radius:6px; padding:12px 20px;cursor:pointer;font-weight:600} .optin button:hover{filter:brightness(1.08)} .optin button:disabled{opacity:.55;cursor:default} .optin button:focus-visible{outline:2px solid var(--accent);outline-offset:3px} .optin .result{margin:14px 0 0;font-size:14px;line-height:1.5} .optin .result.ok{color:var(--accent)} .optin .result.bad{color:#ff8b8b}