:root{
    --bone:#F1E9D9;
    --bone-2:#EAE0CB;
    --ink:#211D15;
    --ink-soft:#5A5444;
    --dark:#19170F;
    --amber:#BC7826;
    --amber-bright:#E2A451;
    --moss:#3B4A39;
    --tan:#C99B6E;        /* collar leather */
    --brass:#B0894C;      /* collar hardware */
    --line:rgba(33,29,21,.16);
    --line-brass:rgba(176,137,76,.38);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    background:var(--bone);
    color:var(--ink);
    font-family:'Hanken Grotesk',sans-serif;
    font-size:18px;line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  body::before{
    content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
    opacity:.4;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
  }
  ::selection{background:var(--amber);color:var(--bone)}

  .display{font-family:'Fraunces',serif;font-optical-sizing:auto;font-weight:900;letter-spacing:-.02em;line-height:1.02}
  .wrap{max-width:1180px;margin:0 auto;padding:0 32px}
  .eyebrow{font-size:13px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--amber)}

  /* ---------- header ---------- */
  header{
    position:fixed;top:0;left:0;right:0;z-index:100;
    display:flex;align-items:center;justify-content:space-between;
    padding:20px 32px;
    transition:background .4s ease,padding .4s ease,box-shadow .4s ease;
  }
  header.scrolled{background:rgba(241,233,217,.92);backdrop-filter:blur(10px);padding:14px 32px;box-shadow:0 1px 0 var(--line)}
  .mark{display:flex;align-items:center;gap:10px;font-family:'Fraunces',serif;font-weight:900;font-size:22px;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
  a.mark:hover{color:var(--ink)}
  .mark .dot{width:12px;height:12px;border-radius:50%;
    background:radial-gradient(circle at 35% 30%,#E9CE94,var(--brass) 70%);
    box-shadow:0 0 0 4px rgba(176,137,76,.22)}
  .nav-btn{
    font-family:'Hanken Grotesk',sans-serif;font-size:14px;font-weight:600;
    background:var(--ink);color:var(--bone);border:none;cursor:pointer;
    padding:11px 20px;border-radius:100px;transition:transform .25s ease,background .25s ease;
  }
  .nav-btn:hover{transform:translateY(-2px);background:var(--amber)}

  /* ---------- hero ---------- */
  .hero{padding:170px 0 96px;position:relative}
  .hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:56px;align-items:center}
  .hero h1{font-size:clamp(50px,7.2vw,98px);margin:20px 0 26px}
  .hero h1 .l2{display:block;font-weight:400;font-style:italic;font-size:.62em;color:var(--moss);letter-spacing:-.01em}
  .hero p.lead{font-size:clamp(18px,2.2vw,22px);max-width:34ch;color:var(--ink-soft)}
  .hero-cta{display:flex;align-items:center;gap:24px;margin-top:34px;flex-wrap:wrap}
  .btn-primary{
    font-family:'Hanken Grotesk',sans-serif;font-size:16px;font-weight:600;
    background:var(--amber);color:#1a1305;border:none;cursor:pointer;
    padding:17px 32px;border-radius:100px;
    transition:transform .25s ease,box-shadow .25s ease;
    box-shadow:0 10px 24px -8px rgba(188,120,38,.6);
  }
  .btn-primary:hover{transform:translateY(-3px);box-shadow:0 16px 32px -10px rgba(188,120,38,.7)}
  .text-link{font-size:15px;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--amber);padding-bottom:2px}
  .text-link:hover{color:var(--amber)}

  /* hero photo — split */
  .hero-figure{position:relative}
  .photo-frame{
    border-radius:26px;overflow:hidden;
    border:1px solid var(--line-brass);
    box-shadow:0 40px 74px -30px rgba(33,29,21,.58),inset 0 1px 0 rgba(255,255,255,.4);
    animation:float 8s ease-in-out infinite;
  }
  .photo-frame img{display:block;width:100%;height:auto}
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
  .badge{
    position:absolute;top:-15px;right:-14px;z-index:4;
    background:var(--ink);color:var(--bone);
    font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    padding:10px 16px;border-radius:100px;
    box-shadow:0 14px 30px -14px rgba(33,29,21,.6);
  }
  /* heartbeat-into-heart vitals card */
  .vitals-card{
    position:absolute;bottom:-26px;left:-32px;z-index:4;
    background:var(--bone);border:1px solid var(--line);border-radius:18px;
    padding:14px 18px;box-shadow:0 22px 42px -16px rgba(33,29,21,.5);
  }
  .vitals-card span{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
  .vitals-row{display:flex;align-items:center;gap:5px;margin-top:7px}
  .hb-line{width:118px;height:32px}
  .hb-line path{stroke-dasharray:340;stroke-dashoffset:340;animation:draw 2.2s ease .7s forwards}
  .hb-heart{width:27px;height:27px;transform-origin:center;animation:beat 1.7s ease-in-out infinite}
  @keyframes beat{0%,32%,100%{transform:scale(1)}12%{transform:scale(1.22)}22%{transform:scale(1.04)}}

  /* ---------- manifesto ---------- */
  .manifesto{background:var(--dark);color:var(--bone);margin-top:60px;padding:130px 0;position:relative}
  .manifesto .eyebrow{color:var(--amber-bright)}
  .manifesto h2{font-size:clamp(34px,5vw,62px);margin:24px 0 44px;max-width:18ch}
  .manifesto h2 em{font-style:italic;font-weight:400;color:var(--amber-bright)}
  .man-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:38px}
  .man-cols p{color:#cabfa6;font-size:17px}
  .man-cols .n{font-family:'Fraunces',serif;font-weight:900;font-size:20px;color:var(--amber-bright);display:block;margin-bottom:10px}

  /* ---------- product ---------- */
  .product{padding:130px 0}
  .product-head{max-width:60ch;margin-bottom:66px}
  .product-head h2{font-size:clamp(36px,5.4vw,66px);margin:20px 0 18px}
  .product-head p{color:var(--ink-soft);max-width:46ch}
  .product-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:60px;align-items:center}
  .features{display:flex;flex-direction:column;gap:8px}
  .feat{padding:26px 4px;border-top:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:22px}
  .feat:last-child{border-bottom:1px solid var(--line)}
  .feat .fnum{font-family:'Fraunces',serif;font-weight:900;font-size:15px;color:var(--amber);padding-top:3px}
  .feat h3{font-family:'Fraunces',serif;font-size:21px;font-weight:600;margin-bottom:5px}
  .feat p{font-size:15.5px;color:var(--ink-soft)}
  .product-photo{
    border-radius:24px;overflow:hidden;border:1px solid var(--line-brass);
    box-shadow:0 30px 56px -26px rgba(33,29,21,.5);
  }
  .product-photo img{display:block;width:100%;height:auto}
  .photo-wrap{position:relative}
  .qr-inset{
    position:absolute;left:-26px;top:-26px;z-index:3;
    background:var(--bone);border:1px solid var(--line);border-radius:18px;
    padding:13px 13px 11px;
    box-shadow:0 22px 42px -16px rgba(33,29,21,.55);
    display:flex;flex-direction:column;align-items:center;gap:9px;
    transform:rotate(-4deg);transition:transform .4s ease;
    text-decoration:none;color:inherit;cursor:pointer;
  }
  .qr-inset,.qr-inset *{text-decoration:none}
  .qr-inset:hover{transform:rotate(0deg) scale(1.04)}
  .qr-mini{
    width:108px;height:108px;display:grid;grid-template-columns:repeat(9,1fr);
    gap:2.5px;padding:9px;background:#fff;border-radius:11px;
  }
  .qr-mini i{background:var(--ink);border-radius:1.5px}
  .qr-mini i.off{background:transparent}
  .qr-mini i.amber{background:var(--amber)}
  /* real scannable QR (brand SVG) */
  .qr-real{
    width:128px;height:128px;padding:9px;background:#FBF7EC;border-radius:11px;
    display:flex;align-items:center;justify-content:center;
  }
  .qr-real svg{width:100%;height:100%;display:block}
  .qr-cap{text-align:center;line-height:1.3}
  .qr-cap em{display:block;font-style:normal;font-size:9px;font-weight:700;
    letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
  .qr-cap b{font-family:'Fraunces',serif;font-size:13px;font-weight:600;color:var(--ink)}
  .photo-note{
    display:flex;gap:26px;margin-top:34px;flex-wrap:wrap;
  }
  .photo-note div{display:flex;gap:10px;align-items:flex-start;max-width:230px}
  .photo-note .pip{width:11px;height:11px;border-radius:50%;flex-shrink:0;margin-top:5px}
  .photo-note .pip.brass{background:var(--brass)}
  .photo-note .pip.amber{background:var(--amber);box-shadow:0 0 0 3px rgba(188,120,38,.22)}
  .photo-note strong{font-family:'Fraunces',serif;font-size:14.5px;display:block}
  .photo-note span{font-size:13px;color:var(--ink-soft)}

  /* ---------- roadmap ---------- */
  .roadmap{padding:120px 0;background:var(--bone-2)}
  .roadmap h2{font-size:clamp(34px,5vw,58px);margin:18px 0 56px;max-width:16ch}
  .rungs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .rung{
    background:var(--bone);border:1px solid var(--line);border-radius:22px;padding:34px 30px;
    transition:transform .35s ease,box-shadow .35s ease;
  }
  .rung:hover{transform:translateY(-8px);box-shadow:0 26px 44px -22px rgba(33,29,21,.4)}
  .rung .rn{font-family:'Fraunces',serif;font-weight:900;font-size:42px;color:var(--line);line-height:1}
  .rung.live .rn{color:var(--amber)}
  .rung h3{font-family:'Fraunces',serif;font-size:24px;font-weight:600;margin:14px 0 10px}
  .rung p{font-size:15px;color:var(--ink-soft)}
  .rung .pill{display:inline-block;margin-top:18px;font-size:11px;font-weight:600;letter-spacing:.12em;
    text-transform:uppercase;padding:6px 12px;border-radius:100px;border:1px solid var(--line);color:var(--ink-soft)}
  .rung.live .pill{background:var(--amber);border-color:var(--amber);color:#1a1305}

  /* ---------- mission ---------- */
  .mission{background:var(--moss);color:var(--bone);padding:130px 0;text-align:center}
  .mission .eyebrow{color:var(--amber-bright)}
  .mission h2{font-size:clamp(34px,5.4vw,64px);margin:22px auto 30px;max-width:17ch}
  .mission h2 em{font-style:italic;font-weight:400;color:var(--amber-bright)}
  .mission p{max-width:54ch;margin:0 auto;color:#d4cdb8;font-size:17.5px}
  .founder{
    margin:56px auto 0;max-width:50ch;padding:30px 34px;
    border:1px solid rgba(241,233,217,.22);border-radius:20px;
  }
  .founder p{color:#e6dfca;font-style:italic;font-family:'Fraunces',serif;font-size:18px;line-height:1.55}
  .founder span{display:block;margin-top:14px;font-family:'Hanken Grotesk',sans-serif;
    font-style:normal;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber-bright)}

  /* ---------- waitlist ---------- */
  .waitlist{padding:130px 0;text-align:center}
  .waitlist h2{font-size:clamp(40px,6.5vw,84px);margin-bottom:18px}
  .waitlist .sub{color:var(--ink-soft);max-width:42ch;margin:0 auto 40px}
  .form{display:flex;gap:12px;max-width:480px;margin:0 auto;flex-wrap:wrap;justify-content:center}
  .form input{
    flex:1;min-width:220px;font-family:'Hanken Grotesk',sans-serif;font-size:16px;
    padding:16px 22px;border-radius:100px;border:1.5px solid var(--line);
    background:var(--bone);color:var(--ink);outline:none;transition:border-color .25s ease;
  }
  .form input:focus{border-color:var(--amber)}
  .form .btn-primary{flex-shrink:0}
  .thanks{display:none;font-family:'Fraunces',serif;font-size:22px;color:var(--moss)}
  .thanks.show{display:block;animation:popin .5s ease}
  .form.hide{display:none}
  @keyframes popin{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
  .micro{font-size:13px;color:var(--ink-soft);margin-top:20px}

  /* ---------- footer ---------- */
  footer{background:var(--dark);color:var(--bone);padding:60px 0 50px}
  .foot-grid{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
  footer .mark{color:var(--bone)}
  footer .tagline{font-family:'Fraunces',serif;font-style:italic;color:#9d937c;max-width:34ch;font-size:15px}
  footer .copy{font-size:13px;color:#6f6857;margin-top:30px;border-top:1px solid rgba(241,233,217,.12);padding-top:24px}

  /* ---------- reveal ---------- */
  .reveal{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}
  .stagger>*{opacity:0;transform:translateY(26px);animation:up .9s cubic-bezier(.2,.7,.2,1) forwards}
  .stagger>*:nth-child(1){animation-delay:.1s}
  .stagger>*:nth-child(2){animation-delay:.24s}
  .stagger>*:nth-child(3){animation-delay:.38s}
  .stagger>*:nth-child(4){animation-delay:.52s}
  @keyframes up{to{opacity:1;transform:none}}
  .draw{stroke-dasharray:600;stroke-dashoffset:600;animation:draw 2.4s ease .9s forwards}
  @keyframes draw{to{stroke-dashoffset:0}}

  @media(max-width:880px){
    .hero{padding:132px 0 72px}
    .hero-grid,.product-grid{grid-template-columns:1fr;gap:50px}
    .hero-figure{order:-1;max-width:440px;margin:0 auto 8px}
    .man-cols,.rungs{grid-template-columns:1fr;gap:22px}
    .wrap{padding:0 22px}
    header{padding:16px 22px}
    .vitals-card{left:-6px;bottom:-22px}
    .badge{right:-4px}
  }
/* ============================================================
   DOG / PET-ID PAGE  (pawsense.in/{slug})  — social profile
   compact, app-like, "Bella's page"
   ============================================================ */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}

.dog-tagchip{display:inline-flex;align-items:center;gap:7px;font-family:'Hanken Grotesk',sans-serif;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);
  border:1px solid var(--line-brass);border-radius:999px;padding:6px 13px;background:rgba(251,247,236,.6);backdrop-filter:blur(6px)}
.tagchip-pip{width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 0 rgba(188,120,38,.6);animation:pip 2.4s ease-out infinite}
@keyframes pip{0%{box-shadow:0 0 0 0 rgba(188,120,38,.55)}70%,100%{box-shadow:0 0 0 9px rgba(188,120,38,0)}}

/* page shell — narrow, centered, app-like */
.profile{position:relative;overflow:hidden;padding:92px 0 0;min-height:100vh}
.pwrap{max-width:468px;margin:0 auto;padding:0 18px;position:relative;z-index:2}
.dog-aura{position:absolute;top:-90px;left:50%;transform:translateX(-50%);
  width:620px;height:480px;pointer-events:none;z-index:0;
  background:radial-gradient(50% 50% at 50% 40%,rgba(226,164,81,.30),rgba(241,233,217,0) 70%)}
.is-lost .dog-aura{background:radial-gradient(52% 52% at 50% 38%,rgba(214,108,58,.34),rgba(241,233,217,0) 70%)}

/* lost ribbon */
.lost-ribbon{display:flex;align-items:center;justify-content:center;gap:9px;text-align:center;
  background:linear-gradient(120deg,#C4421F,#E06A3C);color:#fff;
  font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:13.5px;
  padding:13px 18px;border-radius:16px;margin-bottom:14px;
  box-shadow:0 16px 34px -16px rgba(178,58,30,.6)}
.lost-ribbon .rdot{width:9px;height:9px;border-radius:50%;background:#fff;animation:pip 1.2s ease-out infinite}

/* the profile card */
.pcard{background:#fff;border:1px solid var(--line);border-radius:26px;overflow:hidden;
  box-shadow:0 28px 60px -32px rgba(33,29,21,.55)}
.pcover{height:88px;background:linear-gradient(120deg,#2E3A2C,#3B4A39 55%,#5A6B4E);position:relative}
.pcover::after{content:"";position:absolute;inset:0;opacity:.5;
  background:radial-gradient(60% 120% at 80% -10%,rgba(226,164,81,.55),transparent 60%)}
.is-lost .pcover{background:linear-gradient(120deg,#7a2e18,#B23A1E 60%,#D66C3A)}
.pcard-body{padding:0 24px 26px;text-align:center}

/* avatar overlapping cover */
.pavatar{position:relative;width:118px;height:118px;margin:-59px auto 0}
.pavatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;
  border:5px solid #fff;box-shadow:0 14px 30px -12px rgba(33,29,21,.5);position:relative;z-index:2}
.pavatar--empty{width:100%;height:100%;border-radius:50%;background:var(--bone-2);border:5px solid #fff;
  display:flex;align-items:center;justify-content:center;font-size:48px;position:relative;z-index:2}
.pulse-ring{position:absolute;inset:-3px;border-radius:50%;z-index:1;border:2px solid var(--amber);opacity:0;animation:ring 3.2s ease-out infinite}
.pulse-ring::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--amber);animation:ring 3.2s ease-out infinite 1.6s}
@keyframes ring{0%{transform:scale(1);opacity:.5}80%,100%{transform:scale(1.3);opacity:0}}
.is-lost .pulse-ring,.is-lost .pulse-ring::after{border-color:#D66C3A}

/* name / handle / bio */
.pname{font-family:'Fraunces',serif;font-weight:600;font-size:27px;letter-spacing:-.01em;
  margin-top:12px;display:inline-flex;align-items:center;gap:7px;justify-content:center}
.pverify{width:18px;height:18px;flex:0 0 auto}
.phandle{font-family:'Hanken Grotesk',sans-serif;font-size:14px;color:var(--ink-soft);margin-top:1px}
.pbio{font-size:15px;color:var(--ink);margin:12px 0 0;line-height:1.5}

/* meta chips */
.pchips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:15px}
.pchip{display:inline-flex;align-items:center;gap:5px;font-family:'Hanken Grotesk',sans-serif;
  font-size:12.5px;font-weight:600;color:var(--ink);background:var(--bone);border:1px solid var(--line);
  border-radius:999px;padding:6px 12px}

/* action buttons row */
.pactions{display:flex;gap:9px;margin-top:18px}
.pbtn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;
  font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:14.5px;
  padding:13px 12px;border-radius:13px;border:1px solid var(--line);color:var(--ink);background:#fff;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease}
.pbtn:hover{transform:translateY(-2px);border-color:var(--amber)}
.pbtn.primary{background:linear-gradient(120deg,var(--amber),#D88A30);color:#fff;border-color:transparent;
  box-shadow:0 14px 28px -12px rgba(188,120,38,.6)}
.pbtn.primary:hover{box-shadow:0 18px 34px -12px rgba(188,120,38,.72)}
.pbtn .pbi{font-size:16px}

.pfound{margin-top:16px;font-size:13px;color:var(--ink-soft);background:var(--bone);
  border-radius:12px;padding:11px 14px}
.is-lost .pfound{background:rgba(214,108,58,.12);color:#8f3a1f;font-weight:600}

/* reward */
.reward-strip{margin-top:14px;text-align:center;font-weight:600;color:var(--ink);
  background:rgba(226,164,81,.18);border:1px dashed var(--line-brass);border-radius:14px;padding:13px}

/* link-in-bio style sections */
.psection{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px 22px;margin-top:14px;
  box-shadow:0 18px 44px -32px rgba(33,29,21,.5)}
.psection h4{font-family:'Hanken Grotesk',sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:12px}
.prows{display:flex;flex-direction:column}
.prow{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-top:1px solid var(--line);font-size:14.5px}
.prow:first-child{border-top:none}
.prow span{color:var(--ink-soft)}
.prow b{font-weight:600;color:var(--ink);text-align:right}

.care-flag{display:flex;align-items:center;gap:9px;background:rgba(178,58,30,.08);
  border:1px solid rgba(178,58,30,.3);color:#8f2d16;border-radius:12px;padding:11px 13px;margin-bottom:12px;font-weight:600;font-size:14px}
.care-temper{font-family:'Fraunces',serif;font-style:italic;font-size:17px;color:var(--ink);margin:0 0 10px}
.care-notes{color:var(--ink-soft);font-size:14.5px;line-height:1.6;margin:0}
.care-vet{font-size:13.5px;color:var(--ink-soft);margin-top:10px}.care-vet b{color:var(--ink)}

/* QR section */
.ptag{display:flex;gap:18px;align-items:center;text-align:left}
.ptag .qr-real{flex:0 0 116px;width:116px;height:116px;padding:10px;border-radius:15px;border:1px solid var(--line)}
.ptag h4{margin-bottom:6px}
.ptag p{font-size:13.5px;color:var(--ink-soft);margin:0 0 8px;line-height:1.5}
.ptag .text-link{font-size:13.5px}

/* compact footer */
.profile footer{margin-top:30px;padding:30px 0 40px;background:transparent}
.profile footer .wrap{max-width:468px}
.profile .foot-grid{flex-direction:column;gap:8px;text-align:center;align-items:center}
.profile .tagline{font-size:13px}
.profile .copy{text-align:center;font-size:12px;margin-top:10px}

@media(max-width:520px){
  .ptag{flex-direction:column;text-align:center}
  .prow b{text-align:left}
}

/* skip-to-content (a11y) */
.skip-link{position:absolute;left:-9999px;top:0;z-index:10000;background:var(--ink);color:var(--bone);
  padding:11px 18px;border-radius:0 0 12px 0;font-family:'Hanken Grotesk',sans-serif;font-weight:600;
  font-size:14px;text-decoration:none}
.skip-link:focus{left:0}

/* visually-hidden label (a11y) */
.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}

/* ============================================================
   GLOW MODULE — the collar light that speaks (multi-state)
   cream neumorphic sensor pebble + living colored glow
   ============================================================ */
/* state palette (drives --glow on any element below) */
.g-green {--glow:#43C16E;--glow-soft:rgba(67,193,110,.55)}
.g-blue  {--glow:#46A6E6;--glow-soft:rgba(70,166,230,.55)}
.g-pink  {--glow:#EE6FA6;--glow-soft:rgba(238,111,166,.55)}
.g-orange{--glow:#F0913E;--glow-soft:rgba(240,145,62,.6)}
.g-red   {--glow:#E8523B;--glow-soft:rgba(232,82,59,.6)}
.g-yellow{--glow:#FFD23F;--glow-soft:rgba(255,210,63,.62)}

.glow-feature{padding:118px 0;position:relative}
.gf-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.glow-feature h2{font-size:clamp(34px,5vw,58px);margin:18px 0 18px}
.glow-feature h2 em{font-style:italic;font-weight:400;color:var(--amber)}
.glow-feature .gf-copy>p{color:var(--ink-soft);max-width:44ch;font-size:17px}

/* the cream neumorphic pebble */
.gf-stage{display:flex;justify-content:center}
.glow-module{position:relative;width:290px;height:312px;border-radius:38px;
  background:linear-gradient(150deg,#FCF8EE,#EBE2CD);
  box-shadow:16px 18px 40px rgba(33,29,21,.17),-12px -14px 30px rgba(255,255,255,.92),
    inset 0 1px 2px rgba(255,255,255,.85),inset 0 -4px 9px rgba(33,29,21,.06);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;
  overflow:hidden;transition:box-shadow .7s ease}
.glow-module::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(56% 46% at 50% 40%,var(--glow-soft),transparent 72%);
  opacity:.7;transition:background .7s ease}
/* recessed bezel ring around the light */
.gm-ring{position:relative;z-index:2;width:124px;height:124px;border-radius:50%;
  background:linear-gradient(150deg,#F4ECDB,#E3D8C0);
  box-shadow:inset 4px 4px 9px rgba(33,29,21,.16),inset -4px -4px 9px rgba(255,255,255,.9);
  display:flex;align-items:center;justify-content:center}
.gm-light{width:62px;height:62px;border-radius:50%;
  background:radial-gradient(circle at 37% 31%,#fff 3%,var(--glow) 66%);
  box-shadow:0 0 20px 2px var(--glow-soft),0 0 48px 12px var(--glow-soft),
    inset 0 -4px 10px rgba(33,29,21,.22),inset 0 3px 7px rgba(255,255,255,.55);
  transition:background .7s ease,box-shadow .7s ease;animation:glowbreathe 3.4s ease-in-out infinite}
@keyframes glowbreathe{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.07);filter:brightness(1.08)}}
.gm-state{position:relative;z-index:2;text-align:center}
.gm-state b{display:block;font-family:'Fraunces',serif;font-weight:600;font-size:22px;color:var(--ink);transition:none}
.gm-state span{font-family:'Hanken Grotesk',sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.gm-state span i{font-style:normal;color:var(--glow);transition:color .6s ease}

/* state switcher pills */
.state-pills{display:flex;flex-wrap:wrap;gap:9px;margin:26px 0 12px}
.spill{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-family:'Hanken Grotesk',sans-serif;font-weight:600;font-size:13.5px;color:var(--ink-soft);
  background:linear-gradient(150deg,#FCF8EE,#EFE6D3);border:1px solid var(--line);border-radius:999px;padding:9px 15px;
  box-shadow:3px 3px 8px rgba(33,29,21,.08),-3px -3px 8px rgba(255,255,255,.8);
  transition:transform .2s ease,color .2s ease,box-shadow .2s ease}
.spill i{width:11px;height:11px;border-radius:50%;background:var(--glow);box-shadow:0 0 9px 1px var(--glow-soft)}
.spill:hover{transform:translateY(-2px)}
.spill.is-active{color:var(--ink);box-shadow:inset 2px 2px 6px rgba(33,29,21,.13),inset -2px -2px 6px rgba(255,255,255,.88)}
.glow-feature .micro{margin-top:8px;font-size:13px;color:var(--ink-soft);opacity:.85}

/* compact reusable glow chip (e.g. on a dog profile) */
.glow-chip{display:inline-flex;align-items:center;gap:9px;
  font-family:'Hanken Grotesk',sans-serif;font-weight:600;font-size:13px;color:var(--ink);
  background:linear-gradient(150deg,#FCF8EE,#EFE6D3);border:1px solid var(--line);border-radius:999px;padding:8px 15px 8px 12px;
  box-shadow:3px 3px 9px rgba(33,29,21,.1),-3px -3px 9px rgba(255,255,255,.85),inset 0 1px 1px rgba(255,255,255,.7)}
.glow-chip .gc-dot{width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#fff 5%,var(--glow) 70%);
  box-shadow:0 0 10px 1px var(--glow-soft),0 0 20px 3px var(--glow-soft);
  animation:glowbreathe 3.4s ease-in-out infinite}
.glow-chip .gc-label span{display:block;font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}

@media(max-width:820px){.gf-grid{grid-template-columns:1fr;gap:42px}.gf-stage{order:-1}}

/* live mood chip on the profile card */
.pmood{display:flex;justify-content:center;margin-top:14px}

/* ============================================================
   APP / ACCOUNT / ADMIN  (authenticated areas)
   ============================================================ */
.app-body{min-height:100vh}
.app-bar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;background:rgba(241,233,217,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.app-bar-right{display:flex;align-items:center;gap:18px}
.app-hello{font-family:'Hanken Grotesk',sans-serif;font-size:14px;color:var(--ink-soft)}
.app-link{font-family:'Hanken Grotesk',sans-serif;font-weight:600;font-size:14px;color:var(--ink);text-decoration:none;border-bottom:2px solid transparent;padding-bottom:2px}
.app-link:hover{border-color:var(--amber);color:var(--amber)}
.app-main{max-width:920px;margin:0 auto;padding:34px 24px 80px}

.flash{border-radius:14px;padding:13px 17px;margin-bottom:20px;font-weight:600;font-size:14.5px}
.flash.ok{background:rgba(67,193,110,.14);border:1px solid rgba(67,193,110,.4);color:#2c7a4b}
.flash.err{background:rgba(232,82,59,.1);border:1px solid rgba(232,82,59,.4);color:#9e3322}

/* buttons */
.btn-soft{display:inline-flex;align-items:center;gap:6px;font-family:'Hanken Grotesk',sans-serif;font-weight:600;
  font-size:14px;color:var(--ink);text-decoration:none;background:#fff;border:1px solid var(--line);
  border-radius:100px;padding:11px 18px;cursor:pointer;transition:transform .2s ease,border-color .2s ease}
.btn-soft:hover{transform:translateY(-2px);border-color:var(--amber)}
.btn-soft.sm{padding:7px 13px;font-size:13px}

/* auth card */
.auth-card{max-width:430px;margin:40px auto;background:#fff;border:1px solid var(--line);border-radius:24px;
  padding:34px 30px;box-shadow:0 26px 56px -34px rgba(33,29,21,.5)}
.auth-card h1{font-size:34px;margin:8px 0 8px}
.auth-sub{color:var(--ink-soft);font-size:15px;margin-bottom:22px}
.auth-form{display:flex;flex-direction:column;gap:15px}
.auth-form .btn-primary{margin-top:6px;width:100%;text-align:center;justify-content:center}
.auth-alt{margin-top:18px;font-size:14px;color:var(--ink-soft);text-align:center}
.auth-alt a{color:var(--amber);font-weight:600;text-decoration:none}

/* fields */
.fld{display:flex;flex-direction:column;gap:6px}
.fld>span{font-family:'Hanken Grotesk',sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--ink-soft)}
.fld>span small{font-weight:500;opacity:.8}
.fld input,.fld select,.fld textarea{font-family:'Hanken Grotesk',sans-serif;font-size:15px;color:var(--ink);
  background:#FBF7EC;border:1px solid var(--line);border-radius:12px;padding:12px 14px;width:100%;transition:border-color .2s ease,box-shadow .2s ease}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(188,120,38,.15)}
.fld textarea{resize:vertical}
.fld.check{flex-direction:row;align-items:center;gap:10px}
.fld.check input{width:auto}
.fld.check>span{font-size:14px;color:var(--ink);font-weight:600}

/* form grid (pet form) */
.pet-form{background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px;
  box-shadow:0 22px 50px -34px rgba(33,29,21,.5)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid .span2{grid-column:1/-1}
.fld-head{font-family:'Fraunces',serif;font-weight:600;font-size:16px;color:var(--ink);
  border-top:1px solid var(--line);padding-top:18px;margin-top:4px}
.form-actions{display:flex;gap:12px;align-items:center;margin-top:22px}

/* dashboard */
.dash-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:26px}
.dash-head h1{font-size:clamp(32px,5vw,46px)}
.empty-card{text-align:center;background:#fff;border:1px dashed var(--line-brass);border-radius:22px;padding:52px 24px}
.empty-emoji{font-size:46px}
.empty-card h3{font-family:'Fraunces',serif;font-size:22px;margin:8px 0 6px}
.empty-card p{color:var(--ink-soft);margin-bottom:18px}

.pet-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.pet-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px;
  box-shadow:0 18px 44px -34px rgba(33,29,21,.5)}
.pet-card-top{display:flex;gap:14px;align-items:center}
.pet-avatar{width:62px;height:62px;border-radius:50%;overflow:hidden;background:var(--bone-2);
  display:flex;align-items:center;justify-content:center;font-size:28px;flex:0 0 auto}
.pet-avatar img{width:100%;height:100%;object-fit:cover}
.pet-id b{font-family:'Fraunces',serif;font-size:19px;display:block}
.pet-id span{display:block;font-size:13px;color:var(--ink-soft)}
.pet-status{font-size:11px !important;font-weight:700;margin-top:3px}
.pet-status.safe{color:#2c7a4b}.pet-status.lost{color:#b23a1e}
.pet-card-meta{display:flex;gap:14px;margin:14px 0;font-size:13px;color:var(--ink-soft)}
.pet-card-actions{display:flex;gap:9px}

.claim-box{margin-top:30px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.claim-box h3{font-family:'Fraunces',serif;font-size:19px;margin:4px 0 4px}
.claim-box p{color:var(--ink-soft);font-size:14px;max-width:42ch}
.claim-form{display:flex;gap:9px}
.claim-form input{font-family:'Hanken Grotesk',sans-serif;text-transform:uppercase;letter-spacing:.06em;
  background:#FBF7EC;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:15px}

/* edit page */
.edit-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:14px}
.edit-head h1{font-size:clamp(30px,4.5vw,42px)}
.claim-chip{display:inline-block;font-size:13px;color:var(--ink-soft);background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:8px 15px;margin-bottom:20px}
.claim-chip b{color:var(--ink)}

/* admin tables */
.adm-block{margin-top:30px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px 24px;
  box-shadow:0 18px 44px -36px rgba(33,29,21,.5)}
.adm-block-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.adm-block-head h2{font-family:'Fraunces',serif;font-size:22px;font-weight:600}
.count{display:inline-block;font-family:'Hanken Grotesk',sans-serif;font-size:13px;font-weight:700;color:#fff;
  background:var(--amber);border-radius:999px;padding:2px 10px;margin-left:6px;vertical-align:middle}
.table-wrap{overflow-x:auto}
.adm-table{width:100%;border-collapse:collapse;font-size:14px}
.adm-table th{text-align:left;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);
  font-weight:700;padding:8px 12px;border-bottom:1px solid var(--line)}
.adm-table td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.adm-table a{color:var(--amber);text-decoration:none}
.muted{color:var(--ink-soft);font-size:12.5px}
.code{font-family:ui-monospace,monospace;letter-spacing:.04em}
.inline{display:inline}
.pill-btn{cursor:pointer;font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:12px;border-radius:999px;
  padding:6px 12px;border:1px solid var(--line);background:#fff}
.pill-btn.safe{color:#2c7a4b;border-color:rgba(67,193,110,.5)}
.pill-btn.lost{color:#b23a1e;border-color:rgba(232,82,59,.5);background:rgba(232,82,59,.06)}
.adm-add{margin-top:16px}
.adm-add summary{cursor:pointer;font-weight:600;color:var(--amber);font-size:14px}
.row-form{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
.row-form input{flex:1;min-width:140px;background:#FBF7EC;border:1px solid var(--line);border-radius:12px;padding:11px 13px;font-size:14px}

@media(max-width:620px){.form-grid{grid-template-columns:1fr}.dash-head{flex-direction:column;align-items:flex-start}.claim-box{flex-direction:column;align-items:flex-start}}