/* PawVitals colorway: deep teal + warm cream with a coral accent. Loaded after site.css. */
:root{
  --bg:#FAF6EE; --bg2:#EFF4F1; --card:#FFFFFF; --ink:#12272B; --ink2:#1A3A40; --muted:#4A5B5E; --line:rgba(18,39,43,.12);
  --accent:#17636C; --accent-d:#104B52; --btn:#17636C; --btn-d:#104B52; --btn-ink:#FFFFFF;
  --gold:#C2563F; --soft:#CFE6E3; --frame:#10262A; --shadow:0 30px 60px -28px rgba(16,75,82,.42);
  --app:#1F7A85; --app-d:#104B52; --app-grad:linear-gradient(165deg,#1F7A85 0%,#17636C 50%,#104B52 100%);
  --onapp:#FFFFFF; --onapp-m:#D5ECEB; --sun:#FFD9A8;
}
.nav{background:rgba(16,75,82,.95);border-bottom:1px solid rgba(255,255,255,.14)}
.brand{color:#fff}.nav-links a{color:var(--onapp-m)}.nav-links a:hover{color:#fff}
.nav .btn.sm{background:#fff;color:var(--app-d)!important;box-shadow:none}.nav .btn.sm:hover{background:#EAF6F5}
.hero{background:var(--app-grad);color:var(--onapp)}
.hero::before{background:radial-gradient(circle at 40% 40%,rgba(255,255,255,.16),transparent 66%)}
.hero h1{color:#fff}.hero .eyebrow{color:var(--sun)}.hero .lede,.hero .micro{color:var(--onapp-m)}
.hero .btn{background:#fff;color:var(--app-d)!important;box-shadow:0 12px 30px -14px rgba(3,40,45,.6)}.hero .btn:hover{background:#EAF6F5}
.hero .phone{box-shadow:0 34px 70px -24px rgba(3,40,45,.65)}
.trust{background:var(--app-d);border-color:rgba(255,255,255,.14)}.trust ul{color:var(--onapp-m)}.trust li::before{background:var(--sun)}
.final{background:var(--app-grad);color:var(--onapp)}.final h2{color:#fff}.final .lede{color:var(--onapp-m)}
.final .btn{background:#fff;color:var(--app-d)!important;box-shadow:0 12px 30px -14px rgba(3,40,45,.6)}.final .btn:hover{background:#EAF6F5}
.final .icon{box-shadow:0 22px 50px -20px rgba(3,40,45,.7)}
footer{background:#0C3A40;border-top:1px solid rgba(255,255,255,.12);color:var(--onapp-m)}
footer strong{color:#fff!important}footer a{color:#fff}footer a:hover{color:var(--sun)}
.pillar .n,.step::before{color:var(--accent)}
.plan.hi{border-color:var(--accent);box-shadow:0 30px 60px -34px var(--accent)}

/* hero device cluster: Duo outer display + two iPhones */
.cluster{position:relative;width:100%;max-width:560px;margin-inline:auto;aspect-ratio:1/1.05}
.dev{position:absolute}
.dev.duo{right:0;top:0;width:44%;background:var(--frame);padding:2.4%;border-radius:8% / 5.6%;box-shadow:0 34px 70px -24px rgba(3,40,45,.7);z-index:1}
.dev.duo img{border-radius:6% / 4.2%;width:100%;height:auto;display:block}
.dev.iph{width:44%}
.dev.iph.a{left:6%;top:6%;transform:rotate(-4deg);z-index:2;box-shadow:0 34px 70px -24px rgba(3,40,45,.7)}
.dev.iph.b{left:34%;bottom:0;transform:rotate(3deg);z-index:3;box-shadow:0 34px 70px -24px rgba(3,40,45,.7)}
@media(max-width:900px){.cluster{max-width:480px}}

/* lifestyle (UGC-style) cards */
.ugc{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px}
.ugc figure{margin:0;border-radius:22px;overflow:hidden;box-shadow:var(--shadow);background:var(--card)}
.ugc img{width:100%;height:auto;display:block}
@media(max-width:900px){.ugc{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.ugc{grid-template-columns:1fr}}
.cap{font-size:.84rem;color:var(--muted);margin-top:16px;max-width:70ch}
.notice{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:14px;padding:16px 20px;margin:0 auto 8px;max-width:820px;font-size:.95rem;color:var(--ink2)}
.paper{border-radius:10px;box-shadow:var(--shadow);background:#fff;width:100%;height:auto}
.plans.two{grid-template-columns:repeat(2,1fr);max-width:820px;margin-inline:auto}
@media(max-width:700px){.plans.two{grid-template-columns:1fr}}

.pair .ugcfig{margin:0;width:min(50%,300px);border-radius:22px;overflow:hidden;box-shadow:var(--shadow);background:var(--card);flex:none}.pair .ugcfig img{width:100%;height:auto;display:block}.pair .ugcfig+.phone{margin-top:34px}
@media(max-width:480px){.pair .ugcfig{width:52%}}

.showcase{margin:34px auto 0;max-width:1100px;border-radius:22px;overflow:hidden;box-shadow:var(--shadow);background:var(--card)}.showcase img{width:100%;height:auto;display:block}.showcase.card{max-width:760px}
@media(max-width:760px){.showcase:not(.card){overflow-x:auto;-webkit-overflow-scrolling:touch}.showcase:not(.card) img{width:auto;max-width:none;min-width:900px}}