.button { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:0 20px; border:1px solid var(--brand); border-radius:999px; background:var(--brand); color:var(--white); font-weight:800; text-decoration:none; box-shadow:0 8px 20px rgba(85,117,108,.10); transition:transform .18s ease,background .18s ease,box-shadow .18s ease; }
.button:hover { transform:translateY(-2px); background:var(--brand-2); box-shadow:0 10px 24px rgba(85,117,108,.13); }
.button-small { min-height:40px; padding:0 15px; font-size:.86rem; }
.text-link,.download-link { color:var(--brand); font-weight:800; text-decoration:none; }
.text-link:hover,.download-link:hover { text-decoration:underline; text-underline-offset:4px; }
.hero { padding:54px 0 72px; overflow:hidden; background:radial-gradient(circle at 88% 12%,#edf4f1 0,rgba(237,244,241,0) 38%),linear-gradient(180deg,#fffdf9,#fbfdfc); }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(310px,.7fr); gap:52px; align-items:start; }
.button-row { display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:30px; }
.microcopy { margin:14px 0 0; color:var(--muted); font-size:.86rem; }
.tracking-paths { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:20px; }
.tracking-path { display:flex; min-width:0; flex-direction:column; padding:18px 20px; border:1px solid #b9c9c3; border-radius:20px; background:rgba(255,254,250,.96); box-shadow:0 10px 28px rgba(53,72,66,.045); }
.tracking-path-icon { display:block; margin-bottom:10px; font-size:1.65rem; line-height:1; }
.tracking-path .card-kicker { margin-bottom:8px; }
.tracking-path h2 { margin-bottom:10px; font-size:1.35rem; letter-spacing:-.025em; }
.tracking-path > p:not(.card-kicker) { margin-bottom:14px; color:var(--muted); font-size:.92rem; }
.tracking-path .button { width:100%; min-height:46px; margin-top:auto; padding-inline:14px; text-align:center; font-size:.86rem; }
.button-secondary { border-color:#82978f; background:#eef5f2; color:#294f45; box-shadow:none; }
.button-secondary:hover { border-color:#55756c; background:#dfece7; color:#18362e; box-shadow:none; }
.species-shortcuts { display:flex; gap:8px; flex-wrap:wrap; margin:18px 0 0; color:var(--muted); font-size:.86rem; }
.species-shortcuts a { color:var(--brand); font-weight:750; text-underline-offset:3px; }
.hero-card { padding:32px; border:1px solid var(--line); border-radius:var(--radius); background:rgba(255,254,250,.94); box-shadow:var(--shadow); }
.hero-card h2 { margin-bottom:22px; font-size:2rem; }
.check-list { display:grid; gap:13px; margin:0; padding:0; list-style:none; }
.check-list li { position:relative; padding-left:30px; }
.check-list li::before { content:"✓"; position:absolute; left:0; top:1px; display:grid; place-items:center; width:21px; height:21px; border-radius:50%; background:#edf4f1; color:var(--brand); font-weight:900; }
.heart-strip { border-block:1px solid #eadfd5; background:#fbf2eb; }
.heart-strip .shell { display:flex; justify-content:center; gap:10px 18px; flex-wrap:wrap; padding-block:17px; text-align:center; }
.heart-strip strong { color:#6d5c50; }
.heart-strip span { color:#7b6a5f; }
.family-finder { background:linear-gradient(180deg,#fffefa,#fffdf9); }
.finder-intro { max-width:760px; margin-bottom:34px; }
.finder-intro h2 { margin-bottom:12px; }
.finder-intro > p:last-child { max-width:650px; color:var(--muted); font-size:1.05rem; }
.family-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.family-choice { min-height:166px; padding:22px; border:1px solid #82978f; border-radius:20px; background:var(--white); color:var(--ink); text-align:left; font:inherit; cursor:pointer; box-shadow:0 8px 24px rgba(53,72,66,.035); transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease; }
.family-choice:hover { transform:translateY(-3px); border-color:#6f887f; box-shadow:0 14px 30px rgba(53,72,66,.065); }
.family-choice:focus-visible { outline-color:var(--focus); outline-offset:3px; }
.family-choice.is-selected { border-color:#6f887f; background:#f1f7f4; box-shadow:0 0 0 2px rgba(85,117,108,.08),0 14px 30px rgba(53,72,66,.055); }
.family-choice > strong,.family-choice > span { display:block; }
.family-choice > strong { margin:12px 0 5px; font-size:1.08rem; }
.family-choice > span:last-child { color:var(--muted); font-size:.82rem; line-height:1.4; }
.family-icon { min-height:34px; font-size:1.8rem; line-height:1; }
.family-choice-all { background:linear-gradient(145deg,#fbf3eb,#fffefa); }
.personalize-wrap { margin-top:30px; }
.personalize-card { display:grid; grid-template-columns:132px minmax(0,1fr); gap:26px; align-items:center; padding:24px; border:1px solid #c7b9ad; border-radius:22px; background:linear-gradient(145deg,#fdf7f3,#fffefa 52%,#f4f8f6); box-shadow:0 12px 32px rgba(53,72,66,.045); }
.personalize-card[hidden] { display:none; }
.photo-preview { position:relative; width:116px; aspect-ratio:1; overflow:hidden; border:1px dashed #9d897a; border-radius:28px; background:#fffefa; box-shadow:inset 0 0 0 6px rgba(255,255,255,.52); }
.photo-preview.is-ready { border-style:solid; border-color:#6f887f; box-shadow:0 0 0 4px rgba(85,117,108,.08); }
.photo-preview img { width:100%; height:100%; object-fit:cover; display:block; }
.photo-preview img[hidden] { display:none; }
.photo-placeholder { position:absolute; inset:0; display:grid; place-items:center; color:#806f64; font-size:2rem; }
.photo-placeholder small { display:block; margin-top:5px; font-size:.62rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.personalize-copy .eyebrow { margin-bottom:6px; }
.personalize-copy h3 { margin-bottom:6px; font-size:1.35rem; }
.personalize-copy > p { max-width:680px; margin-bottom:16px; color:var(--muted); }
.personalize-fields { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; align-items:start; }
.personalize-fields > label,.personalize-fields > .photo-field { align-self:start; }
.personalize-fields > label { grid-template-rows:auto 46px; }
.personalize-fields > .photo-field { grid-template-rows:auto 46px auto; }
.personalize-fields > label > input[type="text"],.personalize-fields > .photo-field > input[type="file"] { margin:0; align-self:start; }
.personalize-fields label { display:grid; gap:6px; color:var(--ink); font-size:.78rem; font-weight:800; }
.personalize-fields input[type="text"] { width:100%; min-height:46px; padding:0 13px; border:1px solid #82978f; border-radius:12px; background:var(--white); color:var(--ink); font:inherit; }
.photo-field { display:grid; gap:6px; min-width:0; }
.photo-field > label { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.photo-field > label span { color:var(--muted); font-size:.7rem; font-weight:700; text-transform:lowercase; }
.photo-field input[type="file"] { width:100%; min-height:46px; padding:5px 7px; border:1px solid #82978f; border-radius:12px; background:var(--white); color:var(--ink); font:inherit; font-size:.82rem; cursor:pointer; }
.photo-field input[type="file"]::file-selector-button { min-height:34px; margin-right:10px; padding:0 12px; border:1px solid #82978f; border-radius:9px; background:#eef5f2; color:#415f56; font:inherit; font-weight:800; cursor:pointer; }
.photo-field input[type="file"]::file-selector-button:hover { background:#e5f0eb; }
.photo-field input[type="file"]:focus-visible { border-color:#6f887f; }
.photo-help { margin:0; max-width:420px; color:var(--muted); font-size:.72rem; line-height:1.4; }
.photo-remove { min-height:44px; padding:0 13px; border:0; background:transparent; color:#8a6d63; font:inherit; font-size:.8rem; font-weight:800; cursor:pointer; }
.photo-remove:hover { text-decoration:underline; text-underline-offset:3px; }
.personalize-privacy { margin:10px 0 0 !important; font-size:.78rem; }
.personalize-privacy[data-state="ready"] { color:#48665c; font-weight:700; }
.personalize-privacy[data-state="error"] { color:#8a4f45; font-weight:700; }
.continue-link { display:inline-flex; margin-top:12px; min-height:28px; align-items:center; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:36px; margin-bottom:30px; }
.section-heading h2 { margin-bottom:0; }
.section-heading > p { max-width:470px; margin-bottom:4px; color:var(--muted); }
.library-tools { display:flex; gap:18px; justify-content:space-between; align-items:center; padding:16px; margin-bottom:10px; border:1px solid #a6b8b1; border-radius:18px; background:rgba(255,254,250,.82); }
.filter-group { display:flex; gap:8px; flex-wrap:wrap; }
.filter-chip { min-height:40px; padding:0 13px; border:1px solid #82978f; border-radius:999px; background:var(--white); color:var(--ink); font:inherit; font-size:.82rem; font-weight:800; cursor:pointer; }
.filter-chip span { margin-left:5px; color:var(--muted); font-size:.7rem; }
.filter-chip:hover,.filter-chip.is-active { border-color:#6f887f; background:#eaf2ef; color:#415f56; }
.filter-chip.is-active span { color:#587168; }
.search-box { flex:0 1 400px; min-width:260px; }
.search-box input { width:100%; min-height:44px; padding:0 15px; border:1px solid #82978f; border-radius:12px; background:var(--white); color:var(--ink); font:inherit; }
.search-box input:focus-visible { border-color:#6f887f; }
.result-count { margin:14px 0 22px; color:var(--muted); font-size:.86rem; }
.tracker-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.tracker-card { display:flex; min-height:228px; flex-direction:column; padding:24px; border:1px solid #b9c9c3; border-radius:20px; background:var(--white); box-shadow:0 10px 28px rgba(53,72,66,.04); transition:transform .16s ease,box-shadow .16s ease; content-visibility:auto; contain-intrinsic-size:228px; }
.tracker-card:hover { transform:translateY(-3px); box-shadow:0 16px 34px rgba(53,72,66,.065); }
.tracker-card[hidden] { display:none; }
.tracker-card h3 { margin-top:20px; font-size:1.24rem; }
.tracker-card p { color:var(--muted); }
.tracker-card .download-link { margin-top:auto; padding-top:14px; border-top:1px solid var(--line); }
.species-badge { align-self:flex-start; padding:6px 10px; border-radius:999px; font-size:.7rem; font-weight:850; letter-spacing:.02em; text-transform:none; }
.species-badge.cat { background:#e5f0eb; color:#4f6f64; }
.species-badge.dog { background:#f7eee2; color:#80664b; }
.species-badge.small_mammal { background:#f5ebf2; color:#7f6177; }
.species-badge.bird { background:#edf3f7; color:#5b7182; }
.species-badge.reptile { background:#eff3e7; color:#60704f; }
.species-badge.horse { background:#f2ebe5; color:#735e4d; }
.species-badge.aquatic { background:#e9f3f5; color:#52737b; }
.species-badge.universal { background:#efedf6; color:#68637e; }
.no-results { padding:44px; border:1px dashed #82978f; border-radius:18px; text-align:center; background:var(--white); }
.no-results p { margin:8px 0 0; color:var(--muted); }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.steps article { padding:28px; border:1px solid #b9c9c3; border-radius:18px; background:var(--white); }
.steps article > span { display:grid; place-items:center; width:36px; height:36px; margin-bottom:34px; border-radius:10px; background:#e8f0ed; color:#4f6f65; font-weight:900; }
.steps p,.principles p { color:var(--muted); }
.resource-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:80px; align-items:start; }
.principles { display:grid; gap:14px; padding:28px; border-left:4px solid #82978f; background:var(--white); }
.principles p { margin:0; }
.library-note { background:#faf6f0; }
.safety { display:grid; grid-template-columns:.8fr 1.2fr; gap:60px; align-items:center; margin-bottom:28px; padding:32px; border:1px solid #b7a18f; border-radius:var(--radius); background:#fbf3e9; }
.safety h2 { margin-bottom:0; font-size:clamp(1.5rem,3vw,2.4rem); }
.safety p:last-child { margin:0; color:#746457; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:1100px) { .tracker-grid { grid-template-columns:repeat(2,1fr); } .library-tools { align-items:stretch; flex-direction:column; } .search-box { flex-basis:auto; min-width:0; } .family-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:980px) { .hero-grid,.resource-grid,.safety { grid-template-columns:1fr; gap:34px; } .family-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) { .section-heading { align-items:stretch; flex-direction:column; } .steps { grid-template-columns:1fr; } .hero { padding-top:64px; } .family-choice { min-height:148px; } .personalize-card { grid-template-columns:100px 1fr; gap:18px; } .photo-preview { width:92px; border-radius:22px; } }
@media (max-width:620px) { .tracker-grid,.family-grid,.tracking-paths { grid-template-columns:1fr; } .tracking-path { display:flex; } .tracking-path .button { width:100%; } .button-row { align-items:flex-start; flex-direction:column; } .button { width:100%; } .nav-wrap .button-small { width:auto; } .hero-card,.tracker-card,.steps article { padding:22px; } .family-choice { min-height:132px; } .safety { margin-bottom:0; } .personalize-card { grid-template-columns:1fr; } .photo-preview { width:104px; } .personalize-fields { align-items:stretch; flex-direction:column; } .personalize-fields input[type="text"],.photo-field { width:100%; min-width:0; } }

@media (max-width:720px){.personalize-fields{grid-template-columns:1fr}.personalize-fields input[type="text"],.photo-field{width:100%}}

/* Personalization alignment: one intentional profile form */
.personalize-card{align-items:start}.personalize-copy{min-width:0}.personalize-fields{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto;gap:10px 14px;align-items:start}.personalize-fields>.name-field,.personalize-fields>.photo-field{display:grid;grid-template-rows:20px 46px auto;gap:6px;min-width:0;margin:0;align-self:start}.personalize-fields>.name-field{font-weight:800;font-size:.82rem}.personalize-fields>.name-field>input[type="text"],.personalize-fields>.photo-field>input[type="file"]{box-sizing:border-box;width:100%;height:46px;min-height:46px;margin:0;align-self:start}.personalize-fields>.photo-field>label{height:20px;margin:0;display:flex;align-items:center;justify-content:space-between;line-height:20px}.personalize-fields>.name-field::after{content:"";display:block;min-height:1rem}.photo-help{min-height:1rem}.photo-remove{grid-column:2;justify-self:start;margin-top:0}.personalize-privacy{clear:both;margin-top:12px!important}.continue-link{margin-top:14px;min-height:44px;padding:0 16px;border:1px solid #82978f;border-radius:12px;background:#eef5f2;text-decoration:none;font-weight:850}.continue-link:hover,.continue-link:focus-visible{background:#dbe8e3;color:#18362e;border-color:#18362e}@media(max-width:720px){.personalize-fields{grid-template-columns:1fr}.personalize-fields>.name-field,.personalize-fields>.photo-field{grid-template-rows:20px 46px auto}.photo-remove{grid-column:1}.personalize-card{align-items:start}}

/* Structural personalization grid — labels, controls and help share rows */
.personalize-fields{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 14px;align-items:start}.personalize-field{display:grid;grid-template-rows:22px 46px minmax(30px,auto);gap:6px;min-width:0;margin:0}.personalize-field>label{display:flex!important;height:22px!important;margin:0!important;align-items:center!important;justify-content:flex-start;font-size:.82rem;font-weight:800;line-height:22px}.personalize-field.photo-field>label{justify-content:space-between}.personalize-field>input[type="text"],.personalize-field>input[type="file"]{box-sizing:border-box;width:100%!important;height:46px!important;min-height:46px!important;margin:0!important;align-self:start}.personalize-field .photo-help,.personalize-field .field-help{box-sizing:border-box;display:block;min-height:30px;margin:0;font-size:.72rem;line-height:1.4}.photo-remove{grid-column:2}.continue-link{display:inline-flex!important;align-items:center;justify-content:center;min-height:44px!important;padding:0 16px!important;border:1px solid #82978f!important;border-radius:12px!important;background:#eef5f2!important;color:#294f45!important;text-decoration:none!important;font-weight:850!important}.continue-link:hover,.continue-link:focus-visible{background:#dbe8e3!important;color:#18362e!important;border-color:#18362e!important}@media(max-width:720px){.personalize-fields{grid-template-columns:1fr}.photo-remove{grid-column:1}}

.phone-handoff { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:22px 0 16px; padding:14px 16px; border:1px solid var(--line); border-radius:16px; background:#fff; }
.phone-handoff-copy { display:flex; flex-direction:column; gap:3px; }
.phone-handoff-copy strong { color:var(--ink); }
.phone-handoff-copy span { color:var(--muted); font-size:.88rem; }
.phone-handoff > a { display:block; flex:0 0 92px; width:92px; height:92px; }
.phone-handoff-qr { display:block; width:92px; height:92px; border-radius:8px; background:#fff; }
.footer-trust { display:flex; justify-content:center; gap:10px; padding-top:22px; text-align:center; font-size:.88rem; }
.footer-trust span { color:inherit; }
@media (max-width:620px) { .phone-handoff { display:none; } .footer-trust { align-items:center; flex-direction:column; gap:3px; } }

/* Trackers-first homepage: hero download call to action, library toolbar, compact tracker actions */
.button-coffee { gap:6px; border-color:#9d897a; background:#fbf2eb; color:#5b4a3f; box-shadow:none; white-space:nowrap; }
.button-coffee:hover { border-color:#7d6a5c; background:#f6e7db; color:#3f3129; box-shadow:none; }
.hero-actions { margin-top:26px; gap:12px; }
.hero-actions .button { gap:8px; min-height:54px; padding-inline:24px; font-size:1rem; }
.hero-primary { box-shadow:0 12px 26px rgba(85,117,108,.22); }
.hero-trust { display:flex; flex-wrap:wrap; gap:8px 18px; margin:18px 0 0; padding:0; list-style:none; color:var(--ink); font-size:.9rem; font-weight:750; }
.hero-trust li { position:relative; padding-left:24px; }
.hero-trust li::before { content:"✓"; position:absolute; left:0; top:1px; display:grid; place-items:center; width:18px; height:18px; border-radius:50%; background:#e5f0eb; color:var(--brand); font-size:.7rem; font-weight:900; }
.species-shortcuts > span:first-child { color:var(--muted); font-weight:750; }
.library-toolbar { margin-bottom:0; }
/* Paired tracker actions, used by the homepage library and the species hubs. */
.variant-actions { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin-top:auto; padding-top:12px; }
.variant-actions .download-link { display:inline-flex; align-items:center; gap:6px; min-height:40px; margin-top:0; padding:0 14px; border:1px solid var(--brand); border-radius:999px; background:var(--brand); color:var(--white); font-size:.82rem; }
.variant-actions .download-link:hover,.variant-actions .download-link:focus-visible { background:var(--brand-2); border-color:var(--brand-2); color:var(--white); text-decoration:none; }
.variant-actions .accessible-link { display:inline-flex; align-items:center; min-height:40px; margin-top:0; color:var(--brand); font-size:.82rem; font-weight:800; text-decoration:underline; text-underline-offset:3px; }
.ways-section h2 { margin-bottom:26px; }
.ways-section .tracking-paths { margin-top:0; }
.ways-section .tracking-path h3 { margin-bottom:10px; font-size:1.25rem; }
@media (max-width:760px) {
  .hero-trust { font-size:.86rem; }
  .filter-group { flex-wrap:nowrap; overflow-x:auto; margin:0 -4px; padding:2px 4px 6px; scrollbar-width:thin; }
  .filter-chip { flex:0 0 auto; }
  .family-grid-primary,.family-grid-more { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px; }
  .family-choice,.family-more { min-height:0 !important; padding:16px; }
  .family-choice > strong,.family-more > strong { margin:8px 0 3px; font-size:1rem; }
}
@media (max-width:620px) {
  .hero-actions { flex-direction:column; align-items:stretch; }
  .hero-actions .button { width:100%; }
  .nav-wrap .button-coffee { min-height:38px; padding:0 12px; font-size:.8rem; }
}