/* The 17 Oct look for every generated page: programs, exercises, guides and journeys.
   The home page's type, ground, pills, quiet labels and glossy cards. Loaded LAST on those
   pages (after tokens.css, chrome.css and the page's own sheet) so it wins without editing
   each page's rules; tokens.css already moved the palette, the fonts and the 16px radius.
   The home page has its own home.css; the two must read as one site. */

:root { --e: cubic-bezier(.16,1,.3,1); --grey-line: #8E8D88; }
html, body { background: #070708; }
body { font-family: var(--sans); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
h1, h2, h3, h4 { font-family: var(--sans); font-weight: 700; letter-spacing: -.035em; }
h1 { letter-spacing: -.05em; line-height: .98; }

/* Kicker labels (was tiny uppercase mono) */
.section-label, .guide-updated, .chip-label, .tip-callout .tip-label {
  font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2);
}
/* Hero second lines: grey, like the home page (was a highlighter stroke) */
.pi-hero .accent, .accent { background: none !important; color: var(--grey-line); }

/* ── Nav: the home page's bar ── */
.pp-nav::before { background: rgba(7,7,8,.82); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: none; border-bottom-color: rgba(255,255,255,.07); }
.pp-nav-links { gap: 26px; }
.pp-nav-links a { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
.pp-nav-links a:hover, .pp-nav-links a[aria-current="page"] { color: var(--ink); }
.pp-nav-links a[href="/app/"] { color: var(--ink); font-size: 14px; font-weight: 600; padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(242,241,237,.28); }
.pp-nav-links a[href="/app/"]:hover { background: rgba(255,255,255,.07); }
.nav-cta { border-radius: 999px; font-size: 14px; font-weight: 600; padding: 10px 18px; }
.nav-rebrand { display: none !important; }   /* the rename notice expired 20 Sep */

/* ── Buttons: pills ── */
.btn-primary { border-radius: 999px; font-weight: 600; transition: background .3s ease, transform .3s var(--e); }
.btn-primary:hover { background: #fff; }
.btn-secondary { border-radius: 999px; font-weight: 600; background: transparent; border: 1px solid rgba(255,255,255,.2); }
.btn-secondary:hover { background: rgba(255,255,255,.08); }

/* ── Pills (were mono tags) ── */
.badge, .set-chip, .ex-chip, .chip {
  font-family: var(--sans); letter-spacing: 0; text-transform: none; border-radius: 999px;
}
.badge { font-size: 13px; font-weight: 600; padding: 4px 11px; background: rgba(255,255,255,.06); border: 0; color: var(--ink-2); }
.badge.lvl-beginner { color: var(--green); background: rgba(34,197,94,.1); }
.badge.lvl-intermediate { color: #F5A524; background: rgba(245,165,36,.1); }
.badge.lvl-advanced { color: #F13560; background: rgba(241,53,96,.1); }
.set-chip { font-size: 13px; font-weight: 600; background: rgba(255,255,255,.06); border: 0; color: var(--ink); }
.chip.on { background: var(--ink); border-color: var(--ink); color: #070708; }

/* ── Cards and panels: soft glossy surfaces, no hard outline ── */
.week-block, .table-wrap, .faq-item, .attribution-box, .stat-tile, .guide-toc, .guide-summary, .gs-rows, .guide-disclaimer,
.hub-card, .rel-card, .finder-panel, .tip-callout, .guide-compare, .stat-wide, .ex-card {
  border-radius: var(--radius); border-color: rgba(255,255,255,.07);
  background: linear-gradient(160deg, #141416, #0f0f11);
}
.hub-card, .rel-card, .ex-card { transition: transform .4s var(--e), background .3s ease; }
.hub-card:hover, .rel-card:hover, .ex-card:hover { transform: translateY(-2px); background: linear-gradient(160deg, #19191c, #121214); }

/* Links in text: ink, underlined, not blue */
main a:not([class]) { color: var(--ink); text-decoration-color: rgba(242,241,237,.35); text-underline-offset: 3px; }
main a:not([class]):hover { text-decoration-color: var(--ink); }

/* ── Get the app dialog: the home page's card ── */
.rebrand-pop, .site-pop { background: rgba(0,0,0,.72); }
.rebrand-pop-card, .site-pop-card { border: 0; border-radius: 24px; background: linear-gradient(160deg, #1c1c20, #111113); box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 40px 80px -30px #000; text-align: left; }
.site-pop-mark { justify-content: flex-start; }
.site-pop-title, .rebrand-pop-title { font-size: 26px; font-weight: 700; letter-spacing: -.03em; }
.site-pop-body, .rebrand-pop-body { font-size: 15px; line-height: 1.55; }
.site-pop-actions { justify-content: flex-start; }
.site-pop-close, .rebrand-pop-close { font-family: var(--sans); }
.site-pop-link, .rebrand-pop-link { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }

/* ── Footer: the home page's (markup from site-chrome.mjs footerHtml) ── */
.sfoot { border-top: 1px solid rgba(255,255,255,.07); padding: 48px clamp(20px, 5vw, 64px) 40px; color: var(--ink-2); font-size: 14px; text-align: left; display: block; }
.sfoot-in { max-width: 1120px; margin: 0 auto; }
.sfoot-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 30px; }
.sfoot h4 { margin: 0 0 12px; color: var(--ink); font-size: 14px; letter-spacing: 0; }
.sfoot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.sfoot a { color: var(--ink-2); text-decoration: none; }
.sfoot a:hover { color: var(--ink); }
.sfoot-brand svg { height: 15px; width: auto; display: block; margin-bottom: 12px; }
.sfoot-brand p { margin: 0 0 18px; color: var(--ink); font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.sfoot-stores { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sfoot-stores a { display: block; height: 40px; border-radius: 8px; overflow: hidden; }
.sfoot-stores .as img { height: 40px; width: auto; display: block; }
.sfoot-stores .gp { position: relative; width: calc(40px * 564 / 168); }
.sfoot-stores .gp img { position: absolute; height: calc(40px * 250 / 168); width: auto; max-width: none; left: calc(40px * -41 / 168); top: calc(40px * -41 / 168); }
.sfoot-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.07); color: var(--ink-3); font-size: 13px; }
@media (max-width: 860px) { .sfoot-top { grid-template-columns: 1fr 1fr; } .sfoot-brand { grid-column: 1 / -1; } }

@media (prefers-reduced-motion: reduce) { .hub-card, .rel-card, .ex-card, .btn-primary { transition: none; } }

/* ── Type scale: the home page's (hero titles, section headings, lede) ── */
.pp-hero h1 { font-size: clamp(44px, 6vw, 92px); font-weight: 700; letter-spacing: -.055em; line-height: .95; margin-bottom: 16px; }
.pp-hero .lede, .lede { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: var(--ink-2); }
.pp-section h2 { font-size: clamp(28px, 3.2vw, 46px); font-weight: 700; letter-spacing: -.045em; line-height: 1.02; }
.guide-section h2 { font-size: clamp(26px, 2.8vw, 38px); }
.pi-hero h1 { font-weight: 700; letter-spacing: -.055em; }
.breadcrumb, .pp-crumbs { font-size: 13px; }

/* ── Privacy, terms, delete account (main.legal) ── */
/* Privacy, Terms, Delete Account load tokens/chrome/site but not programs.css, so the
   browser's 8px body margin and normal line-height pushed their header 8px in and down and
   made Get App shorter (user, 20 Oct: "fix the privacy page too"). The same page base as
   programs.css, without its * reset (which would strip the legal lists' indent). */
body:has(> main.legal) { margin: 0; line-height: 1.6; min-height: 100vh; overflow-x: hidden; }
body:has(> main.legal) *, body:has(> main.legal) *::before, body:has(> main.legal) *::after { box-sizing: border-box; }
main.legal { max-width: 760px; margin: 0 auto; padding: clamp(48px, 9vh, 100px) clamp(20px, 5vw, 64px) 90px; color: var(--ink-2); font-size: 16px; line-height: 1.7; }
main.legal h1 { font-size: clamp(40px, 5.4vw, 72px); color: var(--ink); margin: 0 0 10px; }
main.legal h2 { font-size: clamp(22px, 2.2vw, 28px); color: var(--ink); margin: 44px 0 12px; letter-spacing: -.03em; }
main.legal .updated { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 44px; }
main.legal p, main.legal ul, main.legal ol { margin: 0 0 16px; }
main.legal ul, main.legal ol { padding-left: 22px; }
main.legal li { margin-bottom: 8px; }
main.legal strong { color: var(--ink); }
main.legal a { color: var(--ink); text-underline-offset: 3px; }