:root{--bg:#FFFBF4;--card:#fff;--ink:#160F00;--yellow:#FFD93D;--orange:#FF6B35;--green:#06D6A0;--blue:#118AB2;--pink:#FF6B9D;--purple:#9B5DE5;--border:#160F00;--r:14px;--sh:4px 4px 0 #160F00;--sh-lg:7px 7px 0 #160F00}
*,::before,::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Source Sans 3',sans-serif;background:var(--bg);background-image:radial-gradient(ellipse at 10% 5%,rgba(255,217,61,.30) 0%,transparent 45%),radial-gradient(ellipse at 90% 90%,rgba(6,214,160,.20) 0%,transparent 45%),radial-gradient(ellipse at 85% 5%,rgba(255,107,53,.15) 0%,transparent 40%);min-height:100vh;padding:36px 16px 80px;display:flex;flex-direction:column;align-items:center}
  /* ─── HEADER ─── */
.site-header{text-align:center;margin-bottom:36px;animation:popIn .5s cubic-bezier(.34,1.56,.64,1) both;transition:max-height .5s ease,opacity .4s ease,margin .4s ease;max-height:600px;overflow:hidden}
.site-header.hidden{max-height:0;opacity:0;margin-bottom:0;pointer-events:none}
.tag-pill{display:inline-block;background:var(--yellow);border:2.5px solid var(--border);border-radius:999px;padding:5px 18px;font-size:12px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;margin-bottom:14px;box-shadow:var(--sh)}
.site-header h1{font-family:'Fraunces',serif;font-size:clamp(52px,12vw,100px);font-weight:900;line-height:.92;letter-spacing:-3px;color:var(--ink)}
.site-header h1 em{font-style:italic;color:var(--orange)}
.site-header h1 .hi{position:relative;display:inline-block}
.site-header h1 .hi::after{content:'';position:absolute;left:-2px;right:-2px;bottom:6px;height:10px;background:var(--green);border-radius:3px;z-index:-1}
.site-header .sub{font-size:17px;font-weight:300;color:#555;margin-top:14px;font-style:italic}
.reviews h2 {font-family:'Fraunces',serif;font-size:clamp(34px,12vw,34px);font-weight:900;line-height:.92;letter-spacing:-3px;color:var(--ink);margin-top:60px; margin-bottom:20px}
/* ─── CARD ─── */
.card{width:100%;max-width:600px;background:var(--card);border:3px solid var(--border);border-radius:var(--r);box-shadow:var(--sh-lg);overflow:hidden}
/* ─── STEPS ─── */
.step { display:none; }
.step.active { display:block; animation:slideUp .4s cubic-bezier(.34,1.3,.64,1) both; }

  @keyframes slideUp { from{opacity:0;transform:translateY(22px) scale(.97)} to{opacity:1;transform:translateY(0) scale(1)} }
  @keyframes popIn   { from{opacity:0;transform:scale(.75)} to{opacity:1;transform:scale(1)} }

/* ─── PROGRESS ─── */
.prog { height:7px; background:#F0EBE0; border-bottom:2.5px solid var(--border); }
.prog-fill { height:100%; background:linear-gradient(90deg,var(--yellow),var(--orange)); transition:width .55s cubic-bezier(.34,1.2,.64,1); }

  /* ─── CARD LAYOUT ─── */
.card-top  { padding:28px 32px 0; }
.card-body { padding:18px 32px 32px; }

  /* ─── STEP PILL ─── */
  .step-pill {
    display:inline-flex; align-items:center; gap:7px;
    background:#F5F0E8; border:2px solid #ddd; border-radius:999px;
    padding:5px 13px; font-size:12px; font-weight:700; letter-spacing:1.5px;
    text-transform:uppercase; margin-bottom:16px; color:#555;
  }
  .step-pill .dot { width:8px; height:8px; border-radius:50%; background:var(--orange); }

  /* ─── BIG QUESTION ─── */
  .bq {
    font-family:'Fraunces', serif;
    font-size:clamp(32px,7vw,54px); font-weight:900; line-height:1.0; letter-spacing:-1.5px;
    color:var(--ink); margin-bottom:4px;
  }
  .bq em { font-style:normal; color:var(--orange); }
  .bq .g { color:var(--green); }
  .bq .b { color:var(--blue); }

  /* ─── SPEECH BUBBLE ─── */
  .bubble-wrap { margin:20px 0 8px; display:flex; align-items:flex-start; gap:14px; }
  .bubble-avatar {
    width:52px; height:52px; border-radius:50%;
    background:var(--ink); border:3px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    font-size:24px; flex-shrink:0; margin-top:4px; box-shadow:var(--sh);
  }
  .bubble {
    background:#ffffff; border:3px solid var(--border);
    border-radius:18px 18px 18px 4px; padding:18px 22px;
    position:relative; box-shadow:var(--sh); flex:1;
  }
  .bubble::before { content:''; position:absolute; left:-13px; top:18px; border:6px solid transparent; border-right-color:var(--border); }
  .bubble::after  { content:''; position:absolute; left:-8px;  top:19px; border:5px solid transparent; border-right-color:#ffffff; }
  .bubble .caller { font-family:'Source Sans 3',sans-serif; font-size:13px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:#555; display:block; margin-bottom:8px; }
  .bubble p { font-family:'Fraunces',serif; font-size:clamp(22px,5vw,32px); font-weight:700; line-height:1.2; color:var(--ink); }
  .bubble p em { font-style:normal; color:var(--orange); }

  /* ─── INPUTS ─── */
  .field { margin:20px 0; }
  .field label { display:block; font-size:12px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:#555; margin-bottom:8px; }
  .field input {
    width:100%; border:3px solid var(--border); border-radius:12px; padding:14px 18px;
    font-family:'Fraunces',serif; font-size:26px; font-weight:700; color:var(--ink);
    background:#FDFAF4; outline:none; transition:box-shadow .2s;
  }
  .field input:focus { box-shadow:5px 5px 0 var(--orange); }
  .field input::placeholder { color:#c5c5c5; font-weight:400; font-style:italic; }

  /* ─── PRIMARY BTN ─── */
  .btn {
    width:100%; border:3px solid var(--border); border-radius:12px; padding:18px 24px;
    font-family:'Fraunces',serif; font-size:21px; font-weight:800; cursor:pointer;
    box-shadow:var(--sh); transition:all .14s; margin-top:10px; letter-spacing:-.3px;
    color:var(--ink); background:var(--yellow);
  }
  .btn:hover  { transform:translate(-3px,-3px); box-shadow:7px 7px 0 var(--border); }
  .btn:active { transform:translate(1px,1px);   box-shadow:2px 2px 0 var(--border); }
  .btn.green  { background:var(--green); }
  .btn.orange { background:var(--orange); color:#fff; }
  .btn.dark   { background:var(--ink);   color:#fff; }

  /* ─── CHOICES ─── */
  .choices    { display:grid; gap:12px; margin:16px 0; }
  .choices.c2 { grid-template-columns:1fr 1fr; }
  .choices.c3 { grid-template-columns:repeat(3,1fr); }

  .ch {
    background:var(--card); border:3px solid var(--border); border-radius:12px;
    padding:18px 12px; font-family:'Fraunces',serif; font-size:16px; font-weight:800;
    cursor:pointer; text-align:center; box-shadow:var(--sh); transition:all .14s;
    color:var(--ink); display:flex; flex-direction:column; align-items:center; gap:6px; line-height:1.15;
  }
  .ch .ico { font-size:26px; }
  .ch .sub { font-size:11px; font-family:'Source Sans 3',sans-serif; font-weight:400; font-style:italic; color:#999; }
  .ch:hover  { transform:translate(-3px,-3px); box-shadow:6px 6px 0 var(--border); }
  .ch:active { transform:translate(1px,1px);   box-shadow:1px 1px 0 var(--border); }
  .ch.cy:hover { background:var(--yellow); }
  .ch.co:hover { background:var(--orange); color:#fff; }
  .ch.cg:hover { background:var(--green); }
  .ch.cb:hover { background:var(--blue);  color:#fff; }
  .ch.cp:hover { background:var(--pink);  color:#fff; }
  .ch.cv:hover { background:var(--purple);color:#fff; }

  /* ─── YES / NO ─── */
  .yesno { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:20px 0; }
  .yn {
    border:3px solid var(--border); border-radius:14px; padding:22px 14px;
    font-family:'Fraunces',serif; font-size:20px; font-weight:900;
    cursor:pointer; text-align:center; box-shadow:var(--sh); transition:all .14s; color:var(--ink);
  }
  .yn .big { font-size:42px; display:block; margin-bottom:6px; }
  .yn.yes  { background:var(--green); }
  .yn.no   { background:#FFE8E3; }
  .yn:hover  { transform:translate(-3px,-3px); box-shadow:7px 7px 0 var(--border); }
  .yn:active { transform:translate(1px,1px);   box-shadow:1px 1px 0 var(--border); }

  /* ─── DIAGNOSTIC Q ─── */
  .diag-q { font-family:'Fraunces',serif; font-size:clamp(24px,5vw,38px); font-weight:900; line-height:1.1; letter-spacing:-1px; color:var(--ink); margin:16px 0 20px; }
  .diag-q em { font-style:normal; color:var(--orange); }
  .diag-context {
    font-size:17px; color:#444; line-height:1.65; margin-bottom:20px;
    padding:18px 20px; background:#F5F0E8; border-radius:12px; border-left:5px solid var(--yellow);
  }

  /* ─── BITE ─── (much bigger now) */
  .bite {
    background:var(--yellow); border:3px solid var(--border); border-radius:12px;
    padding:20px 22px; margin:16px 0;
  }
  .bite p    { font-size:18px; line-height:1.65; font-style:italic; color:var(--ink); }
  .bite .who { font-size:13px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:#262626; margin-top:10px; display:block; font-style:normal; }
  .bite.gr   { background:#E5FFF7; border-color:var(--green); }
  .bite.or   { background:#FFF2EC; border-color:var(--orange); }
  .bite.pk   { background:#FFF0F6; border-color:var(--pink); }
  .bite.bl   { background:#EAF5FA; border-color:var(--blue); }

  /* ─── TIPS ─── */
  .tips { display:flex; flex-direction:column; gap:10px; margin:16px 0; }
  .tip {
    display:flex; align-items:flex-start; gap:14px;
    background:#FDFAF4; border:2.5px solid var(--border); border-radius:12px; padding:16px;
    animation:slideUp .35s cubic-bezier(.34,1.3,.64,1) both;
  }
  .tip:nth-child(2){animation-delay:.08s} .tip:nth-child(3){animation-delay:.16s}
  .tip:nth-child(4){animation-delay:.24s} .tip:nth-child(5){animation-delay:.32s}
  .tip-n { font-family:'Fraunces',serif; font-size:28px; font-weight:900; color:var(--orange); min-width:36px; line-height:1; margin-top:2px; }
  .tip-t { font-family:'Fraunces',serif; font-size:18px; font-weight:800; display:block; color:var(--ink); margin-bottom:4px; }
  .tip-d { font-size:15px; color:#555; line-height:1.5; display:block; }

  /* ─── VERDICT ─── */
  .verdict {
    border:3px solid var(--border); border-radius:16px; padding:28px 24px;
    text-align:center; margin:16px 0; box-shadow:var(--sh-lg);
    animation:popIn .45s cubic-bezier(.34,1.56,.64,1) both;
  }
  .verdict.win  { background:var(--green); }
  .verdict.call { background:#FFE8E3; }
  .verdict .vi  { font-size:64px; display:block; margin-bottom:12px; }
  .verdict h2   { font-family:'Fraunces',serif; font-size:clamp(28px,6vw,44px); font-weight:900; line-height:1.05; letter-spacing:-1.5px; color:var(--ink); margin-bottom:12px; }
  .verdict p    { font-size:17px; color:var(--ink); line-height:1.65; }

  .info-box { background:var(--blue); border:3px solid var(--border); border-radius:12px; padding:18px 20px; margin:14px 0; color:#fff; font-size:16px; line-height:1.55; }
  .info-box strong { font-family:'Fraunces',serif; font-size:18px; display:block; margin-bottom:6px; }

  .note { text-align:center; font-size:15px; color:#444; font-style:italic; margin-top:12px; }
  .divider { border:none; border-top:2px dashed #E0D8C8; margin:18px 0; }

  /* ─── BACK BUTTON ─── */
  .back-row {
    display: flex;
    align-items: center;
    padding: 14px 32px 0;
    min-height: 44px;
  }
  .back-btn {
    background: transparent;
    border: 2px solid #ddd;
    border-radius: 8px;
    padding: 6px 14px;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    color: #555;
    transition: all .15s;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .back-btn:hover { border-color:var(--border); color:var(--ink); background:#F5F0E8; }
  /* spacer so no-back steps still have consistent height */
  .back-spacer { height:44px; }

  /* ─── FOOTER ─── */
  .footer {
    width:100%; max-width:600px;
    display:flex; justify-content:space-between; align-items:center;
    margin-top:20px; padding:0 2px;
  }
  .restart-btn {
    background:#fff; border:2px solid var(--border); border-radius:8px;
    padding:9px 18px; font-size:13px; font-weight:700;
    font-family:'Source Sans 3',sans-serif; letter-spacing:1.5px; text-transform:uppercase;
    cursor:pointer; box-shadow:var(--sh); transition:all .14s;
  }
  .restart-btn:hover { background:var(--yellow); transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--border); }

  .full-reset-btn {
    background:transparent; border:2px solid #888; border-radius:8px;
    padding:9px 18px; font-size:12px; font-weight:600;
    font-family:'Source Sans 3',sans-serif; letter-spacing:1px; text-transform:uppercase;
    cursor:pointer; color:#666; transition:all .14s;
  }
  .full-reset-btn:hover { background:var(--ink); color:#fff; border-color:var(--ink); }

  .kofi-btn {
    background: #fff; border: 2px solid var(--border); border-radius: 8px;
    padding: 9px 16px; font-size: 13px; font-weight: 700;
    font-family: 'Source Sans 3', sans-serif; letter-spacing: 1px; text-transform: uppercase;
    cursor: pointer; box-shadow: var(--sh); transition: all .14s;
    color: #444; display: flex; align-items: center; gap: 7px; text-decoration: none;
  }
  .kofi-btn:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--border); background:#9F9; }
.copyright{    font-size: 12px;
    color: #888;
    text-align: center;
    margin-top: 10px;
    font-family: 'Source Sans 3', sans-serif;}
  @media (max-width:500px) {
.field input{font-size:23px}
.choices.c3{grid-template-columns:1fr 1fr}
.card-top{padding:20px 20px 0}
.card-body{padding:14px 20px 26px}
.back-row{padding:12px 20px 0}
.footer{flex-direction:column}
.footer button{width:200px;margin-bottom:20px}
  }
@media (max-width:400px) {  .field input { font-size: 21px;}  }