/* ============================================================
   BEASTSHIELD — Bold Pet-Insurance Landing Template
   Self-contained: system fonts, CSS-only graphics, no CDNs,
   no frameworks, no tracking.

   NOTE ON FONTS: This template uses a heavy system font stack
   by design (Helvetica/Arial Black aesthetic) so it ships with
   ZERO external font requests. To bundle a self-hosted display
   woff2 instead, add an @font-face block here and point
   --font-display at it.

   Sections: 1.Tokens 2.Base 3.A11y 4.Layout 5.Header
   6.Buttons 7.Hero+eye 8.Marquee 9.Timeline 10.Promise
   11.Plans 12.Testimonials 13.FAQ 14.CTA 15.Forms 16.Footer
   17.404 18.Responsive 19.Motion
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
  --ink:#0a0a0a;
  --paper:#ffffff;
  --bone:#f3f1ea;
  --hot:#ff0055;
  --hot-ink:#d10046;
  --muted:#6b6b6b;
  --line:#0a0a0a;
  --maxw:1180px;
  --font-display:"Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:"Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease:cubic-bezier(0.2,0.8,0.2,1);
}

/* ---------- 2. BASE ---------- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  font-size:1.05rem; line-height:1.55;
  overflow-x:hidden; min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
.display { font-family:var(--font-display); font-weight:900; letter-spacing:-0.03em; line-height:0.9; text-transform:uppercase; }
h1,h2,h3 { font-family:var(--font-display); font-weight:900; letter-spacing:-0.03em; line-height:0.9; text-transform:uppercase; }
strong { font-weight:900; }

/* ---------- 3. A11Y ---------- */
.skip-link { position:absolute; left:8px; top:-52px; background:var(--hot); color:#fff; font-weight:900; padding:10px 18px; z-index:300; transition:top .2s ease; }
.skip-link:focus { top:8px; }
:focus-visible { outline:4px solid var(--hot); outline-offset:3px; }
.vh { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- 4. LAYOUT ---------- */
.wrap { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.section { padding:110px 0; }
.kicker { display:inline-block; font-weight:900; font-size:.74rem; text-transform:uppercase; letter-spacing:.34em; color:var(--hot-ink); margin-bottom:20px; }
.section-h { font-size:clamp(2.6rem,7vw,5rem); }
.lead { font-size:1.15rem; color:var(--muted); max-width:60ch; font-weight:500; }

/* ---------- 5. HEADER (full-width bar, centered logo, split nav) ---------- */
.site-header { position:sticky; top:0; z-index:100; background:var(--paper); border-bottom:3px solid var(--ink); }
.nav { display:flex; align-items:center; justify-content:space-between; padding:14px 24px; max-width:var(--maxw); margin:0 auto; }
.brand { font-family:var(--font-display); font-weight:900; font-size:1.5rem; letter-spacing:-0.02em; text-transform:uppercase; display:flex; align-items:center; gap:10px; }
.brand .pip { width:16px; height:16px; border-radius:50%; background:var(--hot); display:inline-block; }
.nav-links { display:flex; align-items:center; gap:30px; }
.nav-links a { font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.12em; }
.nav-links a:hover { color:var(--hot-ink); }
.nav-toggle { display:none; background:var(--ink); color:var(--paper); border:none; width:46px; height:42px; font-size:1.2rem; cursor:pointer; }

/* ---------- 6. BUTTONS ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--font-display); font-weight:900; text-transform:uppercase; letter-spacing:0.02em; font-size:1.05rem; padding:18px 36px; border:3px solid var(--ink); cursor:pointer; transition:transform .15s var(--ease), background .15s, color .15s; }
.btn-hot { background:var(--hot); color:#fff; border-color:var(--hot); }
.btn-hot:hover { transform:translateY(-3px); background:var(--hot-ink); }
.btn-ink { background:var(--ink); color:var(--paper); }
.btn-ink:hover { transform:translateY(-3px); }
.btn-out { background:transparent; color:var(--ink); }
.btn-out:hover { background:var(--ink); color:var(--paper); }

/* ---------- 7. HERO (centered statement + CSS eye emblem) ---------- */
.hero { background:var(--ink); color:var(--paper); text-align:center; padding:90px 0 0; position:relative; overflow:hidden; }
.hero .wrap { position:relative; z-index:2; }
.void-eye { width:120px; height:120px; border-radius:50%; background:var(--paper); margin:0 auto 36px; position:relative; box-shadow:0 0 0 10px rgba(255,255,255,0.06); }
.void-eye::after { content:""; position:absolute; width:58px; height:58px; background:var(--ink); border-radius:50%; top:31px; left:31px; transition:transform .2s var(--ease); }
.void-eye::before { content:""; position:absolute; inset:0; border-radius:50%; box-shadow:inset 0 0 0 3px var(--hot); opacity:0; transition:opacity .3s; }
.void-eye.blink::after { transform:scaleY(0.08); }
.hero h1 { font-size:clamp(3.2rem,12vw,8rem); }
.hero h1 .hot { color:var(--hot); }
.hero .sub { color:#cfcfcf; font-size:1.25rem; max-width:40ch; margin:26px auto 0; font-weight:500; }
.hero .sub .strike { text-decoration:line-through; text-decoration-color:var(--hot); }
.hero-actions { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin:40px 0 0; }
.hero-foot { margin-top:70px; border-top:1px solid rgba(255,255,255,0.14); padding:22px 0 80px; display:flex; gap:36px; justify-content:center; flex-wrap:wrap; font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:.14em; color:#bdbdbd; }
.hero-foot b { color:var(--hot); }

/* ---------- 8. MARQUEE ---------- */
.marquee { background:var(--hot); color:#fff; border-block:3px solid var(--ink); overflow:hidden; white-space:nowrap; }
.marquee-track { display:inline-flex; gap:48px; padding:14px 0; font-family:var(--font-display); font-weight:900; text-transform:uppercase; font-size:1.1rem; letter-spacing:.04em; animation:scroll-x 26s linear infinite; }
.marquee-track span { display:inline-flex; align-items:center; gap:48px; }
.marquee-track span::after { content:"\2726"; }
@keyframes scroll-x { from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ---------- 9. TIMELINE (horizontal numbered rail) ---------- */
.rail { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:3px solid var(--ink); }
.rail-step { padding:36px 28px; border-right:3px solid var(--ink); position:relative; }
.rail-step:last-child { border-right:0; }
.rail-step .n { font-family:var(--font-display); font-weight:900; font-size:3.4rem; color:var(--hot); line-height:1; }
.rail-step h3 { font-size:1.4rem; margin:10px 0 8px; }
.rail-step p { color:var(--muted); font-size:.95rem; font-weight:500; }

/* ---------- 10. PROMISE (big editorial statement, off-center) ---------- */
.promise { background:var(--bone); }
.promise .wrap { display:grid; grid-template-columns:1.4fr 1fr; gap:60px; align-items:end; }
.promise .big { font-size:clamp(2.4rem,6vw,4.4rem); }
.promise .big em { color:var(--hot-ink); font-style:normal; }
.promise .side p { color:var(--muted); margin-bottom:18px; font-weight:500; }
.promise .side .stat { font-family:var(--font-display); font-weight:900; font-size:3rem; color:var(--ink); line-height:1; }
.promise .side .stat span { color:var(--hot); }

/* ---------- 11. PLANS (stacked horizontal rows, not card grid) ---------- */
.plans { border-top:3px solid var(--ink); }
.plan-row { display:grid; grid-template-columns:0.7fr 1.6fr 0.7fr; gap:30px; align-items:center; padding:38px 0; border-bottom:3px solid var(--ink); transition:background .2s; }
.plan-row:hover { background:var(--bone); }
.plan-row .pname { font-family:var(--font-display); font-weight:900; font-size:2rem; text-transform:uppercase; }
.plan-row .pname .tag { display:block; font-family:var(--font-body); font-weight:700; font-size:.7rem; letter-spacing:.2em; color:var(--hot-ink); margin-top:6px; }
.plan-row .pfeatures { display:flex; flex-wrap:wrap; gap:10px 22px; }
.plan-row .pfeatures span { font-weight:700; font-size:.9rem; }
.plan-row .pfeatures span::before { content:"\2714  "; color:var(--hot); }
.plan-row .pside { text-align:right; }
.plan-row .price { font-family:var(--font-display); font-weight:900; font-size:2.4rem; line-height:.9; }
.plan-row .price small { display:block; font-family:var(--font-body); font-weight:700; font-size:.7rem; color:var(--muted); letter-spacing:.12em; margin-top:4px; }
.plan-row.featured { background:var(--ink); color:var(--paper); }
.plan-row.featured:hover { background:var(--ink); }
.plan-row.featured .pfeatures span::before { color:var(--hot); }

/* ---------- 12. TESTIMONIALS (offset quote cards) ---------- */
.voices { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.voice { border:3px solid var(--ink); padding:28px; background:var(--paper); }
.voice:nth-child(2) { transform:translateY(24px); background:var(--bone); }
.voice blockquote { font-weight:700; font-size:1.05rem; margin-bottom:18px; }
.voice .who { display:flex; align-items:center; gap:12px; }
.voice .pawprint { width:38px; height:38px; border-radius:50%; background:var(--hot); flex:none; }
.voice .name { font-weight:900; font-size:.9rem; text-transform:uppercase; }
.voice .pet { font-size:.78rem; color:var(--muted); font-weight:600; }

/* ---------- 13. FAQ (numbered, full-width rows) ---------- */
.faq { border-top:3px solid var(--ink); }
.faq-item { border-bottom:3px solid var(--ink); }
.faq-q { width:100%; text-align:left; background:none; border:none; font-family:var(--font-display); font-weight:900; text-transform:uppercase; font-size:1.3rem; letter-spacing:-0.01em; padding:26px 0; cursor:pointer; display:flex; gap:20px; align-items:baseline; color:var(--ink); }
.faq-q .qn { color:var(--hot); flex:none; font-size:1rem; }
.faq-q .sign { margin-left:auto; color:var(--hot); font-size:1.6rem; transition:transform .2s; }
.faq-q[aria-expanded="true"] .sign { transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
.faq-a div { padding:0 0 26px 44px; color:var(--muted); font-weight:500; max-width:70ch; }

/* ---------- 14. CTA (full-bleed hot) ---------- */
.cta { background:var(--hot); color:#fff; text-align:center; padding:90px 24px; }
.cta h2 { font-size:clamp(2.6rem,8vw,5.5rem); }
.cta p { font-weight:600; max-width:44ch; margin:18px auto 30px; }

/* ---------- 15. FORMS / subpages ---------- */
.page-head { background:var(--ink); color:var(--paper); padding:80px 0; }
.page-head h1 { font-size:clamp(2.8rem,9vw,5.5rem); }
.page-head .hot { color:var(--hot); }
.prose { max-width:760px; }
.prose h2 { font-size:1.9rem; margin:38px 0 12px; }
.prose p, .prose li { color:#333; margin-bottom:14px; font-weight:500; }
.prose ul { padding-left:22px; list-style:square; }
.contact-grid { display:grid; grid-template-columns:1.1fr 0.9fr; gap:50px; align-items:start; }
.field { margin-bottom:20px; }
.field label { display:block; font-weight:900; text-transform:uppercase; font-size:.74rem; letter-spacing:.16em; margin-bottom:8px; }
.field input, .field textarea, .field select { width:100%; background:var(--paper); border:3px solid var(--ink); padding:14px 16px; font-family:var(--font-body); font-size:1rem; font-weight:600; }
.field input:focus, .field textarea:focus, .field select:focus { outline:none; box-shadow:6px 6px 0 var(--hot); }
.form-status { margin-top:14px; font-weight:900; text-transform:uppercase; background:var(--ink); color:var(--paper); display:inline-block; padding:8px 14px; }
.form-status:empty { display:none; }
.form-note { color:var(--muted); font-size:.86rem; margin-top:10px; font-weight:500; }
.info { border:3px solid var(--ink); padding:28px; }
.info li { padding:16px 0; border-bottom:2px solid var(--bone); font-weight:600; }
.info .k { display:block; font-weight:900; text-transform:uppercase; font-size:.7rem; letter-spacing:.16em; color:var(--hot-ink); margin-bottom:4px; }

/* estimator */
.estimator { border:3px solid var(--ink); padding:28px; background:var(--bone); }
.estimator .out { font-family:var(--font-display); font-weight:900; font-size:2.6rem; margin-top:14px; }
.estimator .out span { color:var(--hot-ink); }
.estimator .disc { font-size:.78rem; color:var(--muted); margin-top:8px; font-weight:500; }

/* ---------- 16. FOOTER ---------- */
.site-footer { background:var(--ink); color:var(--paper); padding:70px 0 30px; }
.footer-top { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:36px; margin-bottom:46px; }
.footer-brand .brand { font-size:1.9rem; color:var(--paper); }
.footer-brand p { color:#bdbdbd; font-weight:500; margin-top:12px; max-width:34ch; }
.footer-col h4 { font-weight:900; text-transform:uppercase; font-size:.74rem; letter-spacing:.16em; color:var(--hot); margin-bottom:14px; }
.footer-col a { display:block; color:#cfcfcf; font-weight:600; padding:6px 0; }
.footer-col a:hover { color:var(--paper); }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.14); padding-top:22px; text-align:center; font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.18em; color:#9a9a9a; }

/* ---------- 17. 404 ---------- */
.error-page { background:var(--ink); color:var(--paper); min-height:78vh; display:grid; place-items:center; text-align:center; padding:80px 24px; }
.error-page .code { font-family:var(--font-display); font-weight:900; font-size:clamp(6rem,24vw,16rem); line-height:.8; color:var(--hot); }

/* ---------- 18. RESPONSIVE ---------- */
@media (max-width:900px){
  .rail { grid-template-columns:1fr 1fr; }
  .rail-step:nth-child(2){ border-right:0; }
  .rail-step:nth-child(1),.rail-step:nth-child(2){ border-bottom:3px solid var(--ink); }
  .promise .wrap { grid-template-columns:1fr; gap:34px; }
  .plan-row { grid-template-columns:1fr; gap:16px; text-align:left; }
  .plan-row .pside { text-align:left; }
  .voices { grid-template-columns:1fr; }
  .voice:nth-child(2){ transform:none; }
  .contact-grid { grid-template-columns:1fr; }
  .footer-top { grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  .nav-links { position:fixed; inset:60px 0 auto 0; flex-direction:column; gap:0; background:var(--paper); border-bottom:3px solid var(--ink); padding:6px 0; transform:translateY(-130%); transition:transform .3s var(--ease); }
  .nav-links.open { transform:translateY(0); }
  .nav-links a { padding:16px 24px; width:100%; }
  .nav-toggle { display:inline-flex; align-items:center; justify-content:center; }
  .section { padding:66px 0; }
  .rail { grid-template-columns:1fr; }
  .rail-step { border-right:0; border-bottom:3px solid var(--ink); }
  .rail-step:last-child { border-bottom:0; }
  .footer-top { grid-template-columns:1fr; }
}

/* ---------- 19. MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}


/* ============================================================
   21. MOBILE REFINEMENTS (overflow + rhythm, baked in)
   ============================================================ */
html, body { overflow-x:clip; }
.search-bar input, .field input, .field textarea, .field select { min-width:0; }

@media (max-width:900px){
  .pdp { grid-template-columns:1fr; padding:44px 20px; gap:36px; }
  .pdp-media { position:static; }
  .product-grid { grid-template-columns:1fr 1fr; gap:18px; }
  .cart-line { grid-template-columns:84px 1fr; }
  .cart-line .th { width:84px; }
  .cart-line .qcol, .cart-line .lp { grid-column:2; }
  .cart-wrap, .acct-wrap, .article-body { padding:44px 20px 60px; }
  .page-head { padding:52px 0; }
  .hero { padding:60px 0 0; }
  .hero-foot { margin-top:44px; padding-bottom:52px; gap:20px; }
}
@media (max-width:600px){
  .product-grid { grid-template-columns:1fr; }
  .page-head h1 { font-size:clamp(2.2rem,10vw,3.4rem); }
  .search-bar { padding:0 20px; }
  .search-bar button { padding:0 18px; }
  .pdp-media .main-img { box-shadow:8px 8px 0 var(--hot); }
  .pdp-info h1 { font-size:clamp(2rem,9vw,2.8rem); }
  .cart-tot { box-shadow:6px 6px 0 var(--hot); }
  .btn { font-size:.95rem; padding:15px 28px; }
  .promise .big { font-size:clamp(2rem,9vw,2.8rem); }
}