/* Visionform — the public pages (landing, signup). * * Deliberately separate from style.css, which dresses the editor. These two * have almost nothing in common: one is a page people read once, the other is * a tool people live in. Sharing a sheet made both harder to change. */ :root{ --paper:#FFFDF9; --ink:#1B1B22; --navy:#16233F; --muted:#6B6459; --line:#EDE5D8; --coral:#FF6B4A; --tang:#FFA23A; --brandgold:#A2660F; --teal:#2FC3AE; --violet:#7C5CFF; --hot:linear-gradient(135deg,#FF7A4D,#FFB03A); } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{background:var(--paper);color:var(--ink);position:relative; font:17px/1.6 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif} .wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 22px} .wrap.narrow{max-width:560px} a{color:inherit} /* Soft colour behind the fold, so the page reads bright without shouting. The glows are deliberately larger than the viewport, so they need their own clipping box — overflow on would not contain them. */ .glows{position:absolute;top:0;left:0;right:0;height:760px;overflow:hidden; z-index:0;pointer-events:none} .glow{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5} .g1{width:420px;height:420px;background:#FFCBA8;top:-140px;left:-120px} .g2{width:380px;height:380px;background:#BFF0E6;top:120px;right:-140px} header{position:relative;z-index:1;padding:26px 0 6px} .brand{display:inline-flex;align-items:center;gap:10px;font-weight:800; letter-spacing:-.02em;font-size:19px;color:var(--navy);text-decoration:none} .brand img{width:34px;height:34px} /* The wordmark: "Vision" navy, "form" in the gold picked out of the icon. Not the icon's own #FFB03A — that is 1.8:1 on cream and unreadable as text. This is the darkest gold that still reads as gold, at 4.65:1. */ /* .f nests INSIDE .v deliberately. As siblings they are both flex children of .brand, so its 10px gap — there to separate icon from word — opens up between "Vision" and "form" and splits the name in two. */ .brand .v{color:var(--navy)} .brand .f{color:var(--brandgold)} .chip{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800; letter-spacing:.12em;text-transform:uppercase;color:#8A3E14;background:#FFE9D6; border-radius:99px;padding:7px 14px} .chip i{width:6px;height:6px;border-radius:50%;background:var(--coral);display:block} h1{font-size:clamp(34px,6.2vw,54px);line-height:1.04;letter-spacing:-.035em; color:var(--navy);font-weight:850;margin:16px 0 14px} h1 em{font-style:normal;background:var(--hot);-webkit-background-clip:text; background-clip:text;color:transparent} .lede{font-size:clamp(17px,2.2vw,19px);color:#4A443B;max-width:34em} .cta{display:inline-flex;align-items:center;gap:10px;background:var(--hot);color:#fff; text-decoration:none;font-size:18px;font-weight:800;padding:17px 30px;border:0; border-radius:99px;box-shadow:0 10px 24px rgba(255,110,72,.32);cursor:pointer; font-family:inherit;transition:transform .12s,box-shadow .12s} .cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(255,110,72,.42)} .cta[disabled]{opacity:.55;cursor:default;transform:none;box-shadow:none} section{position:relative;z-index:1} .eyebrow{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase; color:var(--muted)} h2{font-size:clamp(26px,4vw,36px);line-height:1.1;letter-spacing:-.03em;color:var(--navy); font-weight:850;margin:8px 0 26px} footer{margin:52px 0 60px;padding-top:22px;border-top:1px solid var(--line); font-size:14px;color:var(--muted)} footer a{color:var(--navy);font-weight:600}