/* ===================================================================
   Helm marketing — product SHOWCASE kit
   Reusable across all marketing pages. Renders faithful, light-theme
   app mockups inside device frames on the dark marketing canvas, plus
   an SVG icon system to replace emoji feature bullets.
   Depends on tokens from marketing.css (:root --navy, --gold, etc.).
=================================================================== */

/* ---- SVG icon feature bullets (replace emoji .fi) ---------------- */
.ico-badge{width:46px;height:46px;border-radius:13px;background:var(--gold-tint);
  border:1px solid rgba(230,184,66,0.3);display:grid;place-items:center;flex:none;}
.ico-badge svg{width:24px;height:24px;stroke:var(--gold);stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round;display:block;}
.feat.feat-ico{display:flex;flex-direction:column;gap:0.35rem;}
.feat.feat-ico .ico-badge{margin-bottom:0.55rem;}

/* ---- Showcase section: alternating text + device rows ------------ */
html,body{overflow-x:hidden;}
.showcase{max-width:1180px;margin:0 auto;padding:1.25rem 1.5rem 0.5rem;}
.show-row{display:grid;grid-template-columns:1fr 1fr;gap:2.75rem;align-items:center;
  padding:2rem 0;}
.show-row.reverse .show-copy{order:2;}
.show-row.reverse .show-art{order:1;}
.show-copy .eyebrow{margin-bottom:0.9rem;}
.show-copy h3{font-family:'Sora',sans-serif;font-size:clamp(1.5rem,2.4vw,2.05rem);
  font-weight:800;letter-spacing:-0.02em;line-height:1.08;margin-bottom:0.7rem;}
.show-copy h3 .accent{color:var(--gold);}
.show-copy p{color:var(--mist);font-size:1.02rem;line-height:1.55;max-width:42ch;margin-bottom:1rem;}
.show-list{list-style:none;padding:0;margin:0 0 1.2rem;display:grid;gap:0.5rem;}
.show-list li{display:flex;align-items:flex-start;gap:0.6rem;color:var(--mist);font-size:0.95rem;line-height:1.4;}
.show-list li svg{width:18px;height:18px;stroke:var(--gold);stroke-width:2.4;fill:none;
  stroke-linecap:round;stroke-linejoin:round;flex:none;margin-top:0.15rem;}
.show-art{display:flex;justify-content:center;align-items:center;position:relative;}

/* soft glow behind a framed device */
.show-art::before{content:'';position:absolute;width:78%;height:70%;border-radius:50%;
  background:radial-gradient(circle,rgba(230,184,66,0.14) 0%,transparent 70%);filter:blur(10px);z-index:0;}
.show-art.glow-green::before{background:radial-gradient(circle,rgba(135,210,146,0.16) 0%,transparent 70%);}
.show-art.glow-blue::before{background:radial-gradient(circle,rgba(108,171,239,0.16) 0%,transparent 70%);}
.show-art.glow-purple::before{background:radial-gradient(circle,rgba(184,155,232,0.16) 0%,transparent 70%);}

/* ---- Device frames ---------------------------------------------- */
/* Phone */
.phone{position:relative;z-index:1;width:296px;max-width:100%;background:#0B1220;
  border-radius:2.4rem;padding:0.62rem;box-shadow:0 30px 70px rgba(0,0,0,0.5),
  inset 0 0 0 2px rgba(255,255,255,0.05);}
.phone::before{content:'';position:absolute;top:0.62rem;left:50%;transform:translateX(-50%);
  width:38%;height:1.15rem;background:#0B1220;border-radius:0 0 0.9rem 0.9rem;z-index:3;}
.phone .screen{position:relative;border-radius:1.85rem;overflow:hidden;background:var(--app-paper);
  min-height:468px;display:flex;flex-direction:column;}

/* Browser / app window (desktop views) */
.window{position:relative;z-index:1;width:100%;max-width:560px;border-radius:1.1rem;overflow:hidden;
  background:var(--app-surface);box-shadow:0 30px 70px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.06);}
.window .bar{height:38px;background:#0F1A2E;display:flex;align-items:center;gap:0.4rem;padding:0 0.9rem;}
.window .bar i{width:11px;height:11px;border-radius:50%;background:#3a4a63;display:block;}
.window .bar i:nth-child(1){background:#ff5f57;} .window .bar i:nth-child(2){background:#febc2e;} .window .bar i:nth-child(3){background:#28c840;}
.window .bar .url{margin-left:0.7rem;font-size:0.72rem;color:#8fa0ba;background:#1a2740;
  border-radius:7px;padding:0.22rem 0.7rem;font-family:'Inter',sans-serif;}
.window .screen{background:var(--app-paper);min-height:340px;}

/* ---- LIGHT-THEME app UI kit (scoped inside .screen) --------------
   Mirrors the real in-app light theme so mockups read as the product. */
.screen{--app-paper:#F6F8FB;--app-surface:#FFFFFF;--app-navy:#1A2C4D;--app-navy-deep:#0F1A2E;
  --app-gold:#E6B842;--app-tx:#14203A;--app-mut:#61708A;--app-rl:#E7ECF3;
  color:var(--app-tx);font:400 13px/1.4 'Inter',system-ui,sans-serif;text-align:left;}
.screen *{box-sizing:border-box;}
.app-hero{background:linear-gradient(135deg,var(--app-navy) 0%,var(--app-navy-deep) 100%);
  color:#fff;padding:0.9rem 1rem;}
.app-hero.warm{background:linear-gradient(120deg,#F6A94B 0%,#EE8B4B 100%);}
.app-hero .t{font-family:'Sora',sans-serif;font-weight:800;font-size:1.05rem;letter-spacing:-0.01em;}
.app-hero .s{font-size:0.76rem;opacity:0.82;margin-top:0.15rem;}
.app-hero .clock{font-family:'Sora',sans-serif;font-weight:800;font-size:1.5rem;text-align:center;letter-spacing:-0.01em;}
.app-hero .clock .d{font-size:0.72rem;font-weight:600;opacity:0.85;letter-spacing:0.02em;}
.app-pad{padding:0.85rem 0.9rem;display:flex;flex-direction:column;gap:0.7rem;flex:1;overflow:hidden;}
.app-sec-h{font-family:'Sora',sans-serif;font-weight:800;font-size:0.9rem;color:var(--app-tx);}
.app-card{background:var(--app-surface);border:1px solid var(--app-rl);border-radius:0.85rem;
  padding:0.75rem 0.8rem;box-shadow:0 1px 2px rgba(20,32,58,0.04);}
.app-muted{color:var(--app-mut);}

/* chips / tabs */
.app-chips{display:flex;gap:0.4rem;flex-wrap:wrap;}
.app-chip{font-size:0.72rem;font-weight:600;padding:0.28rem 0.65rem;border-radius:999px;
  background:var(--app-surface);border:1px solid var(--app-rl);color:var(--app-mut);}
.app-chip.on{background:var(--app-navy);color:#fff;border-color:var(--app-navy);}
.app-chip.gold{background:var(--app-gold);color:#3a2c05;border-color:var(--app-gold);}

/* avatar row (members) */
.app-people{display:flex;gap:0.75rem;justify-content:space-between;}
.app-person{display:flex;flex-direction:column;align-items:center;gap:0.3rem;font-size:0.7rem;font-weight:700;color:var(--app-tx);}
.app-av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#c9d4e6,#9fb0cc);
  position:relative;box-shadow:0 2px 6px rgba(20,32,58,0.15);overflow:hidden;}
.app-av.ring{padding:2px;background:linear-gradient(135deg,var(--app-gold),#F4D580);}
.app-av.ring::after{content:'';position:absolute;inset:2px;border-radius:50%;background:#c9d4e6;}
.app-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 8%;
  transform:scale(2.3);transform-origin:center 16%;z-index:1;}
.app-av.ring img{inset:2px;width:calc(100% - 4px);height:calc(100% - 4px);border-radius:50%;}
.app-av .dot{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;border:2px solid #fff;z-index:2;}
.app-av .dot.g{background:#3fbf6b;} .app-av .dot.b{background:#5aa0f0;} .app-av .dot.o{background:#f0a93f;} .app-av .dot.r{background:#ef5f66;}

/* toggle rows (controls) */
.app-row{display:flex;align-items:center;justify-content:space-between;gap:0.6rem;}
.app-row .lbl{font-size:0.8rem;font-weight:600;color:var(--app-tx);}
.app-row .sub{font-size:0.68rem;color:var(--app-mut);margin-top:0.1rem;}
.app-toggle{width:38px;height:22px;border-radius:999px;background:#d3dbe8;position:relative;flex:none;}
.app-toggle.on{background:var(--app-gold);}
.app-toggle::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,0.2);transition:left .2s;}
.app-toggle.on::after{left:18px;}

/* bar meter (screen time / split) */
.app-meter{height:8px;border-radius:999px;background:#e6ecf4;overflow:hidden;}
.app-meter i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--app-gold),#F4D580);}

/* stat blocks */
.app-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0.55rem;}
.app-stat{background:var(--app-surface);border:1px solid var(--app-rl);border-radius:0.7rem;padding:0.55rem 0.5rem;text-align:center;}
.app-stat b{font-family:'Sora',sans-serif;font-size:1.15rem;color:var(--app-tx);display:block;line-height:1;}
.app-stat span{font-size:0.62rem;color:var(--app-mut);text-transform:uppercase;letter-spacing:0.04em;}

/* split ladder rungs */
.app-rungs{display:grid;grid-template-columns:repeat(5,1fr);gap:0.4rem;}
.app-rung{border:1px solid var(--app-rl);border-radius:0.6rem;padding:0.5rem 0.3rem;text-align:center;background:var(--app-surface);}
.app-rung.on{border-color:var(--app-gold);background:var(--gold-tint);}
.app-rung b{font-family:'Sora',sans-serif;font-size:0.9rem;color:var(--app-tx);display:block;}
.app-rung span{font-size:0.56rem;color:var(--app-mut);}

/* gift gallery tiles */
.app-gifts{display:grid;grid-template-columns:repeat(4,1fr);gap:0.45rem;}
.app-gift{background:var(--app-surface);border:1px solid var(--app-rl);border-radius:0.6rem;padding:0.5rem 0.2rem;text-align:center;}
.app-gift .g{font-size:1.15rem;line-height:1;}
.app-gift .p{font-size:0.6rem;font-weight:700;color:var(--app-gold);margin-top:0.15rem;}

/* live view mock — faithful to the real mobile live-view.html */
.app-live{position:relative;flex:1;min-height:468px;display:flex;flex-direction:column;justify-content:flex-end;
  background-size:cover;background-position:center 28%;overflow:hidden;}
.app-live::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0.34) 0%,transparent 24%,transparent 50%,rgba(0,0,0,0.66) 100%);}
/* creator chip (top-left) */
.app-live .lvc{position:absolute;top:0.6rem;left:0.6rem;z-index:3;display:flex;align-items:center;gap:0.4rem;
  background:rgba(0,0,0,0.42);backdrop-filter:blur(6px);border-radius:999px;padding:0.2rem 0.35rem 0.2rem 0.2rem;}
.app-live .lvc .av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--app-gold),#F4D580);
  padding:2px;position:relative;overflow:hidden;flex:none;}
.app-live .lvc .av img{position:absolute;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px);border-radius:50%;
  object-fit:cover;object-position:center 10%;transform:scale(1.9);transform-origin:center 16%;}
.app-live .lvc .nm{color:#fff;font-weight:700;font-size:0.74rem;line-height:1.1;display:block;}
.app-live .lvc .lk{color:rgba(255,255,255,0.9);font-size:0.64rem;font-weight:600;}
.app-live .lvc .lk b{color:#ff5a7a;}
.app-live .lvc .fol{background:var(--app-gold);color:#3a2c05;font-weight:800;font-size:0.62rem;padding:0.24rem 0.55rem;border-radius:999px;margin-left:0.15rem;}
/* viewers + gifters (top-right) */
.app-live .lvtr{position:absolute;top:0.6rem;right:0.6rem;z-index:3;display:flex;flex-direction:column;align-items:flex-end;gap:0.35rem;}
.app-live .lvtr .vw{background:rgba(0,0,0,0.5);color:#fff;font-size:0.64rem;font-weight:700;padding:0.2rem 0.5rem;border-radius:999px;backdrop-filter:blur(4px);}
.app-live .lvtr .gfrow{display:flex;}
.app-live .lvtr .gf{width:20px;height:20px;border-radius:50%;border:1.5px solid rgba(255,255,255,0.7);margin-left:-6px;background:#cbd6e8;overflow:hidden;}
.app-live .lvtr .gf img{width:100%;height:100%;object-fit:cover;object-position:center 10%;transform:scale(1.8);transform-origin:center 16%;}
/* lock / rank pill */
.app-live .lvpill{position:absolute;top:2.65rem;left:0.6rem;z-index:3;display:inline-flex;align-items:center;gap:0.28rem;
  background:rgba(10,17,30,0.55);border:1px solid rgba(230,184,66,0.4);color:#fff;font-size:0.62rem;font-weight:700;
  padding:0.2rem 0.55rem;border-radius:999px;backdrop-filter:blur(6px);}
.app-live .lvpill .fl{color:var(--app-gold);}
/* floating tap heart */
.app-live .lvheart{position:absolute;right:0.8rem;bottom:5.6rem;z-index:3;font-size:1.15rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5));}
/* chat over video (bottom-left) */
.app-live .lvchat{position:relative;z-index:3;padding:0 0.7rem 0.35rem;display:flex;flex-direction:column;gap:0.28rem;}
.app-live .lvchat .m{font-size:0.66rem;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,0.85);max-width:82%;line-height:1.25;}
.app-live .lvchat .m b{color:var(--app-gold);font-weight:700;}
/* composer */
.app-live .lvcomp{position:relative;z-index:3;display:flex;gap:0.35rem;align-items:center;padding:0.35rem 0.6rem 0.6rem;}
.app-live .lvcomp .inp{flex:1;background:rgba(255,255,255,0.16);border-radius:999px;color:rgba(255,255,255,0.85);font-size:0.64rem;padding:0.42rem 0.72rem;}
.app-live .lvcomp .ic{width:27px;height:27px;border-radius:50%;background:rgba(255,255,255,0.16);display:grid;place-items:center;font-size:0.88rem;flex:none;}
.app-live .lvcomp .ic.gift{background:var(--app-gold);color:#3a2c05;font-weight:800;}

/* dashboard warm header: greeting bubble + centered clock + back button */
.app-hero.warm{position:relative;padding:0.7rem 0.6rem 0.8rem;}
.app-greet{position:absolute;top:0.6rem;left:0.55rem;display:flex;align-items:center;gap:0.35rem;max-width:62%;}
.app-greet .mb{width:26px;height:26px;border-radius:50%;background:#7ececa;display:grid;place-items:center;font-size:0.8rem;flex:none;box-shadow:0 2px 5px rgba(0,0,0,0.15);}
.app-greet .bub{background:rgba(255,255,255,0.94);color:#8a5414;font-size:0.55rem;font-weight:600;border-radius:0.6rem;padding:0.24rem 0.5rem;line-height:1.2;}
.app-hero.warm .back{position:absolute;top:0.7rem;right:0.6rem;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,0.9);color:#8a5414;display:grid;place-items:center;font-size:0.85rem;font-weight:700;}
.app-hero.warm .clock{margin-top:1.5rem;}
/* today's events head + avatar row helpers */
.app-evhead{display:flex;align-items:center;justify-content:space-between;}
.app-evhead .cal{color:var(--app-mut);font-size:0.95rem;}
.app-people .navbtn{width:40px;height:40px;border-radius:50%;background:var(--app-surface);border:1px solid var(--app-rl);display:grid;place-items:center;color:var(--app-mut);font-size:0.95rem;flex:none;}
/* day timeline (matches parent.html) */
.app-tl{background:var(--app-surface);border:1px solid var(--app-rl);border-radius:0.7rem;overflow:hidden;}
.app-tl .row{display:grid;grid-template-columns:32px 1fr;border-top:1px solid var(--app-rl);min-height:24px;position:relative;}
.app-tl .row:first-child{border-top:0;}
.app-tl .hh{font-size:0.56rem;color:var(--app-mut);padding:0.16rem 0.3rem;font-weight:600;}
.app-tl .slot{padding:0.12rem 0.35rem 0.12rem 0;}
.app-tl .ev{font-size:0.6rem;font-weight:700;color:#fff;border-radius:5px;padding:0.16rem 0.42rem;display:inline-block;}
.app-tl .ev.soccer{background:#4CAF7D;} .app-tl .ev.music{background:#5aa0f0;} .app-tl .ev.family{background:#E87F92;}
.app-tl .row.now::after{content:'11:08';position:absolute;top:-1px;left:0;right:0;height:2px;background:#ef4444;
  color:#ef4444;font-size:0;}
.app-tl .row.now .nowdot{position:absolute;left:30px;top:-4px;width:8px;height:8px;border-radius:50%;background:#ef4444;z-index:2;}
.app-tl .row.now .nowlab{position:absolute;left:0;top:-6px;background:#ef4444;color:#fff;font-size:0.5rem;font-weight:800;padding:0 0.22rem;border-radius:3px;z-index:2;}

/* dock (family dashboard bottom nav) */
.app-dock{display:flex;justify-content:center;gap:0.7rem;padding:0.6rem;background:var(--app-surface);border-top:1px solid var(--app-rl);}
.app-dock .di{width:34px;height:34px;border-radius:0.6rem;display:grid;place-items:center;font-size:1rem;color:#fff;}
.app-dock .di.b{background:#5aa0f0;} .app-dock .di.o{background:#f0a93f;} .app-dock .di.r{background:#ef7a6b;} .app-dock .di.g{background:#4bbf83;}

/* small feed post */
.app-post .top{display:flex;align-items:center;gap:0.45rem;margin-bottom:0.5rem;}
.app-post .top b{font-size:0.76rem;}
.app-post .media{height:96px;border-radius:0.55rem;background:linear-gradient(135deg,#cdd8ea,#aebdd6);}
.app-post .acts{display:flex;gap:0.9rem;margin-top:0.5rem;color:var(--app-mut);font-size:0.72rem;font-weight:700;}
.app-post .media.photo{background-size:cover;background-position:center;height:150px;}

/* feed screen: topbar + story rail + posts */
.app-topbar{display:flex;align-items:center;justify-content:space-between;padding:0.55rem 0.8rem;background:var(--app-surface);border-bottom:1px solid var(--app-rl);}
.app-topbar .lg{font-family:'Sora',sans-serif;font-weight:800;color:var(--app-navy);font-size:1.05rem;}
.app-topbar .lg-img{height:19px;width:auto;display:block;}
.app-topbar .ic{color:var(--app-mut);font-size:0.95rem;letter-spacing:0.25rem;}
.app-stories{display:flex;gap:0.7rem;padding:0.6rem 0.7rem;background:var(--app-surface);border-bottom:1px solid var(--app-rl);overflow:hidden;}
.app-story{display:flex;flex-direction:column;align-items:center;gap:0.22rem;font-size:0.58rem;color:var(--app-mut);flex:none;}
.app-story .r{width:42px;height:42px;border-radius:50%;padding:2px;background:linear-gradient(135deg,var(--app-gold),#F4D580);position:relative;overflow:hidden;}
.app-story .r.plus{background:var(--app-rl);display:grid;place-items:center;color:var(--app-mut);font-size:1.1rem;}
.app-story .r img{position:absolute;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px);border-radius:50%;object-fit:cover;transform:scale(1.9);transform-origin:center 15%;}
/* explore-style category pill menu */
.app-pills{display:flex;gap:0.35rem;padding:0.5rem 0.7rem;background:var(--app-surface);border-bottom:1px solid var(--app-rl);overflow:hidden;}
.app-pill{font-size:0.64rem;font-weight:700;padding:0.3rem 0.72rem;border-radius:999px;background:var(--app-paper);border:1px solid var(--app-rl);color:var(--app-mut);white-space:nowrap;flex:none;}
.app-pill.on{background:var(--app-tx);color:#fff;border-color:var(--app-tx);}
.app-feedpost{background:var(--app-surface);border-bottom:1px solid var(--app-rl);padding:0.6rem 0.75rem 0.7rem;}
.app-feedpost .ph{display:flex;align-items:center;gap:0.45rem;margin-bottom:0.5rem;}
.app-feedpost .ph .a{width:28px;height:28px;border-radius:50%;overflow:hidden;background:#cdd8ea;position:relative;flex:none;}
.app-feedpost .ph .a img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.9);transform-origin:center 15%;}
.app-feedpost .ph b{font-size:0.76rem;color:var(--app-tx);}
.app-feedpost .ph .t{font-size:0.62rem;color:var(--app-mut);margin-left:auto;}
.app-feedpost .pm{height:158px;border-radius:0.6rem;background-size:cover;background-position:center;background-color:#cdd8ea;}
.app-feedpost .pa{display:flex;gap:1rem;margin-top:0.5rem;font-size:0.9rem;}
.app-feedpost .pa .l{color:#ff5a7a;} .app-feedpost .pa .c,.app-feedpost .pa .s{color:var(--app-mut);}
.app-feedpost .cap{font-size:0.7rem;color:var(--app-tx);margin-top:0.4rem;line-height:1.35;}
.app-feedpost .cap b{font-weight:700;}

/* profile screen */
.app-pfhead{background:var(--app-surface);text-align:center;padding:0.95rem 0.8rem 0.85rem;border-bottom:1px solid var(--app-rl);}
.app-pfhead .av{width:66px;height:66px;border-radius:50%;margin:0 auto 0.5rem;padding:2.5px;position:relative;overflow:hidden;
  background:conic-gradient(#FF3D8E,#FAB72A,#6CCB78,#38BCDB,#9333EA,#FF3D8E);}
.app-pfhead .av.sapphire{background:#2F80ED;}
.app-pfhead .av.plain{background:#c9d4e6;}
.app-pfhead .av img{position:absolute;inset:2.5px;width:calc(100% - 5px);height:calc(100% - 5px);border-radius:50%;object-fit:cover;transform:scale(1.9);transform-origin:center 14%;}
.app-pfhead .nm{font-family:'Sora',sans-serif;font-weight:800;font-size:0.98rem;color:var(--app-tx);}
.app-pfhead .hd{font-size:0.7rem;color:var(--app-mut);margin-bottom:0.1rem;}
.app-pfstats{display:flex;justify-content:center;gap:1.4rem;margin:0.55rem 0;}
.app-pfstats div{text-align:center;}
.app-pfstats b{display:block;font-family:'Sora',sans-serif;font-weight:800;font-size:0.9rem;color:var(--app-tx);}
.app-pfstats span{font-size:0.6rem;color:var(--app-mut);text-transform:uppercase;letter-spacing:0.03em;}
.app-pffollow{background:var(--app-gold);color:#3a2c05;font-weight:800;font-size:0.74rem;padding:0.4rem 1.6rem;border-radius:999px;display:inline-block;}
.app-pfbio{font-size:0.68rem;color:var(--app-mut);margin-top:0.5rem;}
.app-pfgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;}
.app-pfgrid .c{aspect-ratio:1;background-size:cover;background-position:center;background-color:#cdd8ea;}
/* platform strip (real profile social links) */
.app-socrow{display:flex;justify-content:center;gap:0.34rem;margin:0.5rem 0 0.1rem;}
.app-soc{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;}
.app-soc svg{width:15px;height:15px;display:block;}
.app-soc.ig{background:linear-gradient(135deg,#FEDA75 0%,#FA7E1E 28%,#D62976 60%,#4F5BD5 100%);}
.app-soc.tt{background:#000;} .app-soc.yt{background:#FF0000;} .app-soc.x{background:#000;} .app-soc.web{background:#64748B;}
/* fleet pill + progress (Leagues) */
.app-fleet{display:inline-flex;align-items:center;gap:0.3rem;background:var(--gold-tint);border:1px solid rgba(230,184,66,0.4);
  color:#8a6a10;font-weight:800;font-size:0.64rem;padding:0.26rem 0.7rem;border-radius:999px;margin-top:0.35rem;}
.app-prog{margin:0.55rem 0.4rem 0;text-align:left;}
.app-prog .pl{font-size:0.58rem;color:var(--app-mut);font-weight:700;margin-bottom:0.28rem;display:block;text-align:center;}
.app-pftabs{display:flex;border-top:1px solid var(--app-rl);}
.app-pftabs .tb{flex:1;text-align:center;font-size:0.64rem;font-weight:700;color:var(--app-mut);padding:0.5rem 0;letter-spacing:0.04em;}
.app-pftabs .tb.on{color:var(--app-tx);box-shadow:inset 0 -2px 0 var(--app-gold);}

/* mobile bottom nav pill — matches helm-shell.js (Home·Explore·+·Live·Profile) */
.app-botnav{position:absolute;left:50%;bottom:0.7rem;transform:translateX(-50%);display:flex;align-items:center;gap:0.5rem;
  background:#fff;border:1px solid var(--app-rl);border-radius:999px;padding:0.32rem 0.5rem;
  box-shadow:0 10px 26px rgba(20,32,58,0.22);z-index:6;}
.app-botnav .n{width:30px;height:30px;display:grid;place-items:center;border-radius:999px;color:#8a97ad;}
.app-botnav .n svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.app-botnav .n.on{background:#eef2f8;color:var(--app-navy);}
.app-botnav .plus{width:36px;height:36px;border-radius:50%;background:var(--app-gold);display:grid;place-items:center;box-shadow:0 4px 12px rgba(230,184,66,0.45);}
.app-botnav .plus svg{width:20px;height:20px;stroke:#3a2c05;stroke-width:2.6;fill:none;stroke-linecap:round;}
.app-botnav .pav{width:29px;height:29px;border-radius:50%;overflow:hidden;background:#cdd8ea;}
.app-botnav .pav.on{box-shadow:0 0 0 2px var(--app-gold);}
.app-botnav .pav img{width:100%;height:100%;object-fit:cover;transform:scale(1.9);transform-origin:center 15%;}

/* caption under a device */
.show-cap{display:inline-flex;align-items:center;gap:0.4rem;margin-top:1rem;font-size:0.76rem;
  color:var(--text-faint);font-weight:600;letter-spacing:0.02em;}
.show-cap svg{width:13px;height:13px;stroke:var(--text-faint);stroke-width:2;fill:none;}

/* ---- chore / star / rewards atoms (inside .screen) -------------- */
.app-chore{display:flex;align-items:center;gap:0.55rem;padding:0.5rem 0;border-bottom:1px solid var(--app-rl);}
.app-chore:last-child{border-bottom:0;}
.app-check{width:20px;height:20px;border-radius:6px;border:2px solid #cdd7e6;flex:none;position:relative;}
.app-check.done{background:var(--app-gold);border-color:var(--app-gold);}
.app-check.done::after{content:'';position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid #3a2c05;border-width:0 2px 2px 0;transform:rotate(45deg);}
.app-chore .ct{flex:1;font-size:0.8rem;font-weight:600;color:var(--app-tx);}
.app-chore .ct.done{text-decoration:line-through;color:var(--app-mut);}
.app-chore .cs{font-size:0.74rem;font-weight:800;color:#C99A22;white-space:nowrap;}
.app-starbar{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(120deg,#FFF6DE,#FDEBBE);
  border:1px solid #F0DCA0;border-radius:0.7rem;padding:0.55rem 0.75rem;}
.app-starbar .lbl{font-size:0.72rem;font-weight:700;color:#8a6a10;text-transform:uppercase;letter-spacing:0.04em;}
.app-starbar .val{font-family:'Sora',sans-serif;font-weight:800;font-size:1.1rem;color:#B8860B;}

/* ---- interactive calendar (light) ------------------------------- */
.show-full{padding:2rem 0 1rem;}
.show-full .show-head{text-align:center;max-width:680px;margin:0 auto 1.4rem;}
.show-full .show-head .eyebrow{margin-bottom:0.8rem;}
.show-full .show-head h3{font-family:'Sora',sans-serif;font-size:clamp(1.5rem,2.4vw,2.05rem);font-weight:800;letter-spacing:-0.02em;margin-bottom:0.6rem;}
.show-full .show-head h3 .accent{color:var(--gold);}
.show-full .show-head p{color:var(--mist);font-size:1.02rem;line-height:1.55;}
.calx{--c-tx:#14203A;--c-mut:#61708A;--c-rl:#E7ECF3;--c-gold:#E6B842;--c-paper:#F6F8FB;
  position:relative;z-index:1;max-width:940px;margin:0 auto;background:#fff;color:var(--c-tx);
  border-radius:1.1rem;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,0.45),0 0 0 1px rgba(255,255,255,0.06);text-align:left;}
.calx *{box-sizing:border-box;}
.calx-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0.9rem 1.1rem;border-bottom:1px solid var(--c-rl);flex-wrap:wrap;}
.calx-title{font-family:'Sora',sans-serif;font-weight:800;font-size:1.05rem;color:var(--c-tx);display:flex;align-items:center;gap:0.5rem;}
.calx-arrows{display:flex;gap:0.3rem;}
.calx-arrow{width:28px;height:28px;border-radius:8px;border:1px solid var(--c-rl);background:#fff;color:var(--c-mut);cursor:pointer;font-size:0.95rem;line-height:1;display:grid;place-items:center;}
.calx-arrow:hover{background:var(--c-paper);color:var(--c-tx);}
.calx-views{display:flex;background:var(--c-paper);border:1px solid var(--c-rl);border-radius:999px;padding:3px;}
.calx-views button{border:0;background:transparent;color:var(--c-mut);font:inherit;font-weight:700;font-size:0.78rem;padding:0.3rem 0.85rem;border-radius:999px;cursor:pointer;}
.calx-views button.on{background:var(--c-gold);color:#3a2c05;}
.calx-body{padding:0.6rem;}
.calx-pane[hidden]{display:none;}
/* week */
.calx-week{display:grid;grid-template-columns:repeat(7,1fr);gap:0.3rem;}
.calx-col{background:var(--c-paper);border:1px solid var(--c-rl);border-radius:0.6rem;min-height:150px;padding:0.4rem 0.35rem;}
.calx-col .dn{font-size:0.64rem;font-weight:800;color:var(--c-mut);text-transform:uppercase;letter-spacing:0.03em;text-align:center;}
.calx-col .dd{font-family:'Sora',sans-serif;font-weight:800;font-size:0.95rem;text-align:center;margin-bottom:0.35rem;color:var(--c-tx);}
.calx-col.today .dd{color:#fff;background:var(--c-gold);width:24px;height:24px;line-height:24px;border-radius:50%;margin:0 auto 0.35rem;}
.calx-ev{display:block;width:100%;text-align:left;border:0;cursor:pointer;font:inherit;font-size:0.66rem;font-weight:700;
  color:#fff;border-radius:6px;padding:0.28rem 0.4rem;margin-bottom:0.25rem;line-height:1.15;}
.calx-ev.soccer{background:#4CAF7D;} .calx-ev.music{background:#5aa0f0;} .calx-ev.dad{background:#E0A93C;}
.calx-ev.family{background:#E87F92;} .calx-ev.school{background:#9B7BD4;}
.calx-ev:hover{filter:brightness(1.06);transform:translateY(-1px);}
/* day timeline */
.calx-day{display:flex;flex-direction:column;gap:0;}
.calx-hr{display:grid;grid-template-columns:52px 1fr;gap:0.6rem;border-top:1px solid var(--c-rl);min-height:38px;padding:0.25rem 0.4rem;}
.calx-hr .hh{font-size:0.68rem;color:var(--c-mut);font-weight:600;padding-top:0.15rem;}
.calx-hr .hev{display:flex;flex-direction:column;gap:0.25rem;}
/* month */
.calx-month{display:grid;grid-template-columns:repeat(7,1fr);gap:0.25rem;}
.calx-md{aspect-ratio:1/0.82;background:var(--c-paper);border:1px solid var(--c-rl);border-radius:0.5rem;padding:0.3rem;font-size:0.66rem;color:var(--c-mut);position:relative;}
.calx-md.dim{opacity:0.4;} .calx-md.today{border-color:var(--c-gold);background:var(--gold-tint);color:var(--c-tx);font-weight:800;}
.calx-md .mdots{display:flex;gap:2px;position:absolute;left:0.3rem;bottom:0.3rem;}
.calx-md .mdots i{width:5px;height:5px;border-radius:50%;}
.calx-detail{border-top:1px solid var(--c-rl);padding:0.75rem 1.1rem;display:flex;align-items:center;gap:0.7rem;background:var(--c-paper);}
.calx-detail .cdot{width:12px;height:12px;border-radius:50%;flex:none;}
.calx-detail .cinfo b{font-family:'Sora',sans-serif;font-size:0.9rem;color:var(--c-tx);}
.calx-detail .cinfo span{display:block;font-size:0.76rem;color:var(--c-mut);}
.calx-detail .chint{margin-left:auto;font-size:0.72rem;color:var(--c-mut);}
@media (max-width:640px){
  .calx-views button{padding:0.3rem 0.6rem;font-size:0.72rem;}
  .calx-col{min-height:96px;}
  .calx-ev{font-size:0.6rem;}
}

/* ---- responsive -------------------------------------------------- */
@media (max-width:860px){
  .show-row{grid-template-columns:1fr;gap:1.5rem;padding:1.5rem 0;}
  .show-row > *{min-width:0;}
  .show-row.reverse .show-copy{order:1;} .show-row.reverse .show-art{order:2;}
  .show-art{order:2;}
  .show-copy p{max-width:none;}
  .show-copy p,.show-list li{overflow-wrap:anywhere;}
}
@media (max-width:520px){
  .showcase{padding-left:1rem;padding-right:1rem;}
}