/* Shared marketing components. Prefixes: uhato-owner- uhato-usecase- uhato-scan- uhato-lost- uhato-conversion-
   Loaded sitewide from layouts/marketing.blade.php because scan-demo and the
   use-case tabs are included on several pages, not just the homepage. */
.uhato-owner-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
@media(max-width:900px){
  .uhato-owner-grid{grid-template-columns:1fr}
}
/* Only one mode preview is visible at a time, so a two-column grid would leave
   an empty half. Single column with the phone capped to a phone-like width. */
.uhato-lost-grid{display:grid;grid-template-columns:1fr;gap:22px}
.uhato-owner-dash,
.uhato-lost-phone,
.uhato-usecase-panel{
  background:var(--elev);border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 16px;min-width:0
}
/* .uhato-scan-phone shares its element with .demo-phone; it must not restyle the
   phone bezel, only guard against grid overflow. */
.uhato-scan-phone{min-width:0}
.uhato-owner-dash,
.uhato-lost-phone{max-width:420px}
.uhato-owner-flag,
.uhato-lost-flag,
.uhato-usecase-flag{
  display:inline-block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);
  border:1px solid rgba(245,185,61,.35);border-radius:99px;padding:4px 8px;margin-bottom:10px
}
.uhato-owner-dash h3,
.uhato-lost-phone h3,
.uhato-scan-phone h3{font-size:18px;margin:0 0 12px}
.uhato-owner-row{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--line);font-size:14px
}
.uhato-owner-row dt{color:var(--dim);font-weight:600}
.uhato-owner-row dd{margin:0;font-weight:600;text-align:right}
.uhato-owner-on{color:var(--green)}
.uhato-owner-off{color:var(--faint)}
.uhato-owner-names{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 8px}
.uhato-owner-names span,
.uhato-usecase-chip,
.uhato-conversion-chip{
  display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;
  padding:8px 12px;font-size:13px;color:var(--dim);background:transparent;font:inherit;cursor:pointer;flex-shrink:0
}
.uhato-owner-names span{cursor:default}
.uhato-usecase-tabs,
.uhato-conversion-picks{display:flex;flex-wrap:nowrap;gap:8px;margin:0 0 16px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.uhato-usecase-chip.is-on,
.uhato-conversion-chip.is-on{background:#fff;color:#030405;border-color:#fff}
.uhato-usecase-chip:focus-visible,
.uhato-conversion-chip:focus-visible,
.uhato-lost-btn:focus-visible,
.uhato-scan-try:focus-visible,
.demo-tabs button:focus-visible{
  outline:2px solid var(--amber);outline-offset:2px
}
.uhato-usecase-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.uhato-usecase-list span{border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:13px;color:var(--dim)}
.uhato-usecase-panel[hidden]{display:none}
.uhato-owner-note,.uhato-lost-note,.uhato-scan-note,.uhato-conversion-note{
  color:var(--dim);font-size:13.5px;line-height:1.55;margin-top:12px
}
.uhato-lost-switch{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.uhato-lost-btn{
  background:transparent;border:1px solid var(--line);color:var(--dim);border-radius:999px;
  padding:10px 16px;font:inherit;font-weight:600;font-size:13.5px;cursor:pointer
}
.uhato-lost-btn[aria-pressed="true"]{background:#fff;color:#030405;border-color:#fff}
.uhato-lost-actions{display:grid;gap:6px;margin-top:12px}
.uhato-lost-actions span,
.uhato-scan-phone .pbtn{
  display:block;text-align:center;background:var(--elev2);border:1px solid var(--line);
  border-radius:8px;padding:9px;font-size:12.5px;font-weight:600
}
.uhato-lost-actions .uhato-lost-wa{background:#128C7E;border-color:#128C7E;color:#fff}
.uhato-lost-lost{color:var(--amber);font-weight:700;font-size:12px;letter-spacing:.06em;margin:4px 0 8px}
.uhato-scan-flow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0;color:var(--dim);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.uhato-scan-flow b{color:var(--ink)}
.uhato-scan-try{margin-top:8px}
.uhato-scan-idle,.uhato-scan-live{min-height:220px}
.uhato-scan-root.is-idle .uhato-scan-live{display:none}
.uhato-scan-root.is-live .uhato-scan-idle{display:none}
.uhato-scan-noapp{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:18px;padding:14px;border:1px solid var(--line);border-radius:var(--r);background:var(--elev2);color:var(--dim);font-size:13.5px}
.uhato-scan-noapp strong{color:var(--ink);letter-spacing:.04em;font-size:12px}
.uhato-conversion-tags{list-style:none;margin:0 0 16px;padding:0}
.uhato-conversion-tags li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.uhato-conversion-tags b{color:var(--green);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.uhato-conversion-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:700px){.uhato-conversion-pair{grid-template-columns:1fr}}
.uhato-conversion-choice{margin:8px 0 0;font-size:15px}
.uhato-trust{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 28px}
@media(max-width:900px){.uhato-trust{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.uhato-trust{grid-template-columns:1fr}}
.uhato-trust li{
  list-style:none;background:var(--elev);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;font-size:13.5px;color:var(--dim);line-height:1.45
}
.uhato-trust strong{display:block;color:var(--ink);margin-bottom:4px}
.uhato-chain{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px 10px;align-items:center;
  margin:8px 0 0;padding:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--elev)
}
.uhato-chain span{font-weight:700;letter-spacing:.08em;font-size:13px;text-transform:uppercase}
.uhato-chain i{color:var(--faint);font-style:normal}
.uhato-pet-card{margin-top:14px;padding:14px;border-radius:12px;background:var(--elev2);border:1px solid var(--line)}
.uhato-pet-card h4{margin:4px 0}
.uhato-med-fields{display:grid;gap:8px;margin-top:12px}
.uhato-med-fields p{margin:0;padding:10px 12px;border-radius:10px;background:var(--elev2);border:1px solid var(--line);color:var(--dim);font-size:13.5px}
.uhato-med-fields strong{display:block;color:var(--ink);font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px}
.uhato-life-stage{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
@media(max-width:900px){.uhato-life-stage{grid-template-columns:1fr}}
.uhato-life-root.is-idle .uhato-life-live{display:none}
.uhato-life-root.is-live .uhato-scan-idle{display:none}
.uhato-life-belong{margin:12px 0;font-size:14px;color:var(--dim)}
.uhato-life-belong strong{display:block;color:var(--ink);font-size:18px;margin-top:4px}
.uhato-life-msg{margin:10px 0;padding:10px 12px;border-radius:10px;background:var(--elev2);border:1px solid var(--line);font-size:13.5px}
.uhato-life-meta{margin:8px 0 12px;font-size:13px}
.uhato-life-phone{min-width:0}
@media(max-width:360px){
  .uhato-owner-dash,.uhato-lost-phone{padding:14px}
  .uhato-owner-row{font-size:13px}
  .uhato-scan-noapp{padding:12px}
}