/* Shared look for the landing sites. Copied into every site as shared/landing.css
   by scripts/build-landing.mjs. Brand values match the Legal Geek leaflets. */
@font-face{font-family:'Jost';font-weight:400;font-display:swap;src:url(fonts/jost-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Jost';font-weight:500;font-display:swap;src:url(fonts/jost-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2')}

:root{
  color-scheme:light;
  --navy:#102942;--blue:#30549A;--text:#33475b;--muted:#5a6b7d;
  --line:#c9d2dc;--wash:#f2f5f8;--page:#e9edf2;--card:#fff;--error:#a3261b;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--page)}
body{margin:0;background:var(--page);color:var(--text);font:400 17px/1.6 'IBM Plex Sans',system-ui,sans-serif;-webkit-text-size-adjust:100%}
a{color:var(--blue)}
img{max-width:100%}

.wrap{max-width:1040px;margin:0 auto;padding:0 16px}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:20px}
.top img{height:28px;width:auto;display:block}
.top .tag{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

.grid{display:grid;gap:32px;padding-block:8px 56px}
@media (min-width:860px){.grid{grid-template-columns:1.1fr 1fr;gap:56px;align-items:start;padding-block-start:32px}}

.eyebrow{font:500 12px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin:0 0 12px}
h1{font:500 clamp(32px,7vw,48px)/1.08 'Jost',system-ui,sans-serif;color:var(--navy);margin:0 0 20px;letter-spacing:-.01em;text-wrap:balance}
h2{font:500 22px/1.25 'Jost',system-ui,sans-serif;color:var(--navy);margin:32px 0 12px}
.lead{font-size:19px;color:var(--navy);margin:0 0 16px;text-wrap:pretty}
p{margin:0 0 16px;text-wrap:pretty}

.offers{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:28px 0 12px}
.offer{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px}
.offer strong{display:block;font:500 26px/1.1 'Jost',system-ui,sans-serif;color:var(--navy);margin-bottom:6px}
.offer span{display:block;font-size:14px;line-height:1.45;color:var(--muted)}
.offer.first{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}

.cols{display:grid;gap:8px 24px}
@media (min-width:560px){.cols{grid-template-columns:1fr 1fr}}
.cols h3{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:16px 0 8px}
ul.ticks{list-style:none;margin:0;padding:0}
ul.ticks li{position:relative;padding-left:22px;margin:0 0 8px;font-size:16px}
ul.ticks li::before{content:'';position:absolute;left:2px;top:.6em;width:9px;height:9px;border-radius:50%;background:var(--blue)}

ol.steps{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:12px}
ol.steps li{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:start}
ol.steps b{display:block;color:var(--navy);font-weight:600}
ol.steps li::before{content:attr(data-n);font:500 14px/44px var(--mono);text-align:center;color:var(--blue);background:var(--card);border:1px solid var(--line);border-radius:50%;width:44px;height:44px}

.note{font-size:13px;line-height:1.5;color:var(--muted);margin-top:20px}

/* Phones arrive by QR code: one tap to the form. Hidden once the form sits alongside. */
.jump{display:block;text-align:center;font:600 17px/1 'IBM Plex Sans',system-ui,sans-serif;color:#fff;background:var(--navy);border-radius:8px;padding:16px;margin:24px 0 28px;text-decoration:none}
@media (min-width:860px){.jump{display:none}}

/* The form card */
.card{background:var(--card);border-radius:14px;padding:24px 20px;box-shadow:0 1px 2px rgba(16,41,66,.08),0 12px 32px rgba(16,41,66,.12)}
@media (min-width:860px){.card{padding:32px;position:sticky;top:24px}}
.card h2{margin-top:0}
.card p.sub{font-size:15px;color:var(--muted);margin-top:-4px}
label{display:block;font-weight:500;color:var(--navy);font-size:15px;margin:16px 0 6px}
label .opt{font-weight:400;color:var(--muted)}
input,textarea{display:block;width:100%;font:inherit;font-size:17px;color:var(--navy);background:var(--wash);border:1px solid var(--line);border-radius:8px;padding:11px 12px;min-height:46px}
textarea{min-height:96px;resize:vertical}
input:focus,textarea:focus{outline:2px solid var(--blue);outline-offset:1px;background:#fff}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
button{display:block;width:100%;margin-top:24px;font:600 17px/1 'IBM Plex Sans',system-ui,sans-serif;color:#fff;background:var(--navy);border:0;border-radius:8px;padding:16px;min-height:52px;cursor:pointer}
button:hover{background:var(--blue)}
button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.privacy{font-size:13px;line-height:1.5;color:var(--muted);margin:16px 0 0}

.done{padding-block:12vh 80px}
.done>*{max-width:36rem}

footer{border-top:1px solid var(--line);padding:20px 0 32px;font-size:14px;color:var(--muted)}
footer a{color:var(--muted)}
footer .wrap{display:flex;flex-wrap:wrap;gap:8px 20px}