/* Built by site/build.mjs: fonts, tokens from docs/mockups/tokens.js, then src/styles/site.css. */
@font-face { font-family: 'Mitr'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts-mitr-500-thai.1720286e3d.woff2) format('woff2'); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: 'Mitr'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts-mitr-500-latin.5165976dbe.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: 'Mitr'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts-mitr-600-thai.7d993a63a9.woff2) format('woff2'); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: 'Mitr'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts-mitr-600-latin.1c72b77ef2.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: 'Noto Sans Thai Looped'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts-looped-400-thai.701cf15a27.woff2) format('woff2'); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: 'Noto Sans Thai Looped'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts-looped-400-latin.c58f53b605.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: 'Noto Sans Thai Looped'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts-looped-600-thai.390a379e25.woff2) format('woff2'); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: 'Noto Sans Thai Looped'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts-looped-600-latin.d8446904ae.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; }
:root {
  --canvas: #F4FCFB;
  --surface: #FFFFFF;
  --surfaceMuted: #ECF6F6;
  --chip: #E3F0EF;
  --hairline: #CFE2E0;
  --ink: #232B2A;
  --inkSoft: #495655;
  --inkMuted: #5B6D6C;
  --inkFaint: #819493;
  --onBrand: #FFFFFF;
  --urgentGradEnd: #9E1B20;
  --aiGradEnd: #4B32B8;
  --okFill: #256F3E;
  --okInk: #1E5C33;
  --okSoft: #E3F4E9;
  --onOk: #FFFFFF;
  --warnFill: #F2B134;
  --warnInk: #7E5410;
  --warnSoft: #FDF3D9;
  --onWarn: #2E2420;
  --urgentFill: #C1272D;
  --urgentInk: #94151A;
  --urgentSoft: #FDECEC;
  --onUrgent: #FFFFFF;
  --aiFill: #6D4EF0;
  --aiInk: #4B32B8;
  --aiSoft: #EFEBFF;
  --onAi: #FFFFFF;
  --infoFill: #1C5094;
  --infoInk: #14427F;
  --infoSoft: #E4EDF9;
  --onInfo: #FFFFFF;
  --scanSurface: #FFFFFF;
  --onScanSurface: #161310;
  --spotlight: #221A16;
  --onSpotlight: #F8F0E8;
  --onSpotlightMuted: #C3B2A6;
  --brandFill: #0F6E68;
  --brandInk: #0D5E58;
  --brandBright: #4DEFE4;
  --brandGradEnd: #0B4F4B;
  --brandSoft: #E9FEFC;
  --cardShadow: 0 8px 24px rgba(45,118,113,.10), 0 1px 2px rgba(45,118,113,.04);
  --barShadow: 0 -8px 24px rgba(45,118,113,.08);
  --passportGradient: linear-gradient(140deg,#083D39 0%,#0D5E58 55%,#0F6E68 100%);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #101515;
    --surface: #191F1F;
    --surfaceMuted: #202828;
    --chip: #273231;
    --hairline: #2C3837;
    --ink: #ECF4F4;
    --inkSoft: #BFCFCE;
    --inkMuted: #91A1A0;
    --inkFaint: #7C8C8B;
    --urgentGradEnd: #FFA9A5;
    --aiGradEnd: #C2B4FF;
    --okFill: #5FCB83;
    --okInk: #5FCB83;
    --okSoft: #1E3325;
    --onOk: #17110E;
    --warnFill: #F3C263;
    --warnInk: #F3C263;
    --warnSoft: #3A2E12;
    --onWarn: #17110E;
    --urgentFill: #FF7E7A;
    --urgentInk: #FF7E7A;
    --urgentSoft: #3A1D1C;
    --onUrgent: #17110E;
    --aiFill: #A791FF;
    --aiInk: #A791FF;
    --aiSoft: #2A2350;
    --onAi: #17110E;
    --infoFill: #6FA3E8;
    --infoInk: #6FA3E8;
    --infoSoft: #12233A;
    --onInfo: #17110E;
    --scanSurface: #FFFFFF;
    --onScanSurface: #161310;
    --spotlight: #221A16;
    --onSpotlight: #F8F0E8;
    --onSpotlightMuted: #C3B2A6;
    --brandFill: #61D1CA;
    --brandInk: #61D1CA;
    --brandBright: #81DAD4;
    --brandGradEnd: #81DAD4;
    --brandSoft: #153735;
    --onBrand: #092523;
    --cardShadow: none;
    --barShadow: none;
    --passportGradient: linear-gradient(140deg,#0D2B29 0%,#0B524E 60%,#0F6E68 100%);
    color-scheme: dark;
  }
}

/* Plan 078: the marketing site's layout and components. Colours are the app's tokens (Teal), so no hex here
   except the brand mark's fixed Teal and white text on the passport gradient. Structure after the design audit of
   2026-10-02: a year-of-one-pet timeline instead of feature cards, a floating pill nav, a statement footer. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--canvas);
  color: var(--ink);
  font: 400 16px/1.7 'Noto Sans Thai Looped', system-ui, sans-serif;
}
h1, h2, h3 { font-family: 'Mitr', system-ui, sans-serif; font-weight: 600; line-height: 1.3; margin: 0 0 12px; text-wrap: balance; }
h1 { font-size: clamp(32px, 6.4vw, 54px); letter-spacing: -0.01em; }
h2 { font-size: clamp(25px, 4vw, 34px); }
h3 { font-size: 19px; font-weight: 500; }
p { margin: 0 0 14px; }
a { color: var(--brandInk); text-underline-offset: 3px; }
a:hover { color: var(--brandFill); }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 3px solid var(--brandBright); outline-offset: 2px; border-radius: 6px; }
.muted { color: var(--inkMuted); }
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding: 0 32px; } }
.nowrap { white-space: nowrap; }

.skip { position: absolute; left: -9999px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; }

.icon { width: 24px; height: 24px; fill: currentColor; flex: none; }

/* Motion: one curve, transform and opacity only. */
:root { --ease-out: cubic-bezier(.22, 1, .36, 1); }

/* Nav: a floating pill, not a full-width bar. */
.site-header { position: sticky; top: 0; z-index: 5; padding: 10px 0 0; pointer-events: none; }
.nav-pill {
  pointer-events: auto;
  display: flex; align-items: center; gap: 8px;
  max-width: 1056px; margin: 0 auto; padding: 8px 8px 8px 16px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border: 1px solid var(--hairline); border-radius: 999px;
  box-shadow: var(--cardShadow);
}
.site-header .wrap { padding: 0 12px; }
@media (min-width: 720px) { .site-header .wrap { padding: 0 32px; } }
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand span { font: 600 21px/1 'Mitr', system-ui, sans-serif; }
.brand .paw { width: 30px; height: 31px; }
.nav { display: none; gap: 2px; margin-left: auto; }
.nav a { color: var(--inkSoft); text-decoration: none; padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: 15px; white-space: nowrap; }
.nav a:hover { background: var(--chip); color: var(--ink); }
.nav-pill .btn-small { margin-left: auto; }
@media (min-width: 760px) { .nav { display: flex; } .nav-pill .btn-small { margin-left: 4px; } }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 22px; border-radius: 999px; white-space: nowrap;
  background: var(--brandFill); color: var(--onBrand);
  font: 500 17px/1.2 'Mitr', system-ui, sans-serif; text-decoration: none;
  border: 2px solid var(--brandFill);
  transition: background-color .15s var(--ease-out), border-color .15s var(--ease-out);
}
.btn:hover { background: var(--brandInk); border-color: var(--brandInk); color: var(--onBrand); }
.btn:active { transform: translateY(1px); }
.btn .icon { width: 20px; height: 20px; transition: transform .2s var(--ease-out); }
.btn:hover .icon, .next-link:hover .icon { transform: translateX(3px); }
.btn-small { min-height: 40px; padding: 8px 16px; font-size: 15px; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 28px; }
.text-link { font-weight: 600; white-space: nowrap; }

/* Sections: deliberately uneven spacing. */
section { padding: 48px 0; }
.page-head { padding: 40px 0 56px; }
@media (min-width: 900px) { .page-head { padding: 72px 0 88px; } }
.lead { font-size: 18px; color: var(--inkSoft); max-width: 36em; }

/* Home hero */
.hero { padding: 40px 0 64px; }
.hero-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 64px; } .hero { padding: 88px 0 112px; } }
.hero h1 { max-width: 12em; }

/* The illustrated pet ID card and reminder (drawn from the app's shapes, a made-up pet). */
.visual { position: relative; max-width: 440px; margin: 0 auto; width: 100%; padding-bottom: 72px; }
.idcard {
  background: var(--passportGradient); color: #fff; border-radius: 28px; padding: 22px;
  box-shadow: 0 20px 48px rgba(8, 61, 57, .28); aspect-ratio: 1.6; display: flex; flex-direction: column;
}
.idcard-top { display: flex; align-items: center; gap: 12px; }
.idcard-badge { width: 52px; height: 52px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; }
.idcard-badge svg { width: 28px; height: 29px; }
.idcard-kicker { font: 500 13px/1.6 'Mitr', system-ui, sans-serif; opacity: .85; }
.idcard-name { font: 600 24px/1.5 'Mitr', system-ui, sans-serif; }
.idcard-body { display: flex; justify-content: space-between; align-items: flex-end; margin-top: auto; gap: 12px; }
.idcard-rows { font-size: 14px; line-height: 1.6; opacity: .92; }
.idcard-qr { background: #fff; color: #083D39; border-radius: 14px; padding: 8px; flex: none; }
.idcard-qr .icon { width: 64px; height: 64px; display: block; }
.toast {
  position: absolute; left: -8px; right: 24px; bottom: 0;
  display: flex; gap: 12px; align-items: center;
  background: var(--surface); color: var(--ink); border-radius: 20px; padding: 14px 16px;
  box-shadow: var(--cardShadow); border: 1px solid var(--hairline);
}
@media (min-width: 480px) { .toast { left: -24px; right: 48px; } }
.toast-icon { width: 44px; height: 44px; border-radius: 14px; background: var(--warnSoft); color: var(--warnInk); display: grid; place-items: center; flex: none; }
.toast strong { display: block; font: 500 15px/1.35 'Mitr', system-ui, sans-serif; }
.toast span { font-size: 13px; color: var(--inkMuted); }

/* The two hero moments: the paw steps in toe by toe (PawLoader's rhythm), then the reminder arrives. */
.step-paw circle, .step-paw path { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .step-paw .t0 { animation: toe-in .5s var(--ease-out) .2s both; }
  .step-paw .t1 { animation: toe-in .5s var(--ease-out) .38s both; }
  .step-paw .t2 { animation: toe-in .5s var(--ease-out) .56s both; }
  .step-paw .pad { animation: pad-beat .6s var(--ease-out) .8s both; }
  .toast { animation: arrive .6s var(--ease-out) 1.2s both; }
  .toast-icon .icon { transform-origin: 50% 10%; animation: ring .7s var(--ease-out) 1.7s both; }
}
@keyframes toe-in { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes pad-beat { 0% { transform: scale(.9); opacity: 0; } 60% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes arrive { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes ring { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(14deg); } 50% { transform: rotate(-10deg); } 75% { transform: rotate(5deg); } }

/* A year with one pet: the home page's spine. */
.year { background: var(--surfaceMuted); padding: 72px 0 80px; }
@media (min-width: 900px) { .year { padding: 112px 0; } }
.year-grid { display: grid; gap: 40px; }
@media (min-width: 900px) { .year-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 72px; } .year-head { position: sticky; top: 104px; align-self: start; } }
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ''; position: absolute; left: 15px; top: 12px; bottom: 12px; width: 2px; background: var(--hairline); }
.timeline li { position: relative; padding: 0 0 36px 56px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline-dot {
  position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--brandFill); display: grid; place-items: center;
}
.timeline-dot svg { width: 16px; height: 16px; }
.timeline li.urgent .timeline-dot { border-color: var(--urgentFill); }
.when { display: block; font: 500 14px/1.4 'Mitr', system-ui, sans-serif; color: var(--brandInk); margin-bottom: 4px; }
.timeline li.urgent .when { color: var(--urgentInk); }
.timeline h3 { font-size: 21px; margin-bottom: 6px; }
.timeline p { color: var(--inkSoft); margin-bottom: 8px; }
.timeline a { font-weight: 600; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.timeline a .icon { width: 18px; height: 18px; transition: transform .2s var(--ease-out); }
.timeline a:hover .icon { transform: translateX(3px); }

/* Privacy: one statement, three lines. */
.stance { padding: 80px 0 64px; }
.stance-grid { display: grid; gap: 28px; }
@media (min-width: 900px) { .stance-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; } }
.stance h2 { font-size: clamp(28px, 4.6vw, 42px); }
.stance-list { list-style: none; margin: 0; padding: 0; }
.stance-list li { display: flex; gap: 14px; padding: 18px 0; border-top: 1px solid var(--hairline); color: var(--inkSoft); }
.stance-list li:last-child { border-bottom: 1px solid var(--hairline); }
.stance-list .icon { color: var(--brandInk); margin-top: 2px; }
.stance-list strong { color: var(--ink); font-weight: 600; }

/* Feature pages */
.crumbs { font-size: 14px; color: var(--inkMuted); margin-bottom: 20px; }
.crumbs a { color: var(--inkMuted); }
.head-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .head-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 64px; } }
.details { background: var(--surfaceMuted); padding: 56px 0 64px; }
@media (min-width: 900px) { .details { padding: 80px 0; } }
.prose > * { max-width: 720px; }
.prose h2 { margin-top: 44px; font-size: 24px; }
.prose h2:first-child { margin-top: 0; }
.prose ul:not(.does) { padding-left: 1.2em; margin: 0 0 16px; }
.prose li { margin-bottom: 6px; }
.does { list-style: none; padding: 0; margin: 0; }
.does li { padding: 16px 0; border-top: 1px solid var(--hairline); margin: 0; }
.does li:last-child { border-bottom: 1px solid var(--hairline); }
.does h3 { display: flex; gap: 10px; align-items: center; font-size: 18px; margin-bottom: 4px; }
.does h3 .icon { width: 22px; height: 22px; color: var(--brandInk); }
.does.urgent h3 .icon { color: var(--urgentInk); }
.does p { color: var(--inkSoft); margin: 0 0 0 32px; font-size: 15px; }
.note {
  border-radius: 20px; padding: 18px 20px; display: flex; gap: 12px; align-items: flex-start; margin: 0 0 28px;
  background: var(--warnSoft); color: var(--ink); border: 1px solid color-mix(in srgb, var(--warnFill) 40%, transparent);
}
.note .icon { color: var(--warnInk); margin-top: 2px; }
.note p { margin: 0; }
.note.urgent { background: var(--urgentSoft); border-color: color-mix(in srgb, var(--urgentFill) 35%, transparent); }
.note.urgent .icon { color: var(--urgentInk); }
.next { padding: 40px 0 8px; }
.next-link {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; text-decoration: none; color: var(--ink);
  padding: 24px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
.next-link small { display: block; font-size: 14px; color: var(--inkMuted); }
.next-link strong { font: 500 clamp(20px, 3vw, 26px)/1.35 'Mitr', system-ui, sans-serif; }
.next-link .icon { width: 28px; height: 28px; color: var(--brandInk); transition: transform .2s var(--ease-out); }
.next-link:hover { color: var(--brandInk); }

/* Illustrations on feature pages: app-like panels with a made-up pet. */
.mock {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 24px; padding: 20px;
  box-shadow: var(--cardShadow); max-width: 440px; width: 100%; margin: 0 auto;
}
.mock-title { font: 500 16px/1.4 'Mitr', system-ui, sans-serif; margin-bottom: 12px; display: flex; gap: 10px; align-items: center; }
.mock-title svg { width: 24px; height: 25px; }
.dose { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--hairline); }
.dose strong { display: block; font-weight: 600; font-size: 15px; }
.dose span { font-size: 13px; color: var(--inkMuted); }
.chip { font: 500 13px/1 'Mitr', system-ui, sans-serif; padding: 7px 12px; border-radius: 999px; white-space: nowrap; }
.chip.ok { background: var(--okSoft); color: var(--okInk); }
.chip.warn { background: var(--warnSoft); color: var(--warnInk); }
.chip.info { background: var(--infoSoft); color: var(--infoInk); }
.chip.urgent { background: var(--urgentSoft); color: var(--urgentInk); }
.scan-view { margin-top: 16px; }
.scan-view .mock-title { font-size: 15px; }
.scan-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--hairline); font-size: 14px; }
.scan-row span { color: var(--inkMuted); }
.photo-slot {
  aspect-ratio: 4 / 3; border-radius: 16px; background: var(--brandSoft); display: grid; place-items: center; margin-bottom: 14px;
}
.photo-slot svg { width: 72px; height: 74px; opacity: .55; }
.lost-title { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.lost-title strong { font: 600 20px/1.3 'Mitr', system-ui, sans-serif; }
.mock .btn { width: 100%; margin-top: 14px; }
.place { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--hairline); }
.place .icon { color: var(--urgentInk); }
.place strong { display: block; font-weight: 600; font-size: 15px; }
.place span { font-size: 13px; color: var(--inkMuted); }

/* FAQ */
.faq-grid { display: grid; gap: 32px; }
@media (min-width: 900px) { .faq-grid { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 64px; } .faq-head { position: sticky; top: 104px; align-self: start; } }
.faq { display: grid; gap: 10px; }
.faq details { background: var(--surface); border: 1px solid var(--hairline); border-radius: 20px; padding: 0 20px; }
.faq summary {
  cursor: pointer; list-style: none; padding: 18px 32px 18px 0; position: relative;
  font: 500 17px/1.45 'Mitr', system-ui, sans-serif;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 0; top: 14px; font-size: 24px; color: var(--brandInk); transition: transform .2s var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > :not(summary) { color: var(--inkSoft); }
.faq details > :last-child { padding-bottom: 18px; margin-bottom: 0; }

/* About */
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.contact-list li { display: flex; gap: 12px; align-items: center; }
.contact-list .icon { color: var(--brandInk); }

/* 404 */
.not-found { text-align: center; padding: 96px 0; }
.not-found .paw { width: 93px; height: 96px; margin: 0 auto 24px; display: block; }
.not-found .lead { margin-left: auto; margin-right: auto; }
.not-found .cta-row { justify-content: center; }

/* Footer: one closing statement, one button, one row of links. */
.site-footer { background: var(--passportGradient); color: #fff; margin-top: 56px; padding: 64px 0 28px; }
@media (min-width: 900px) { .site-footer { padding: 96px 0 32px; } }
.site-footer a { color: #fff; }
.closing { font: 600 clamp(30px, 5.4vw, 52px)/1.25 'Mitr', system-ui, sans-serif; margin: 0 0 8px; max-width: 14em; text-wrap: balance; }
.closing-sub { color: rgba(255, 255, 255, .85); font-size: 17px; margin-bottom: 0; }
.site-footer .btn { background: #fff; color: #0D5E58; border-color: #fff; }
.site-footer .btn:hover { background: #E9FEFC; border-color: #E9FEFC; color: #083D39; }
.site-footer .text-link { color: #fff; }
.footer-brand { display: inline-flex; gap: 8px; align-items: center; margin-bottom: 28px; text-decoration: none; }
.footer-brand span { font: 600 21px/1 'Mitr', system-ui, sans-serif; color: #fff; }
.footer-brand:hover { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; }
}

/* Plan 102: the takedown form, a plain form that posts to the API. */
.takedown-form { display: grid; gap: 6px; max-width: 640px; margin-top: 8px; }
.takedown-form label { font-weight: 600; margin-top: 14px; }
.takedown-form input[type='text'], .takedown-form input[type='url'], .takedown-form textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--hairline); border-radius: 14px;
  background: var(--surface); color: var(--ink); font: inherit;
}
.takedown-form textarea { resize: vertical; }
.takedown-form .hint { color: var(--inkMuted); font-size: 14px; margin: 0; }
.takedown-form .check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.takedown-form .check input { margin-top: 6px; width: 18px; height: 18px; flex: none; }
.takedown-form .btn { justify-self: start; margin-top: 20px; }
.prose h2[id] { scroll-margin-top: 96px; }

/* ---- Plan 106: articles (/articles, /articles/<slug>), from docs/mockups/106-articles.html ---- */
.nav a[aria-current="page"] { background: var(--chip); color: var(--ink); }

/* List: a contents page grouped by topic, text first, small thumbnails. No card grid (078's audit). */
.articles-head { padding: 40px 0 24px; }
@media (min-width: 900px) { .articles-head { padding: 72px 0 40px; } }
.articles-head .lead { max-width: 30em; }
.shelf-grid { display: grid; gap: 8px; padding-bottom: 32px; }
@media (min-width: 900px) { .shelf-grid { grid-template-columns: 220px minmax(0, 1fr); gap: 72px; } }
.topic-index { align-self: start; }
@media (min-width: 900px) { .topic-index { position: sticky; top: 104px; } }
.topic-index h2 { font: 500 14px/1.4 'Mitr', system-ui, sans-serif; color: var(--inkMuted); margin: 0 0 8px; }
.topic-index ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
@media (min-width: 900px) { .topic-index ul { display: block; } }
.topic-index a { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; text-decoration: none; color: var(--inkSoft); font-weight: 600; font-size: 15px; }
@media (min-width: 900px) { .topic-index a { border-bottom: 1px solid var(--hairline); padding: 12px 0; } }
.topic-index a span { font-weight: 400; color: var(--inkMuted); }
.topic-index a:hover, .topic-index a[aria-current="page"] { color: var(--brandInk); }
.topic-index a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (min-width: 900px) { .topic-index a[aria-current="page"] { text-decoration: none; border-bottom-color: var(--brandFill); border-bottom-width: 2px; } }
.topic-index .soon { color: var(--inkFaint); font-weight: 400; }

.shelf { padding: 28px 0 8px; border-top: 2px solid var(--ink); }
.shelf + .shelf { margin-top: 40px; }
.shelf-head { display: grid; gap: 4px; margin-bottom: 8px; }
@media (min-width: 640px) { .shelf-head { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 24px; } }
.shelf h2 { font-size: clamp(24px, 3.2vw, 30px); margin: 0; }
.shelf-head p { color: var(--inkSoft); margin: 0; grid-column: 1 / -1; max-width: 36em; }
.shelf-head .text-link { font-size: 15px; text-decoration: none; grid-row: 1; grid-column: 2; }
@media (max-width: 639px) { .shelf-head .text-link { display: none; } }
.entries { list-style: none; margin: 0; padding: 0; }
.entry { display: grid; grid-template-columns: minmax(0, 1fr) 88px; gap: 16px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--hairline); text-decoration: none; color: var(--ink); }
@media (min-width: 640px) { .entry { grid-template-columns: minmax(0, 1fr) 160px; gap: 32px; } }
.entries li:last-child .entry { border-bottom: 0; }
.entry h3 { font-size: 19px; margin: 0 0 6px; }
@media (min-width: 640px) { .entry h3 { font-size: 21px; } }
.entry p { color: var(--inkSoft); font-size: 15px; margin: 0 0 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.entry:hover h3 { color: var(--brandInk); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.date { font-size: 14px; color: var(--inkMuted); }
.thumb { aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--brandSoft); }
@media (min-width: 640px) { .thumb { aspect-ratio: 4 / 3; border-radius: 16px; } }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.empty { display: grid; place-items: center; }
.thumb.empty svg { width: 40%; height: auto; opacity: .45; }
.more-link { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; text-decoration: none; margin-top: 8px; min-height: 44px; }
.more-link .icon { width: 18px; height: 18px; }

.pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.pager a, .pager span.off { font-weight: 600; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; min-height: 44px; }
.pager span.off { color: var(--inkFaint); }
.pager .icon { width: 20px; height: 20px; }
.pager .back .icon { transform: scaleX(-1); }
.pager .count { color: var(--inkMuted); font-size: 14px; }
.shelf-empty { padding: 24px 0 8px; color: var(--inkSoft); }
.shelf-empty p { margin-bottom: 4px; }

/* Article */
.article-head { padding: 40px 0 28px; }
@media (min-width: 900px) { .article-head { padding: 64px 0 36px; } }
.article-head h1 { font-size: clamp(30px, 5.4vw, 46px); max-width: 18em; }
.article-head .lead { max-width: 38em; }
.byline { display: flex; align-items: flex-start; gap: 14px; margin-top: 24px; max-width: 38em; }
.byline .avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; background: var(--brandSoft); }
.byline strong { font-weight: 600; font-size: 15px; }
.byline .bio { color: var(--inkSoft); font-size: 15px; }
.byline .meta { display: block; font-size: 14px; color: var(--inkMuted); margin-top: 2px; }
.byline p { margin: 0; line-height: 1.55; }
.article-cover { margin: 0 0 8px; }
.article-cover .frame { aspect-ratio: 2 / 1; border-radius: 28px; overflow: hidden; background: var(--brandSoft); }
@media (max-width: 639px) { .article-cover .frame { aspect-ratio: 4 / 3; border-radius: 20px; } }
.article-cover img { width: 100%; height: 100%; object-fit: cover; }
figcaption { font-size: 13px; color: var(--inkMuted); margin-top: 8px; }

.article-grid { display: grid; gap: 28px; padding-top: 32px; padding-bottom: 16px; }
@media (min-width: 1000px) { .article-grid { grid-template-columns: 240px minmax(0, 720px); gap: 64px; } .article-grid.single { grid-template-columns: minmax(0, 720px); } }
.toc { align-self: start; background: var(--surfaceMuted); border-radius: 20px; padding: 18px 20px; }
@media (min-width: 1000px) { .toc { position: sticky; top: 104px; background: none; padding: 4px 0 0; border-radius: 0; } }
.toc summary { list-style: none; cursor: pointer; font: 500 16px/1.4 'Mitr', system-ui, sans-serif; display: flex; justify-content: space-between; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: '+'; color: var(--brandInk); font-size: 22px; line-height: 1; }
.toc details[open] summary::after { content: '\2212'; }
@media (min-width: 1000px) { .toc summary { pointer-events: none; color: var(--inkMuted); font-size: 14px; } .toc summary::after { display: none; } }
.toc ol { list-style: none; margin: 12px 0 0; padding: 0; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a { display: flex; gap: 10px; padding: 7px 0; color: var(--inkSoft); text-decoration: none; font-size: 15px; line-height: 1.5; }
.toc a::before { content: counter(toc); font: 500 14px/1.6 'Mitr', system-ui, sans-serif; color: var(--brandInk); min-width: 1em; }
.toc a:hover { color: var(--brandInk); }
@media (min-width: 1000px) { .toc a { border-left: 2px solid var(--hairline); padding-left: 14px; } .toc a.on { border-color: var(--brandFill); color: var(--ink); } .toc a::before { display: none; } }

.article-body { font-size: 17px; line-height: 1.85; }
.article-body > * { max-width: 720px; }
.article-body h2 { font-size: 26px; margin: 44px 0 12px; scroll-margin-top: 96px; }
.article-body h2:first-child { margin-top: 0; }
.article-body h3 { font-size: 20px; margin: 28px 0 8px; }
.article-body p { margin-bottom: 18px; }
.article-body ul, .article-body ol { padding-left: 1.3em; margin: 0 0 18px; }
.article-body li { margin-bottom: 8px; }
.article-body li::marker { color: var(--brandInk); }
.article-body figure { margin: 28px 0; }
.article-body figure img { border-radius: 20px; width: 100%; }
.article-body figure.portrait { max-width: 300px; margin-left: auto; margin-right: auto; }
.article-body figure.portrait img { border: 1px solid var(--hairline); }
.article-body figure.portrait figcaption { text-align: center; }
.callout { margin: 28px 0; padding: 2px 0 2px 20px; border-left: 4px solid var(--brandFill); }
.callout b { display: block; font: 500 14px/1.6 'Mitr', system-ui, sans-serif; color: var(--brandInk); }
.callout p { margin: 2px 0 0; font: 500 19px/1.6 'Mitr', system-ui, sans-serif; color: var(--ink); }

/* The app box shows the app itself: the same .mock panel as the 078 feature pages. */
.in-app { margin: 48px 0 8px; padding: 28px 0 0; border-top: 2px solid var(--ink); display: grid; gap: 24px; }
@media (min-width: 720px) { .in-app { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 32px; align-items: center; } }
.in-app .kicker { display: block; font: 500 14px/1.4 'Mitr', system-ui, sans-serif; color: var(--brandInk); margin-bottom: 6px; }
.in-app h2 { font-size: 24px; margin: 0 0 8px; }
.in-app p { color: var(--inkSoft); font-size: 16px; margin: 0; }
.in-app .cta-row { margin-top: 18px; }
.in-app .mock { margin: 0; max-width: none; }
.mock-foot { font-size: 13px; color: var(--inkMuted); margin-top: 10px; display: flex; gap: 6px; align-items: center; }
.mock-foot .icon { width: 16px; height: 16px; color: var(--brandInk); }

.related { padding-top: 48px; padding-bottom: 24px; }
.related .shelf { border-top-width: 2px; }

/* ---- Plan 110: the features built since 078, from docs/mockups/110-marketing-site-new-features.html ---- */
.household { padding: 72px 0 24px; }
@media (min-width: 900px) { .household { padding: 96px 0 32px; } }
.household-head { max-width: 40em; margin-bottom: 32px; }
.household-head h2 { font-size: clamp(28px, 4.6vw, 42px); }
.tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 720px) { .tiles { grid-template-columns: 1fr 1fr; gap: 20px; } }
.tile { display: grid; height: 100%; border-radius: 24px; background: var(--surface); border: 1px solid var(--hairline); text-decoration: none; color: var(--ink); overflow: hidden; }
.tile:hover { border-color: var(--brandFill); }
.tile h3 { font-size: 20px; margin: 2px 0 6px; }
.tile p { color: var(--inkSoft); font-size: 15px; margin: 0 0 10px; }
.tile .more { font-weight: 600; color: var(--brandInk); display: inline-flex; gap: 6px; align-items: center; font-size: 15px; }
.tile .more .icon { width: 18px; height: 18px; }

.tagline { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 500 15px/1.5 'Mitr', system-ui, sans-serif; color: var(--brandInk); }
.tagline svg { width: 18px; height: 18px; flex: none; }
.footer-motto { margin: 2px 0 0; font: 500 14px/1.5 'Mitr', system-ui, sans-serif; color: inherit; opacity: .9; }
.footer-motto span { display: block; font: 400 13px/1.6 inherit; font-family: inherit; opacity: .8; }
.soon { padding: 56px 0 8px; }
.soon-grid { display: grid; gap: 20px; }
@media (min-width: 900px) { .soon-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; } }
.soon h2 { font-size: clamp(24px, 3.4vw, 32px); margin: 0 0 8px; }
.soon-lead { color: var(--inkSoft); margin: 0; }
.soon-list { list-style: none; margin: 0; padding: 0; }
.soon-list li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--hairline); color: var(--inkSoft); }
.soon-list li:last-child { border-bottom: 1px solid var(--hairline); }
.pill-soon { display: inline-flex; gap: 6px; align-items: center; font: 500 13px/1 'Mitr', system-ui, sans-serif; padding: 7px 12px; border-radius: 999px; background: var(--infoSoft); color: var(--infoInk); white-space: nowrap; }
.pill-soon .icon { width: 15px; height: 15px; }

/* Family page panel: members and the invite code, as the app's family page. */
.member { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--hairline); }
.member .av { width: 40px; height: 40px; border-radius: 50%; background: var(--brandSoft); color: var(--brandInk); display: grid; place-items: center; font: 600 15px/1 'Mitr', system-ui, sans-serif; flex: none; }
.member strong { display: block; font-weight: 600; font-size: 15px; }
.member span { font-size: 13px; color: var(--inkMuted); }
.code { margin-top: 14px; padding: 16px; border-radius: 18px; background: var(--brandSoft); text-align: center; }
.code small { display: block; font-size: 13px; color: var(--brandInk); }
.code b { display: block; font: 600 28px/1.3 'Mitr', system-ui, sans-serif; letter-spacing: .12em; color: var(--brandInk); }
.code span { font-size: 12px; color: var(--inkMuted); }

/* Family tree panel: the mini tree card (107). */
.tree { position: relative; height: 210px; margin-top: 6px; }
.tree svg.lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.tree .node { position: absolute; transform: translateX(-50%); text-align: center; font-size: 12px; color: var(--inkSoft); }
.tree .dot { width: 46px; height: 46px; border-radius: 50%; background: var(--brandSoft); border: 2px solid var(--brandFill); display: grid; place-items: center; margin: 0 auto 4px; font: 600 16px/1 'Mitr', system-ui, sans-serif; color: var(--brandInk); }
.tree .dot.big { width: 60px; height: 60px; border-width: 3px; font-size: 20px; }
.tree .dot.ghost { border-style: dashed; background: transparent; color: var(--inkMuted); }
.tree .litter { position: absolute; left: 50%; top: 104px; transform: translateX(-50%); font: 500 11px/1 'Mitr', system-ui, sans-serif; padding: 5px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--hairline); color: var(--inkSoft); }


/* Medicines panel: today's doses of a course, and the allergies with drugs first. */
.slot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--hairline); font-size: 14px; }
.slot b { font-weight: 600; }
.allergy { margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: var(--urgentSoft); color: var(--urgentInk); font-size: 14px; display: flex; gap: 10px; align-items: center; }
.allergy .icon { width: 20px; height: 20px; }
.chip.done { background: var(--okSoft); color: var(--okInk); }
.chip.next { background: var(--surfaceMuted); color: var(--inkSoft); }

/* Photo feed panel: a share card as the app draws it. */
.sharecard { border-radius: 22px; overflow: hidden; background: var(--passportGradient); color: #fff; }
.sharecard .photo { aspect-ratio: 4 / 3; background: rgba(255,255,255,.12); display: grid; place-items: center; }
.sharecard .photo svg { width: 30%; height: auto; }
.sharecard .cap { padding: 14px 16px 16px; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.sharecard .cap small { display: block; font: 500 13px/1.4 'Mitr', system-ui, sans-serif; opacity: .85; }
.sharecard .cap strong { font: 600 22px/1.3 'Mitr', system-ui, sans-serif; }
.sharecard .qr { background: #fff; color: #083D39; border-radius: 12px; padding: 6px; flex: none; }
.feedmeta { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }


/* Photos (Unsplash, site/src/images/photos/CREDITS.md). */
.photo-visual { position: relative; max-width: 540px; margin: 0 auto; width: 100%; }
.photo-visual > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 28px; display: block; }
.photo-visual > .mock { position: relative; width: 74%; margin: -120px 0 0 -20px; max-width: none; }
@media (min-width: 900px) { .photo-visual > .mock { margin-left: -40px; } }
@media (max-width: 639px) { .photo-visual > .mock { width: auto; margin: -64px 12px 0; } }
.tile > img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.tile-body { display: block; padding: 20px 24px 24px; }
.tile:hover h3 { color: var(--brandInk); }
.household-top { display: grid; gap: 24px; margin-bottom: 32px; align-items: end; }
@media (min-width: 900px) { .household-top { grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; } }
.household-top img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 72%; border-radius: 24px; display: block; }
.household-top .household-head { margin-bottom: 0; }


/* Timeline steps read as cards you can open: the whole card is the link's target, the link is a pill. */
.timeline li { padding-bottom: 20px; }
.moment { position: relative; background: var(--surface); border: 1px solid var(--hairline); border-radius: 20px; padding: 18px 20px 20px;
  transition: border-color .2s var(--ease-out), transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.moment:hover { border-color: var(--brandFill); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(8, 61, 57, .08); }
.timeline li.urgent .moment:hover { border-color: var(--urgentFill); }
.moment p { margin-bottom: 14px; }
.timeline .moment a { background: var(--brandFill); color: var(--onBrand); padding: 9px 18px; border-radius: 999px; min-height: 40px; font-size: 15px; }
.timeline li.urgent .moment a { background: var(--urgentFill); color: var(--onUrgent); }
.timeline .moment a::after { content: ''; position: absolute; inset: 0; border-radius: 20px; }
.timeline .moment:hover a .icon { transform: translateX(3px); }
.timeline-dot { top: 18px; }
.timeline::before { top: 30px; }


/* The timeline's preview: the left column shows the app screen of the step in view (desktop); on a phone each card
   carries a small one. Panels reuse the feature pages' .mock look. */
.year-preview { display: none; }
@media (min-width: 900px) {
  .year-preview { display: grid; margin-top: 36px; max-width: 400px; }
  .year-preview > .mock { grid-area: 1 / 1; align-self: start; margin: 0; max-width: none; opacity: 0; transform: translateY(8px); transition: opacity .35s var(--ease-out), transform .35s var(--ease-out); }
  .year-preview > .mock.on { opacity: 1; transform: none; }
  .moment-thumb { display: none; }
  /* The step on show: tinted card, filled dot with a halo; the panel names it in the same colour. */
  .timeline li.on .moment { background: var(--brandSoft); border-color: var(--brandFill); box-shadow: 0 0 0 1px var(--brandFill), 0 12px 28px rgba(8, 61, 57, .10); }
  .timeline li.urgent.on .moment { background: var(--urgentSoft); border-color: var(--urgentFill); box-shadow: 0 0 0 1px var(--urgentFill), 0 12px 28px rgba(120, 20, 30, .10); }
  .timeline li .timeline-dot { transition: background .3s var(--ease-out), box-shadow .3s var(--ease-out), transform .3s var(--ease-out); }
  .timeline li.on .timeline-dot { background: var(--brandFill); box-shadow: 0 0 0 6px var(--brandSoft); transform: scale(1.12); }
  .timeline li.urgent.on .timeline-dot { background: var(--urgentFill); box-shadow: 0 0 0 6px var(--urgentSoft); }
  /* On the filled dot the paw takes the colour meant for the fill, so the pad does not vanish into it. */
  .timeline li.on .timeline-dot svg :is(circle, path) { fill: var(--onBrand); }
  .timeline li.urgent.on .timeline-dot svg :is(circle, path) { fill: var(--onUrgent); }
  .year-preview > .mock { border: 1px solid var(--brandFill); }
  .year-preview > .mock.urgent { border-color: var(--urgentFill); }
  .preview-step { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -2px 0 14px; padding-bottom: 12px; border-bottom: 1px dashed var(--hairline); }
  .preview-step span { font: 500 14px/1.4 'Mitr', system-ui, sans-serif; color: var(--brandInk); }
  .preview-step .icon { width: 20px; height: 20px; color: var(--brandInk); flex: none; }
  .year-preview > .mock.urgent .preview-step span, .year-preview > .mock.urgent .preview-step .icon { color: var(--urgentInk); }
}
.moment-thumb { margin: 4px 0 14px; }
.moment-thumb .mock { margin: 0; max-width: none; padding: 14px 16px; box-shadow: none; border: 1px solid var(--hairline); }
@media (prefers-reduced-motion: reduce) { .year-preview > .mock { transition: none; transform: none; } }


/* Footer: the closing invitation, then links in titled columns, then one quiet base line with the brand. */
.site-footer { position: relative; overflow: hidden; }
.footer-paws { position: absolute; right: -40px; top: 24px; width: 420px; height: auto; opacity: .08; pointer-events: none; }
@media (max-width: 899px) { .footer-paws { width: 260px; right: -60px; top: 12px; } }
.footer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; margin: 56px 0 0; padding: 32px 0 0; border-top: 1px solid rgba(255, 255, 255, .22); }
@media (min-width: 900px) { .footer-cols { grid-template-columns: 2fr 1fr 1.2fr 1fr; gap: 40px; margin-top: 72px; } }
.footer-cols h2 { font: 500 13px/1.4 'Mitr', system-ui, sans-serif; letter-spacing: .02em; color: rgba(255, 255, 255, .6); margin: 0 0 12px; }
.footer-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-cols .two { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
@media (max-width: 899px) { .footer-cols .wide { grid-column: 1 / -1; } }
.footer-cols a { text-decoration: none; color: rgba(255, 255, 255, .92); font-size: 15px; }
.footer-cols a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 44px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 13px; color: rgba(255, 255, 255, .7); }
.footer-bottom p { margin: 0; }
.footer-bottom .footer-brand { margin: 0; }
.footer-bottom .footer-brand svg { width: 26px; height: 27px; }
.footer-bottom .footer-brand span { font-size: 18px; }


/* The hero card with the pet's photo, as the app's "เต็มบัตร" card style: the photo fills it, a gradient keeps the
   text readable. An <img>, as the site's CSP allows no inline style. */
.idcard.with-photo { position: relative; overflow: hidden; isolation: isolate; }
.idcard.with-photo > .idcard-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; z-index: -2; }
.idcard.with-photo::before { content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(8,61,57,.15) 0%, rgba(8,61,57,0) 30%, rgba(8,61,57,.55) 62%, rgba(8,61,57,.92) 100%); }
.tree .n-mom { left: 31.6%; top: 6px; }
.tree .n-dad { left: 68.3%; top: 6px; }
.tree .n-me { left: 50%; top: 58px; }
.tree .n-k1 { left: 25%; top: 160px; }
.tree .n-k2 { left: 50%; top: 160px; }
.tree .n-k3 { left: 75%; top: 160px; }