:root{
    --bg:#1a0e0a;
    --bg-2:#211309;
    --cream:#e6e1d5;
    --cream-dim:#cfc8b9;
    --gold:#f0deaa;
    --card:#382e29;
    --card-2:#42352d;
    --card-hover:#473a31;
    --muted:#8a7f74;
    --muted-2:#6d655d;
    --track:#3a302b;
    --line:rgba(230,225,213,.12);
    --line-soft:rgba(230,225,213,.07);
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{margin:0;height:100%}
  body{
    background:var(--bg);
    color:var(--cream);
    font-family:'Inter',system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
  input{font-family:inherit}

  /* ---------- Shell ---------- */
  .app{
    min-height:100dvh;
    display:flex;flex-direction:column;
    max-width:640px;margin:0 auto;
    padding:0 24px;
    position:relative;
  }
  header.top{
    padding-top:26px;padding-bottom:14px;
    display:grid;grid-template-columns:32px 1fr 32px;align-items:center;
    position:sticky;top:0;z-index:20;
    background:linear-gradient(var(--bg) 72%, rgba(26,14,10,0));
  }
  .back{
    width:32px;height:32px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    color:var(--cream);opacity:.85;transition:.18s;
  }
  .back:hover{background:rgba(255,255,255,.06);opacity:1}
  .back.hidden{visibility:hidden}
  .logo{display:flex;align-items:center;justify-content:center}
  .logo img{height:18px;width:auto;display:block;opacity:.96}
  .progress-wrap{padding:0 0 4px}
  .progress{height:2px;background:var(--track);border-radius:2px;overflow:hidden}
  .progress > i{
    display:block;height:100%;width:0;border-radius:2px;
    background:linear-gradient(90deg,var(--cream-dim),var(--cream));
    transition:width .55s cubic-bezier(.5,.1,.2,1);
  }

  main{flex:1;display:flex;flex-direction:column;padding-top:34px;padding-bottom:120px}

  /* footer button */
  .footer{
    position:fixed;left:0;right:0;bottom:0;z-index:20;
    padding:18px 24px calc(20px + env(safe-area-inset-bottom));
    display:flex;justify-content:center;
    background:linear-gradient(rgba(26,14,10,0), var(--bg) 42%);
    pointer-events:none;
  }
  .footer .inner{width:100%;max-width:592px;pointer-events:auto}
  .btn{
    width:100%;height:58px;border-radius:40px;
    background:var(--cream);color:#1d120c;
    font-size:15px;font-weight:600;letter-spacing:.01em;
    transition:transform .15s ease, opacity .2s, box-shadow .2s;
    box-shadow:0 10px 30px -12px rgba(0,0,0,.7);
  }
  .btn:hover{transform:translateY(-1px)}
  .btn:active{transform:translateY(0) scale(.992)}
  .btn[disabled]{background:var(--card);color:var(--muted-2);box-shadow:none;cursor:not-allowed}

  /* ---------- Typography ---------- */
  h1.q{
    font-size:30px;line-height:1.18;font-weight:600;letter-spacing:-.02em;
    margin:0 0 26px;color:var(--cream);max-width:15ch;
  }
  .sub{color:var(--muted);font-size:14.5px;line-height:1.55;font-weight:400}

  /* ---------- Mad Lib question ---------- */
  .ml-eyebrow{margin-bottom:22px}
  .ml-label{font-size:15px;font-weight:600;color:var(--cream);letter-spacing:-.01em}
  .ml-sub{font-size:13px;color:var(--muted);margin-top:4px;line-height:1.45}
  .madlib{
    font-size:30px;line-height:1.5;font-weight:600;letter-spacing:-.02em;
    color:var(--cream);margin:0 0 4px;max-width:20ch;
  }
  .madlib .ml-dot{color:var(--cream)}
  /* auto-attached "…and that means" clause (derived from the part-1 choice) */
  .ml-means{color:var(--cream);white-space:normal}
  .ml-means:empty{display:none}
  .ml-means .means-val{
    color:var(--gold);text-decoration:underline;text-decoration-thickness:2px;
    text-underline-offset:6px;text-decoration-color:var(--gold);
  }
  .ml-means.show{animation:meansIn .45s cubic-bezier(.2,.7,.2,1) both}
  @keyframes meansIn{from{opacity:0}to{opacity:1}}
  .dd{display:inline}
  .blank{
    color:var(--gold);cursor:pointer;font:inherit;
    text-decoration:underline;text-decoration-thickness:2px;
    text-underline-offset:6px;text-decoration-color:rgba(240,222,170,.55);
    padding:0 1px;outline:none;border-radius:3px;transition:text-decoration-color .2s;
    white-space:normal;
  }
  .blank:not(.set){color:rgba(240,222,170,.6)}
  .blank.set,.dd.open .blank{text-decoration-color:var(--gold)}
  .blank:focus-visible{box-shadow:0 0 0 2px rgba(240,222,170,.4)}
  .chev{width:.62em;height:.62em;stroke:var(--gold);margin-left:.18em;vertical-align:baseline;transition:transform .22s}
  .dd.open .chev{transform:rotate(180deg)}
  .dd-menu{display:flex;flex-direction:column;gap:10px;margin-top:30px}
  .dd-menu[hidden]{display:none}
  .dd-opt{
    width:100%;text-align:left;background:var(--card);color:var(--cream-dim);
    border:1px solid transparent;border-radius:14px;padding:17px 20px;
    font-size:15px;font-weight:500;display:flex;align-items:center;justify-content:space-between;gap:12px;
    transition:background .18s,color .18s,transform .12s,border-color .18s;
  }
  .dd-opt:nth-child(2n){background:var(--card-2)}
  .dd-opt:hover{transform:translateX(2px);border-color:var(--line)}
  .dd-opt .tick{width:22px;height:22px;border-radius:50%;flex:none;border:1.5px solid rgba(230,225,213,.22);display:flex;align-items:center;justify-content:center;opacity:.6}
  .dd-opt.sel{background:var(--cream);color:#21140d;font-weight:600}
  .dd-opt.sel .tick{background:#21140d;border-color:#21140d;opacity:1}
  .dd-opt.sel .tick svg{stroke:var(--cream)}

  /* ---------- Screen transitions ---------- */
  .screen{animation:enter .5s cubic-bezier(.2,.7,.2,1) both}
  @keyframes enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .stagger > *{animation:enter .5s cubic-bezier(.2,.7,.2,1) both}
  .stagger > *:nth-child(1){animation-delay:.04s}
  .stagger > *:nth-child(2){animation-delay:.10s}
  .stagger > *:nth-child(3){animation-delay:.16s}
  .stagger > *:nth-child(4){animation-delay:.22s}
  .stagger > *:nth-child(5){animation-delay:.28s}
  .stagger > *:nth-child(6){animation-delay:.34s}
  .stagger > *:nth-child(7){animation-delay:.40s}

  /* ---------- Intro ---------- */
  .intro{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;min-height:60vh}
  .intro img.hero{width:200px;max-width:62%;height:auto;margin-bottom:22px;opacity:.95}
  .intro h1{font-size:32px;line-height:1.12;font-weight:600;letter-spacing:-.025em;margin:0 0 14px;max-width:12ch}
  .intro .sub{max-width:34ch}

  /* ---------- Option cards ---------- */
  .options{display:flex;flex-direction:column;gap:12px}
  .opt{
    width:100%;text-align:left;
    background:var(--card);color:var(--cream-dim);
    border:1px solid transparent;
    border-radius:16px;padding:19px 22px;
    font-size:15px;font-weight:500;
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    transition:background .18s, color .18s, transform .12s, border-color .18s;
  }
  .opt:nth-child(2n){background:var(--card-2)}
  .opt:hover{transform:translateX(2px);border-color:var(--line)}
  .opt .tick{
    width:22px;height:22px;border-radius:50%;flex:none;
    border:1.5px solid rgba(230,225,213,.22);
    display:flex;align-items:center;justify-content:center;
    transition:.18s;opacity:.6;
  }
  .opt.sel{background:var(--cream);color:#21140d;font-weight:600}
  .opt.sel .tick{background:#21140d;border-color:#21140d;opacity:1}
  .opt.sel .tick svg{stroke:var(--cream)}

  /* ---------- Breed search ---------- */
  .search{
    display:flex;align-items:center;gap:11px;margin:0 0 16px;
    background:var(--card);border:1px solid var(--line);border-radius:14px;padding:0 14px;
    transition:border-color .18s,background .18s;
  }
  .search:focus-within{border-color:rgba(240,222,170,.5);background:var(--card-2)}
  .search > svg{width:18px;height:18px;stroke:var(--muted);flex:none}
  .search input{flex:1;background:none;border:none;outline:none;color:var(--cream);font-size:15px;padding:15px 0}
  .search input::placeholder{color:var(--muted-2)}
  .search .clear{width:24px;height:24px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;color:var(--muted);background:rgba(255,255,255,.06)}
  .search .clear svg{width:13px;height:13px}
  .search .clear[hidden]{display:none}
  .breed-list{max-height:46vh;overflow-y:auto;padding:2px 4px 2px 0}
  .breed-list::-webkit-scrollbar{width:6px}
  .breed-list::-webkit-scrollbar-thumb{background:rgba(230,225,213,.16);border-radius:3px}
  .breed-list::-webkit-scrollbar-track{background:transparent}
  .empty{color:var(--muted);font-size:14.5px;padding:6px 4px 14px;line-height:1.55}

  /* ---------- Inline text inputs (name / age) ---------- */
  .field-block{display:flex;flex-direction:column;gap:30px;margin-top:6px}
  .field{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px}
  .field .label{font-size:26px;font-weight:600;letter-spacing:-.02em;color:var(--cream)}
  .uinput{position:relative;flex:1;min-width:160px}
  .uinput input{
    width:100%;background:none;border:none;outline:none;
    color:var(--gold);font-size:26px;font-weight:600;letter-spacing:-.01em;
    padding:0 0 8px;
  }
  .uinput input::placeholder{color:rgba(240,222,170,.28)}
  .uinput .bar{height:1.5px;background:var(--line);border-radius:2px;position:relative;overflow:hidden}
  .uinput .bar > i{position:absolute;inset:0;width:0;background:var(--gold);transition:width .4s cubic-bezier(.4,.1,.2,1)}
  .uinput.focus .bar > i, .uinput.filled .bar > i{width:100%}
  .uinput .unit{position:absolute;right:0;top:0;font-size:24px;font-weight:600;color:rgba(240,222,170,.32);pointer-events:none}

  /* age/weight stacked rows */
  .rows{display:flex;flex-direction:column;gap:18px;margin-top:4px}

  /* ---------- Loading ---------- */
  .loader{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:46px;min-height:62vh}
  .orbits{display:flex;align-items:center;gap:18px}
  .orb{
    border-radius:50%;border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.015);overflow:hidden;
    transition:.5s cubic-bezier(.3,.7,.2,1);
    color:var(--cream);
  }
  .orb svg{width:48%;height:48%;opacity:.55;transition:.4s}
  .orb img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
  .orb.side{width:70px;height:70px;opacity:.5}
  .orb.center{width:118px;height:118px;opacity:1;border-color:var(--line);box-shadow:0 0 0 1px var(--line-soft), 0 0 60px -18px rgba(240,222,170,.25)}
  .orb.center svg{opacity:.95}
  .load-lines{display:flex;flex-direction:column;gap:14px;align-items:center}
  .load-lines div{font-size:17px;font-weight:500;color:var(--muted-2);transition:.4s;letter-spacing:-.01em}
  .load-lines div.on{color:var(--cream)}
  .load-lines div.done{color:var(--muted)}

  /* ---------- Result ---------- */
  .result{display:flex;flex-direction:column;align-items:center;text-align:center}
  .result h2{font-size:30px;line-height:1.16;font-weight:600;letter-spacing:-.025em;margin:6px 0 12px;max-width:14ch}
  .result h2 em{font-style:normal;color:var(--gold)}
  .result .sub{max-width:32ch;margin-bottom:26px}
  .rcard{
    width:100%;text-align:left;
    background:linear-gradient(180deg,#fbf7ee,#efe7d4);
    color:#241a12;border-radius:22px;
    padding:26px 26px 28px;
    box-shadow:0 30px 60px -28px rgba(0,0,0,.85), 0 2px 0 rgba(255,255,255,.4) inset;
    position:relative;overflow:hidden;
  }
  .rcard .badge{display:flex;align-items:center;gap:11px;margin-bottom:20px}
  .rcard .badge .ic{width:42px;height:42px;border-radius:50%;background:#241a12;display:flex;align-items:center;justify-content:center;flex:none}
  .rcard .badge .ic svg{width:24px;height:24px;stroke:#f3ecdb}
  .rcard .badge .kicker{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#8a7a5f;font-weight:600}
  .rcard .badge .nm{font-size:17px;font-weight:700;letter-spacing:-.01em;margin-top:1px}
  .rcard h3{font-size:27px;font-weight:700;letter-spacing:-.02em;margin:0 0 4px}
  .rcard .tag{font-size:13px;color:#8a7a5f;font-weight:500;margin-bottom:20px}
  .rsec{padding:16px 0;border-top:1px solid rgba(36,26,18,.1)}
  .rsec:first-of-type{border-top:1px solid rgba(36,26,18,.14)}
  .rsec .t{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:#9a8a6d;font-weight:600;margin-bottom:7px}
  .rsec .d{font-size:14.5px;line-height:1.55;color:#3b2f23}
  .traits{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
  .traits span{font-size:12.5px;background:rgba(36,26,18,.07);color:#4a3c2c;padding:6px 12px;border-radius:20px;font-weight:500}

  .email{width:100%;margin-top:26px}
  .email .ttl{font-size:14px;color:var(--muted);margin-bottom:10px;text-align:left}
  .email .row{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:6px 6px 6px 18px}
  .email input{flex:1;background:none;border:none;outline:none;color:var(--cream);font-size:15px;padding:14px 0}
  .email input::placeholder{color:var(--muted-2)}
  .email .send{height:46px;padding:0 22px;border-radius:12px;background:var(--cream);color:#21140d;font-weight:600;font-size:14px;white-space:nowrap;transition:.15s}
  .email .send:hover{transform:translateY(-1px)}
  .email .send[disabled]{opacity:.4;cursor:not-allowed;transform:none}

  /* locked teaser card stack */
  .teaser{position:relative;width:230px;height:150px;margin:8px auto 30px}
  .tcard{position:absolute;left:50%;top:0;width:200px;height:130px;border-radius:18px;
    background:linear-gradient(180deg,#fbf7ee,#e9e0cd);
    box-shadow:0 22px 45px -22px rgba(0,0,0,.8);transform-origin:bottom center}
  .tcard.c3{transform:translateX(-50%) rotate(-9deg) translateY(8px) scale(.94);opacity:.5}
  .tcard.c2{transform:translateX(-50%) rotate(7deg) translateY(4px) scale(.97);opacity:.72}
  .tcard.c1{transform:translateX(-50%) rotate(-2deg);display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:14px;padding:20px}
  .tcard.c1 .lock{width:38px;height:38px;border-radius:50%;background:#241a12;
    display:flex;align-items:center;justify-content:center;color:#f3ecdb}
  .tcard.c1 .lock svg{width:20px;height:20px}
  .tlines{display:flex;flex-direction:column;gap:7px;width:120px;filter:blur(.4px)}
  .tlines span{height:6px;border-radius:4px;background:rgba(36,26,18,.16)}
  .tlines span:nth-child(2){width:80%}
  .tlines span:nth-child(3){width:60%}

  /* lead capture form */
  .lead{width:100%;margin-top:26px;display:flex;flex-direction:column;gap:14px}
  .ifield{display:flex;flex-direction:column;gap:8px;text-align:left;
    background:var(--card);border:1px solid var(--line);border-radius:16px;
    padding:13px 18px;transition:border-color .18s,background .18s}
  .ifield:focus-within{border-color:rgba(240,222,170,.5);background:var(--card-2)}
  .ifield > span{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
  .ifield input{background:none;border:none;outline:none;color:var(--cream);font-size:16px;font-weight:500;padding:0}
  .ifield input::placeholder{color:var(--muted-2)}
  .send-btn{margin-top:6px}
  .send-btn[disabled]{background:var(--card);color:var(--muted-2);box-shadow:none}

  .sent{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;padding:30px 0 10px;animation:enter .5s both}
  .sent .check{width:64px;height:64px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center}
  .sent .check svg{width:30px;height:30px;stroke:#21140d}
  .sent h3{font-size:22px;font-weight:600;letter-spacing:-.02em;margin:0}
  .sent p{color:var(--muted);font-size:14.5px;max-width:34ch;margin:0;line-height:1.55}
  .restart{margin-top:6px;color:var(--gold);font-size:14px;font-weight:500;text-decoration:underline;text-underline-offset:3px;opacity:.85}
  .restart:hover{opacity:1}

  /* confetti */
  #confetti{position:fixed;inset:0;pointer-events:none;z-index:5}

  @media (max-width:520px){
    h1.q{font-size:26px}
    .madlib{font-size:26px}
    .intro h1{font-size:28px}
    .field .label{font-size:22px}
    .uinput input,.uinput .unit{font-size:22px}
  }