/* The app's own colours and components, shared by the landing page and the sample brief so the site looks like the
   app: light, in Velvet (the default app colour, AppLook.swift). Values match iOS's light system colours. */
:root{
  --grouped:#F2F2F7; --card:#FFFFFF; --label:#111114; --secondary:#6C6C70; --tertiary:#C7C7CC; --sep:#E5E5EA;
  --accent:#9E1B32; --accent-ink:#FFFFFF;           /* Velvet, 7.6:1 on white */
  --accent-soft:rgba(158,27,50,.08);
  --gold:#D8B25C;                                    /* the icon's highlighter */
  --from-bg:#ECEFF4; --from:#3B4656;                 /* From breakdown */
  --check-bg:#FEECEB; --check:#B42318; --check-dot:#D92D20;
  --seen:#C2257A; --seen-bg:var(--card);    /* Seen you before */
  --tape:#1E5FA8; --tape-bg:rgba(30,95,168,.15);     /* Self-tape */
}

/* App components */
.app-card{background:var(--card);border-radius:22px;padding:18px}
.kicker{color:var(--accent);font-weight:600;font-size:13px}
.role{font:700 26px/1.1 'Source Serif 4',Georgia,serif;letter-spacing:-.01em;margin:2px 0 0}
.ring{flex-shrink:0;width:52px;height:52px;border-radius:50%;border:2.5px solid var(--accent);display:grid;place-items:center;text-align:center;line-height:1}
.ring b{display:block;font:700 20px 'Source Serif 4',Georgia,serif}.ring small{font-size:10px;color:var(--secondary)}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;background:var(--card);color:var(--label)}
.pill.dark{background:var(--label);color:var(--card)}
.pill.tape{background:var(--tape-bg);color:var(--tape);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tape) 60%,transparent)}
.tag{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600}
.tag.from{background:var(--from-bg);color:var(--from)}.tag.check{background:var(--check-bg);color:var(--check)}
.moment{color:var(--accent);font-size:12px;font-weight:600}
.seen{background:var(--seen-bg);border-radius:16px;padding:12px 14px;display:flex;gap:10px;align-items:flex-start}
.seen svg{color:var(--seen);flex-shrink:0;margin-top:2px}
.song{background:var(--accent);color:#fff;border-radius:22px;padding:16px 18px}
.song .lbl{font-size:12px;font-weight:600;opacity:.85;display:flex;align-items:center;gap:6px}
.song b{display:block;font:700 21px/1.2 'Source Serif 4',Georgia,serif;margin:4px 0 2px}.song span{font-size:13px;opacity:.85}
.swatches{display:flex;gap:10px}.swatches div{flex:1;font-size:12px;font-weight:600}
.swatches i{display:block;height:52px;border-radius:12px;margin-bottom:6px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.swatches small{display:block;font-weight:400;color:var(--secondary);font-size:11px;line-height:1.35;margin-top:2px}
.bullet{display:flex;gap:10px;align-items:baseline}
.bullet::before{content:"";flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--accent);transform:translateY(-1px)}
.bullet.check::before{background:var(--check-dot)}.bullet.plain::before{background:var(--secondary)}
.muted{color:var(--secondary)}