/* Pineyourapples: same identity as the videos (deep navy, bright accents, Montserrat + Inter). Self-hosted fonts: no third-party requests. */
@font-face { font-family: Montserrat; src: url(/assets/Montserrat.ttf) format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Inter; src: url(/assets/Inter.ttf) format("truetype"); font-weight: 100 900; font-display: swap; }
:root { --bg0: #0B1020; --bg1: #18213D; --panel: #1F2847; --line: #3A4672; --ink: #0B1020; --text: #E8EDFA;
  --soft: #C9D3EE; --muted: #8E9AC0; --yellow: #FFD23F; --teal: #2EC4B6; --coral: #FF6B6B; }
* { box-sizing: border-box; }
html { background: var(--bg0); }
body { margin: 0; font: 17px/1.65 Inter, system-ui, sans-serif; color: var(--text);
  background: radial-gradient(1200px 600px at 10% -10%, rgba(255,210,63,.10), transparent 60%),
              radial-gradient(900px 500px at 100% 0%, rgba(46,196,182,.10), transparent 60%), var(--bg0); }
.wrap { max-width: 980px; margin: 0 auto; padding: 0 20px; }
a { color: var(--yellow); text-underline-offset: 3px; }
a:hover { color: #fff; }
h1, h2, h3, .brand { font-family: Montserrat, Inter, sans-serif; letter-spacing: -.3px; line-height: 1.15; }
h1 { font-size: clamp(34px, 6vw, 58px); font-weight: 900; margin: .2em 0 .35em; }
h2 { font-size: 26px; font-weight: 800; margin: 1.8em 0 .5em; }
h3 { font-size: 19px; font-weight: 800; margin: 0 0 .4em; }
.top { border-bottom: 1px solid var(--line); background: rgba(11,16,32,.85); position: sticky; top: 0; backdrop-filter: blur(6px); z-index: 2; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 900; font-size: 21px; }
nav { display: flex; gap: 6px 18px; flex-wrap: wrap; }          /* links always visible: no hamburger menu */
nav a { color: var(--soft); text-decoration: none; font-weight: 600; font-size: 15px; }
nav a[aria-current] { color: #fff; border-bottom: 2px solid var(--yellow); }
.hero { padding: 64px 0 28px; }
.kicker { color: var(--teal); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; font-size: 13px; margin: 0; }
.hl { background: var(--yellow); color: var(--ink); border-radius: 10px; padding: 0 .18em; }
.lead { font-size: 19px; color: var(--soft); max-width: 720px; }
.channels { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.chip { display: inline-block; padding: 9px 16px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line);
  color: #fff; text-decoration: none; font-weight: 700; font-size: 15px; }
.chip:hover { border-color: var(--yellow); color: #fff; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 26px 0; }
.card, .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 22px; }
.card p { color: var(--soft); margin: 0 0 .6em; }
.panel { margin: 26px 0 40px; }
.panel h2 { margin-top: 0; }
.doc { max-width: 760px; padding: 36px 0 30px; }
.doc p, .doc li { color: var(--soft); }
.doc strong { color: #fff; }
table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 15px; }
th, td { text-align: left; vertical-align: top; padding: 10px; border-bottom: 1px solid var(--line); }
th { color: #fff; font-family: Montserrat, Inter, sans-serif; }
td { color: var(--soft); }
.muted { color: var(--muted); font-size: 14px; }
.foot { border-top: 1px solid var(--line); margin-top: 30px; padding: 22px 0 34px; }
.foot p { margin: 4px 0; }
@media (max-width: 560px) { body { font-size: 16px; } .hero { padding-top: 40px; } table, thead, tbody, tr, th, td { display: block; }
  thead { display: none; } td { border: 0; padding: 4px 0; } tr { border-bottom: 1px solid var(--line); padding: 10px 0; }
  td:first-child { color: #fff; font-weight: 700; } }