/* ============================================================
   Rocket Show — global site pages
   Page templates for the parts of the site that have moved off
   WordPress, starting with /products. The global menu itself lives in
   base.css — /spark uses it too. Loaded after base.css.
   ============================================================ */

/* ============================================================
   PAGE HEAD
   ============================================================ */
.page-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--indigo-950), var(--indigo-800) 55%, var(--purple-700));
  color: #fff;
  padding: 70px 0 76px;
  text-align: center;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto;
  height: 150%;
  background: radial-gradient(closest-side, rgba(157, 107, 255, .5), transparent 70%);
  opacity: .8;
  pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; margin-bottom: 14px; }
.page-hero .lede {
  max-width: 60ch;
  margin: 0 auto;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, .78);
}
.page-hero .kicker { margin-bottom: 12px; display: block; }

.section { padding: 84px 0; }
.section-alt { background: var(--paper-2); }
.section-head { max-width: 62ch; margin: 0 auto 44px; text-align: center; }
.section-head .section-sub { margin-top: 12px; color: var(--slate); font-size: 1.05rem; }

/* ============================================================
   PRODUCT CARDS
   ============================================================ */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  align-items: start;
}

.product-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

.product-media {
  position: relative;
  display: grid;
  place-items: center;
  padding: 34px 28px 26px;
  background: linear-gradient(150deg, var(--paper-3), var(--paper-2));
  min-height: 250px;
}
.product-media img { width: min(360px, 100%); height: auto; }
/* the software shot is a screenshot, not a product photo — give it an edge so
   it does not bleed into the panel behind it */
.product-media img.shot {
  border-radius: 12px;
  box-shadow: var(--shadow);
  width: min(320px, 100%);
}

.product-body { display: flex; flex-direction: column; gap: 16px; padding: 30px 30px 34px; flex: 1; }
.product-body h2 { font-size: 1.7rem; text-transform: uppercase; }
.product-tagline { color: var(--slate); }

.product-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: .45em .85em;
  border-radius: 999px;
}
.product-badge.paid { background: rgba(124, 58, 237, .1); color: var(--purple-600); }
.product-badge.free { background: rgba(21, 128, 61, .1); color: #15803d; }

.product-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.product-price strong { font-family: var(--font-display); font-size: 2rem; color: var(--navy-900); }
.product-price span { font-size: .9rem; color: var(--slate-light); }

.product-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.product-list li {
  position: relative;
  padding-left: 28px;
  font-size: .96rem;
  color: var(--slate);
}
.product-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .42em;
  width: 16px; height: 9px;
  border-left: 2.5px solid var(--purple-500);
  border-bottom: 2.5px solid var(--purple-500);
  transform: rotate(-45deg);
}
.product-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 6px; }
.product-fine { font-size: .84rem; color: var(--slate-light); }

/* ============================================================
   COMPARISON
   ============================================================ */
/* The table is the one block that cannot reflow below ~520px, so it scrolls
   inside its own box rather than pushing the whole page sideways. */
.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.compare th, .compare td {
  padding: 15px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: .95rem;
  vertical-align: top;
}
.compare thead th {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--navy-900);
  background: var(--paper-2);
}
.compare tbody th { font-weight: 600; color: var(--navy-800); width: 30%; }
.compare td { color: var(--slate); }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: none; }
.compare .yes { color: #15803d; font-weight: 600; }
.compare .no { color: var(--slate-light); }

/* ============================================================
   COMMUNITY EDITION SETUP
   ============================================================ */
.setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }

.setup-steps { counter-reset: step; display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.setup-steps li { position: relative; padding-left: 54px; }
.setup-steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0; top: -2px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: #fff;
  background: linear-gradient(135deg, var(--purple-600), var(--purple-500));
}
.setup-steps h3 { margin-bottom: 5px; font-size: 1.1rem; }
.setup-steps p { color: var(--slate); font-size: .96rem; }
.setup-steps code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em;
  background: var(--paper-3);
  border-radius: 6px;
  padding: .1em .4em;
}
.setup-steps a:not(.btn) { color: var(--purple-600); text-decoration: underline; text-underline-offset: 2px; }

.panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 30px;
}
.panel + .panel { margin-top: 22px; }
.panel h3 { margin-bottom: 14px; }
.panel p { color: var(--slate); font-size: .96rem; }
/* Prose links only. Without the :not(), this beats .btn-primary on specificity
   and repaints the download button purple-on-purple — its own colour, its own
   background, nothing left to read. */
.panel a:not(.btn) { color: var(--purple-600); text-decoration: underline; text-underline-offset: 2px; }

.download-main { display: grid; gap: 12px; }
.download-alt { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; }
.download-alt a { font-size: .9rem; }

.hw-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.hw-list li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; font-size: .96rem; color: var(--slate); }
.hw-list svg { color: var(--purple-500); margin-top: 3px; }

/* ============================================================
   CLOSING CTA
   ============================================================ */
.cta-band {
  background: linear-gradient(135deg, var(--indigo-900), var(--purple-700));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 52px 40px;
  text-align: center;
}
.cta-band h2 { color: #fff; margin-bottom: 14px; }
.cta-band p { color: rgba(255, 255, 255, .75); max-width: 56ch; margin: 0 auto 26px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .product-grid, .setup-grid { grid-template-columns: 1fr; }
  .section { padding: 64px 0; }
}

@media (max-width: 560px) {
  .page-hero { padding: 54px 0 58px; }
  .product-body { padding: 26px 22px 30px; }
  .cta-band { padding: 40px 24px; }
  .panel { padding: 24px 20px; }
}

/* ============================================================
   HERO EXTRAS
   ============================================================ */
.page-hero .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 30px;
}
.hero-shot {
  width: min(760px, 100%);
  height: auto;
  margin: 44px auto 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: block;
  position: relative;
  z-index: 2;
}

/* ============================================================
   TILES
   A card grid that carries a short feature, audience or benefit.
   ============================================================ */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 22px;
}
.tile {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; }
.tile h3 { margin-bottom: 8px; }
.tile p { color: var(--slate); font-size: .96rem; }
.tile-icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  margin-bottom: 16px;
  color: var(--purple-600);
  background: var(--paper-3);
}
.tile:hover .tile-icon { background: var(--purple-600); color: #fff; }

/* ============================================================
   SHOWCASE ROWS
   One feature, one screenshot, alternating sides down the page.
   ============================================================ */
.showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 54px;
  align-items: center;
}
.showcase + .showcase { margin-top: 72px; }
/* The flipped row swaps the columns rather than reversing the DOM, so the
   heading still comes before its screenshot for a screen reader. */
.showcase--flip .showcase-media { order: -1; }
.showcase-copy .kicker { display: block; margin-bottom: 12px; }
.showcase-copy h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: 14px; }
.showcase-copy p { color: var(--slate); }
.showcase-copy p + p { margin-top: 12px; }
.showcase-copy a { color: var(--purple-600); text-decoration: underline; text-underline-offset: 2px; }
.showcase-media img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.showcase-media.tall img { width: min(340px, 100%); margin: 0 auto; }

/* ============================================================
   BLOG TEASER
   Filled in from the WordPress REST API at runtime — the blog is
   the one part of the site still living there.
   ============================================================ */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.blog-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.blog-card time { font-size: .82rem; color: var(--slate-light); }
.blog-card h3 { font-size: 1.15rem; }
.blog-card p { color: var(--slate); font-size: .94rem; }
.blog-card span { color: var(--purple-600); font-weight: 600; font-size: .9rem; margin-top: auto; }

/* ============================================================
   SUPPORT
   ============================================================ */
.info-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.info-list li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; }
.info-list svg { color: var(--purple-500); margin-top: 3px; }
.info-list h3 { font-size: 1rem; margin-bottom: 4px; }
.info-list p, .info-list address {
  color: var(--slate);
  font-size: .95rem;
  font-style: normal;
  line-height: 1.6;
}
.info-list a { color: var(--purple-600); text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .showcase { grid-template-columns: 1fr; gap: 28px; }
  .showcase + .showcase { margin-top: 52px; }
  .showcase--flip .showcase-media { order: 0; }
}

/* ============================================================
   BLOG LISTING
   ============================================================ */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
}
.post-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
/* height:auto or the HTML height attribute wins and aspect-ratio never
   applies — which stretched these covers to 700px tall. */
.post-card img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.post-card-body { display: flex; flex-direction: column; gap: 10px; padding: 26px 26px 30px; flex: 1; }
.post-card time { font-size: .82rem; color: var(--slate-light); }
.post-card h2 { font-size: 1.25rem; text-transform: none; letter-spacing: 0; line-height: 1.25; }
.post-card p { color: var(--slate); font-size: .95rem; }
.post-card span { margin-top: auto; padding-top: 6px; color: var(--purple-600); font-weight: 600; font-size: .9rem; }

/* ============================================================
   A POST
   ============================================================ */
.post .page-hero h1 { font-size: clamp(2rem, 4vw, 3.1rem); text-transform: none; letter-spacing: -0.5px; }
.post .page-hero time { font-variant-numeric: tabular-nums; }

.post-cover {
  width: min(900px, 100%);
  height: auto;              /* see .post-card img above */
  margin: -46px auto 0;      /* lifted into the hero above it */
  position: relative;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Prose measure: long enough to read, short enough not to lose the line. */
.post-body {
  width: min(68ch, calc(100% - 48px));
  margin: 52px auto 0;
  font-size: 1.06rem;
  line-height: 1.75;
  color: var(--ink);
}
.post-body > * + * { margin-top: 1.15em; }
.post-body h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  text-transform: none;
  letter-spacing: -0.3px;
  margin-top: 1.9em;
}
.post-body h3 { font-size: 1.25rem; margin-top: 1.6em; }
.post-body ul, .post-body ol { padding-left: 1.3em; }
.post-body li + li { margin-top: .4em; }
.post-body a {
  color: var(--purple-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.post-body blockquote {
  margin-left: 0;
  padding-left: 20px;
  border-left: 3px solid var(--violet-400);
  color: var(--slate);
  font-style: italic;
}
.post-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em;
  background: var(--paper-3);
  border-radius: 6px;
  padding: .1em .4em;
}

.post-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  max-width: 900px;
  margin: 64px auto 0;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.post-nav-link {
  max-width: 46%;
  font-weight: 600;
  font-size: .95rem;
  color: var(--navy-800);
  transition: color .2s ease;
}
.post-nav-link:hover { color: var(--purple-600); }
.post-nav-link.next { margin-left: auto; text-align: right; }
.post-back { max-width: 900px; margin: 26px auto 0; }
.post-back a { color: var(--purple-600); font-weight: 600; font-size: .95rem; }

/* ------------------------------------------------------------
   Embedded video, click to load
   The player is only fetched once someone asks for it, which is
   what lets the caption under the frame say what it says. The
   handler that swaps in the iframe lives in script.js.
   ------------------------------------------------------------ */
.post-video { margin-top: 2em; }
.video-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--navy-900);
}
.video-wrap iframe, .video-facade { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-facade {
  display: grid;
  place-items: center;
  padding: 0;
  background: none;
  cursor: pointer;
}
.video-poster { width: 100%; height: 100%; object-fit: cover; }
.video-play {
  position: absolute;
  width: 68px; height: 68px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--purple-600), var(--purple-500));
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .6);
  transition: transform .2s ease;
}
.video-facade:hover .video-play { transform: scale(1.08); }
.video-note { margin-top: 10px; font-size: .84rem; color: var(--slate-light); }

@media (max-width: 620px) {
  .post-cover { margin-top: -26px; border-radius: var(--radius); }
  .post-nav-link { max-width: 100%; }
  .post-nav-link.next { margin-left: 0; text-align: left; }
}