/* Inner pages at the homepage's standard: image hero with code rain, see-through header, reveal on scroll, closing call
   to action and the homepage footer. Layered over articles.css / desk.css; everything is scoped to body.pg. */
.pg { --canvas: #0d1315; --panel: #151c1e; --line: rgba(245, 242, 236, .1); --line-2: rgba(245, 242, 236, .18); --ivory: #f5f2ec; --muted: #a7b0aa; --dim: #77827b; --sage: #738c7d; --sage-2: #9db5a6; --glow: rgba(115, 140, 125, .35); --code: #59ff8c;
  background: var(--canvas); color: var(--ivory); font-family: Geist, -apple-system, BlinkMacSystemFont, sans-serif; -webkit-font-smoothing: antialiased; }
.pg a { color: inherit; }

/* Header: see-through over the hero, solid once you scroll */
.pg .pg-mast { position: fixed; inset: 0 0 auto; z-index: 30; background: transparent; border-bottom: 1px solid transparent; backdrop-filter: none; transition: background .3s, border-color .3s; }
.pg .pg-mast.solid { background: rgba(13, 19, 21, .84); backdrop-filter: blur(18px); border-color: var(--line); }
.pg .pg-mast .mast-row { display: flex; align-items: center; gap: 18px; height: 72px; padding: 0; width: min(1200px, calc(100% - 40px)); margin-inline: auto; }
.pg .pg-mast .brand img.wordmark { height: 30px; width: auto; }
.pg .pg-mast nav { display: flex; gap: 2px; margin-left: auto; justify-content: flex-end; }
.pg .pg-mast nav a { padding: 8px 12px; border-radius: 999px; color: var(--muted); font-size: 14.5px; font-weight: 550; background: none; }
.pg .pg-mast nav a:hover, .pg .pg-mast nav a[aria-current="page"] { color: var(--ivory); background: rgba(245, 242, 236, .08); }
.pg .pg-mast .signin { padding: 9px 15px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 14.5px; font-weight: 600; }
.pg .pg-mast .buy { background: var(--ivory); color: #141a17; padding: 9px 16px; border-radius: 999px; font-weight: 650; font-size: 14.5px; white-space: nowrap; box-shadow: 0 8px 30px rgba(245, 242, 236, .14); }

/* Hero */
.pg-hero { position: relative; min-height: min(78svh, 760px); display: grid; align-items: end; overflow: hidden; isolation: isolate; margin: 0 0 clamp(36px, 6vw, 72px); }
.pg-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; transform: scale(1.06); animation: pg-drift 22s ease-in-out infinite alternate; }
@keyframes pg-drift { from { transform: scale(1.06) translate3d(0, 0, 0); } to { transform: scale(1.12) translate3d(-1.5%, -1%, 0); } }
.pg-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(90deg, rgba(13, 19, 21, .95) 0%, rgba(13, 19, 21, .74) 40%, rgba(13, 19, 21, .2) 75%, rgba(13, 19, 21, .4) 100%),
  linear-gradient(180deg, rgba(13, 19, 21, .6) 0%, transparent 28%, transparent 62%, var(--canvas) 100%); }
.pg-hero canvas.rain { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; opacity: .2; pointer-events: none; mix-blend-mode: screen; }
.pg-hero-inner { width: min(1200px, calc(100% - 40px)); margin-inline: auto; padding: 150px 0 clamp(48px, 9vh, 96px); }
.pg-hero .eyebrow { font: 600 12px/1.2 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .2em; text-transform: uppercase; color: var(--sage-2); margin: 0 0 16px; text-align: left; }
.pg-hero .eyebrow::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--code); box-shadow: 0 0 12px var(--code); vertical-align: 1px; animation: pg-blink 2.4s infinite; }
@keyframes pg-blink { 50% { opacity: .35; } }
.pg-hero h1 { font-size: clamp(42px, 6.4vw, 88px); line-height: .98; letter-spacing: -.045em; max-width: 13em; margin: 0; text-align: left; font-weight: 650; color: var(--ivory); }
.pg-hero .pg-lead { font-size: clamp(17px, 1.5vw, 21px); color: #cbd2cd; max-width: 36em; margin: 20px 0 0; text-align: left; }
.pg-hero .pg-lead a { color: var(--sage-2); text-decoration: underline; }
.pg-hero .cta-row { margin-top: 28px; justify-content: flex-start; }
.pg-hero .cta-row .buy { background: var(--ivory); color: #141a17; padding: 13px 22px; border-radius: 999px; font-weight: 650; }
.pg-hero .cta-row .ghost { border: 1px solid var(--line-2); padding: 12px 20px; border-radius: 999px; }
.pg-type { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; font: 500 13px ui-monospace, Menlo, monospace; color: var(--code); opacity: .85; }
.pg-type b { font-weight: 500; color: var(--muted); }
.pg-type .cursor { width: 8px; height: 15px; background: var(--code); animation: pg-blink 1s steps(1) infinite; }

/* Content polish */
.pg main .prose h2, .pg main h2 { letter-spacing: -.03em; }
.pg main .prose h2 { font-size: clamp(26px, 2.6vw, 34px); margin-top: 6px; }
.pg main .prose .term.small { margin-top: 44px; }
.pg .figure img, .pg .card, .pg table, .pg details, .pg .panel, .pg .join { border-color: var(--line); }
.pg .figure img { border-radius: 18px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.pg .card { border-radius: 22px; background: var(--panel); transition: transform .35s ease, box-shadow .35s ease, border-color .35s; }
.pg .card img { transition: transform .8s ease, filter .5s; filter: saturate(.92); }
.pg .card:hover { transform: translateY(-4px); border-color: rgba(157, 181, 166, .45); box-shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 0 40px var(--glow); }
.pg .card:hover img { transform: scale(1.05); filter: saturate(1.05); }
.pg .card .cap { background: linear-gradient(transparent, rgba(13, 19, 21, .94)); }
.pg .pill { border-color: rgba(157, 181, 166, .4); color: var(--sage-2); background: rgba(13, 19, 21, .5); backdrop-filter: blur(6px); }
.pg .note { border-left-color: var(--sage); }
.pg table { border-radius: 14px; overflow: hidden; }
.pg th { color: var(--sage-2); }
.pg .steps li::before { background: var(--sage); color: #0d1315; box-shadow: 0 0 20px var(--glow); }
.pg .rail strong { color: var(--sage-2); }
.pg .rail a:hover { color: var(--ivory); }
.pg .post .pull { color: var(--sage-2); }

/* Reveal on scroll */
.pg .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s ease; }
.pg .reveal.in { opacity: 1; transform: none; }

/* Closing call to action */
.pg-final { position: relative; text-align: center; padding: clamp(80px, 11vw, 140px) 20px; margin-top: clamp(48px, 7vw, 96px); overflow: hidden; background: radial-gradient(700px 340px at 50% 100%, var(--glow), transparent 70%); border-top: 1px solid var(--line); }
.pg-final canvas.rain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .1; pointer-events: none; }
.pg-final > div { position: relative; }
.pg-final .eyebrow { font: 600 12px ui-monospace, Menlo, monospace; letter-spacing: .2em; text-transform: uppercase; color: var(--sage-2); margin: 0 auto 14px; }
.pg-final h2 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.04; letter-spacing: -.04em; margin: 0; }
.pg-final p { color: var(--muted); font-size: 18px; max-width: 32em; margin: 16px auto 0; }
.pg-final .cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.pg-btn { display: inline-flex; align-items: center; padding: 14px 22px; border-radius: 999px; font-weight: 650; font-size: 16px; transition: transform .15s, background .2s; }
.pg-btn.primary { background: var(--ivory); color: #141a17; box-shadow: 0 10px 40px rgba(245, 242, 236, .14); }
.pg-btn.primary:hover { transform: translateY(-1px); }
.pg-btn.ghost { border: 1px solid var(--line-2); }
.pg-btn.ghost:hover { border-color: var(--sage-2); background: rgba(115, 140, 125, .12); }

/* Footer */
.pg footer.pgfoot { border-top: 1px solid var(--line); padding: 40px 0 56px; color: var(--dim); font-size: 14px; }
.pg footer.pgfoot .wrap { width: min(1200px, calc(100% - 40px)); margin-inline: auto; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: center; }
.pg footer.pgfoot img { height: 24px; width: auto; }
.pg footer.pgfoot nav { display: flex; gap: 18px; flex-wrap: wrap; }
.pg footer.pgfoot a { color: var(--muted); }
.pg footer.pgfoot a:hover { color: var(--ivory); }

@media (max-width: 1080px) { .pg .pg-mast nav { display: none; } .pg .pg-mast .signin { margin-left: auto; } }
@media (max-width: 600px) {
  .pg .pg-mast .mast-row { gap: 10px; }
  .pg .pg-mast .signin { display: none; }
  .pg .pg-mast .buy { margin-left: auto; padding: 8px 13px; font-size: 14px; }
  .pg-hero { min-height: 72svh; }
  .pg-hero-inner { padding-top: 120px; }
  .pg-hero::before { background: linear-gradient(180deg, rgba(13, 19, 21, .66), rgba(13, 19, 21, .82) 55%, var(--canvas)); }
  .pg-hero .pg-lead { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .pg-hero-img { animation: none; }
  .pg .reveal { opacity: 1; transform: none; transition: none; }
  .pg canvas.rain, .pg-type .cursor { display: none; }
}
.pg .pg-mast .brand { flex: 0 0 auto; }

/* The early-access form (mail/join.css) in the sage palette */
.pg .join { background: radial-gradient(520px 240px at 0% 0%, rgba(115, 140, 125, .32), transparent 62%), linear-gradient(165deg, #1a2422, #111819); border: 1px solid var(--line-2); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.pg .join button { background: var(--ivory); color: #141a17; }
.pg .join button:hover { background: #fff; }