/* AmeriVet benefits — splash page
   Brand tokens match the OE page build.
   Fonts are self-hosted (OFL licensed) — no external requests. */

@font-face{
  font-family:'Signika';
  src:url('assets/fonts/Signika-Bold.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Mukta Mahee';
  src:url('assets/fonts/MuktaMahee-Regular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Mukta Mahee';
  src:url('assets/fonts/MuktaMahee-SemiBold.woff2') format('woff2');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

:root{
  --navy:#244A83;
  --navy-deep:#1B3862;
  --cream:#FEF9F1;
  --green:#61937C;
  --yellow:#E2B15B;
  --red:#C04B42;
  --wrap:620px;
}

*,*::before,*::after{box-sizing:border-box}

html,body{height:100%}

body{
  margin:0;
  font-family:'Mukta Mahee',system-ui,-apple-system,sans-serif;
  color:var(--cream);
  background:var(--navy-deep);
  -webkit-font-smoothing:antialiased;
}

/* ---------- layout ---------- */

.splash{
  position:relative;
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:3rem 20px 4rem;
  overflow:hidden;
  background:var(--navy);
}

/* paw pattern — whisper-quiet, scaled down from the full-size tile */
.splash::before{
  content:'';
  position:absolute;
  inset:0;
  background:url('assets/pattern/paws-white.png') repeat;
  background-size:420px auto;
  opacity:.045;
  pointer-events:none;
}
@media (max-width:620px){
  .splash::before{background-size:280px auto}
}

/* soft lift behind the lockup */
.splash::after{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(105% 78% at 50% 12%, rgba(97,147,124,.26) 0%, rgba(36,74,131,0) 64%);
  pointer-events:none;
}

.splash__inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:var(--wrap);
  text-align:center;
}

/* ---------- brand ---------- */

.logo{
  width:min(320px,74vw);
  height:auto;
  display:block;
  margin:0 auto 2.1rem;
}

.rule{
  display:flex;
  justify-content:center;
  gap:6px;
  margin:0 auto 2.4rem;
}
.rule__seg{
  display:block;
  height:5px;
  width:44px;
  border-radius:999px;
}
.rule__seg--green{background:var(--green)}
.rule__seg--yellow{background:var(--yellow)}
.rule__seg--red{background:var(--red)}

/* ---------- type ---------- */

h1{
  font-family:'Signika',Georgia,serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.012em;
  line-height:1.12;
  font-size:clamp(2rem,6.4vw,3.35rem);
  margin:0 0 1.35rem;
  color:#fff;
}

.lede{
  font-size:clamp(1.02rem,2.3vw,1.17rem);
  line-height:1.62;
  margin:0 auto 2.5rem;
  max-width:33rem;
  color:rgba(254,249,241,.9);
}

.help{
  font-size:.95rem;
  line-height:1.6;
  margin:0;
  color:rgba(254,249,241,.72);
}
.help a{
  color:#fff;
  font-weight:600;
  text-decoration:none;
  border-bottom:2px solid var(--green);
  padding-bottom:1px;
}
.help a:hover,
.help a:focus-visible{
  border-bottom-color:var(--yellow);
}
.help__br{display:none}
@media (min-width:680px){
  .help__br{display:inline}
}

/* ---------- pet ---------- */

.pet{
  position:absolute;
  right:clamp(1.5rem,5vw,4.5rem);
  bottom:0;
  width:clamp(210px,20vw,280px);
  height:auto;
  z-index:3;
  pointer-events:none;
  transform:rotate(-3deg);
  animation:bob 6.4s ease-in-out infinite alternate;
}

@keyframes bob{
  from{transform:rotate(-3deg) translateY(0)}
  to{transform:rotate(-4.4deg) translateY(-12px)}
}

@media (max-width:860px){
  .pet{
    width:170px;
    right:1rem;
    opacity:.6;
  }
}

@media (max-width:520px){
  .pet{display:none}
  .splash{padding-top:2.5rem}
}

@media (prefers-reduced-motion:reduce){
  .pet{animation:none}
}