:root{--page-width: 1280px;--bg: #f7f7f8;--text: #222222;--accent: #0e7ac4;--muted: #666666;--gap: 1.5rem;--font-sans: "Poppins", "Arial", sans-serif;--font-heading: "Playfair Display", "Georgia", serif;--font-fallback: cursive, sans-serif;}*{box-sizing:border-box;}html{font-size:16px;}  1rem = 16px body{font-family: var(--font-sans);color:var(--text);background: var(--bg) url("images/pattern.svg");margin:0;padding:2rem 0;line-height:1.4;} Fixed-width centered page content .page-wrapper{width:var(--page-width);max-width:100%;margin:0 auto;background: #ffffff;padding:1.25rem;box-shadow:0 2px 8px rgba(0,0,0,0.05);} Header / Nav .site-header{display:flex;align-items:center;justify-content:space-between;gap:var(--gap);margin-bottom:1.5rem;}.site-title{font-family:var(--font-heading); font-size:1.5rem; margin:0;}.site-title a{color:var(--text); text-decoration:none;}.main-nav ul{list-style:none; margin:0; padding:0; display:flex; gap:1rem;}.main-nav a{color:var(--muted); text-decoration:none; padding:0.25rem 0.5rem; border-radius:4px;}.main-nav a:hover, .main-nav a:focus{color:var(--accent); outline:2px solid rgba(14,122,196,0.15);}.main-nav a.active{color:var(--accent); font-weight:600;} Hero .hero{position:relative; margin-bottom:1.5rem;}.hero img{display:block; width:100%; height:auto; border-radius:6px;}.hero-copy{padding:0.75rem 0;}.hero-copy h2{font-family:var(--font-heading); font-size:2rem; margin:0 0 0.5rem;}.hero-copy p{margin:0; color:var(--muted); font-size:1rem;} Features grid .features{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:1.5rem;}.feature{background:#fcfcfd; padding:1rem; border-radius:6px; text-align:left;}.feature img{width:100%; height:auto; display:block; margin-bottom:0.5rem;}.feature h3{font-size:1.125rem; margin:0 0 0.5rem;} Contact form styles .contact form{max-width:640px;}label{display:block; font-weight:600; margin-top:0.75rem;}input[type="text"], input[type="email"], input[type="tel"], textarea{width:100%;padding:0.6rem;margin-top:0.25rem;border:1px solid #ddd;border-radius:4px;font-size:1rem;  rem used font-family:var(--font-sans);}input:focus, textarea:focus{outline:3px solid rgba(14,122,196,0.12); border-color:var(--accent);}input:invalid, textarea:invalid{border-color:#c23030; background: #fff6f6;}button{background:var(--accent); color:#fff; border:none; padding:0.75rem 1rem; font-size:1rem; border-radius:6px; cursor:pointer; margin-top:1rem;}button:hover, button:focus{background:#095f93; outline:3px solid rgba(14,122,196,0.12);} Radio group layout .radios{display:flex; gap:1rem; align-items:center; margin-top:0.5rem;}.radios input{width:auto;} Footer .site-footer{border-top:1px solid #eee; padding-top:1rem; margin-top:1.5rem; color:var(--muted); font-size:0.95rem;} Accessibility & Utilities .required{color:#c23030; margin-left:0.25rem;} Ensure texts use rems and minimum 1rem size body, input, button, textarea{font-size:1rem;} Make sure multi-line text containers are limited in width & centered .features, .contact form{margin-left:auto; margin-right:auto;} small responsive fallback for narrow viewports (still fixed width in larger screens) @media (max-width: 1280px){.page-wrapper{padding:1rem;}.features{grid-template-columns:1fr;}}