:root { color-scheme: light; --ink:#1d1b18; --muted:#645d52; --line:#ded5c8; --paper:#fffaf2; --cream:#f3eadc; --green:#2d6d60; --coral:#d8613c; --gold:#b78a42; }
* { box-sizing: border-box; }
body { margin:0; font-family:"Nunito","Avenir Next Rounded","Trebuchet MS",ui-sans-serif,system-ui,sans-serif; background:radial-gradient(circle at 18% 10%,rgba(255,250,242,.96),transparent 28%),linear-gradient(135deg,#f3eadc 0%,#e2f0e8 48%,#f7dcca 100%); color:var(--ink); }
a { color:inherit; }
header { border-bottom:1px solid rgba(29,27,24,.08); background:rgba(243,234,220,.86); backdrop-filter:blur(14px); }
.wrap { width:min(1080px,calc(100% - 32px)); margin:0 auto; }
nav { min-height:66px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:flex; align-items:center; gap:9px; color:var(--ink); font-weight:850; text-decoration:none; }
.brand:before { content:""; width:24px; height:24px; border-radius:8px; background:url("/assets/petpal-icon.png?v=20260727-2") center/cover no-repeat; box-shadow:0 4px 12px rgba(29,27,24,.12); }
.navlinks { display:flex; gap:8px; flex-wrap:wrap; }
.navlinks a { min-height:36px; display:inline-flex; align-items:center; border-radius:999px; padding:0 12px; color:var(--muted); text-decoration:none; font-size:14px; font-weight:800; }
.navlinks a:hover { background:rgba(255,255,255,.62); color:var(--ink); }
main { padding:56px 0 74px; }
.hero { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr); gap:28px; align-items:center; }
.kicker { display:inline-flex; min-height:32px; align-items:center; border:1px solid rgba(45,109,96,.18); background:rgba(45,109,96,.1); color:var(--green); border-radius:999px; padding:0 12px; font-size:12px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
h1 { margin:18px 0 14px; font-size:clamp(38px,5vw,64px); line-height:1.02; letter-spacing:0; }
h2 { margin:44px 0 12px; font-size:clamp(26px,3vw,38px); line-height:1.08; }
h3 { margin:24px 0 8px; font-size:20px; }
p, li { color:var(--muted); line-height:1.75; font-size:16px; }
.lead { font-size:19px; }
.panel, article { border:1px solid rgba(29,27,24,.1); border-radius:8px; background:rgba(255,255,255,.78); box-shadow:0 18px 50px rgba(29,27,24,.06); }
.panel { padding:28px; }
article { margin-top:24px; padding:30px; }
.visual { border:1px solid rgba(29,27,24,.1); border-radius:26px; background:#201d19; padding:16px; box-shadow:0 28px 80px rgba(29,27,24,.2); }
.visual img { display:block; width:100%; border-radius:18px; background:#fffaf2; }
.toc { display:grid; gap:10px; margin:24px 0; }
.toc a { display:flex; min-height:42px; align-items:center; border:1px solid rgba(29,27,24,.1); border-radius:8px; background:#fffaf2; color:var(--ink); padding:0 14px; text-decoration:none; font-weight:800; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.card { border:1px solid rgba(29,27,24,.1); border-radius:8px; background:#fffaf2; padding:16px; }
.compare { width:100%; border-collapse:collapse; margin:20px 0; overflow:hidden; border-radius:8px; background:#fffaf2; }
.compare th, .compare td { border:1px solid rgba(29,27,24,.1); padding:13px; text-align:left; vertical-align:top; color:var(--muted); line-height:1.55; }
.compare th { color:var(--ink); background:rgba(45,109,96,.1); }
.cta { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.btn { min-height:46px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:0 16px; text-decoration:none; font-weight:850; border:1px solid rgba(29,27,24,.12); }
.primary { background:var(--green); color:white; border-color:var(--green); }
.ghost { background:rgba(255,255,255,.7); color:var(--ink); }
.faq details { border:1px solid rgba(29,27,24,.1); border-radius:8px; background:#fffaf2; padding:14px 16px; margin-top:10px; }
.faq summary { cursor:pointer; font-weight:850; }
footer { padding:28px 0 48px; color:var(--muted); }
@media(max-width:840px){ main{padding-top:36px}.hero,.grid{grid-template-columns:1fr}.panel,article{padding:22px}.cta{flex-direction:column}.btn{width:100%}.navlinks{justify-content:flex-end} }