/* Fit Fête shared styles */
  :root{
    --bg: #004750;             /* fit fête PULSE teal */
    --bg-deep: #00323a;
    --panel: #0b5662;
    --panel-2: #11626e;
    --ink: #f3f8f6;
    --muted: #9ac3c2;
    --flame: #74BD43;             /* fit fête green flame */
    --flame-deep: #5fa336;
    --gold: #FF671D;              /* points */
    --mint: #B9D89A;
    --line: rgba(154,195,194,.28);
    --radius: 22px;
    --pad: 20px;
  }
  *{box-sizing:border-box; margin:0}
  html{-webkit-text-size-adjust:100%; background:var(--bg-deep)}
  body{
    background:transparent;
    color:var(--ink);
    font-family:"Archivo",-apple-system,sans-serif;
    font-size:16px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
    padding-bottom:100px;
    overscroll-behavior-y:none;
  }
  /* iOS Safari: background-attachment:fixed forces repaints that drag a position:fixed
     nav up/down on scroll. Paint the fixed gradient on a pinned layer instead. */
  body::before{content:""; position:fixed; inset:0; z-index:-1;
    background:linear-gradient(175deg, var(--bg) 0%, var(--bg-deep) 100%);}
  .wrap{max-width:430px; margin:0 auto; padding:0 var(--pad)}

  /* ---------- header ---------- */
  header{padding:max(22px, env(safe-area-inset-top)) 0 0}
  .brandline{display:flex; align-items:center; justify-content:space-between}
  .brand{display:flex; align-items:center; gap:10px}
  .brand .torch{width:30px;height:30px}
  .brand .name{font-weight:800; font-size:17px; letter-spacing:-0.01em; line-height:1.1}
  .brand .name small{display:block; font-size:9.5px; font-weight:700; letter-spacing:.16em; color:var(--muted)}
  .countdown{text-align:right; font-size:11.5px; font-weight:600; color:var(--muted); line-height:1.35}
  .countdown b{display:block; font-size:14px; color:var(--flame); font-weight:800}

  h1.greet{
    margin-top:22px;
    font-size:34px; font-weight:800; line-height:1.06; letter-spacing:-0.025em;
    text-wrap:balance;
  }
  h1.greet em{font-style:normal; color:var(--gold)}

  /* ---------- points hero ---------- */
  .points{
    margin-top:22px; border-radius:var(--radius);
    background:var(--panel);
    padding:18px var(--pad);
    display:flex; align-items:center; gap:18px;
  }
  .points .num{font-size:52px; font-weight:800; letter-spacing:-0.04em; line-height:1; color:var(--gold); font-variant-numeric:tabular-nums}
  .points .ctx{font-size:13px; color:var(--muted); font-weight:500; line-height:1.45}
  .points .ctx b{color:var(--ink); font-weight:700}

  /* ---------- challenges ---------- */
  h2.sec{font-size:12.5px; font-weight:700; letter-spacing:.05em; color:var(--muted); margin:26px 0 12px}
  .challenge{
    border-radius:var(--radius); background:var(--panel);
    padding:16px var(--pad); margin-bottom:10px;
    display:flex; align-items:center; gap:14px;
  }
  .challenge .ico{
    flex:0 0 44px; height:44px; border-radius:14px;
    display:flex; align-items:center; justify-content:center;
  }
  .challenge .ico svg{width:22px;height:22px}
  .challenge:nth-child(odd) .ico{background:oklch(0.40 0.09 40)}
  .challenge .body{flex:1; min-width:0}
  .challenge .top{display:flex; justify-content:space-between; align-items:baseline; gap:8px}
  .challenge .top b{font-size:14.5px; font-weight:700; letter-spacing:-0.01em; white-space:nowrap}
  .challenge .pts{font-size:11.5px; font-weight:800; color:var(--gold); white-space:nowrap}
  .challenge .sub{font-size:12px; color:var(--muted); font-weight:500; margin-top:1px}
  .challenge .track{margin-top:9px; height:7px; border-radius:4px; background:oklch(0.26 0.05 262); overflow:hidden}
  .challenge .fill{height:100%; width:0%; border-radius:4px; background:var(--flame); transition:width .9s cubic-bezier(.16,1,.3,1)}
  .ch-steps .ico{background:oklch(0.42 0.1 38)}
  .ch-steps .ico svg{stroke:oklch(0.92 0.06 45)}
  .ch-sleep .ico{background:oklch(0.40 0.08 285)}
  .ch-sleep .ico svg{stroke:oklch(0.88 0.05 285)}
  .ch-sleep .fill{background:oklch(0.70 0.12 295)}
  .ch-water .ico{background:oklch(0.42 0.08 220)}
  .ch-water .ico svg{stroke:oklch(0.90 0.05 220)}
  .ch-water .fill{background:oklch(0.74 0.10 215)}
  .ch-snack .ico{background:oklch(0.44 0.09 150)}
  .ch-snack .ico svg{stroke:oklch(0.90 0.06 155)}
  .ch-snack .fill{background:var(--mint)}
  .challenge .check{
    flex:0 0 auto; padding:9px 14px; border:none; border-radius:11px;
    background:var(--flame); color:#fff;
    font-family:inherit; font-size:12.5px; font-weight:800; cursor:pointer;
    letter-spacing:.01em;
  }
  .challenge .check.done{background:transparent; border:1.5px solid var(--line); color:var(--mint)}
  .challenge .check:active{transform:scale(.96)}

  /* ---------- team leaderboard ---------- */
  .board{
    border-radius:var(--radius); background:var(--panel);
    padding:8px 0 4px; overflow:hidden;
  }
  .board .row{
    display:flex; align-items:center; gap:13px;
    padding:12px var(--pad);
  }
  .board .row + .row{border-top:1px solid var(--line)}
  .board .rank{flex:0 0 26px; font-size:14px; font-weight:800; color:var(--muted); font-variant-numeric:tabular-nums; text-align:center}
  .board .row.you .rank{color:var(--gold)}
  .board .team{flex:1; min-width:0; font-size:14.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .board .team small{display:block; font-size:11.5px; color:var(--muted); font-weight:500}
  .board .score{font-size:14.5px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--muted)}
  .board .row.you{background:oklch(0.36 0.07 50 / .35)}
  .board .row.you .team, .board .row.you .score{color:var(--ink)}
  .board .row.you .team small{color:var(--gold); font-weight:700}
  /* company logo / initials chip — real logo (img) overlays initials; img onerror reveals initials */
  .cmono{flex:0 0 30px; width:30px; height:30px; border-radius:50%; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; font-size:11.5px; font-weight:800; letter-spacing:-0.02em; color:#fff}
  .cmono img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#fff}
  .pod .cmono{width:36px; height:36px; margin:0 auto 7px; font-size:13px}

  /* ---------- unlock CTA ---------- */
  .unlock{
    margin-top:26px; border-radius:var(--radius);
    background:linear-gradient(135deg, oklch(0.62 0.19 38), oklch(0.55 0.18 28));
    padding:22px var(--pad);
  }
  .unlock h3{font-size:21px; font-weight:800; letter-spacing:-0.02em; line-height:1.2; text-wrap:balance}
  .unlock p{margin-top:7px; font-size:13.5px; line-height:1.5; color:oklch(0.95 0.03 40); font-weight:500; max-width:36ch}
  .unlock button{
    margin-top:15px; width:100%; padding:15px; border:none; border-radius:13px;
    background:oklch(0.985 0.005 250); color:oklch(0.40 0.16 33);
    font-family:inherit; font-size:15px; font-weight:800; cursor:pointer;
  }
  .unlock button:active{transform:scale(.985)}

  .powered{
    margin-top:18px; text-align:center;
    font-size:12px; font-weight:600; color:var(--muted);
  }
  .powered b{color:var(--ink)}

  /* ---------- nav ---------- */
  nav{
    position:fixed; bottom:0; left:0; right:0; z-index:10;
    background:oklch(0.23 0.05 263 / .92);
    -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
    border-top:1px solid var(--line);
    padding:8px 0 max(8px, env(safe-area-inset-bottom));
  }
  nav .row{max-width:430px; margin:0 auto; display:flex}
  nav a{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
    color:var(--muted); text-decoration:none; font-size:10.5px; font-weight:600;
    padding:4px 0;
  }
  nav a svg{width:21px;height:21px;stroke:currentColor}
  nav a.on{color:var(--flame)}

  @media (prefers-reduced-motion: reduce){ .challenge .fill{transition:none} }