/* PetPill website — one stylesheet for every page.
   The App Store screenshots' system made sweet: PetPill blue, white rounded type,
   lime stickers and the 3D pets, on soft pastel slabs that look good enough to eat.
   The app's own rows, notifications and widgets are drawn in HTML in its own type. */

/* Nunito, self-hosted (SIL OFL, see fonts/OFL.txt): the rounded face for every browser
   that has no ui-rounded. Safari on Apple devices uses SF Pro Rounded instead. */
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("../fonts/nunito-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("../fonts/nunito-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("../fonts/nunito-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

:root {
  --blue: #456af7;
  --blue-hi: #6b8bff;
  --blue-deep: #3354e6;
  --blue-edge: #2a45c4;
  --blue-night: #17236b;
  --blue-text: #2d4bd6;
  --lime: #e0ec00;
  --lime-hi: #f0f86a;
  --lime-edge: #b9c400;
  --ink: #141722;
  --text: #2a2e3b;
  --muted: #5b6172;
  --faint: #8a90a0;
  --card: #ffffff;
  --tile: #eef0f4;
  --green: #2fb45a;
  --green-ink: #1c8a40;
  --orange: #ef8a00;
  --red: #e5483b;
  --teal: #20a8c4;
  --brown: #9a6a3f;

  /* The candy jar: one pastel per slab, the pets' own warm tones beside the blue */
  --sky: #e7eeff;
  --peach: #ffeedf;
  --lilac: #efeaff;
  --pink: #ffe7ef;
  --cream: #f8fbd4;
  --mint: #e2f7ee;

  --rounded: ui-rounded, "Nunito", "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1160px;
  --gutter: 24px;
  --edge: clamp(8px, 1.4vw, 18px);          /* a slab's distance from the window */
  --slab: clamp(30px, 3.6vw, 52px);         /* a slab's corners */
  --radius-lg: 34px;
  --radius: 28px;
  --gloss: inset 0 1.5px 0 rgba(255, 255, 255, 0.9);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 26px 50px -26px rgba(30, 50, 150, 0.42), 0 3px 8px -2px rgba(30, 50, 150, 0.08);
  --shadow-soft: 0 18px 40px -22px rgba(30, 50, 150, 0.38), 0 2px 6px -2px rgba(30, 50, 150, 0.06);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  font-family: var(--rounded);
  font-size: 17.5px;
  line-height: 1.55;
  color: var(--text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 10px; }
.on-blue :focus-visible, .closing :focus-visible, .site-footer :focus-visible { outline-color: var(--lime); }
h1, h2, h3, h4 { font-family: var(--rounded); color: var(--ink); line-height: 1.08; margin: 0; letter-spacing: -0.015em; font-weight: 800; }
p { margin: 0; }
strong, b { font-weight: 800; }
.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; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Header: a floating glass bar ---------- */
.site-header { position: sticky; top: 0; z-index: 50; padding: 10px var(--edge) 0; pointer-events: none; }
.header-inner.wrap {
  pointer-events: auto; display: flex; align-items: center; gap: 22px; height: 62px;
  max-width: 1240px; padding: 0 10px 0 14px; border-radius: 22px;
  background: rgba(255, 255, 255, 0.84);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 0 0 1px rgba(30, 50, 150, 0.07), 0 14px 34px -20px rgba(30, 50, 150, 0.45);
}
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--rounded); font-weight: 900; font-size: 22px; color: var(--ink); letter-spacing: -0.02em; }
.brand:hover { text-decoration: none; }
.brand img { width: 36px; height: 36px; border-radius: 10px; box-shadow: 0 0 0 1px rgba(20, 23, 34, 0.08), 0 4px 10px -4px rgba(30, 50, 150, 0.5); transition: transform .4s var(--spring); }
.brand:hover img { transform: rotate(-10deg) scale(1.08); }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { color: var(--text); font-size: 15.5px; font-weight: 700; padding: 8px 13px; border-radius: 12px; transition: background .2s, color .2s; }
.nav a:hover { background: var(--sky); color: var(--blue-text); text-decoration: none; }
.nav a[aria-current="page"] { background: var(--sky); color: var(--blue-text); }
.header-badge { transition: transform .3s var(--spring); }
.header-badge:hover { transform: translateY(-2px) scale(1.03); }
.header-badge img { height: 40px; width: auto; }
.menu { display: none; margin-left: auto; position: relative; }
.menu summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--sky); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary span, .menu summary span::before, .menu summary span::after { display: block; width: 18px; height: 2.5px; background: var(--ink); border-radius: 2px; position: relative; content: ""; transition: transform .25s var(--spring), background .2s; }
.menu summary span::before { position: absolute; top: -6px; }
.menu summary span::after { position: absolute; top: 6px; }
.menu[open] summary span { background: transparent; }
.menu[open] summary span::before { transform: translateY(6px) rotate(45deg); }
.menu[open] summary span::after { transform: translateY(-6px) rotate(-45deg); }
.menu-panel, .lang-panel {
  position: absolute; right: 0; top: 54px; background: var(--card); border-radius: 22px; padding: 8px;
  box-shadow: 0 0 0 1px rgba(30, 50, 150, 0.06), 0 30px 60px -24px rgba(30, 50, 150, 0.5);
  display: grid; gap: 2px; z-index: 60; transform-origin: top right; animation: pop-menu .28s var(--spring);
}
.menu-panel { width: min(300px, calc(100vw - 28px)); }
.menu-panel a { padding: 12px 14px; border-radius: 14px; color: var(--ink); font-weight: 800; font-size: 17px; }
.menu-panel a:hover, .menu-panel a[aria-current="page"] { background: var(--sky); text-decoration: none; }
.menu-panel .menu-badge { margin-top: 6px; padding: 8px 14px; }
.menu-panel .menu-badge:hover { background: none; }
.menu-panel .menu-badge img { height: 44px; width: auto; }
@keyframes pop-menu { from { opacity: 0; transform: scale(.9) translateY(-6px); } to { opacity: 1; transform: none; } }

/* Language switcher */
.lang { position: relative; }
.lang summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px;
  border-radius: 14px; font-size: 14.5px; font-weight: 800; color: var(--text); white-space: nowrap; transition: background .2s;
}
.lang summary::-webkit-details-marker { display: none; }
.lang summary::after { content: ""; width: 7px; height: 7px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: 2px; transition: transform .25s var(--spring); }
.lang[open] summary::after { transform: rotate(225deg) translate(-2px, 0); }
.lang summary:hover, .lang[open] summary { background: var(--sky); }
.lang-globe { font-size: 16px; }
.lang-panel { width: 230px; }
.lang-panel a { padding: 10px 14px; border-radius: 12px; color: var(--ink); font-size: 15.5px; font-weight: 600; }
.lang-panel a:hover { background: var(--sky); text-decoration: none; }
.lang-panel a[aria-current] { background: var(--cream); font-weight: 800; }
.lang-panel a[aria-current]::after { content: " ✓"; color: var(--green-ink); }

@media (max-width: 1040px) {
  .nav, .header-badge { display: none; }
  .menu { display: block; margin-left: 4px; }
  .lang { margin-left: auto; }
}
.lang-code { display: none; }
@media (max-width: 520px) {
  .site-header { padding-top: 8px; }
  .header-inner.wrap { height: 58px; padding: 0 7px 0 12px; gap: 10px; border-radius: 19px; }
  .brand { font-size: 20px; }
  .brand img { width: 32px; height: 32px; }
  .lang summary { padding: 0 9px; font-size: 13.5px; }
  .lang-name { display: none; }
  .lang-code { display: inline; }
}

/* Type for each script: Nunito carries Latin and Cyrillic; CJK keeps the system's own faces */
:lang(ja) { --rounded: ui-rounded, "Nunito", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif; --sans: -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif; }
:lang(ko) { --rounded: ui-rounded, "Nunito", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; --sans: -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }
:lang(zh-Hans) { --rounded: ui-rounded, "Nunito", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; --sans: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; }
:lang(ja) .display, :lang(ko) .display, :lang(zh-Hans) .display { letter-spacing: 0; line-height: 1.12; }
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3, :lang(zh-Hans) h1, :lang(zh-Hans) h2, :lang(zh-Hans) h3 { line-break: strict; }
:lang(ko) h1, :lang(ko) h2, :lang(ko) h3 { word-break: keep-all; }
.display, .h2 { overflow-wrap: break-word; text-wrap: balance; }
/* Long words only break on narrow phones, and never inside the boxed word */
@media (max-width: 520px) { .display, .h2 { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4; } }
.display .box { -webkit-hyphens: none; hyphens: none; }

/* ---------- Shared type ---------- */
/* Section labels are the screenshots' lime stickers, slapped on at an angle */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--rounded); font-weight: 900; font-size: 15px; line-height: 1;
  padding: 9px 14px 10px; border-radius: 12px;
  background: linear-gradient(180deg, var(--lime-hi), var(--lime) 45%);
  color: var(--ink); transform: rotate(-3deg);
  box-shadow: inset 0 -2.5px 0 rgba(90, 100, 0, 0.18), 0 8px 16px -8px rgba(80, 90, 0, 0.55);
}
.split-copy:nth-child(even) .eyebrow, .section-head .eyebrow { transform: rotate(2.5deg); }
.eyebrow .pro-chip { background: var(--ink) !important; color: #fff !important; }
.display { font-weight: 900; font-size: clamp(46px, 7.4vw, 88px); line-height: 1; letter-spacing: -0.025em; }
.display .box {
  display: inline-block; background: #fff; color: var(--blue);
  padding: 0.04em 0.2em 0.1em; border-radius: 0.22em; margin-left: -0.08em;
  transform: rotate(-2deg);
  box-shadow: inset 0 -0.06em 0 rgba(30, 50, 150, 0.1), 0 0.07em 0 rgba(20, 30, 120, 0.25), 0 0.3em 0.5em -0.2em rgba(10, 20, 80, 0.5);
}
.display .line { display: block; color: #fff; margin-top: 0.12em; text-shadow: 0 3px 0 rgba(20, 30, 120, 0.18); }
.h2 { font-weight: 900; font-size: clamp(36px, 4.8vw, 58px); letter-spacing: -0.025em; }
/* The key words get a lime highlighter, like the screenshots' key word on its box */
.h2 .accent {
  color: var(--blue-deep);
  background: linear-gradient(180deg, transparent 60%, rgba(224, 236, 0, 0.85) 60%, rgba(224, 236, 0, 0.85) 92%, transparent 92%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 0.06em; margin: 0 -0.06em;
}
.lead { font-size: clamp(18px, 1.6vw, 21px); color: var(--muted); line-height: 1.5; font-weight: 500; }
.on-blue .lead { color: rgba(255, 255, 255, 0.92); }
.small { font-size: 15px; color: var(--muted); }
.on-blue .small { color: rgba(255, 255, 255, 0.85); }
.more {
  display: inline-flex; align-items: center; gap: 10px; font-weight: 900; font-size: 17px;
  color: var(--blue-text);
}
.more::after {
  content: "→"; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--lime); color: var(--ink); font-size: 15px; line-height: 1;
  box-shadow: inset 0 -2px 0 rgba(90, 100, 0, 0.2); transition: transform .35s var(--spring);
}
.more:hover { text-decoration: none; }
.more:hover::after { transform: translateX(4px) rotate(-8deg) scale(1.08); }

/* ---------- Slabs: every section is a rounded piece of candy ---------- */
.hero, .section, .closing, .site-footer { margin: var(--edge) var(--edge) 0; border-radius: var(--slab); }
main { display: block; }

/* ---------- Blue hero ---------- */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(900px 520px at 12% -10%, rgba(255, 255, 255, 0.26), transparent 62%),
    radial-gradient(700px 500px at 105% 115%, rgba(23, 35, 107, 0.45), transparent 60%),
    linear-gradient(165deg, var(--blue-hi) 0%, var(--blue) 42%, var(--blue-deep) 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.28), inset 0 -3px 0 rgba(20, 30, 120, 0.25);
  padding: 80px 0 0;
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.hero-copy { padding-bottom: 80px; }
.hero-copy .eyebrow { margin-bottom: 30px; }
.hero-copy .lead { margin: 28px 0 34px; max-width: 32em; }
.cta-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.badge-link { display: inline-block; border-radius: 12px; transition: transform .35s var(--spring), filter .3s; filter: drop-shadow(0 10px 14px rgba(10, 20, 80, 0.35)); }
.badge-link:hover { transform: translateY(-3px) scale(1.04) rotate(-1deg); }
.badge-link:active { transform: translateY(1px) scale(.98); }
.cta-row .badge-link img { height: 56px; width: auto; }
.cta-note { font-size: 15.5px; font-weight: 700; color: rgba(255, 255, 255, 0.92); }
.hero-visual { position: relative; align-self: end; min-height: 580px; }
.hero.page-hero { padding-top: 76px; }
.page-hero .hero-copy { padding-bottom: 72px; }
.page-hero .display { font-size: clamp(42px, 6.2vw, 74px); }
.page-hero .hero-visual { min-height: 480px; }

@media (max-width: 900px) {
  .hero { padding-top: 48px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .hero-copy, .page-hero .hero-copy { padding-bottom: 8px; }
  .hero-visual, .page-hero .hero-visual { min-height: 0; }
}

/* Paws peeking down from the top edge, as on the App Store "Care Together" frame */
.paw { position: absolute; top: -34px; width: 86px; pointer-events: none; z-index: 1; filter: drop-shadow(0 10px 12px rgba(10, 20, 80, 0.3)); }
.paw.left { left: 43%; transform: rotate(4deg); }
.paw.right { left: 49%; transform: rotate(-6deg); }
@media (max-width: 900px) { .paw, .paw.left, .paw.right { width: 58px; top: -24px; left: auto; right: 9%; } }

/* ---------- The app's own record row ---------- */
.rows { display: grid; gap: 22px; position: relative; z-index: 2; }
.row {
  position: relative; display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 14px;
  background: var(--card); color: var(--text); border-radius: 26px; padding: 16px 18px;
  box-shadow: var(--shadow-card); font-family: var(--sans);
}
.row .avatar {
  width: 52px; height: 52px; border-radius: 50%; background: var(--tile);
  display: grid; place-items: center; font-size: 27px; line-height: 1; position: relative;
}
.row .avatar .who {
  position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%;
  font: 700 9.5px/22px var(--sans); text-align: center; color: #fff; background: #e05a8a;
  box-shadow: 0 0 0 2px #fff; letter-spacing: 0.02em;
}
.row .meta { min-width: 0; }
.row .when { font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.row .when.late { color: var(--orange); }
.row .title { font-family: var(--rounded); font-weight: 800; font-size: 19px; color: var(--ink); line-height: 1.25; }
.row .sub { font-size: 14.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .note { font-size: 14px; color: var(--muted); font-style: normal; }
.row .note::before { content: "“ "; font-weight: 700; color: var(--faint); }
.row .rail { text-align: right; font-weight: 600; font-size: 15px; line-height: 1.25; margin-right: 6px; }
.row .rail .t { color: var(--green-ink); }
.row .rail .v { color: var(--ink); font-size: 17px; }
.row .rail .d { color: var(--muted); font-size: 13px; }
.row .end { display: flex; align-items: center; gap: 4px; }
.mark { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.mark svg { width: 20px; height: 20px; }
.mark.ring { border: 2.5px solid #c9ccd6; background: #fff; }
.mark.done { background: var(--green); color: #fff; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12), inset 0 1.5px 0 rgba(255, 255, 255, 0.35); }
.mark.skip { background: var(--orange); color: #fff; }
.mark.pee { background: var(--teal); color: #fff; }
.mark.poo { background: var(--brown); color: #fff; }
.mark.plus { background: rgba(69, 106, 247, 0.14); color: var(--blue); }
.mark.emoji { background: var(--tile); font-size: 18px; }
.sticker {
  position: absolute; z-index: 3; top: -18px; right: -14px;
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(180deg, var(--lime-hi), var(--lime) 45%); color: var(--ink);
  font-family: var(--rounded); font-weight: 900; font-size: 16px;
  padding: 8px 14px; border-radius: 14px; transform: rotate(-6deg);
  box-shadow: inset 0 -2.5px 0 rgba(90, 100, 0, 0.18), 0 8px 18px -8px rgba(30, 40, 0, 0.5);
  white-space: nowrap;
}
.sticker.left { right: auto; left: -14px; transform: rotate(-5deg); }
.sticker.tilt { transform: rotate(5deg); }
.sticker.left.tilt { transform: rotate(-7deg); }
@media (max-width: 560px) {
  .row { grid-template-columns: 44px 1fr auto; padding: 13px 14px; gap: 12px; border-radius: 22px; }
  .row .avatar { width: 44px; height: 44px; font-size: 23px; }
  .row .title { font-size: 17px; }
  .row .sub { font-size: 13.5px; }
  .mark { width: 34px; height: 34px; }
  .sticker { font-size: 14px; padding: 6px 11px; top: -16px; right: -6px; }
  .sticker.left { left: -6px; }
}

/* ---------- Home hero visual ---------- */
.hero-stack { position: relative; padding: 28px 0 270px; max-width: 500px; margin-left: auto; }
.hero-stack .rows { gap: 26px; }
.hero-stack .row:nth-child(1) { transform: rotate(-1.2deg); }
.hero-stack .row:nth-child(2) { margin-left: 36px; transform: rotate(1deg); }
.hero-stack .row:nth-child(3) { margin-right: 28px; transform: rotate(-0.6deg); }
.hero-pet { position: absolute; z-index: 4; pointer-events: none; filter: drop-shadow(0 22px 26px rgba(10, 20, 80, 0.32)); }
.hero-stack .pet-puppy { width: 228px; right: -34px; bottom: -6px; }
.hero-stack .pet-kitten { width: 158px; left: 22px; bottom: -2px; }
@media (max-width: 900px) {
  .hero-stack { margin: 22px auto 0; padding-bottom: 210px; }
  .hero-stack .pet-puppy { width: 176px; right: 0; }
  .hero-stack .pet-kitten { width: 122px; left: 6px; }
}
@media (max-width: 560px) {
  .hero-stack .row:nth-child(2) { margin-left: 18px; }
  .hero-stack .row:nth-child(3) { margin-right: 12px; }
}

/* The first row ticks itself off once, on load */
.tick .mark.ring, .tick .mark.done { grid-area: 1 / 1; }
.tick .end-stack { display: grid; }
.tick .mark.done { animation: pop-in .45s cubic-bezier(.2, 1.4, .4, 1) 1.4s both; }
.tick .mark.ring { animation: fade-out .2s ease 1.4s both; }
.tick .rail { animation: fade-up .4s ease 1.6s both; }
.tick .sticker { animation: sticker-in .5s cubic-bezier(.2, 1.4, .4, 1) 1.9s both; }
.tick .tap {
  grid-area: 1 / 1; width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--blue);
  animation: tap 0.7s ease-out 1.0s both; opacity: 0;
}
@keyframes pop-in { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes fade-out { to { opacity: 0; transform: scale(.8); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes sticker-in { from { opacity: 0; transform: rotate(-6deg) scale(.4); } to { opacity: 1; transform: rotate(-6deg) scale(1); } }
@keyframes tap { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.7); } }
.float { animation: float 6s ease-in-out infinite; }
.float.slow { animation-duration: 8s; animation-delay: -2s; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(-1.5deg); } }

/* ---------- Sections ---------- */
.section { padding: 104px 0; background: var(--sky); position: relative; }
.section.tight { padding: 72px 0; }
/* Each slab a different sweet, in order down the page */
main > .section:nth-of-type(5n+2) { background: var(--sky); }
main > .section:nth-of-type(5n+3) { background: var(--peach); }
main > .section:nth-of-type(5n+4) { background: var(--lilac); }
main > .section:nth-of-type(5n+5) { background: var(--pink); }
main > .section:nth-of-type(5n+6) { background: var(--mint); }
main > .section.tight { background: #fff; padding: 40px 0; }
.section-head { max-width: 780px; margin-bottom: 52px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head .eyebrow { margin-bottom: 22px; }
.section-head .lead { margin-top: 20px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.split.flip > :first-child { order: 2; }
.split-copy .eyebrow { margin-bottom: 22px; }
.split-copy .lead { margin: 20px 0 28px; }
@media (max-width: 900px) {
  .section { padding: 64px 0; }
  .split { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .split.flip > :first-child { order: 0; }
}
@media (max-width: 520px) { .wrap { padding: 0 20px; } }

/* Numbered steps: gumdrops */
.steps { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 18px; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 38px minmax(0, 1fr); overflow-wrap: break-word; gap: 14px; align-items: start; font-size: 17.5px; color: var(--text); counter-increment: step; }
.steps li::before {
  content: counter(step); width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center;
  background: linear-gradient(180deg, var(--blue-hi), var(--blue) 55%); color: #fff; font: 900 18px/1 var(--rounded);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.4), inset 0 -2.5px 0 rgba(20, 30, 120, 0.3), 0 6px 12px -6px rgba(40, 70, 220, 0.7);
}
.steps li:nth-child(even)::before { transform: rotate(-6deg); }
.steps li:nth-child(odd)::before { transform: rotate(4deg); }
.steps strong { color: var(--ink); }

/* Ticks list: little lime candies */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 34px; font-weight: 600; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 23px; height: 23px; border-radius: 8px;
  background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141722' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat;
  box-shadow: inset 0 -2px 0 rgba(90, 100, 0, 0.2); transform: rotate(-4deg);
}
.ticks li:nth-child(even)::before { transform: rotate(5deg); }

/* A stage: the glossy blue tray the drawn UI sits on */
.stage {
  position: relative; border-radius: var(--radius-lg); padding: 46px 34px;
  background:
    radial-gradient(420px 260px at 18% 0%, rgba(255, 255, 255, 0.3), transparent 62%),
    linear-gradient(165deg, var(--blue-hi), var(--blue) 45%, var(--blue-deep));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3), inset 0 -4px 0 rgba(20, 30, 120, 0.22), 0 30px 60px -30px rgba(30, 50, 150, 0.6);
  isolation: isolate;
}
.stage.soft {
  background: rgba(255, 255, 255, 0.75);
  box-shadow: inset 0 2px 0 #fff, 0 0 0 1px rgba(255, 255, 255, 0.9), 0 30px 60px -34px rgba(30, 50, 150, 0.45);
}
.stage .stage-pet { position: absolute; z-index: 4; pointer-events: none; filter: drop-shadow(0 16px 20px rgba(10, 20, 80, 0.28)); }
@media (max-width: 900px) {
  .split > .stage:has(.stage-pet) { margin-top: 92px; }
  .stage .stage-pet { width: 108px !important; top: -94px !important; right: 12px !important; bottom: auto !important; left: auto !important; }
}
@media (max-width: 560px) { .stage { padding: 36px 18px; border-radius: 28px; } }

/* Lock Screen notification */
.lock {
  position: relative; border-radius: 30px; padding: 26px 18px 22px; overflow: hidden;
  background: linear-gradient(170deg, #22357f 0%, #3a54c9 55%, #6f88f3 100%);
  color: #fff; max-width: 420px; margin: 0 auto; font-family: var(--sans);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.14), 0 24px 40px -20px rgba(10, 20, 80, 0.6);
}
.lock .clock { text-align: center; font-family: var(--rounded); }
.lock .clock .date { font-size: 15px; font-weight: 700; opacity: .85; }
.lock .clock .time { font-size: 76px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; opacity: .92; }
.notif {
  margin-top: 18px; display: grid; grid-template-columns: 38px 1fr auto; gap: 11px; align-items: center;
  background: rgba(255, 255, 255, 0.82); color: var(--ink); border-radius: 20px; padding: 12px 14px;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.notif img { width: 38px; height: 38px; border-radius: 9px; }
.notif b { display: block; font-size: 15px; font-weight: 700; }
.notif span { font-size: 14px; color: #3c4152; }
.notif time { align-self: start; font-size: 12px; color: #6a7080; }
.actions-menu {
  margin: 10px 0 0 auto; width: 74%; background: rgba(255, 255, 255, 0.86); border-radius: 18px; overflow: hidden;
  color: var(--ink); font-size: 15px;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.actions-menu div { padding: 11px 16px; border-top: 1px solid rgba(20, 23, 34, 0.08); }
.actions-menu div:first-child { border-top: 0; background: rgba(20, 23, 34, 0.08); }
.actions-menu .danger { color: var(--red); }

/* Household care circle */
.circle-card { background: var(--card); border-radius: 26px; padding: 20px; box-shadow: var(--shadow-card); font-family: var(--sans); }
.circle-head { display: flex; align-items: center; gap: 12px; }
.circle-head .avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--tile); display: grid; place-items: center; font-size: 25px; }
.circle-head b { display: block; font-family: var(--rounded); font-size: 19px; color: var(--ink); }
.circle-head span { font-size: 14px; color: var(--muted); }
.seats { display: flex; gap: 18px; margin-top: 18px; flex-wrap: wrap; }
.seat { display: grid; justify-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.seat i {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-style: normal;
  font: 700 18px/1 var(--sans); color: #fff; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}
.seat .you { background: #4d7cf0; }
.seat .sarah { background: #e05a8a; }
.seat .invite { background: transparent; border: 2px dashed #b9bfd0; color: var(--blue); font-size: 26px; box-shadow: none; }
.popover {
  position: relative; display: inline-flex; align-items: center; gap: 10px; background: var(--card); border-radius: 16px;
  padding: 10px 14px; box-shadow: var(--shadow-card); font-size: 15px; color: var(--ink); margin: 0 0 14px 22px; font-family: var(--sans);
}
.popover i { width: 30px; height: 30px; border-radius: 50%; background: #e05a8a; color: #fff; display: grid; place-items: center; font: 700 12px/1 var(--sans); font-style: normal; }
.popover::after { content: ""; position: absolute; left: 22px; bottom: -7px; width: 14px; height: 14px; background: var(--card); transform: rotate(45deg); border-radius: 2px; }

/* Feature cards: white bonbons, each with its own sweet for an icon */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.card {
  background: var(--card); border-radius: var(--radius); padding: 28px;
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 10px; position: relative;
  transition: transform .45s var(--spring), box-shadow .3s;
}
.card:hover { transform: translateY(-5px) rotate(-0.6deg); box-shadow: 0 1px 0 #fff inset, 0 34px 60px -28px rgba(30, 50, 150, 0.5); }
.card:nth-child(even):hover { transform: translateY(-5px) rotate(0.6deg); }
.card h3 { font-size: 23px; font-weight: 900; }
.card p { color: var(--muted); font-size: 16.5px; }
.tile { --tile-bg: var(--sky); }
.card .tile {
  width: 62px; height: 62px; border-radius: 20px; background: var(--tile-bg);
  display: grid; place-items: center; font-size: 32px; margin-bottom: 8px; transform: rotate(-6deg);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.85), inset 0 -3px 0 rgba(30, 50, 150, 0.08);
  transition: transform .45s var(--spring);
}
.cards .card:hover .tile { transform: rotate(6deg) scale(1.1); }
.cards > :nth-child(6n+1) .tile { --tile-bg: var(--peach); }
.cards > :nth-child(6n+2) .tile { --tile-bg: var(--sky); transform: rotate(5deg); }
.cards > :nth-child(6n+3) .tile { --tile-bg: var(--mint); }
.cards > :nth-child(6n+4) .tile { --tile-bg: var(--pink); transform: rotate(4deg); }
.cards > :nth-child(6n+5) .tile { --tile-bg: var(--cream); }
.cards > :nth-child(6n+6) .tile { --tile-bg: var(--lilac); transform: rotate(-3deg); }
.card .pro { position: absolute; top: 24px; right: 24px; }
.card .mini { margin-top: auto; padding-top: 12px; }
a.card { color: inherit; }
a.card:hover { text-decoration: none; }
@media (max-width: 960px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .cards { grid-template-columns: minmax(0, 1fr); } .card { padding: 24px 22px; } }

.pro-chip {
  display: inline-block; font: 900 11px/1 var(--rounded); letter-spacing: 0.06em; padding: 5px 8px; border-radius: 8px;
  background: var(--blue); color: #fff; vertical-align: middle; box-shadow: inset 0 -1.5px 0 rgba(0, 0, 0, 0.18);
}
.free-chip { background: var(--green); }

/* Toilet week strip (mini) */
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; font-size: 12px; font-family: var(--sans); }
.week .d { color: var(--faint); font-weight: 600; }
.week .d.today { color: var(--blue-text); }
.week .n { font-weight: 700; font-variant-numeric: tabular-nums; }
.week .n.pee { color: var(--teal); }
.week .n.poo { color: var(--brown); }
.week .n.zero { color: #c6cad5; }

/* Sparkline */
.spark { width: 100%; height: 70px; }

/* Vet report page mock */
.pdf {
  background: #fff; border-radius: 10px; padding: 28px 26px; box-shadow: 0 30px 60px -28px rgba(10, 20, 80, 0.55);
  font-family: var(--sans); color: #111; max-width: 470px; margin: 0 auto; transform: rotate(-1.5deg);
}
.pdf header { display: flex; justify-content: space-between; align-items: start; border-bottom: 2px solid #111; padding-bottom: 10px; }
.pdf header b { font-size: 20px; }
.pdf header span { font-size: 11.5px; color: #555; display: block; }
.pdf h4 { font-family: var(--sans); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin: 16px 0 6px; color: #333; }
.pdf table { width: 100%; border-collapse: collapse; font-size: 12px; }
.pdf th { text-align: left; font-weight: 600; color: #555; border-bottom: 1px solid #ccc; padding: 4px 4px 4px 0; }
.pdf td { padding: 5px 4px 5px 0; border-bottom: 1px solid #eee; font-variant-numeric: tabular-nums; }
.pdf .num { text-align: right; }
.pdf .foot { font-size: 10px; color: #666; margin-top: 12px; }
.pdf { overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .pdf { padding: 20px 14px; }
  .pdf th, .pdf td { font-size: 10.5px; padding-right: 3px; }
}

/* Widgets + watch */
.widget {
  width: 172px; height: 172px; border-radius: 30px; background: #fff; padding: 14px; box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 4px; color: var(--ink); font-family: var(--sans);
}
.widget .w-top { display: flex; align-items: center; gap: 8px; }
.widget .w-top .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--tile); display: grid; place-items: center; font-size: 19px; }
.widget .w-top b { font-family: var(--rounded); font-size: 15px; }
.widget .w-med { font-size: 12px; color: var(--muted); line-height: 1.3; }
.widget .w-time { font-family: var(--rounded); font-weight: 800; font-size: 20px; margin-top: auto; }
.widget .w-btn { height: 40px; border-radius: 12px; background: rgba(47, 180, 90, 0.16); color: #1c7036; font-weight: 700; font-size: 15px; display: grid; place-items: center; }
.widget.medium { width: 360px; height: 172px; }
/* Apple Watch: a glossy case, the display inset inside it, today's list on the display */
.watch {
  position: relative; flex: none; width: 186px; height: 224px; border-radius: 58px; padding: 9px;
  background: linear-gradient(150deg, #50525c 0%, #1f2026 34%, #0c0c10 68%, #2e2f37 100%);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 0 rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.35), var(--shadow-card);
  color: #fff; font-family: var(--sans); font-size: 13px;
}
/* The Digital Crown, then the side button below it */
.watch::before { content: ""; position: absolute; right: -7px; top: 48px; width: 9px; height: 32px; border-radius: 3px 6px 6px 3px; background: linear-gradient(90deg, #26272d, #6a6c76 55%, #2a2b31); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35); }
.watch::after { content: ""; position: absolute; right: -4px; top: 98px; width: 5px; height: 44px; border-radius: 2px 4px 4px 2px; background: linear-gradient(90deg, #1f2026, #44464f); }
.w-screen {
  position: relative; height: 100%; border-radius: 49px; background: #000; overflow: hidden;
  padding: 19px 10px 0; display: flex; flex-direction: column; gap: 6px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
/* Whatever runs past the bottom scrolls away under a fade, as on the watch */
.w-screen::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: linear-gradient(180deg, transparent, #000); pointer-events: none; }
.watch .w-title { font: 800 15px/1.2 var(--rounded); color: #8fb0ff; padding: 0 8px; }
.watch .w-item { background: #1c1c22; border-radius: 16px; padding: 8px 10px; line-height: 1.3; }
.watch .w-item b, .watch .w-item span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.watch .w-item b { font-size: 13px; font-weight: 700; letter-spacing: -0.01em; }
.watch .w-item span { color: #a1a6b5; font-size: 12px; }
.watch .w-give { background: #2fb45a; color: #fff; border-radius: 15px; text-align: center; padding: 7px 8px; font-weight: 700; font-size: 14px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Free vs Pro */
.plans { display: grid; grid-template-columns: 1fr 1.15fr; gap: 22px; align-items: stretch; }
.plan { border-radius: var(--radius-lg); padding: 36px; background: var(--card); box-shadow: var(--shadow-card); }
.plan h3 { font-size: 32px; font-weight: 900; display: flex; align-items: center; gap: 10px; }
.plan .plan-sub { color: var(--muted); margin: 8px 0 24px; font-weight: 600; }
.plan.pro {
  color: #fff; position: relative; overflow: hidden;
  background:
    radial-gradient(420px 260px at 12% 0%, rgba(255, 255, 255, 0.3), transparent 62%),
    linear-gradient(165deg, var(--blue-hi), var(--blue) 45%, var(--blue-deep));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3), inset 0 -4px 0 rgba(20, 30, 120, 0.25), 0 34px 60px -30px rgba(30, 50, 150, 0.7);
}
.plan.pro h3 { color: #fff; }
.plan.pro .plan-sub { color: rgba(255, 255, 255, 0.88); }
.plan.pro .ticks li::before { box-shadow: inset 0 -2px 0 rgba(90, 100, 0, 0.25), 0 3px 6px -2px rgba(10, 20, 80, 0.4); }
.plan .plan-pet { position: absolute; right: -10px; bottom: -14px; width: 168px; pointer-events: none; filter: drop-shadow(0 14px 18px rgba(10, 20, 80, 0.35)); }
.plans-note { margin-top: 24px; text-align: center; color: var(--muted); font-size: 15px; font-weight: 600; }
@media (max-width: 860px) { .plans { grid-template-columns: 1fr; } .plan .plan-pet { width: 128px; } }
@media (max-width: 560px) { .plan { padding: 28px 22px; } .plan.pro { padding-bottom: 124px; } }

/* FAQ: white pills that open with a plus */
.faq { max-width: 860px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { background: var(--card); border-radius: 24px; padding: 0 24px; box-shadow: var(--shadow-soft); transition: box-shadow .3s; }
.faq details:hover { box-shadow: 0 0 0 2px rgba(69, 106, 247, 0.18), var(--shadow-soft); }
.faq summary {
  list-style: none; cursor: pointer; padding: 21px 52px 21px 0; position: relative;
  font-family: var(--rounded); font-weight: 800; font-size: 19px; color: var(--ink); line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: -6px; top: 50%; width: 34px; height: 34px; margin-top: -17px;
  display: grid; place-items: center; border-radius: 12px; background: var(--sky); color: var(--blue-deep);
  font: 800 24px/1 var(--rounded); transition: transform .4s var(--spring), background .2s;
}
.faq details[open] summary::after { transform: rotate(135deg); background: var(--lime); color: var(--ink); }
.faq .answer { padding: 0 0 22px; color: var(--muted); display: grid; gap: 10px; font-weight: 500; overflow-wrap: anywhere; }
.faq .answer > * { min-width: 0; }
.faq .answer a { font-weight: 800; }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .35s ease, content-visibility .35s allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
}

/* Closing band */
.closing {
  position: relative; overflow: hidden; text-align: center; color: #fff; padding: 110px 0 0;
  background:
    radial-gradient(800px 420px at 50% -20%, rgba(255, 255, 255, 0.3), transparent 62%),
    linear-gradient(170deg, var(--blue-hi), var(--blue) 45%, var(--blue-deep));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.28), inset 0 -3px 0 rgba(20, 30, 120, 0.25);
}
.closing .display { font-size: clamp(38px, 6.6vw, 80px); }
.closing .display .box { margin-left: 0; }
.closing .lead { color: rgba(255, 255, 255, 0.92); margin: 24px auto 32px; max-width: 30em; }
.closing .cta-row { justify-content: center; }
.closing-pets { display: flex; justify-content: center; align-items: flex-end; gap: clamp(8px, 4vw, 60px); margin-top: 50px; }
.closing-pets img { width: clamp(96px, 19vw, 230px); filter: drop-shadow(0 20px 26px rgba(10, 20, 80, 0.32)); transition: transform .5s var(--spring); }
.closing-pets img.lie { width: clamp(116px, 23vw, 280px); margin-bottom: -8px; }
.closing:hover .closing-pets img:nth-child(odd) { transform: translateY(-8px) rotate(-3deg); }
.closing:hover .closing-pets img:nth-child(even) { transform: translateY(-4px) rotate(2deg); }

/* Footer: the night-blue wrapper at the bottom of the bag */
.site-footer { background: var(--blue-night); color: #b7bfe6; padding: 64px 0 40px; font-size: 15.5px; margin-bottom: var(--edge); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.site-footer .brand { color: #fff; margin-bottom: 14px; font-weight: 900; }
.site-footer h4 { font-family: var(--rounded); color: var(--lime); font-size: 13px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer a { color: #e3e7fb; font-weight: 600; }
.footer-legal { border-top: 1px solid rgba(255, 255, 255, 0.12); margin-top: 44px; padding-top: 24px; font-size: 13px; color: #8f98c8; display: grid; gap: 6px; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; } }

/* Support page */
.contact-card { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; background: var(--card); border-radius: var(--radius); padding: 24px 28px; box-shadow: var(--shadow-card); }
.contact-card .tile { width: 62px; height: 62px; border-radius: 20px; background: linear-gradient(165deg, var(--blue-hi), var(--blue)); display: grid; place-items: center; font-size: 30px; transform: rotate(-6deg); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.85); }
.contact-card > div { min-width: 0; overflow-wrap: anywhere; }
.contact-card b { font-family: var(--rounded); font-size: 22px; font-weight: 900; color: var(--ink); display: block; }
/* A gummy button: it squashes when pressed */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border-radius: 16px;
  background: linear-gradient(180deg, var(--blue-hi), var(--blue) 55%); color: #fff; font-weight: 900; font-size: 17px; font-family: var(--rounded);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.4), 0 4px 0 var(--blue-edge), 0 12px 22px -10px rgba(40, 70, 220, 0.7);
  transition: transform .15s, box-shadow .15s;
}
.button:hover { text-decoration: none; transform: translateY(-1px); }
.button:active { transform: translateY(3px); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.4), 0 1px 0 var(--blue-edge), 0 6px 12px -8px rgba(40, 70, 220, 0.7); }
.on-blue .button, .closing .button {
  background: linear-gradient(180deg, #fff, #f1f4ff); color: var(--blue-deep);
  box-shadow: inset 0 -2px 0 rgba(30, 50, 150, 0.08), 0 4px 0 rgba(20, 30, 120, 0.35), 0 14px 24px -10px rgba(10, 20, 80, 0.5);
}
.topic-nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 0; }
.topic-nav a { background: var(--card); border-radius: 999px; padding: 10px 17px; font-weight: 800; font-size: 15px; color: var(--ink); box-shadow: var(--shadow-soft); transition: transform .35s var(--spring), background .2s; }
.topic-nav a:hover { text-decoration: none; background: var(--lime); transform: translateY(-2px) rotate(-2deg); }
.topic { padding-top: 64px; scroll-margin-top: 90px; }
.topic h2 { font-size: 32px; font-weight: 900; margin-bottom: 20px; display: flex; align-items: center; gap: 14px; }
.topic h2 .tile { width: 48px; height: 48px; border-radius: 16px; background: var(--card); display: grid; place-items: center; font-size: 25px; transform: rotate(-6deg); box-shadow: var(--shadow-soft); }
@media (max-width: 620px) { .contact-card { grid-template-columns: auto 1fr; } .contact-card .button { grid-column: 1 / -1; } }

/* Feature list on detail pages */
.feature-list { display: grid; gap: 22px; }
.feature { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; }
.feature .tile { width: 56px; height: 56px; border-radius: 18px; background: var(--card); display: grid; place-items: center; font-size: 27px; transform: rotate(-5deg); box-shadow: var(--shadow-soft); }
.feature h3 { font-size: 21px; font-weight: 900; margin-bottom: 4px; }
.feature p { color: var(--muted); }
.callout { border-radius: var(--radius); padding: 28px 30px; background: var(--card); color: var(--text); box-shadow: var(--shadow-card); position: relative; }
.callout h3 { font-size: 22px; font-weight: 900; margin-bottom: 8px; }

/* Other pages: a row of wrapped sweets, one per page */
.pages-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pages-strip a {
  border-radius: 26px; padding: 22px 22px 22px 84px; color: var(--ink); display: grid; gap: 4px; position: relative; min-height: 96px; align-content: center;
  background: var(--sky); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.8); transition: transform .45s var(--spring);
}
.pages-strip a::before {
  position: absolute; left: 18px; top: 50%; width: 50px; height: 50px; margin-top: -25px; border-radius: 16px; background: #fff;
  display: grid; place-items: center; font-size: 26px; transform: rotate(-6deg); box-shadow: var(--shadow-soft);
}
.pages-strip a[href*="household"] { background: var(--peach); }
.pages-strip a[href*="household"]::before { content: "🏠"; }
.pages-strip a[href*="health-record"] { background: var(--mint); }
.pages-strip a[href*="health-record"]::before { content: "📋"; }
.pages-strip a[href*="vet-report"] { background: var(--lilac); }
.pages-strip a[href*="vet-report"]::before { content: "📄"; }
.pages-strip a[href*="widgets"] { background: var(--pink); }
.pages-strip a[href*="widgets"]::before { content: "⌚"; }
.pages-strip a[href*="support"] { background: var(--cream); }
.pages-strip a[href*="support"]::before { content: "💬"; }
.pages-strip a:hover { text-decoration: none; transform: translateY(-4px) rotate(-1deg); }
.pages-strip a:hover::before { transform: rotate(8deg) scale(1.08); }
.pages-strip b { font-family: var(--rounded); font-size: 18.5px; font-weight: 900; }
.pages-strip span { color: var(--muted); font-size: 14.5px; font-weight: 600; line-height: 1.4; }
@media (max-width: 1000px) { .pages-strip { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pages-strip { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .tick .mark.ring, .tick .tap { opacity: 0; }
  html { scroll-behavior: auto; }
}