/* PET-A marketing site — plush design system (mirrors the app: teal + warm,
   Fredoka display / Inter body, mint→cream ground, soft-3D depth). Light-only
   by intent — matches the app's committed appearance. */

:root {
  --teal: #16BFAE;
  --teal-dark: #0C8577;
  --teal-deep: #0A6B61;
  --warm: #FFB24C;
  --warm-deep: #C67D0A;
  --coral: #FF8B6B;
  --ink: #223A37;         /* deep teal-charcoal, not black */
  --muted: #5F7C78;
  --faint: #93aca7;
  --mint: #F1FBF8;
  --cream: #F8F4EC;
  --surface: #ffffff;
  --line: #E4EFEC;
  --shadow: 18px 40px -24px rgba(12,120,110,.28);
  --shadow-sm: 0 4px 14px -6px rgba(12,120,110,.22);
  --r: 22px;
  --maxw: 1120px;
  --font-d: "Fredoka", ui-rounded, system-ui, sans-serif;
  --font-b: "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-b);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1100px 620px at 88% -8%, rgba(255,178,76,.20), transparent 60%),
    radial-gradient(900px 560px at -6% 4%, rgba(22,191,174,.18), transparent 58%),
    radial-gradient(1000px 700px at 50% 118%, rgba(255,139,107,.14), transparent 60%),
    linear-gradient(178deg, var(--mint), var(--cream));
  background-attachment: fixed;
}

/* subtle paw-print texture, tiled */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='94' height='94' viewBox='0 0 94 94'%3E%3Cg fill='%230C8577' fill-opacity='0.035'%3E%3Cellipse cx='47' cy='56' rx='13' ry='11'/%3E%3Ccircle cx='31' cy='39' r='5'/%3E%3Ccircle cx='47' cy='34' r='5.5'/%3E%3Ccircle cx='63' cy='39' r='5'/%3E%3Ccircle cx='72' cy='51' r='4'/%3E%3C/g%3E%3C/svg%3E");
}

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---- typography ---- */
h1, h2, h3 { font-family: var(--font-d); color: var(--ink); line-height: 1.1; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 5.4vw, 3.7rem); font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); font-weight: 700; }
h3 { font-size: 1.18rem; font-weight: 600; }
p { margin: 0; }
a { color: var(--teal-deep); text-decoration: none; }
.eyebrow { font-family: var(--font-d); font-weight: 600; font-size: .82rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--teal-dark); }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-d); font-weight: 600;
  font-size: 1.02rem; padding: 14px 26px; border-radius: 999px; border: 0; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease; }
.btn-primary { color: #fff; background: radial-gradient(120% 130% at 30% 20%, #2FD8C8, #12A899);
  box-shadow: 0 12px 26px -8px rgba(18,168,153,.6), inset 0 -3px 0 rgba(8,122,112,.55); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -10px rgba(18,168,153,.7), inset 0 -3px 0 rgba(8,122,112,.55); }
.btn-ghost { color: var(--teal-deep); background: #fff; box-shadow: var(--shadow-sm); }
.btn-ghost:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* ---- header ---- */
header.nav { position: sticky; top: 0; z-index: 20;
  backdrop-filter: saturate(1.2) blur(10px);
  background: linear-gradient(180deg, rgba(247,252,250,.86), rgba(247,252,250,.5));
  border-bottom: 1px solid rgba(12,120,110,.08); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-d); font-weight: 700;
  font-size: 1.22rem; color: var(--ink); }
.brand .logo { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
  font-size: 18px; background: radial-gradient(120% 120% at 30% 20%, #fff, #E8F5F2);
  box-shadow: 0 5px 12px -4px rgba(12,120,110,.4); }
.nav nav { display: flex; align-items: center; gap: 26px; }
.nav nav a { color: var(--muted); font-weight: 500; font-size: .96rem; }
.nav nav a:hover { color: var(--ink); }
.nav .btn { padding: 10px 20px; font-size: .95rem; }
@media (max-width: 720px) { .nav nav a.navlink { display: none; } }

/* ---- generic section ---- */
section { padding: 74px 0; }
.center { text-align: center; }
.lead { color: var(--muted); font-size: 1.12rem; max-width: 40ch; }

/* ---- card ---- */
.card { background: linear-gradient(180deg, #fff, #FAFEFD); border-radius: var(--r);
  box-shadow: var(--shadow); padding: 26px; }

/* ---- footer ---- */
footer { padding: 46px 0 60px; border-top: 1px solid rgba(12,120,110,.1); margin-top: 30px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 18px 40px; align-items: center; justify-content: space-between; }
footer .flinks { display: flex; flex-wrap: wrap; gap: 8px 22px; }
footer a { color: var(--muted); font-size: .93rem; }
footer a:hover { color: var(--ink); }
footer .fine { color: var(--faint); font-size: .85rem; width: 100%; }

/* ---- legal document layout ---- */
.doc { max-width: 720px; margin: 0 auto; padding: 40px 0 20px; }
.doc h1 { font-size: clamp(2rem, 4vw, 2.7rem); margin-bottom: 6px; }
.doc .updated { color: var(--muted); font-size: .95rem; margin-bottom: 6px; }
.doc h2 { font-size: 1.35rem; margin: 38px 0 10px; }
.doc h3 { font-size: 1.05rem; margin: 22px 0 6px; color: var(--teal-deep); }
.doc p, .doc li { color: #33514D; font-size: 1.02rem; }
.doc p { margin: 10px 0; }
.doc ul { margin: 10px 0; padding-left: 22px; }
.doc li { margin: 6px 0; }
.doc a { text-decoration: underline; text-underline-offset: 2px; }
.callout { background: linear-gradient(180deg, #FFF6E7, #FFEFD6); border: 1px solid #FBE0B0;
  border-radius: 16px; padding: 16px 18px; margin: 18px 0; color: #7a4e08; font-size: .98rem; }
.callout strong { color: #6a4406; }
.toc { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px 18px; margin: 18px 0 26px; }
.toc a { display: inline-block; margin: 3px 14px 3px 0; font-size: .92rem; }

:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; border-radius: 6px; }