/* shared.css -- brand tokens, resets and the handful of component rules
   that are byte-for-byte identical across landingpage.html and
   trial-landing.html. Pulled out into its own file (instead of being
   duplicated inside each page's <style> block) so a visitor who moves
   between the homepage and the ad landing page in one session gets this
   CSS from the browser cache the second time, instead of re-downloading
   it. Everything that differs between the two pages on purpose (section
   padding, button sizing, hero layout, etc.) stays inline in each page,
   so this file only holds what is genuinely, safely shared. */

:root{
  --red:#E2231A; --red-dark:#b4190f; --ink:#0d0d0d; --ink-soft:#1a1a1a;
  --bone:#f5f3ee; --bone-dim:#e9e5db; --gold:#f2b705; --white:#ffffff;
  --shadow:0 20px 40px -15px rgba(0,0,0,.35); --skew:-3deg;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bone);color:var(--ink);overflow-x:hidden;}
p{line-height:1.7;}
img{max-width:100%;display:block;}
a{color:inherit;}

.section--bone{background:var(--bone);}
.section--dim{background:var(--bone-dim);}
.section--ink{background:var(--ink);color:var(--bone);}
.section-title em{font-style:normal;color:var(--red);}
.section--ink .section-title em{color:var(--gold);}

.brand .dot{color:var(--red);}

.btn>span{display:inline-block;transform:skewX(calc(var(--skew) * -1));}
.btn--block{display:flex;justify-content:center;width:100%;}

.form-card{background:var(--ink);color:#fff;border-radius:6px;padding:34px;}
.form-group{margin-bottom:18px;}
.form-group label{display:block;font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;color:#bbb;}
.form-group input,.form-group textarea{width:100%;padding:13px 14px;border-radius:4px;border:1px solid #333;background:#1c1c1c;color:#fff;font-family:inherit;font-size:.95rem;}
.form-group input:focus,.form-group textarea:focus{outline:2px solid var(--red);border-color:var(--red);}
.form-group textarea{resize:vertical;}

@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}}