/* ==========================================================================
   Royalty Technology — Internal page template
   ========================================================================== */

/* ---- Page hero ----------------------------------------------------------- */

.page-hero {
  position: relative;
  color: var(--text-on-inverse);
  background: var(--ink-950);
}
.page-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: var(--space-16);
  align-items: center;
  padding-block: var(--space-20) var(--space-16);
}
.page-hero h1 {
  margin: 0;
  font-size: var(--fs-h1);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
}
.page-hero__copy > p {
  max-width: 52ch;
  margin-top: var(--space-5);
  color: var(--text-on-inverse-muted);
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
}
.page-hero__copy .pill { margin-top: var(--space-6); }
.page-hero__copy .pill .icon { width: 15px; height: 15px; color: var(--brand-on-dark); }

.page-hero__media { margin: 0; }
.page-hero__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}

/* Illustrations are cut-outs, not photos: no frame, no crop. They sit on a
   soft brand glow and may overflow the column slightly for depth. */
.page-hero__media--art {
  position: relative;
  display: grid;
  place-items: center;
}
.page-hero__media--art img {
  position: relative;
  z-index: 1;
  width: min(112%, 620px);
  max-width: none;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
}
.art-glow {
  position: absolute;
  z-index: 0;
  width: 74%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(52, 196, 14, .20), rgba(52, 196, 14, 0) 68%);
  filter: blur(6px);
}

/* ---- Section jump -------------------------------------------------------- */

.page-jump {
  position: sticky;
  z-index: var(--z-sticky);
  top: 76px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.page-jump__inner {
  display: flex;
  flex-wrap: wrap;      /* wrap rather than clip when there are many sections */
  gap: 0 var(--space-2);
}
@media (max-width: 900px) {
  .page-jump__inner { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
}
.page-jump a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 14px;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.page-jump a span {
  color: var(--text-subtle);
  font-family: var(--font-mono), monospace;
  font-size: var(--fs-label);
}
.page-jump a:hover { color: var(--text); border-bottom-color: var(--brand); }

/* ---- Section cards ------------------------------------------------------- */

.page-sections__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.page-section {
  display: flex;
  flex-direction: column;
  padding: var(--space-10);
  scroll-margin-top: 140px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.page-section:hover { border-color: var(--brand-200); box-shadow: var(--shadow-md); }

/* Card illustration: sits above the meta row, bleeds to the card edges and
   is allowed to lift slightly out of the top on hover. */
.page-section--art { padding-top: 0; overflow: hidden; }
.page-section__art {
  position: relative;
  margin: 0 calc(var(--space-10) * -1) var(--space-6);
  padding: var(--space-6) var(--space-6) 0;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(52, 196, 14, .10), rgba(52, 196, 14, 0) 70%),
    var(--surface-subtle);
  border-bottom: 1px solid var(--border);
}
.page-section__art img {
  width: min(78%, 320px);
  height: auto;
  margin-inline: auto;
  transition: transform var(--dur-slow) var(--ease-out);
}
.page-section--art:hover .page-section__art img { transform: translateY(-6px) scale(1.02); }

.page-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-8);
}
.page-section--art .page-section__head { margin-bottom: var(--space-5); }
.page-section__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  color: var(--brand-on-light);
  background: var(--brand-050);
  border: 1px solid var(--brand-200);
  border-radius: var(--radius-md);
}
.page-section__icon .icon { width: 24px; height: 24px; }
.page-section__number {
  color: var(--text-subtle);
  font-family: var(--font-mono), monospace;
  font-size: var(--fs-xs);
  letter-spacing: .1em;
}
.page-section h2 {
  margin-bottom: var(--space-3);
  font-size: var(--fs-h3);
}
.page-section > p {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}
.page-section .checklist { margin-bottom: var(--space-8); }
.page-section .text-link { margin-top: auto; }

/* Store: no jump nav, four-up grid */
.page--store .page-jump,
.page--support .page-jump { display: none; }
.page--store .page-sections__grid,
.page--support .page-sections__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---- Support console ----------------------------------------------------- */

.support-console {
  padding-block: var(--section-y-tight);
  background: var(--surface-subtle);
  border-bottom: 1px solid var(--border);
}
.support-console__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-16);
  align-items: center;
}
.support-console h2 { font-size: var(--fs-h2); }
.support-console__inner > div > p:last-child {
  max-width: 46ch;
  margin-top: var(--space-4);
  color: var(--text-muted);
}

.support-track label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.support-track__field { display: flex; gap: var(--space-2); }
.support-track input {
  flex: 1;
  min-width: 0;
  height: 52px;
  padding-inline: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
.support-track input:focus-visible { border-color: var(--brand); outline-offset: 0; }
.support-track__note {
  margin-top: var(--space-3);
  color: var(--text-muted);
  font-size: var(--fs-xs);
}
.support-track__note a { color: var(--brand-on-light); font-weight: 600; text-decoration: underline; }
.support-track__note.is-error { color: var(--red-600); }


/* Support console illustration */
.support-console__inner { grid-template-columns: minmax(0, .8fr) minmax(0, 1.05fr) minmax(0, 1.15fr); }
.support-console__art {
  position: relative;
  display: grid;
  place-items: center;
  margin: 0;
}
.support-console__art::before {
  position: absolute;
  content: "";
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(52, 196, 14, .16), rgba(52, 196, 14, 0) 68%);
}
.support-console__art img { position: relative; width: min(100%, 300px); height: auto; }

/* ---- About: foundations -------------------------------------------------- */

.about-foundations__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}
.foundation-card {
  padding: var(--space-8);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--border-inverse);
  border-radius: var(--radius-lg);
}
.foundation-card h3 {
  margin-bottom: var(--space-4);
  color: var(--brand-on-dark);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.foundation-card p {
  color: var(--text-on-inverse-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

/* ---- About: story -------------------------------------------------------- */

.about-story__layout {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: var(--space-20);
  align-items: center;
}
.about-story__media { margin: 0; }
.about-story__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.about-story h2 { font-size: var(--fs-h2); }
.about-story__copy > p {
  margin-top: var(--space-5);
  color: var(--text-muted);
  line-height: var(--lh-body);
}
.checklist--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.pull-quote {
  margin: var(--space-8) 0 0;
  padding-left: var(--space-6);
  border-left: 3px solid var(--brand);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: var(--lh-snug);
}

/* ---- About: team --------------------------------------------------------- */

.about-team__layout {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: var(--space-16);
  align-items: center;
}
.about-team h2 { font-size: var(--fs-h2); }
.about-team__layout > div > p:last-child {
  margin-top: var(--space-5);
  color: var(--text-muted);
  line-height: var(--lh-body);
}
.about-team__media { margin: 0; }
.about-team__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}