:root{
    --bg:#F4EFE6;
    --ink:#241F1A;
    --ink-soft:#6E665C;
    --ink-faint:#A39B8E;
    --cream:#FBF8F1;
    --line:rgba(36,31,26,.08);
    --line-strong:rgba(36,31,26,.14);

    --moss:#3C6E4F;
    --moss-deep:#244733;
    --moss-tint:#E4EEE4;
    --clay:#C75B39;
    --clay-tint:#F8E7DF;
    --honey:#C98A1E;
    --honey-tint:#F7ECD4;
    --plum:#5A4C8C;
    --plum-tint:#ECE8F6;

    --r-lg:26px;
    --r:18px;
    --r-sm:13px;
    --shadow:0 22px 50px -22px rgba(36,31,26,.4);
  }
  *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
  body{
    font-family:'Albert Sans',sans-serif;
    color:var(--ink);
    min-height:100vh;
    background:
      radial-gradient(120% 80% at 12% 0%, #FBF6EC 0%, rgba(251,246,236,0) 55%),
      radial-gradient(120% 90% at 92% 100%, #ECE5D6 0%, rgba(236,229,214,0) 50%),
      var(--bg);
    display:flex;flex-direction:column;align-items:center;
    padding:30px 16px 50px;
    -webkit-font-smoothing:antialiased;
  }

  /* ---- top intro strip (not part of phone) ---- */
  .intro{max-width:420px;text-align:center;margin-bottom:24px;}
  .intro .wordmark{
    font-family:'Fraunces',serif;font-size:25px;font-weight:600;letter-spacing:-.5px;
    display:flex;align-items:center;justify-content:center;gap:9px;color:var(--ink);
  }
  .intro .wordmark span{color:var(--clay);font-style:italic;}
  .intro .wordmark .lg{width:38px;height:38px;border-radius:50%;object-fit:cover;background:#F3E4D8;box-shadow:0 4px 12px -3px rgba(36,31,26,.45);}
  .intro p{font-size:13.5px;color:var(--ink-soft);margin-top:7px;line-height:1.5;}

  /* role switch outside phone */
  .roleswitch{
    display:inline-flex;background:var(--cream);border:1px solid var(--line-strong);
    border-radius:50px;padding:4px;gap:3px;margin-top:16px;box-shadow:0 6px 16px -10px rgba(36,31,26,.5);
  }
  .roleswitch button{
    font-family:'Albert Sans',sans-serif;font-size:12.5px;font-weight:600;
    border:none;background:transparent;color:var(--ink-soft);
    padding:8px 17px;border-radius:50px;cursor:pointer;transition:.25s;display:flex;align-items:center;gap:6px;
  }
  .roleswitch button.on{background:var(--moss);color:#fff;box-shadow:0 4px 10px -4px var(--moss-deep);}
  .roleswitch button.on.clay{background:var(--clay);box-shadow:0 4px 10px -4px #8f3c22;}

  /* ---- phone ---- */
  .phone{
    width:392px;max-width:100%;height:812px;position:relative;
    background:#111;border-radius:54px;padding:13px;
    box-shadow:var(--shadow), 0 0 0 2px rgba(0,0,0,.6);
  }
  .screen{
    position:relative;width:100%;height:100%;background:var(--bg);
    border-radius:42px;overflow:hidden;display:flex;flex-direction:column;
  }
  .statusbar{
    position:absolute;top:0;left:0;right:0;height:46px;z-index:40;
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 30px 0;font-size:13px;font-weight:600;color:var(--ink);
    pointer-events:none;
  }
  .notch{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:118px;height:30px;background:#111;border-radius:18px;z-index:45;}

  .scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:58px 18px 112px;scroll-behavior:smooth;}
  .scroll::-webkit-scrollbar{width:0;}

  .page{display:none;animation:rise .4s cubic-bezier(.2,.7,.2,1);}
  .page.on{display:block;}
  @keyframes rise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

  /* greeting */
  .hello{font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--clay);}
  .h-name{font-family:'Fraunces',serif;font-size:28px;font-weight:600;letter-spacing:-.5px;line-height:1.1;margin-top:3px;}
  .h-sub{font-size:13.5px;color:var(--ink-soft);margin-top:6px;line-height:1.5;}

  .sec{font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink-faint);margin:24px 2px 11px;}
  .sec.tight{margin-top:18px;}

  /* points hero card */
  .wallet{
    position:relative;border-radius:var(--r-lg);padding:22px 22px 20px;color:#fff;overflow:hidden;
    background:linear-gradient(135deg,#3C6E4F 0%,#244733 100%);
    box-shadow:0 18px 34px -18px rgba(36,71,51,.9);
  }
  .wallet::after{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.07);}
  .wallet::before{content:"";position:absolute;right:24px;bottom:-58px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.05);}
  .wallet .lbl{font-size:11px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:rgba(255,255,255,.7);}
  .wallet .pts{font-family:'Fraunces',serif;font-size:46px;font-weight:600;line-height:1;margin-top:6px;display:flex;align-items:baseline;gap:8px;}
  .wallet .pts small{font-size:15px;font-family:'Albert Sans';font-weight:500;color:rgba(255,255,255,.75);}
  .wallet .meta{display:flex;gap:18px;margin-top:16px;position:relative;z-index:2;}
  .wallet .meta div{font-size:12px;color:rgba(255,255,255,.85);}
  .wallet .meta b{display:block;font-size:17px;font-weight:600;color:#fff;font-family:'Fraunces',serif;}
  .wallet .cta{
    margin-top:18px;width:100%;border:none;border-radius:13px;padding:12px;cursor:pointer;
    font-family:'Albert Sans';font-size:14px;font-weight:600;color:var(--moss-deep);
    background:#fff;display:flex;align-items:center;justify-content:center;gap:7px;position:relative;z-index:2;
    transition:.2s;
  }
  .wallet .cta:active{transform:scale(.97);}

  /* generic card */
  .card{background:var(--cream);border:1px solid var(--line);border-radius:var(--r);padding:15px;}
  .card+.card{margin-top:9px;}

  /* next visit */
  .visit{display:flex;gap:13px;align-items:center;}
  .ava{width:50px;height:50px;border-radius:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-weight:600;font-size:19px;color:#fff;}
  .visit .who{flex:1;}
  .visit .who .n{font-weight:600;font-size:15.5px;}
  .visit .who .d{font-size:12.5px;color:var(--ink-soft);margin-top:2px;}
  .chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:4px 9px;border-radius:50px;}
  .chip.moss{background:var(--moss-tint);color:var(--moss-deep);}
  .chip.clay{background:var(--clay-tint);color:#8f3c22;}
  .chip.honey{background:var(--honey-tint);color:#8a5e0e;}
  .chip.plum{background:var(--plum-tint);color:#43386b;}

  .rowbtns{display:flex;gap:8px;margin-top:13px;}
  .btn{flex:1;border:none;border-radius:12px;padding:11px;font-family:'Albert Sans';font-size:13px;font-weight:600;cursor:pointer;transition:.2s;}
  .btn:active{transform:scale(.97);}
  .btn.primary{background:var(--moss);color:#fff;}
  .btn.ghost{background:transparent;border:1.5px solid var(--line-strong);color:var(--ink);}
  .btn.clay{background:var(--clay);color:#fff;}

  /* big help buttons (mamie, accessible) */
  .help-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
  .help-btn{
    background:var(--cream);border:2px solid var(--line-strong);border-radius:20px;
    padding:20px 14px;cursor:pointer;transition:.18s;text-align:center;
    display:flex;flex-direction:column;align-items:center;gap:9px;
    font-family:'Albert Sans';
  }
  .help-btn:active{transform:scale(.96);}
  .help-btn .he{
    width:60px;height:60px;border-radius:18px;display:flex;align-items:center;justify-content:center;
    font-size:30px;
  }
  .help-btn .hl{font-size:16px;font-weight:600;color:var(--ink);line-height:1.2;}
  .help-btn.big{grid-column:1 / -1;flex-direction:row;justify-content:center;gap:13px;padding:18px;background:var(--moss);border-color:var(--moss);}
  .help-btn.big .hl{color:#fff;font-size:17px;}
  .help-btn.big .he{background:rgba(255,255,255,.18);width:48px;height:48px;font-size:26px;}

  /* match request (student) */
  .match{background:var(--cream);border:1px solid var(--line);border-radius:var(--r);padding:15px;}
  .match+.match{margin-top:10px;}
  .match .top{display:flex;gap:12px;align-items:center;margin-bottom:11px;}
  .match .dist{font-size:12px;color:var(--ink-soft);}
  .needs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}

  /* ---- REWARDS ---- */
  .filter{display:flex;gap:7px;overflow-x:auto;padding:2px 2px 4px;margin:0 -2px 4px;}
  .filter::-webkit-scrollbar{height:0;}
  .filter button{
    flex:0 0 auto;border:1.5px solid var(--line-strong);background:var(--cream);
    font-family:'Albert Sans';font-size:12.5px;font-weight:600;color:var(--ink-soft);
    padding:8px 14px;border-radius:50px;cursor:pointer;transition:.2s;white-space:nowrap;
  }
  .filter button.on{background:var(--ink);color:var(--cream);border-color:var(--ink);}

  .reward{
    background:var(--cream);border:1px solid var(--line);border-radius:var(--r);
    padding:14px;display:flex;gap:13px;align-items:center;transition:.2s;
  }
  .reward+.reward{margin-top:10px;}
  .reward .ico{
    width:54px;height:54px;border-radius:15px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:26px;
  }
  .reward .info{flex:1;min-width:0;}
  .reward .info .t{font-weight:600;font-size:15px;}
  .reward .info .t .disc-pct{color:var(--clay);font-family:'Fraunces',serif;font-weight:600;font-size:16px;margin-right:3px;}
  .ticket-disc{font-family:'Fraunces',serif;font-size:46px;font-weight:600;color:var(--clay);line-height:1;margin-top:10px;}
  .reward .info .s{font-size:12px;color:var(--ink-soft);margin-top:2px;display:flex;align-items:center;gap:5px;}
  .reward .info .s .dot{width:3px;height:3px;border-radius:50%;background:var(--ink-faint);}
  .reward .act{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0;}
  .reward .cost{font-family:'Fraunces',serif;font-weight:600;font-size:16px;color:var(--moss-deep);white-space:nowrap;}
  .reward .cost small{font-size:11px;font-family:'Albert Sans';color:var(--ink-faint);font-weight:500;}
  .reward .claim{
    border:none;border-radius:10px;padding:7px 13px;font-family:'Albert Sans';
    font-size:12px;font-weight:600;cursor:pointer;background:var(--moss);color:#fff;transition:.2s;
  }
  .reward .claim:active{transform:scale(.95);}
  .reward .claim:disabled{background:var(--line-strong);color:var(--ink-faint);cursor:not-allowed;}

  /* active redemption ticket strip on rewards page */
  .active-ticket{
    border-radius:var(--r);padding:14px 15px;margin-bottom:14px;
    background:linear-gradient(135deg,#C98A1E,#a86f12);color:#fff;
    display:flex;align-items:center;gap:13px;cursor:pointer;
    box-shadow:0 14px 26px -16px rgba(168,111,18,.9);
  }
  .active-ticket .qrmini{width:46px;height:46px;border-radius:11px;background:#fff;padding:5px;flex-shrink:0;}
  .active-ticket .qrmini svg{width:100%;height:100%;display:block;}
  .active-ticket .at-t{flex:1;}
  .active-ticket .at-t .a{font-size:11px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:rgba(255,255,255,.8);}
  .active-ticket .at-t .b{font-weight:600;font-size:15px;margin-top:1px;}
  .active-ticket .arr{font-size:20px;color:rgba(255,255,255,.8);}

  /* profile */
  .pfhead{display:flex;flex-direction:column;align-items:center;text-align:center;padding:8px 0 4px;}
  .pfhead .pic{width:84px;height:84px;border-radius:28px;display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-weight:600;font-size:34px;color:#fff;box-shadow:0 12px 24px -12px rgba(36,31,26,.5);}
  .pfhead .nm{font-family:'Fraunces',serif;font-size:24px;font-weight:600;margin-top:12px;}
  .pfhead .rl{font-size:13px;color:var(--ink-soft);margin-top:2px;}
  .statgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;margin-top:18px;}
  .stat{background:var(--cream);border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 8px;text-align:center;}
  .stat .v{font-family:'Fraunces',serif;font-size:22px;font-weight:600;color:var(--moss-deep);}
  .stat .l{font-size:10.5px;color:var(--ink-soft);margin-top:2px;line-height:1.2;}
  .listrow{display:flex;align-items:center;gap:13px;background:var(--cream);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px;cursor:pointer;transition:.15s;}
  .listrow+.listrow{margin-top:8px;}
  .listrow:active{background:#f3eee2;}
  .listrow .li{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
  .listrow .lt{flex:1;}
  .listrow .lt .a{font-weight:600;font-size:14px;}
  .listrow .lt .b{font-size:12px;color:var(--ink-soft);margin-top:1px;}
  .listrow .ch{color:var(--ink-faint);font-size:18px;}

  .partner-strip{display:flex;flex-wrap:wrap;gap:7px;}
  .pp{display:flex;align-items:center;gap:6px;background:var(--cream);border:1px solid var(--line);border-radius:50px;padding:7px 12px;font-size:12.5px;font-weight:500;}

  /* ---- bottom tab bar ---- */
  .tabs{
    position:absolute;left:0;right:0;bottom:0;z-index:50;
    height:88px;padding:10px 14px 26px;
    background:linear-gradient(to top, var(--cream) 72%, rgba(251,248,241,0));
    display:flex;justify-content:space-around;align-items:center;
    border-top:1px solid var(--line);
  }
  .tab{background:none;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 10px;border-radius:14px;transition:.2s;flex:1;position:relative;}
  .tab svg{width:23px;height:23px;stroke:var(--ink-faint);fill:none;stroke-width:1.9;transition:.2s;}
  .tab span{font-size:10px;font-weight:600;color:var(--ink-faint);transition:.2s;}
  .tab.on svg{stroke:var(--moss);}
  .tab.on span{color:var(--moss-deep);}
  .tab .badge{position:absolute;top:1px;right:14px;background:var(--clay);color:#fff;font-size:9px;font-weight:700;min-width:16px;height:16px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;}

  /* ---- QR redemption modal ---- */
  .sheet-wrap{position:absolute;inset:0;z-index:80;display:none;}
  .sheet-wrap.on{display:block;}
  .sheet-bg{position:absolute;inset:0;background:rgba(20,16,12,.5);backdrop-filter:blur(3px);animation:fade .3s;}
  @keyframes fade{from{opacity:0;}to{opacity:1;}}
  .sheet{
    position:absolute;left:0;right:0;bottom:0;background:var(--cream);
    border-radius:30px 30px 42px 42px;padding:10px 22px 34px;
    animation:slideup .42s cubic-bezier(.2,.8,.2,1);max-height:94%;overflow-y:auto;
  }
  .sheet::-webkit-scrollbar{width:0;}
  @keyframes slideup{from{transform:translateY(100%);}to{transform:none;}}
  .grab{width:42px;height:5px;border-radius:5px;background:var(--line-strong);margin:6px auto 14px;}

  .qr-head{text-align:center;}
  .qr-head .biz{display:inline-flex;align-items:center;gap:8px;background:var(--moss-tint);color:var(--moss-deep);font-size:12px;font-weight:600;padding:6px 13px;border-radius:50px;}
  .qr-head h2{font-family:'Fraunces',serif;font-size:23px;font-weight:600;margin-top:13px;line-height:1.15;}
  .qr-head .item-sub{font-size:13.5px;color:var(--ink-soft);margin-top:5px;}

  .qrbox{
    margin:20px auto 8px;width:210px;height:210px;background:#fff;border-radius:22px;
    padding:16px;box-shadow:0 14px 30px -14px rgba(36,31,26,.4);position:relative;
  }
  .qrbox svg{width:100%;height:100%;display:block;}
  .qrbox .corner{position:absolute;width:22px;height:22px;border:3px solid var(--moss);}
  .qrbox .c1{top:9px;left:9px;border-right:none;border-bottom:none;border-radius:7px 0 0 0;}
  .qrbox .c2{top:9px;right:9px;border-left:none;border-bottom:none;border-radius:0 7px 0 0;}
  .qrbox .c3{bottom:9px;left:9px;border-right:none;border-top:none;border-radius:0 0 0 7px;}
  .qrbox .c4{bottom:9px;right:9px;border-left:none;border-top:none;border-radius:0 0 7px 0;}

  .qr-code-txt{text-align:center;font-family:'Fraunces',serif;font-size:19px;font-weight:600;letter-spacing:4px;color:var(--ink);}
  .qr-instr{text-align:center;font-size:13px;color:var(--ink-soft);margin-top:6px;line-height:1.5;padding:0 6px;}

  .qr-meta{display:flex;gap:8px;margin-top:16px;}
  .qr-meta .qm{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:13px;padding:11px;text-align:center;}
  .qr-meta .qm .k{font-size:10.5px;color:var(--ink-faint);font-weight:600;letter-spacing:.6px;text-transform:uppercase;}
  .qr-meta .qm .v{font-weight:600;font-size:14px;margin-top:3px;}
  .qr-meta .qm .v.timer{color:var(--clay);}

  .qr-done{width:100%;margin-top:18px;border:none;border-radius:14px;padding:14px;background:var(--ink);color:var(--cream);font-family:'Albert Sans';font-size:14px;font-weight:600;cursor:pointer;transition:.2s;}
  .qr-done:active{transform:scale(.98);}

  /* availability calendar */
  .avail-head{text-align:center;margin-bottom:4px;}
  .avail-head h2{font-family:'Fraunces',serif;font-size:23px;font-weight:600;}
  .avail-head p{font-size:13px;color:var(--ink-soft);margin-top:5px;line-height:1.5;padding:0 8px;}
  .slot-legend{display:flex;justify-content:center;gap:14px;margin:16px 0 12px;}
  .slot-legend span{font-size:11px;font-weight:600;color:var(--ink-faint);display:flex;align-items:center;gap:5px;}
  .slot-legend .dotg{width:9px;height:9px;border-radius:3px;background:var(--moss);}
  .avail-grid{display:flex;flex-direction:column;gap:7px;}
  .avail-colhead{display:grid;grid-template-columns:46px 1fr 1fr 1fr;gap:6px;padding:0 2px;}
  .avail-colhead div{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-faint);text-align:center;}
  .avail-colhead div:first-child{text-align:left;}
  .avail-row{display:grid;grid-template-columns:46px 1fr 1fr 1fr;gap:6px;align-items:stretch;}
  .avail-day{display:flex;align-items:center;font-size:13px;font-weight:600;color:var(--ink);}
  .slot{
    border:1.5px solid var(--line-strong);background:var(--cream);border-radius:11px;
    padding:11px 0;display:flex;align-items:center;justify-content:center;cursor:pointer;
    font-size:15px;transition:.18s;user-select:none;color:var(--ink-faint);
  }
  .slot:active{transform:scale(.93);}
  .slot.on{background:var(--moss);border-color:var(--moss);color:#fff;box-shadow:0 6px 12px -7px var(--moss-deep);}
  .avail-summary{margin-top:16px;padding:13px 15px;background:var(--plum-tint);border-radius:13px;display:flex;justify-content:space-between;align-items:center;}
  .avail-summary .as-l{font-size:12.5px;color:#43386b;font-weight:500;}
  .avail-summary .as-r{font-family:'Fraunces',serif;font-weight:600;font-size:16px;color:#43386b;}

  /* about & partners sheet */
  .about-head{text-align:center;margin-bottom:6px;}
  .about-head h2{font-family:'Fraunces',serif;font-size:23px;font-weight:600;}
  .about-head p{font-size:13px;color:var(--ink-soft);margin-top:6px;line-height:1.55;padding:0 6px;}
  .about-sec{font-size:11px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--ink-faint);margin:20px 2px 10px;}
  .pcard{display:flex;gap:13px;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:15px;padding:13px;}
  .pcard+.pcard{margin-top:8px;}
  .pcard .pi{width:46px;height:46px;border-radius:13px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:23px;}
  .pcard .pinf{flex:1;min-width:0;}
  .pcard .pinf .pn{font-weight:600;font-size:14.5px;}
  .pcard .pinf .pr{font-size:12px;color:var(--ink-soft);margin-top:2px;line-height:1.4;}
  .pcard .ptag{font-size:10px;font-weight:600;padding:4px 9px;border-radius:50px;flex-shrink:0;white-space:nowrap;}
  .biz-mini{display:flex;flex-wrap:wrap;gap:7px;}
  .biz-mini .bm{display:flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--line);border-radius:50px;padding:7px 12px;font-size:12.5px;font-weight:500;}
  .tech-row{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line);}
  .tech-row:last-child{border-bottom:none;}
  .tech-row .ti{font-size:18px;width:28px;flex-shrink:0;text-align:center;}
  .tech-row .tt .ta{font-weight:600;font-size:13.5px;}
  .tech-row .tt .tb{font-size:12px;color:var(--ink-soft);margin-top:2px;line-height:1.45;}
  .about-foot{text-align:center;font-size:11.5px;color:var(--ink-faint);margin-top:18px;line-height:1.5;}

  /* ----- matching live demo ----- */
  .match-demo{background:linear-gradient(160deg,#244733,#1a3527);border-radius:20px;padding:18px 16px 20px;color:#fff;position:relative;overflow:hidden;}
  .match-demo::after{content:"";position:absolute;right:-30px;top:-30px;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.05);}
  .md-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;position:relative;z-index:2;}
  .md-top .mt-t{font-family:'Fraunces',serif;font-size:16px;font-weight:600;}
  .md-replay{background:rgba(255,255,255,.16);border:none;color:#fff;font-family:'Albert Sans';font-size:12px;font-weight:600;padding:7px 13px;border-radius:50px;cursor:pointer;transition:.2s;display:flex;align-items:center;gap:5px;}
  .md-replay:active{transform:scale(.95);}

  /* the request being processed */
  .md-req{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.1);border-radius:14px;padding:11px 12px;position:relative;z-index:2;}
  .md-req .mr-av{width:40px;height:40px;border-radius:12px;background:var(--clay);display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-weight:600;font-size:17px;flex-shrink:0;}
  .md-req .mr-n{font-weight:600;font-size:14px;}
  .md-req .mr-d{font-size:11.5px;color:rgba(255,255,255,.7);margin-top:1px;}

  /* section mini-labels inside demo */
  .md-label{font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:rgba(255,255,255,.55);margin:15px 2px 9px;position:relative;z-index:2;}

  /* criteria checks (weighted) */
  .md-crit{display:flex;flex-direction:column;gap:6px;position:relative;z-index:2;}
  .crit{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.07);border-radius:11px;padding:9px 12px;opacity:.32;transform:translateX(-6px);transition:.4s;}
  .crit.lit{opacity:1;transform:none;background:rgba(255,255,255,.12);}
  .crit .cc{width:22px;height:22px;border-radius:7px;border:1.5px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;transition:.3s;}
  .crit.lit .cc{background:#7BC47F;border-color:#7BC47F;color:#1a3527;}
  .crit .cinfo{flex:1;min-width:0;}
  .crit .ct{font-size:12.5px;font-weight:500;display:flex;justify-content:space-between;align-items:center;}
  .crit .cw{font-size:11px;font-weight:700;color:#9FE0A2;background:rgba(123,196,127,.15);padding:2px 7px;border-radius:50px;margin-left:8px;}
  .crit .cbar{height:4px;border-radius:3px;background:rgba(255,255,255,.12);margin-top:6px;overflow:hidden;}
  .crit .cbar span{display:block;height:100%;width:0;background:#7BC47F;border-radius:3px;transition:width .6s ease;}
  .crit.lit .cbar span{width:var(--w);}

  /* candidate volunteers */
  .md-cands{display:flex;flex-direction:column;gap:7px;position:relative;z-index:2;}
  .cand{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);border:1.5px solid transparent;border-radius:12px;padding:9px 12px;opacity:0;transform:translateY(8px);transition:.45s;}
  .cand.show{opacity:1;transform:none;}
  .cand.win{background:rgba(123,196,127,.18);border-color:#7BC47F;}
  .cand .ca{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-weight:600;font-size:14px;flex-shrink:0;}
  .cand .cn{flex:1;font-size:13.5px;font-weight:600;}
  .cand .cd{font-size:11px;color:rgba(255,255,255,.65);font-weight:400;margin-top:1px;}
  .cand .cscore{font-family:'Fraunces',serif;font-weight:600;font-size:15px;display:flex;align-items:center;gap:5px;}
  .cand .cbadge{font-size:9px;font-weight:700;background:#7BC47F;color:#1a3527;padding:3px 7px;border-radius:50px;opacity:0;transition:.3s;}
  .cand.win .cbadge{opacity:1;}

  /* score breakdown */
  .md-breakdown{background:rgba(255,255,255,.07);border-radius:13px;padding:13px 14px;margin-top:12px;position:relative;z-index:2;opacity:0;max-height:0;overflow:hidden;transition:.5s;}
  .md-breakdown.show{opacity:1;max-height:260px;margin-top:12px;}
  .md-breakdown .mb-title{font-family:'Fraunces',serif;font-size:14px;font-weight:600;margin-bottom:9px;color:#fff;}
  .md-breakdown .mb-rows{display:grid;grid-template-columns:1fr 1fr;gap:5px 16px;}
  .md-breakdown .mb-row{display:flex;justify-content:space-between;font-size:12px;}
  .md-breakdown .mb-row span{color:rgba(255,255,255,.7);}
  .md-breakdown .mb-row b{color:#9FE0A2;font-weight:700;}

  .md-result{text-align:center;font-size:13.5px;font-weight:600;margin-top:13px;opacity:0;transition:.4s;position:relative;z-index:2;color:#9FE0A2;}
  .md-result.show{opacity:1;}
  .md-human{text-align:center;font-size:11px;color:rgba(255,255,255,.55);margin-top:9px;line-height:1.45;position:relative;z-index:2;padding:0 4px;}


  /* help request confirm (mamie, big and clear) */
  .help-confirm{text-align:center;padding:8px 4px 2px;}
  .help-confirm .hc-ico{width:84px;height:84px;border-radius:26px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;font-size:42px;}
  .help-confirm h2{font-family:'Fraunces',serif;font-size:26px;font-weight:600;line-height:1.15;}
  .help-confirm p{font-size:15px;color:var(--ink-soft);margin-top:12px;line-height:1.55;padding:0 6px;}
  .hc-send{width:100%;margin-top:24px;border:none;border-radius:18px;padding:18px;background:var(--moss);color:#fff;font-family:'Albert Sans';font-size:17px;font-weight:600;cursor:pointer;transition:.2s;}
  .hc-send:active{transform:scale(.97);}
  .hc-cancel{width:100%;margin-top:10px;border:none;border-radius:18px;padding:16px;background:transparent;color:var(--ink-soft);font-family:'Albert Sans';font-size:15px;font-weight:600;cursor:pointer;}

  /* confirm redeem (before generating qr) */
  .confirm-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-top:4px;display:flex;gap:13px;align-items:center;}
  .confirm-card .ci{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:25px;}
  .confirm-after{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding:13px 15px;background:var(--moss-tint);border-radius:13px;}
  .confirm-after .ca-l{font-size:12.5px;color:var(--moss-deep);font-weight:500;}
  .confirm-after .ca-r{font-family:'Fraunces',serif;font-weight:600;font-size:16px;color:var(--moss-deep);}

  .toast{
    position:absolute;left:50%;bottom:108px;transform:translateX(-50%) translateY(20px);
    background:var(--ink);color:var(--cream);font-size:13px;font-weight:500;
    padding:11px 18px;border-radius:50px;z-index:90;opacity:0;transition:.35s;white-space:nowrap;
    box-shadow:0 12px 24px -10px rgba(0,0,0,.5);display:flex;align-items:center;gap:8px;
  }
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

  .empty{text-align:center;color:var(--ink-faint);font-size:13px;padding:30px 0;}

  /* ===== CÔTÉ MAMIE : proposition de bénévole ===== */
  .card.propose{border:1.5px solid var(--clay);box-shadow:0 14px 30px -20px rgba(199,91,57,.6);}
  .propose-why{margin-top:13px;display:flex;flex-direction:column;gap:8px;
    background:var(--bg);border-radius:var(--r-sm);padding:13px 14px;}
  .propose-why .pw-row{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink);}
  .propose-why .pw-row span{font-size:17px;width:22px;text-align:center;flex-shrink:0;}
  .propose-q{font-family:'Fraunces',serif;font-size:17px;font-weight:600;text-align:center;margin:16px 4px 12px;line-height:1.3;}
  /* big clear buttons for mamie */
  .card.propose .rowbtns .btn{padding:15px;font-size:15.5px;}

  /* feuille de refus */
  .reason-list{display:flex;flex-direction:column;gap:9px;margin-top:6px;}
  .reason{
    width:100%;text-align:left;background:var(--cream);border:1.5px solid var(--line-strong);
    border-radius:14px;padding:16px 16px;font-family:'Albert Sans';font-size:15px;font-weight:600;
    color:var(--ink);cursor:pointer;transition:.18s;display:flex;align-items:center;gap:10px;
  }
  .reason:active{transform:scale(.98);background:#f3eee2;}

  /* ===== CÔTÉ MAMIE : avis sur la visite ===== */
  .rate-prompt{margin-top:13px;padding-top:13px;border-top:1px solid var(--line);text-align:center;}
  .rate-prompt .rp-q{font-size:14.5px;font-weight:600;color:var(--ink);margin-bottom:11px;}
  .rate-cta{
    width:100%;border:none;border-radius:14px;padding:15px;background:var(--honey);color:#fff;
    font-family:'Albert Sans';font-size:15.5px;font-weight:600;cursor:pointer;transition:.2s;
  }
  .rate-cta:active{transform:scale(.97);}

  /* avis déjà donné */
  .rated{margin-top:13px;padding-top:13px;border-top:1px solid var(--line);display:flex;align-items:center;gap:13px;}
  .rated-face{font-size:34px;line-height:1;}
  .rated-txt .rt-a{font-weight:600;font-size:15px;}
  .rated-txt .rt-b{font-size:12.5px;color:var(--ink-soft);margin-top:2px;}
  .rated-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px;}

  /* feuille de notation (gros visages) */
  .rate-head{text-align:center;padding:6px 4px 4px;}
  .rate-head h2{font-family:'Fraunces',serif;font-size:25px;font-weight:600;line-height:1.18;}
  .rate-head p{font-size:14.5px;color:var(--ink-soft);margin-top:10px;line-height:1.5;}
  .face-row{display:flex;gap:11px;margin-top:22px;}
  .face{
    flex:1;background:var(--cream);border:2.5px solid var(--line-strong);border-radius:20px;
    padding:18px 8px;cursor:pointer;transition:.18s;display:flex;flex-direction:column;align-items:center;gap:10px;
    font-family:'Albert Sans';
  }
  .face:active{transform:scale(.95);}
  .face.on{border-color:var(--moss);background:var(--moss-tint);}
  .face .fe{width:62px;height:62px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:34px;}
  .face .fl{font-size:14px;font-weight:600;color:var(--ink);}

  .rate-tags-wrap{margin-top:22px;}
  .rate-sub{font-size:13px;font-weight:600;color:var(--ink-soft);text-align:center;margin-bottom:12px;}
  .rate-tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
  .rtag{
    border:1.5px solid var(--line-strong);background:var(--cream);
    font-family:'Albert Sans';font-size:13.5px;font-weight:600;color:var(--ink-soft);
    padding:10px 15px;border-radius:50px;cursor:pointer;transition:.18s;
  }
  .rtag:active{transform:scale(.96);}
  .rtag.on{background:var(--moss);color:#fff;border-color:var(--moss);}

  /* coût en heures sous le prix d'une récompense */
  .reward .cost-hrs{font-size:10.5px;color:var(--ink-faint);font-weight:500;white-space:nowrap;margin-top:-2px;}

  /* bandeau d'explication du barème de points */
  .pts-rule{
    display:flex;gap:12px;align-items:flex-start;margin-top:14px;
    background:var(--honey-tint);border:1px solid rgba(201,138,30,.25);border-radius:var(--r);padding:14px 15px;
  }
  .pts-rule .pr-ic{font-size:22px;line-height:1;flex-shrink:0;}
  .pts-rule .pr-txt{font-size:13px;color:#7a5410;line-height:1.5;}
  .pts-rule .pr-txt b{color:#5e3f0b;}

  /* ===== Feuilles de paramètres ===== */
  .set-head{padding:4px 2px 14px;}
  .set-head h2{font-family:'Fraunces',serif;font-size:24px;font-weight:600;line-height:1.15;}
  .set-head p{font-size:14px;color:var(--ink-soft);margin-top:10px;line-height:1.5;}
  .set-save{
    width:100%;margin-top:20px;border:none;border-radius:16px;padding:16px;background:var(--moss);
    color:#fff;font-family:'Albert Sans';font-size:16px;font-weight:600;cursor:pointer;transition:.2s;
  }
  .set-save:active{transform:scale(.97);}
  .set-note{font-size:12.5px;color:var(--ink-faint);line-height:1.5;margin-top:14px;padding:0 2px;}

  /* interrupteur */
  .set-toggle{display:flex;align-items:center;gap:13px;background:var(--cream);border:1px solid var(--line);
    border-radius:var(--r-sm);padding:13px 14px;}
  .set-toggle+.set-toggle{margin-top:8px;}
  .set-toggle .li{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
  .set-toggle .tg-lbl{flex:1;font-weight:600;font-size:14.5px;}
  .switch{width:48px;height:28px;border-radius:50px;border:none;background:var(--line-strong);position:relative;cursor:pointer;transition:.22s;flex-shrink:0;padding:0;}
  .switch span{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:.22s;box-shadow:0 2px 5px -1px rgba(0,0,0,.3);}
  .switch.on{background:var(--moss);}
  .switch.on span{left:23px;}

  /* FAQ */
  .faq{background:var(--cream);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 15px;}
  .faq+.faq{margin-top:9px;}
  .faq-q{font-weight:600;font-size:14.5px;}
  .faq-a{font-size:13px;color:var(--ink-soft);margin-top:6px;line-height:1.55;}

  @media (max-width:430px){
    body{padding:14px 0 30px;}
    .phone{border-radius:0;padding:0;width:100%;height:auto;min-height:100vh;box-shadow:none;}
    .screen{border-radius:0;min-height:100vh;}
    .intro{padding:0 16px;}
}