/* ============================================
   NEWSREEL — /publish/ (Sep 2026)
   Journalist-facing marketing page. Scoped under .pb26.
   Renders dark regardless of site theme; theme toggle hidden here.
   Shares the /about/ design language (Bree Serif + IBM Plex, black/charcoal/red).
   ============================================ */

body { background: #0F0F0F; }
.theme-toggle, .theme-toggle--mobile { display: none !important; }

.pb26 {
  padding-top: 92px;
  --pb-black: #000000;
  --pb-charcoal: #0F0F0F;
  --pb-lead: #1F1F1F;
  --pb-iron: #3A3A3A;
  --pb-steel: #6B6B6B;
  --pb-ash: #898989;
  --pb-silver: #ADADAD;
  --pb-smoke: #C8C8C8;
  --pb-paper: #F0F0F0;
  --pb-white: #FFFFFF;
  --pb-red: #FF6343;
  --pb-yellow: #EDBD1F;
  --pb-body: rgba(255,255,255,0.92);
  background: var(--pb-charcoal);
  color: var(--pb-white);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.pb26 img { max-width: 100%; display: block; }
.pb26 a { color: var(--pb-yellow); text-decoration: underline; text-underline-offset: 3px; }
.pb26 h1, .pb26 h2, .pb26 .statement, .pb26 .deal-num { font-family: 'Bree Serif', serif; font-weight: 400; margin: 0; }
.pb26 p { margin: 0; }
.pb26 .wrap { max-width: 1240px; margin: 0 auto; padding-left: 48px; padding-right: 48px; }
.pb26 .btn {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
  display: inline-block; padding: 14px 28px; border-radius: 8px; border: none;
  background: var(--pb-red); color: var(--pb-black); white-space: nowrap;
}
.pb26 .btn-ghost { background: transparent; color: var(--pb-white); box-shadow: inset 0 0 0 1px var(--pb-iron); }
.pb26 .label { display: block; margin-bottom: 14px; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--pb-ash); font-weight: 500; }

/* ---------- hero ---------- */
.pb26 .pb-hero { position: relative; overflow: hidden; text-align: left; padding: 0; }
.pb26 .pb-hero h1 {
  font-size: 68px; line-height: 1.06; letter-spacing: -0.03em;
  padding-top: 44px; margin-bottom: 28px; color: var(--pb-white);
}
.pb26 .hero-note { font-size: 15px; color: var(--pb-ash); margin-top: 20px; max-width: 46ch; }
.pb26 .pb-hero-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: start; }
.pb26 .pb-hero p { font-size: 20px; line-height: 1.55; color: var(--pb-body); max-width: 46ch; }
.pb26 .hero-actions { display: flex; gap: 14px; align-items: center; margin-top: 36px; flex-wrap: wrap; }
.pb26 .pb-hero-phone { display: flex; justify-content: flex-end; padding-bottom: 56px; }
.pb26 .device { border-radius: 40px; padding: 9px; background: #161616; border: 1px solid #2A2A2A; box-shadow: 0 40px 100px rgba(0,0,0,0.7), 0 0 0 1px #333333; }
.pb26 .device img { width: 270px; height: 560px; object-fit: cover; object-position: top; border-radius: 32px; }
.pb26 .grain { position: absolute; inset: 0; pointer-events: none; opacity: 0.07; mix-blend-mode: overlay; z-index: 2; }

/* ---------- roster strip ---------- */
.pb26 .roster { border-top: 1px solid var(--pb-lead); border-bottom: 1px solid var(--pb-lead); }
.pb26 .roster .wrap { display: flex; align-items: center; gap: 40px; padding-top: 22px; padding-bottom: 22px; flex-wrap: wrap; }
.pb26 .roster .names { font-family: 'Bree Serif', serif; font-size: 20px; color: var(--pb-smoke); }

/* ---------- get ---------- */
.pb26 .get { padding: 80px 0; }
.pb26 .lede { font-size: 19px; line-height: 1.6; color: var(--pb-body); max-width: 60ch; }
.pb26 .get h2 { font-size: 40px; letter-spacing: -0.022em; margin-bottom: 20px; max-width: 22ch; }
.pb26 .get-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.pb26 .get-item { border-top: 1px solid var(--pb-iron); padding-top: 22px; }
.pb26 .get-item h3 { font-family: 'Bree Serif', serif; font-weight: 400; font-size: 24px; margin: 0 0 12px; }
.pb26 .get-item p { font-size: 16px; line-height: 1.65; color: var(--pb-smoke); }

/* ---------- keep / pay ---------- */
.pb26 .keep { border-top: 1px solid var(--pb-lead); padding: 72px 0; }
.pb26 .pay { border-top: 1px solid var(--pb-lead); padding: 72px 0; background: var(--pb-black); }
.pb26 .keep h2, .pb26 .pay h2 { font-size: 40px; letter-spacing: -0.022em; margin-bottom: 40px; }
.pb26 .pay-foot { font-size: 15px; color: var(--pb-ash); margin-top: 32px; }
.pb26 .pill {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  display: inline-block; padding: 6px 12px; border-radius: 6px;
}
.pb26 .pill-live { background: var(--pb-red); color: var(--pb-black); }
.pb26 .pill-soon { background: transparent; color: var(--pb-ash); box-shadow: inset 0 0 0 1px var(--pb-iron); }
.pb26 .get-item h3 .pill { margin-left: 8px; vertical-align: middle; }

/* ---------- model ---------- */
.pb26 .model { border-top: 1px solid var(--pb-lead); padding: 80px 0; }
.pb26 .model-grid { display: grid; grid-template-columns: 8fr 4fr; gap: 64px; align-items: center; }
.pb26 .model h2 { font-size: 40px; letter-spacing: -0.022em; margin-bottom: 20px; max-width: 20ch; }
.pb26 .model p { font-size: 18px; line-height: 1.65; color: var(--pb-body); max-width: 60ch; }
.pb26 .model-side { justify-self: end; }

/* ---------- how ---------- */
.pb26 .how { border-top: 1px solid var(--pb-lead); padding: 88px 0; }
.pb26 .how-outer { display: grid; grid-template-columns: 1fr auto; gap: 88px; align-items: center; }
.pb26 .how h2 { font-size: 40px; letter-spacing: -0.022em; margin-bottom: 40px; }
.pb26 .step { display: grid; grid-template-columns: 44px 1fr; gap: 20px; padding: 22px 0; border-top: 1px solid var(--pb-iron); }
.pb26 .step:last-child { border-bottom: 1px solid var(--pb-iron); }
.pb26 .step .n { font-family: 'IBM Plex Mono', monospace; font-size: 14px; color: var(--pb-red); padding-top: 4px; }
.pb26 .step h3 { font-family: 'Bree Serif', serif; font-weight: 400; font-size: 22px; margin: 0 0 6px; }
.pb26 .step p { font-size: 16px; line-height: 1.6; color: var(--pb-smoke); max-width: 46ch; }

/* ---------- statement ---------- */
.pb26 .say { border-top: 1px solid var(--pb-lead); padding: 96px 0; background: var(--pb-black); }
.pb26 .statement { font-size: 56px; line-height: 1.12; letter-spacing: -0.024em; max-width: 24ch; margin-bottom: 24px; }
.pb26 .say p { font-size: 18px; line-height: 1.65; color: var(--pb-body); max-width: 58ch; }

/* ---------- faq ---------- */
.pb26 .faq { border-top: 1px solid var(--pb-lead); padding: 72px 0 88px; }
.pb26 .faq h2 { font-size: 40px; letter-spacing: -0.022em; margin-bottom: 44px; }
.pb26 .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px 72px; }
.pb26 .qa { border-top: 1px solid var(--pb-iron); padding-top: 20px; }
.pb26 .qa .q { font-family: 'Bree Serif', serif; font-size: 22px; margin-bottom: 10px; }
.pb26 .qa .a { font-size: 15.5px; line-height: 1.6; color: var(--pb-smoke); max-width: 52ch; }

/* ---------- cta ---------- */
.pb26 .cta { background: var(--pb-red); padding: 96px 0; }
.pb26 .cta h2 { font-size: 54px; letter-spacing: -0.024em; line-height: 1.08; margin-bottom: 20px; color: var(--pb-black); }
.pb26 .cta p { font-size: 18px; color: rgba(0,0,0,0.78); max-width: 50ch; margin-bottom: 36px; }
.pb26 .cta p a { color: var(--pb-black); }
.pb26 .cta .btn { background: var(--pb-black); color: var(--pb-white); }
.pb26 .cta-sig { font-size: 14px; color: rgba(0,0,0,0.6); margin-top: 28px; }

@media (max-width: 900px) {
  .pb26 { padding-top: 69px; }
  .pb26 .wrap { padding-left: 20px; padding-right: 20px; }
  .pb26 .pb-hero h1 { font-size: 42px; padding-top: 28px; max-width: none; }
  .pb26 .model-grid { grid-template-columns: 1fr; gap: 28px; }
  .pb26 .model-side { justify-self: start; }
  .pb26 .pb-hero-grid, .pb26 .get-grid, .pb26 .faq-grid, .pb26 .how-outer { grid-template-columns: 1fr; gap: 32px; }
  .pb26 .pb-hero-phone { justify-content: flex-start; padding-bottom: 40px; }
  .pb26 .device img { width: 240px; height: 500px; }
  .pb26 .get h2, .pb26 .keep h2, .pb26 .pay h2, .pb26 .model h2, .pb26 .how h2, .pb26 .faq h2 { font-size: 32px; }
  .pb26 .statement { font-size: 34px; }
  .pb26 .cta h2 { font-size: 36px; }
  .pb26 .roster .wrap { gap: 12px; }
  .pb26 .roster .names { font-size: 17px; }
}