/* Hawkcrest home page, small-business theme (preview). Loaded only by /index.html after styles.css.
   Tokens: /workspace/design/web-design-system.md (hawkcrestcyber row). Review: /workspace/design/hawkcrest/home-review.md P1-P8. */
:root{--bg:#fff;--panel:#f8fafc;--line:#cbd5e1;--txt:#1e293b;--hi:#0f172a;--red:#b42318;--cyan:#1d4ed8;
 --navy:#0f2740;--primary:#1d4ed8;--primary-hover:#1e40af;--accent:#b45309;--accent-soft:#fef3c7;--muted:#475569;--border-strong:#64748b;
 --focus:#2563eb;--shadow-sm:0 1px 2px rgb(15 23 42/.06),0 1px 3px rgb(15 23 42/.08);--shadow-lg:0 12px 32px rgb(15 23 42/.12)}
html{scroll-padding-top:80px}
body.home{background:#fff;color:var(--txt);font-size:1.0625rem;line-height:1.6}
.home section{background:#fff;border-top:1px solid var(--line);padding:72px 0}
.home section.alt{background:var(--panel)}
.home h1,.home h2,.home h3,.home h4{color:var(--hi);font-family:Inter,system-ui,sans-serif;letter-spacing:-.01em;line-height:1.2}
.home h2{font-size:clamp(1.625rem,1.2rem + 1.6vw,2rem);margin:.2em 0 .6em}
.home strong{color:var(--hi)}
.home a{color:var(--primary)}
.home .lead{font-size:1.125rem;color:var(--txt)}
/* P2.3 type: no mono, no "// ", sentence case */
.home .eyebrow{font-family:Inter,system-ui,sans-serif;text-transform:none;letter-spacing:.04em;font-size:.9375rem;font-weight:600;color:var(--primary)}
.home .eyebrow:before{content:none}
.home .muted{font-family:Inter,system-ui,sans-serif;font-size:.9375rem;color:var(--muted)}
/* skip link (P6.5) */
.skip{position:absolute;left:8px;top:-60px;z-index:50;background:#fff;color:var(--primary);padding:12px 16px;border:2px solid var(--primary);border-radius:8px;font-weight:600}
.skip:focus{top:8px}
/* focus (P6.2) */
.home :focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.home input:focus,.home select:focus,.home textarea:focus{outline:3px solid var(--focus);outline-offset:2px;border-color:var(--primary)}
.home .hero :focus-visible,.home footer :focus-visible{outline-color:#fcd34d}
/* buttons (P2.2, P6.1) */
.home .btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 20px;background:var(--primary);border:2px solid var(--primary);color:#fff!important;border-radius:8px;font-weight:600;text-decoration:none;text-align:center;line-height:1.3;transition:background .15s}
.home .btn:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.home .btn.ghost{background:transparent;color:var(--primary)!important;border:2px solid var(--primary)}
.home .btn.ghost:hover{background:#eff6ff}
.home .btn.block{display:flex;width:100%}
/* header (P4) */
.home .nav{background:#fff;backdrop-filter:none;border-bottom:1px solid var(--line)}
.home .brand{color:var(--hi);letter-spacing:.04em}.home .brand span{color:#b42318}
.home .brand img{height:32px;width:auto}
.home .brand picture{display:flex}
.home .nav nav a{color:var(--txt);font-size:1rem;padding:12px;margin-left:4px;min-height:44px;display:inline-flex;align-items:center}
.home .nav nav a:hover{color:var(--primary)}
.home header.nav a.navpf{color:var(--txt);font-weight:400}
.home .nav nav a.navbtn{color:#fff;margin-left:12px;min-height:44px;padding:10px 18px}
.home .nav .menu{color:var(--hi);border:1px solid var(--border-strong);min-height:48px;border-radius:8px}
@media(max-width:900px){
 .home .nav,.home body.navopen .nav,body.home.navopen .nav{background:#fff;box-shadow:none}
 .home .nav nav{background:#fff;border-bottom:1px solid var(--line);box-shadow:0 12px 24px rgb(15 23 42/.12)}
 .home .nav nav a{display:flex;min-height:48px;padding:12px 28px;margin:0;border-top:1px solid var(--line)}
 .home .nav nav a.navbtn{margin:16px 28px 0;justify-content:center;border-top:2px solid var(--primary)}
}
/* hero (P1): navy band, offer card, buttons above the lead */
.home .hero{min-height:0;display:block;padding:64px 0 48px;background:var(--navy);border:0;overflow-x:clip;color:#e2e8f0}
.home .heroin{grid-template-columns:1.35fr 1fr;gap:48px;align-items:center}
.home .herotxt{display:flex;flex-direction:column}
.home .hero h1{color:#fff;font-size:clamp(2rem,1.4rem + 2.6vw,3rem);max-width:18ch;font-weight:800;margin:.3em 0 0}
.home .hero .eyebrow{color:#bfdbfe;order:1}.home .hero h1{order:2}.home .hero .ctas{order:3;margin:24px 0 16px}
.home .herotxt .herotag{order:4;font-family:Inter,system-ui,sans-serif;color:#e2e8f0;font-size:1rem;letter-spacing:.04em;margin:0 0 .75rem}
.home .hero .lead{order:5;color:#e2e8f0;font-size:1.0625rem;max-width:62ch;margin:0 0 .75rem}
.home .hero .msline{order:6;font-size:1rem;color:#e2e8f0;margin:0}.home .hero .msline a{color:#bfdbfe;text-decoration:underline;display:inline-block;padding:10px 0}
.home .hero .ctas{display:flex;gap:12px;flex-wrap:wrap}
.home .hero .ctas .btn{background:#fff;border-color:#fff;color:var(--navy)!important}
.home .hero .ctas .btn:hover{background:#e2e8f0}
.home .hero .ctas .btn.ghost{background:transparent;color:#fff!important;border-color:#fff}
.home .hero .ctas .btn.ghost:hover{background:rgb(255 255 255/.1)}
.herocard{position:relative;background:#fff;color:var(--txt);border:1px solid var(--line);border-top:6px solid var(--primary);border-radius:16px;padding:24px;box-shadow:var(--shadow-lg)}
.herocard .h3{font-size:1.5rem;margin:.1em 0 .4em}
.price{margin:0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.price .amt{font-size:2.25rem;font-weight:800;color:var(--hi);line-height:1.1}
.price .pnote{font-size:.9375rem;font-weight:600;color:var(--muted)}
.price .pnote.big{font-size:1.25rem;color:var(--hi);line-height:1.1;padding:8px 0}
.badge{display:inline-block;background:var(--accent-soft);color:#92400e;border:1px solid var(--accent);border-radius:999px;padding:2px 12px;font-size:.875rem;font-weight:700;margin-bottom:8px}
.ticks{list-style:none;padding:0;margin:8px 0 20px;display:grid;gap:10px}
.ticks li,.trust li,.incl li{display:flex;gap:10px;align-items:flex-start}
.ic{width:20px;height:20px;flex:none;fill:none;stroke:#15803d;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;margin-top:3px}
@media(max-width:900px){.home .heroin{grid-template-columns:1fr;gap:32px}}
@media(max-width:600px){.home .hero{padding:40px 0 48px}.herocard{display:none}.home .hero .ctas .btn{flex:1 1 100%;width:100%}}
/* trust strip (P5.1) */
.home section.truststrip{background:#fff;border-top:0;border-bottom:1px solid var(--line);padding:20px 0}
.trust{list-style:none;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;font-size:1rem}
.trust b{color:var(--hi)}
@media(max-width:900px){.trust{grid-template-columns:1fr 1fr}}
/* free tools band */
.home .pfhome{padding:48px 0}
.home .pfhome .deliv{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--primary);border-radius:12px}
.home .pfhome .deliv li{margin:8px 0}
.home .pfhome .deliv li a{display:inline-block;padding:10px 0}
.home .pfhome .ctas{display:flex;flex-wrap:wrap;gap:12px}
/* services: 3 price cards (P3) */
.offers{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:24px 0}
.offer{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px;box-shadow:var(--shadow-sm)}
.offer.featured{border:2px solid var(--primary)}
.offer h3{font-size:1.375rem;margin:.4em 0 .4em}
.offer p{font-size:1rem;color:var(--muted);margin:0 0 12px}
.offer .notinc{border-top:1px solid var(--line);padding-top:12px;font-size:.9375rem}
.offer .octa{margin:auto 0 0;padding-top:12px}
.incl{display:flex;justify-content:space-between;align-items:center;gap:16px 24px;flex-wrap:wrap;background:#eff6ff;border:1px solid #bfdbfe;border-radius:12px;padding:20px 24px;margin:0 0 48px}
.incl ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 28px;margin:8px 0 0;padding:0}
.incl b{color:var(--hi)}
.subh{font-size:1.5rem;margin:0 0 .3em}.sublead{color:var(--muted);max-width:68ch;margin:0 0 20px}
.morehelp{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.mcard{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:24px}
.mcard h4{font-size:1.125rem;margin:0 0 .4em}.mcard p{margin:0 0 8px;font-size:1rem}.mcard .also{color:var(--muted);font-size:.9375rem}
.home .svclinks{margin:20px 0 0}.home .svclinks a{display:inline-block;padding:10px 0}
@media(max-width:900px){.offers,.morehelp{grid-template-columns:1fr}}
@media(min-width:601px) and (max-width:900px){.morehelp{grid-template-columns:1fr 1fr}}
/* about (P5.2-5.3) */
.home .card{background:#fff;border:1px solid var(--line);border-left:4px solid var(--primary);border-radius:12px;padding:24px}
.home .founder img{border:3px solid #fff;box-shadow:0 0 0 1px var(--line),var(--shadow-lg)}
.home .founder span{font-family:Inter,system-ui,sans-serif;font-size:.9375rem;color:var(--muted)}
.home .namestory{border-left:3px solid var(--primary);color:var(--txt)}
.home .chips span{font-family:Inter,system-ui,sans-serif;font-size:.9375rem;border:1px solid var(--border-strong);color:var(--hi);border-radius:999px;padding:6px 14px;background:#fff}
.chips.mini{margin:16px 0 4px;gap:8px}
.seeall a{display:inline-block;padding:10px 0;font-weight:600}
/* microsoft band (P3.6) */
.home .ms{background:var(--panel)}
.home .msgrid,.home .msgrid.four{grid-template-columns:repeat(4,1fr);gap:16px;background:none;border:0;margin:24px 0 28px}
.home .msgrid div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px}
.home .msgrid h3{font-size:1.0625rem;margin:0 0 .4em}.home .msgrid p{margin:0;font-size:1rem}
@media(max-width:1040px){.home .msgrid,.home .msgrid.four{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.home .msgrid,.home .msgrid.four{grid-template-columns:1fr}}
/* blog cards */
.home .pcard{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm)}
.home .pcard:hover{background:#fff;box-shadow:0 4px 12px rgb(15 23 42/.08)}
.home .pcard time{font-family:Inter,system-ui,sans-serif;color:var(--muted)}
.home .pcard .kind{color:#92400e;font-weight:600}
.home .pcard .more{color:var(--primary);font-weight:600}
.home .pcard p{opacity:1;color:var(--muted)}
/* credentials */
.home .edu li{margin:6px 0}
/* forms (P6.1, P6.3) */
.home .fgrid label,.home .nl-form label{font-family:Inter,system-ui,sans-serif;text-transform:none;letter-spacing:0;font-size:.9375rem;font-weight:600;color:var(--hi)}
.home .req{font-weight:400;color:var(--muted)}
.home input,.home select,.home textarea,.home .nl-form input{background:#fff;color:var(--hi);border:1px solid var(--border-strong);border-radius:8px;min-height:48px;font-size:1rem}
.home .err,.home .nl-form input.err{border:2px solid #b91c1c!important;outline:0}
.home #formstatus.bad,.home .nl-status.bad{color:#b91c1c}.home #formstatus.ok,.home .nl-status.ok{color:#166534}
.home .privacy,.home .nlbox .fine{color:var(--muted)}
.home .nlbox{background:#fff;border:1px solid var(--line);border-left:4px solid var(--primary);border-radius:12px}
.home .nlbox a,.home .nlbox .fine a{color:var(--primary)}
.home .thanks{background:#fff;border:1px solid var(--line);border-left:4px solid #166534;border-radius:12px}
/* closing email box */
.home .cta{background:var(--panel)}
.home .cta .btn{font-size:1.0625rem;overflow-wrap:anywhere}
/* footer (P4.4): navy, 4 columns */
.home footer{background:var(--navy);color:#e2e8f0;text-align:left;font-family:Inter,system-ui,sans-serif;font-size:.9375rem;padding:48px 0 32px;border-top:0}
.fgrid4{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px}
.home footer a{color:#e2e8f0;text-decoration:none;display:inline-block;padding:10px 0}
.home footer a:hover{color:#fff;text-decoration:underline}
.fh{font-size:1rem;color:#fff!important;margin:0 0 4px;letter-spacing:0}
.fcol ul{list-style:none;margin:0;padding:0}
.fname{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.04em;color:#fff;margin:0 0 8px}.fname span{color:#ff8a80}.fname img{height:32px;width:auto}
.fbrand p{margin:0 0 4px}
@media(max-width:900px){.fgrid4{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.fgrid4{grid-template-columns:1fr;gap:16px}}
/* phone (P7) */
.sticky-cta{display:none}
@media(max-width:600px){
 .home section{padding:48px 0}
 .home .wrap{padding:0 16px}
 .offer,.mcard,.herocard,.home .card,.home .nlbox,.home .pfhome .deliv,.incl{padding:24px}
 .home .bio{grid-template-columns:1fr}
 body.home{padding-bottom:80px}
 .sticky-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:20;background:#fff;border-top:1px solid var(--line);padding:12px 16px calc(12px + env(safe-area-inset-bottom));box-shadow:0 -4px 12px rgb(15 23 42/.08)}
 .sticky-cta[hidden]{display:none}
 html{scroll-padding-bottom:96px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.home .btn{transition:none}}
/* fixes after first preview pass: form reflow at 320/390, 44px link targets */
.home .fgrid>*,.home .nlrow>*{min-width:0}
.home .fgrid input,.home .fgrid select,.home .fgrid textarea,.home .nl-form input{width:100%;max-width:100%}
@media(max-width:600px){.home .fgrid{grid-template-columns:minmax(0,1fr)}}
.home .brand{min-height:44px}
.home footer a,.home .svclinks a,.seeall a,.home .pfhome .deliv li a,.home .hero .msline a{min-height:44px;display:inline-flex;align-items:center;padding:0}
.home .pgrid{grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
@media(max-width:360px){.home .brand{font-size:.9rem;letter-spacing:.02em;gap:6px}.home .nav .menu{padding:8px 10px}}
.home .ticks li{position:static;padding:0;margin:0}.home .ticks li:before{content:none}
.home .hero .msline{font-family:Inter,system-ui,sans-serif;border:0;padding:0;max-width:62ch}
.home .hero .ctas .btn{width:auto;flex:0 1 auto}
@media(max-width:600px){.home .hero .ctas .btn{flex:1 1 100%;width:100%}}
.home .msgrid h3:before,.home .msgrid h4:before{content:none}
.home footer .fh{font-size:1rem;font-weight:700;margin:0 0 4px}
.offer .badge,.herocard .badge{align-self:flex-start}
.home .svclinks{color:var(--muted);font-size:1rem}
.home .pcard .kind{font-family:Inter,system-ui,sans-serif;font-size:.8125rem;text-transform:none;letter-spacing:0;border-radius:999px;color:#92400e;border-color:var(--accent)}
.home .fgrid label .lt{display:block}
@media(max-width:900px){.home .nav nav a.navbtn{min-height:48px}}

/* Content Writer v2 (Oct 17): "Who we help" line under the trust strip; per-field form errors */
.home .whohelp{margin:16px auto 0;font-size:1rem;color:var(--muted)}.home .whohelp b{color:var(--hi)}
.home .ferr{display:block;font-size:.9375rem;font-weight:600;color:#b91c1c;margin-top:2px}.home .ferr[hidden]{display:none!important}
/* dark theme (body.hc): error text must stay readable on the dark form background (#f87171, 6.5:1+) */
body.hc .home .ferr,body.hc .ferr{color:var(--hc-danger)}