/* Tagzo web: finder pages, landing, policy pages. Sticker language from docs/design.md:
   white die-cut faces, 2px charcoal outlines, hard offset shadows, rubber-stamp states. */

@font-face { font-family: Poppins; font-weight: 700; font-display: swap; src: url(/fonts/Poppins-Bold-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20B9, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: Poppins; font-weight: 700; font-display: swap; src: url(/fonts/Poppins-Bold-deva.woff2) format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CFF, U+200C-200D, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: Poppins; font-weight: 800; font-display: swap; src: url(/fonts/Poppins-ExtraBold-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20B9, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: Poppins; font-weight: 800; font-display: swap; src: url(/fonts/Poppins-ExtraBold-deva.woff2) format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CFF, U+200C-200D, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: Mukta; font-weight: 500; font-display: swap; src: url(/fonts/Mukta-Medium-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20B9, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: Mukta; font-weight: 500; font-display: swap; src: url(/fonts/Mukta-Medium-deva.woff2) format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CFF, U+200C-200D, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: Mukta; font-weight: 700; font-display: swap; src: url(/fonts/Mukta-Bold-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20B9, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: Mukta; font-weight: 700; font-display: swap; src: url(/fonts/Mukta-Bold-deva.woff2) format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CFF, U+200C-200D, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: Khand; font-weight: 600; font-display: swap; src: url(/fonts/Khand-SemiBold-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20B9, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: Khand; font-weight: 600; font-display: swap; src: url(/fonts/Khand-SemiBold-deva.woff2) format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CFF, U+200C-200D, U+25CC, U+A830-A839, U+A8E0-A8FF; }

:root {
  --ground: #FFF7EF; --sunken: #F5E9DE; --card: #FFFFFF; --ink: #1F1B1A; --muted: #6B625E;
  --outline: #1F1B1A; --shadow: #1F1B1A; --hairline: #EADDD2;
  --tomato: #E5432D; --primary: #D2381F; --on-primary: #FFFFFF; --primary-text: #B32A17; --primary-tint: #FFE3DA;
  --sun: #FFC233; --sun-tint: #FFF0C7; --sun-ink: #7A5300;
  --mint: #177548; --mint-tint: #DDF3E6; --sky: #2A64C4; --sky-tint: #E2ECFB;
  --lilac: #7C5CD6; --lilac-tint: #ECE5FF; --peach: #FF8A4C; --peach-tint: #FFE6D6;
  --r-sticker: 22px; --r-card: 18px; --r-field: 14px;
  --display: Poppins, "Mukta", system-ui, sans-serif;
  --body: Mukta, system-ui, -apple-system, "Segoe UI", sans-serif;
  --label: Khand, "Mukta", system-ui, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #161312; --sunken: #1E1A18; --card: #26211F; --ink: #FFF3EA; --muted: #C4B6AD;
    --outline: #4A403C; --shadow: #000000; --hairline: #3A3330;
    --tomato: #FF5A40; --primary: #E5432D; --primary-text: #FF8D78; --primary-tint: #3D1D17;
    --sun: #FFCF5C; --sun-tint: #3A2F12; --sun-ink: #FFE29A;
    --mint: #5FCB97; --mint-tint: #143323; --sky: #7FAEF7; --sky-tint: #16263F;
    --lilac: #B9A3FF; --lilac-tint: #2B2347; --peach: #FFB083; --peach-tint: #3A2416;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 500 17px/1.45 var(--body); -webkit-font-smoothing: antialiased;
}
a { color: var(--primary-text); text-underline-offset: 3px; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 8px; }
.icon { width: 1.25em; height: 1.25em; flex: none; }
/* The hidden attribute must win over component display rules (.banner is flex, .composer is grid). */
[hidden] { display: none !important; }
.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; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.wrap { max-width: 540px; margin: 0 auto; padding: 12px 16px 40px; }

/* Top bar */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0 14px; }
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font: 800 21px/1 var(--display); letter-spacing: -0.4px; }
.brand svg { width: 30px; height: 30px; }
.pill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px;
  border: 2px solid var(--outline); border-radius: 999px; background: var(--card); color: var(--ink);
  font: 600 16px/1 var(--label); letter-spacing: .6px; text-decoration: none;
}

/* Sticker surfaces */
.sticker {
  position: relative; background: var(--card); border: 2px solid var(--outline);
  border-radius: var(--r-sticker); box-shadow: 0 4px 0 var(--shadow); padding: 18px;
}
.stack > * + * { margin-top: 16px; }

/* Hero */
.hero { text-align: center; padding: 22px 18px 20px; }
.glyph {
  width: 84px; height: 84px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--outline); box-shadow: 0 0 0 5px var(--card), 0 0 0 7px var(--outline), 0 6px 0 2px var(--shadow);
  background: var(--sw-bg); color: var(--sw-fg);
}
.glyph svg { width: 44px; height: 44px; }
.sw-sun { --sw-bg: var(--sun); --sw-fg: #1F1B1A; }
.sw-tomato { --sw-bg: var(--tomato); --sw-fg: #FFFFFF; }
.sw-sky { --sw-bg: var(--sky); --sw-fg: #FFFFFF; }
.sw-ink { --sw-bg: #1F1B1A; --sw-fg: #FFF3EA; }
.sw-mint { --sw-bg: var(--mint); --sw-fg: #FFFFFF; }
.sw-lilac { --sw-bg: var(--lilac); --sw-fg: #FFFFFF; }
.sw-peach { --sw-bg: var(--peach); --sw-fg: #1F1B1A; }
.sw-road { --sw-bg: #1F1B1A; --sw-fg: #FFC233; }
@media (prefers-color-scheme: dark) { .sw-sky, .sw-mint, .sw-lilac { --sw-fg: #161312; } }
.kicker { font: 600 16px/1.1 var(--label); letter-spacing: 1.4px; text-transform: uppercase; color: var(--primary-text); }
h1 { font: 800 30px/1.12 var(--display); letter-spacing: -0.5px; margin: 6px 0 4px; overflow-wrap: anywhere; }
.subtitle { color: var(--muted); margin: 0; }
.photo { margin: 14px auto 0; width: 168px; height: 168px; border-radius: 26px; overflow: hidden; border: 2px solid var(--outline); box-shadow: 0 4px 0 var(--shadow); transform: rotate(-2deg); background: var(--sunken); }
.photo img { width: 100%; height: 100%; object-fit: cover; }

/* Stamps and banners */
.stamp {
  display: inline-block; font: 600 22px/1 var(--label); letter-spacing: 3px; text-transform: uppercase;
  color: var(--primary-text); border: 3px solid currentColor; border-radius: 8px; padding: 6px 12px 3px;
  transform: rotate(-6deg); box-shadow: inset 0 0 0 2px var(--card), inset 0 0 0 4px currentColor;
}
.stamp.mint { color: var(--mint); }
.stamp-row { position: absolute; top: 14px; right: 14px; }
.badge { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 4px 12px 2px; border-radius: 999px; background: var(--mint-tint); color: var(--mint); font: 600 16px/1.2 var(--label); letter-spacing: .8px; text-transform: uppercase; }
.banner { display: flex; gap: 12px; align-items: flex-start; border-radius: var(--r-card); padding: 14px 16px; border: 2px solid var(--outline); }
.banner.lost { background: var(--primary-tint); }
.banner.reward { background: var(--sun-tint); color: var(--sun-ink); }
.banner.ok { background: var(--mint-tint); color: var(--mint); }
.banner.warn { background: var(--sun-tint); color: var(--sun-ink); }
.banner.err { background: var(--primary-tint); color: var(--primary-text); }
.banner strong { display: block; font: 700 17px/1.3 var(--display); }
.banner .icon { width: 26px; height: 26px; margin-top: 2px; }

/* Owner's message: a speech bubble */
.say { position: relative; background: var(--card); border: 2px solid var(--outline); border-radius: 20px 20px 20px 6px; padding: 14px 16px; font-size: 18px; white-space: pre-line; }
.say-label { font: 600 15px/1 var(--label); letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); margin: 0 0 8px 4px; }

/* Facts */
.facts { margin: 0; display: grid; gap: 10px; }
.facts div { display: grid; gap: 2px; }
.facts dt { font: 600 15px/1 var(--label); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }

/* Buttons */
.btn {
  appearance: none; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  min-height: 56px; padding: 12px 18px; border: 2px solid var(--outline); border-radius: 18px;
  background: var(--card); color: var(--ink); box-shadow: 0 4px 0 var(--shadow);
  font: 700 18px/1.2 var(--display); text-decoration: none; cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease; -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--shadow); }
.btn .icon { width: 24px; height: 24px; }
.btn-primary { background: var(--primary); color: var(--on-primary); border-color: var(--outline); }
.btn-sky { background: var(--sky); color: #FFFFFF; }
.btn-mint { background: var(--mint); color: #FFFFFF; }
@media (prefers-color-scheme: dark) { .btn-sky, .btn-mint { color: #161312; } }
.btn-small { min-height: 44px; font-size: 16px; border-radius: 14px; width: auto; }
.btn[disabled] { opacity: .55; cursor: default; }
.actions { display: grid; gap: 14px; }

/* Vehicle quick replies */
.quick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quick form { display: contents; }
.quick button {
  appearance: none; display: grid; justify-items: center; gap: 6px; padding: 14px 10px; min-height: 104px;
  border: 2px solid var(--outline); border-radius: 18px; background: var(--card); color: var(--ink);
  box-shadow: 0 4px 0 var(--shadow); font: 700 16px/1.2 var(--body); text-align: center; cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease;
}
.quick button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--shadow); }
.quick button .icon { width: 34px; height: 34px; color: var(--primary-text); }
.quick button.urgent { background: var(--primary-tint); }
.quick button.wide { grid-column: span 2; min-height: 72px; grid-auto-flow: column; justify-content: center; align-items: center; }
.quick button.sent { background: var(--mint-tint); }
.section-title { font: 700 19px/1.25 var(--display); margin: 0 0 12px; }

/* Medical */
.contact-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 2px dashed var(--hairline); }
.contact-row:first-of-type { border-top: 0; }
.contact-row .who { flex: 1; min-width: 0; }
.contact-row .who strong { display: block; font: 700 17px/1.2 var(--display); }
.contact-row .who span { color: var(--muted); font-size: 15px; }

/* Chat */
.chat-log { display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px; padding: 0; list-style: none; }
.msg { max-width: 84%; padding: 10px 14px; border-radius: 18px; border: 2px solid var(--outline); white-space: pre-line; overflow-wrap: anywhere; animation: rise .18s ease-out both; }
.msg small { display: block; font: 600 14px/1 var(--label); letter-spacing: 1px; text-transform: uppercase; opacity: .8; margin-bottom: 4px; }
.msg.mine { align-self: flex-end; background: var(--primary); color: var(--on-primary); border-radius: 18px 18px 6px 18px; }
.msg.theirs { align-self: flex-start; background: var(--card); border-radius: 18px 18px 18px 6px; }
.msg.note { align-self: center; max-width: 100%; border: 0; background: transparent; color: var(--muted); text-align: center; font-size: 15px; padding: 2px 8px; }
.msg.stampy { align-self: flex-end; background: var(--sun-tint); color: var(--sun-ink); font-weight: 700; }
.chat-empty { color: var(--muted); text-align: center; margin: 4px 0 14px; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.composer { display: grid; gap: 10px; }
textarea, input[type=text], input[type=tel], input[type=email], select {
  width: 100%; font: 500 17px/1.4 var(--body); color: var(--ink); background: var(--sunken);
  border: 2px solid var(--outline); border-radius: var(--r-field); padding: 12px 14px;
}
textarea { min-height: 96px; resize: vertical; }
label.field { display: grid; gap: 6px; font: 600 15px/1 var(--label); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { appearance: none; border: 2px solid var(--outline); background: var(--card); color: var(--ink); border-radius: 999px; padding: 6px 14px; min-height: 40px; font: 600 15px/1.2 var(--body); cursor: pointer; }
details.more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 44px; font: 700 17px/1.3 var(--display); }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::after { content: "+"; margin-left: auto; font: 800 24px/1 var(--display); }
details.more[open] > summary::after { content: "–"; }
.help { color: var(--muted); font-size: 15px; margin: 4px 0 12px; }

.privacy { display: flex; gap: 12px; align-items: flex-start; color: var(--muted); font-size: 15px; padding: 4px 4px 0; }
.privacy .icon { width: 24px; height: 24px; color: var(--mint); margin-top: 1px; }

/* Dialog (location consent) */
dialog { border: 2px solid var(--outline); border-radius: var(--r-sticker); box-shadow: 0 6px 0 var(--shadow); background: var(--card); color: var(--ink); padding: 22px; max-width: min(420px, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(20, 16, 15, .55); }
dialog h2 { font: 800 22px/1.2 var(--display); margin: 0 0 8px; }
dialog .row { display: grid; gap: 10px; margin-top: 18px; }

.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); max-width: calc(100vw - 32px); background: var(--ink); color: var(--ground); border-radius: 16px; padding: 12px 18px; font-weight: 700; box-shadow: 0 4px 0 var(--shadow); z-index: 10; }
.toast[hidden] { display: none; }

/* Footer */
.foot { margin-top: 28px; text-align: center; color: var(--muted); font-size: 15px; display: grid; gap: 10px; }
.foot nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 16px; }
.foot a { color: var(--muted); }
.foot .credit a { color: var(--ink); font-weight: 700; text-decoration: none; }
.code-chip { font: 600 18px/1 var(--label); letter-spacing: 2px; }

/* Landing */
.land-hero { text-align: center; padding: 26px 18px 22px; }
.land-hero h1 { font-size: 34px; }
.lead { font-size: 19px; color: var(--muted); margin: 8px 0 0; }
.steps { counter-reset: s; display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start; }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--sun); color: #1F1B1A; border: 2px solid var(--outline); font: 800 20px/1 var(--display); }
.steps strong { display: block; font: 700 18px/1.25 var(--display); }
.codebox { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.codebox input { text-transform: uppercase; letter-spacing: 2px; font: 600 22px/1 var(--label); }
.stores { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.store { display: grid; gap: 2px; justify-items: center; padding: 12px; border: 2px solid var(--outline); border-radius: 16px; background: var(--ink); color: var(--ground); text-decoration: none; }
.store small { font: 600 14px/1 var(--label); letter-spacing: 1px; text-transform: uppercase; opacity: .8; }
.store strong { font: 700 17px/1.2 var(--display); }
.tagline-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.tagline-tags span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 2px solid var(--outline); background: var(--card); font: 600 15px/1 var(--label); letter-spacing: .8px; text-transform: uppercase; }

/* Policy pages */
.doc h1 { font-size: 28px; }
.doc h2 { font: 700 20px/1.3 var(--display); margin: 26px 0 8px; }
.doc p, .doc li { color: var(--ink); }
.doc ul { padding-left: 22px; }

@media (min-width: 600px) { h1 { font-size: 34px; } .wrap { padding-top: 20px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
html:not(.js) .js-only { display: none !important; }
.section-title.sub { margin-top: 18px; }
.privacy .code-chip { margin-left: auto; color: var(--muted); }