/* Peanut Express - shared design system
   Bold & colourful. Self-contained: no external fonts or assets. */

:root{
  --ink:#12101a;
  --ink-soft:#4a4560;
  --paper:#ffffff;
  --paper-2:#f7f5fb;
  --line:rgba(18,16,26,.10);
  --a1:#7c3aed;            /* accent start */
  --a2:#ec4899;            /* accent end   */
  --a-ink:#ffffff;         /* text on accent */
  --radius:20px;
  --shadow:0 10px 40px -12px rgba(18,16,26,.28);
  --maxw:1080px;
}
body.theme-peanut { --a1:#7c3aed; --a2:#f97316; }
body.theme-coffee { --a1:#b45309; --a2:#f59e0b; }
body.theme-recipe { --a1:#059669; --a2:#84cc16; }
body.theme-roster { --a1:#1d4ed8; --a2:#6366f1; }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

.wrap{width:100%;max-width:var(--maxw);margin:0 inline;margin-left:auto;margin-right:auto;padding:0 22px}

/* ---------- top bar ---------- */
.topbar{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em;text-decoration:none;color:var(--a-ink)}
.brand .mark{font-size:1.35rem;line-height:1}
.topbar nav{display:flex;gap:18px;flex-wrap:wrap}
.topbar nav a{color:var(--a-ink);opacity:.85;text-decoration:none;font-weight:600;font-size:.95rem}
.topbar nav a:hover{opacity:1;text-decoration:underline}

/* ---------- hero ---------- */
.hero{
  position:relative;
  background:linear-gradient(135deg,var(--a1),var(--a2));
  color:var(--a-ink);
  overflow:hidden;
  padding-bottom:74px;
}
.hero::after{
  content:"";position:absolute;inset:auto -10% -60% -10%;height:220px;
  background:radial-gradient(60% 100% at 50% 0,rgba(255,255,255,.35),transparent 70%);
  pointer-events:none;
}
.hero-inner{position:relative;z-index:2;text-align:center;padding:46px 0 10px}
.applogo{width:96px;height:96px;margin:0 auto 20px;border-radius:26px;background:rgba(255,255,255,.16);
  display:grid;place-items:center;font-size:3rem;backdrop-filter:blur(6px);box-shadow:0 8px 30px -8px rgba(0,0,0,.35)}
.applogo img{width:66px;height:66px;border-radius:16px}
h1{margin:0 0 12px;font-size:clamp(2.3rem,6vw,3.9rem);line-height:1.05;letter-spacing:-.035em;font-weight:850}
.tagline{margin:0 auto;max-width:34ch;font-size:clamp(1.05rem,2.4vw,1.3rem);opacity:.95;font-weight:500}
.pill{display:inline-block;margin-bottom:18px;padding:7px 15px;border-radius:999px;background:rgba(255,255,255,.2);
  font-size:.8rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase}

.cta-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}
.btn{
  display:inline-block;padding:15px 30px;border-radius:999px;font-weight:750;text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-solid{background:var(--paper);color:var(--a1);box-shadow:var(--shadow)}
.btn-solid:hover{transform:translateY(-2px)}
.btn-ghost{border:2px solid rgba(255,255,255,.6);color:var(--a-ink)}
.btn-ghost:hover{background:rgba(255,255,255,.14)}

.badges{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px}
.badge{padding:10px 17px;border-radius:12px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.28);
  font-size:.85rem;font-weight:650}

/* ---------- sections ---------- */
section{padding:64px 0}
.section-head{text-align:center;max-width:60ch;margin:0 auto 40px}
h2{font-size:clamp(1.65rem,3.6vw,2.3rem);letter-spacing:-.025em;margin:0 0 12px;font-weight:820}
.section-head p{margin:0;color:var(--ink-soft);font-size:1.05rem}

.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:26px;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.card .ico{font-size:1.9rem;line-height:1;margin-bottom:12px;display:block}
.card h3{margin:0 0 7px;font-size:1.12rem;font-weight:750;letter-spacing:-.015em}
.card p{margin:0;color:var(--ink-soft);font-size:.96rem}

.alt{background:var(--paper-2)}

/* app cards on the hub */
.app-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;overflow:hidden;padding:0}
.app-card .top{padding:30px 26px 24px;color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2))}
.app-card .top .ico{font-size:2.4rem}
.app-card .top h3{font-size:1.4rem;margin:6px 0 4px;color:#fff}
.app-card .top .sub{opacity:.92;font-size:.95rem}
.app-card .body{padding:22px 26px 26px}
.app-card .body p{color:var(--ink-soft);margin:0 0 14px;font-size:.96rem}
.status{display:inline-block;padding:5px 12px;border-radius:999px;font-size:.74rem;font-weight:750;
  letter-spacing:.06em;text-transform:uppercase;background:var(--paper-2);border:1px solid var(--line);color:var(--ink-soft)}
.status.live{background:#dcfce7;border-color:#86efac;color:#166534}
.status.dev{background:#fef9c3;border-color:#fde047;color:#854d0e}
.go{font-weight:750;color:var(--a1)}

/* ---------- prose (legal pages) ---------- */
.prose{max-width:74ch;margin:0 auto}
.prose h2{text-align:left;margin-top:34px}
.prose h3{margin:26px 0 6px;font-size:1.06rem;font-weight:750}
.prose p,.prose li{color:var(--ink-soft)}
.prose ul{padding-left:20px}
.prose a{color:var(--a1);font-weight:600}
.updated{color:var(--ink-soft);font-size:.9rem;margin-top:-6px}

/* ---------- legal / content pages ---------- */
.legal-hero{padding-bottom:36px}
.legal-hero .hero-inner{padding:38px 0 0}
.legal-hero h1{font-size:clamp(2rem,5vw,3rem)}
.lead{font-size:1.08rem;color:var(--ink-soft)}
.updated{color:var(--ink-soft);font-size:.9rem;margin:2px 0 0}
.note{background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin:20px 0}
.warn{background:#fef2f2;border:1px solid #fecaca;border-left:4px solid #ef4444;border-radius:12px;padding:16px 18px;margin:20px 0;color:#7f1d1d}
.warn strong{color:#b91c1c}
.contact-card{background:var(--paper-2);border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin:20px 0}
.contact-card .big{font-size:1.2rem;font-weight:750}
.backlink{display:inline-block;margin-top:26px;font-weight:650;color:var(--a1);text-decoration:none}
.backlink:hover{text-decoration:underline}
@media (prefers-color-scheme:dark){ .warn{background:#3a1414;border-color:#7f1d1d;color:#fecaca} .warn strong{color:#fca5a5} }

/* ---------- footer ---------- */
footer{background:var(--ink);color:#cfc9de;padding:44px 0 34px;font-size:.93rem}
footer .fgrid{display:flex;flex-wrap:wrap;gap:22px;justify-content:space-between;align-items:center}
footer a{color:#fff;text-decoration:none;opacity:.86}
footer a:hover{opacity:1;text-decoration:underline}
footer nav{display:flex;flex-wrap:wrap;gap:8px 16px}
.copy{opacity:.7}

@media (max-width:560px){
  .topbar nav{display:none}
  section{padding:48px 0}
  .hero{padding-bottom:56px}
}

@media (prefers-color-scheme:dark){
  :root{--ink:#f4f1fb;--ink-soft:#a9a2c0;--paper:#131120;--paper-2:#1b1830;--line:rgba(255,255,255,.12)}
  .status{background:#1b1830}
  .status.live{background:#052e16;border-color:#166534;color:#86efac}
  .status.dev{background:#3b2f05;border-color:#854d0e;color:#fde047}
  footer{background:#0b0913}
  .btn-solid{background:var(--paper);color:#fff}
}