/* WorkWell activation. LASO visual identity. First pass. Structure and flow are unchanged; this is aesthetics only. Palette and type were read off the live lasohealth.com homepage's computed styles rather than guessed: navy #132852 primary text and dark surfaces action #2A5FD1 buttons and links canvas #F7F9F1 warm off-white page background muted #54566B body copy (the most used text color on the site) rule #C3CBE4 hairlines Headings are Bricolage Grotesque at LIGHT weight with tight negative tracking (the homepage h1 is 72px / weight 400 / -3.84px, about -0.053em). That restraint is the signature: heavy weights read as a different brand. Buttons are full pills. Body copy is Inter. */ :root{ --navy:#132852; --navy-deep:#11234B; --action:#2A5FD1; --action-dk:#244BA2; --canvas:#F7F9F1; --surface:#FFFFFF; --muted:#54566B; --muted-2:#5A6B8C; --rule:#C3CBE4; --rule-soft:#E4E8F2; --err:#861512; --ok:#08666B; --font-display:'Bricolage Grotesque','Inter',sans-serif; --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; } /* Bricolage at 500 is the lightest weight self-hosted here; the site serves 400 from Google Fonts. Close enough for the display role, and self-hosting keeps this page free of third-party requests. */ @font-face{font-family:'Bricolage Grotesque';font-weight:400 500;font-style:normal; src:url('/assets/fonts/BricolageGrotesque-Medium.ttf') format('truetype');font-display:swap} @font-face{font-family:'Bricolage Grotesque';font-weight:600;font-style:normal; src:url('/assets/fonts/BricolageGrotesque-SemiBold.ttf') format('truetype');font-display:swap} @font-face{font-family:'Inter';font-weight:400;font-style:normal; src:url('/assets/fonts/Inter-Regular.ttf') format('truetype');font-display:swap} @font-face{font-family:'Inter';font-weight:600;font-style:normal; src:url('/assets/fonts/Inter-SemiBold.ttf') format('truetype');font-display:swap} *{box-sizing:border-box} body{margin:0;background:var(--canvas);color:var(--navy);font-family:var(--font-body);font-size:16px;-webkit-font-smoothing:antialiased} button,input{font:inherit} button,a,input{-webkit-tap-highlight-color:transparent} button{cursor:pointer} a{color:var(--action)} button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid rgba(42,95,209,.45);outline-offset:3px} button:disabled{cursor:wait} /* Author display rules beat the UA [hidden] rule, so this must stay explicit. Without it the handoff fallback link renders before the human click. */ [hidden]{display:none!important} .shell{ max-width:560px;min-height:100svh;margin:auto;background:var(--surface); display:flex;flex-direction:column; padding:30px 38px 26px; } /* main does NOT flex:1 here. Letting it grow pins the footer to the bottom of the viewport and opens a dead gap under short screens (the last-4 step is only a few elements tall). Sitting the footer directly under the content keeps the page feeling composed at every step. */ /* Header */ /* Single child now that the internal site badge is gone. */ .bar{display:flex;align-items:center} /* Two-line mark: "WorkWell" over a small "by LASO" endorsement. Below ~32px the endorsement stops being legible on a phone. */ .lockup{height:34px;width:auto;display:block} /* Cobrand lockup (WorkWell by LASO + partner). Pre-composed at 3x and sized to fit a 342px mobile content box. max-width keeps it inside the smallest phone we support rather than overflowing the header. */ .lockup.is-cobrand{height:38px;max-width:100%} @media(max-width:400px){ .lockup.is-cobrand{height:34px} } main{padding:58px 0 34px} /* Progress: hairline segments, action blue when current */ .progress{display:flex;gap:6px;margin-bottom:34px} .progress span{height:3px;width:34px;border-radius:999px;background:var(--rule-soft)} .progress .current{background:var(--action)} /* Optional tenant intro video, above the heading on the first screen. FULL BLEED to the card edges. The video carries burned-in text sized for desktop viewing, so every pixel of width is legibility: negating the shell padding buys ~14% on a phone and ~16% on desktop over an inset frame. The height is reserved before the player loads so the heading does not jump. aspect-ratio, not the padding-bottom % hack: percentage padding resolves against the PARENT's inline size, so with border-box and 1px side borders the box came out 1.77 instead of 1.7778 and Wistia letterboxed ~1px. */ .video-frame{ position:relative; width:auto; margin:0 -38px 30px; /* negate .shell horizontal padding */ aspect-ratio:16 / 9; /* NO BORDERS. aspect-ratio sizes the BORDER box, so a 1px top and bottom border stole 2px from the iframe's content box: the player rendered 16:9 at 219.4px inside a 217.4px window and overflow:hidden clipped the bottom strip, which is exactly where this video's burned-in footnote text sits. A separating hairline, if ever wanted again, must go on a wrapper or as an inset box-shadow so it cannot consume the video's height. */ overflow:hidden; background:#EDF1F8; } .video-frame iframe{width:100%;height:100%;border:0;display:block} /* Fallback for engines without aspect-ratio. Keeps the ratio exact by sizing against the element itself rather than the padded parent. */ @supports not (aspect-ratio: 16 / 9){ .video-frame{height:0;padding-bottom:56.25%} .video-frame iframe{position:absolute;inset:0} } .eyebrow{ font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:.01em; margin:0 0 14px;color:var(--action); } h1{ font-family:var(--font-display);font-weight:400; font-size:44px;letter-spacing:-.045em;line-height:1.06; margin:0 0 18px;color:var(--navy); /* Stops a single short word ("you?", "up") stranding on its own line, which reads as a layout bug at phone widths. No-op where unsupported. */ text-wrap:balance; } p{line-height:1.55} .intro{font-size:18px;color:var(--muted);margin:0 0 34px;max-width:38ch;text-wrap:pretty} /* Form */ label{display:block;font-size:14px;font-weight:600;margin-bottom:9px;color:var(--navy)} input{ width:100%;min-height:58px;padding:15px 18px; border:1px solid var(--rule);border-radius:14px; background:var(--surface);color:var(--navy);outline:none; font-size:17px; /* 16px+ prevents iOS zoom on focus */ transition:border-color .15s,box-shadow .15s; } input::placeholder{color:#8A93A8} input:focus{border-color:var(--action);box-shadow:0 0 0 4px rgba(42,95,209,.12)} input[aria-invalid=true]{border-color:var(--err)} /* Last-4 entry: wide tracking so four digits read as a discrete code. */ #last4{letter-spacing:.5em;text-align:center;font-size:25px;font-weight:600;padding-left:.5em} /* Buttons: full pills, per the homepage. .primary is used on both