/* ============================================
   ARTOOMA SHARED COMPONENTS

   The component set specified in content-factory/DESIGN.md, "Components".
   These were built and proved on the results page, where they still live as
   page-scoped CSS inside public/results/index.html. This file is the shared
   copy so any surface can use them. Loaded after brand.css.

   Name mapping, so a later migration of the results page is mechanical.
   The results page uses names from its own domain; these are the generic ones.

     DESIGN.md name        here                results/index.html
     --------------------  ------------------  ----------------------
     filled-brand-card     .rp-fill            .rp-fill (same)
     gradient-frame        .rp-framed          .rp-framed (same)
     rainbow-field-grid    .rp-field-grid      .risk-grid
     accent-bar-callout    .rp-callout         .action-start-here
     bridge-spine          .rp-bridge          .section-transition
     dark-cta-card         .rp-dark-cta        .early-cta
     gold-icon-chip        .rp-icon-chip       .rp-icon-chip (same)
     gold-eyebrow-chip     .rp-eyebrow-chip    .rp-eyebrow-chip (same)
     button-primary        .btn-primary        .btn-primary (brand.css)

   Nothing here uses position:fixed, iframes, or target="_blank". Animation is
   opacity and transform only. See docs/impl/in-app-browser-rules.md.
   ============================================ */

:root {
  /* Gradient family. One family carries the brand, used as an accent or as a
     fill on a deliberate hero surface, never as wallpaper. */
  --rp-blue-gradient: linear-gradient(150deg, #3E6AE1 0%, #315AD2 55%, #2A4BB5 100%);
  --rp-rainbow: linear-gradient(125deg, #3E6AE1 0%, #7B5CE6 42%, #00B8FF 86%, #F5A524 100%);
  --rp-glow: radial-gradient(circle at 86% 12%, rgba(0, 184, 255, 0.34), transparent 52%);

  /* Colour */
  --rp-blue-deep: #2A4BB5;
  --rp-cyan: #00B8FF;
  --rp-gold: #F5A524;
  --rp-gold-soft: #FBC15A;
  --rp-ink: #0F172A;
  --rp-body: #475569;
  --rp-muted: #64748B;
  --rp-callout-tint: #F1F5FF;

  /* Canvas: the soft blue-light field the light sections sit on. */
  --rp-canvas-top: #F5F8FD;
  --rp-canvas-bottom: #E9EFFB;

  /* Radius scale */
  --rp-card-radius: 1.5rem;
  --rp-frame-radius: 2rem;
  --rp-chip-radius: 14px;

  /* Elevation */
  --rp-shadow-light: 0 18px 50px -24px rgba(15, 23, 42, 0.16), 0 4px 12px -6px rgba(15, 23, 42, 0.06);
  --rp-shadow-blue: 0 26px 60px -26px rgba(42, 75, 181, 0.5), 0 8px 20px -10px rgba(42, 75, 181, 0.32);
  --rp-shadow-dark: 0 26px 60px -28px rgba(15, 23, 42, 0.55);
}

/* ---- The light canvas ----------------------------------------------------
   The soft blue-light field. Light sections sit on this, and the navy cards
   are what break it. */
.rp-canvas {
  background: linear-gradient(180deg, var(--rp-canvas-top) 0%, var(--rp-canvas-bottom) 34%, var(--rp-canvas-bottom) 100%);
  color: var(--rp-body);
}

.rp-canvas h2,
.rp-canvas h3 {
  color: var(--rp-ink);
}

/* ---- filled-brand-card ---------------------------------------------------
   Blue fill plus the cyan glow overlaid top-right. How a card says "this is
   the important one" without going loud. Brand colour, not black. */
.rp-fill {
  position: relative;
  overflow: hidden;
  background: var(--rp-blue-gradient);
  box-shadow: var(--rp-shadow-blue);
  color: #ffffff;
}

.rp-fill::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--rp-glow);
  pointer-events: none;
  z-index: 0;
}

.rp-fill > * {
  position: relative;
  z-index: 1;
}

/* ---- gradient-frame ------------------------------------------------------
   A white panel wrapped in the rainbow gradient as an 8px border. Makes one
   section read as a single framed entity. Once or twice per page, not on
   every block. Flatten whatever sits inside it: one entity, one edge. */
.rp-framed {
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    var(--rp-rainbow) border-box;
  border: 8px solid transparent;
  border-radius: var(--rp-frame-radius);
  box-shadow: var(--rp-shadow-light);
  padding: 1.75rem;
}

.rp-framed > * {
  background: transparent;
  box-shadow: none;
  border: none;
}

/* ---- rainbow-field-grid --------------------------------------------------
   The grouped-card version of the frame. The rainbow is the full background
   and plain cells float on top with 8px gaps, so the gradient shows through
   as the lines around and between them. Connects a set of cards into one
   group, first to last. */
.rp-field-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 8px;
  background: var(--rp-rainbow);
  border-radius: var(--rp-frame-radius);
  box-shadow: var(--rp-shadow-light);
  overflow: hidden;
}

/* A cell in the field. Separation comes from the gradient showing through the
   gaps, never from a per-cell border. */
.rp-field-cell {
  background: #ffffff;
  color: var(--rp-ink);
  padding: 2rem 1.75rem;
  border-radius: var(--rp-chip-radius);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* ---- Stat type inside a cell --------------------------------------------
   Numbers are heroes: 800 weight, tabular so digits align. */
.rp-stat {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.rp-stat-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--rp-ink);
  line-height: 1.5;
  margin: 0;
}

.rp-stat-body {
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--rp-body);
  line-height: 1.6;
  margin: 0;
}

.rp-stat-source {
  font-size: 0.625rem;
  color: var(--rp-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: auto 0 0;
  padding-top: 0.4rem;
  line-height: 1.4;
}

.rp-stat-link {
  font-size: 0.875rem;
  font-weight: 600;
  color: #3E6AE1;
}

/* ---- accent-bar-callout --------------------------------------------------
   A pale panel with a 5px electric-blue left bar and an asymmetric radius.
   Holds one prescriptive line. The "here is the takeaway" box at the end of
   a section. */
.rp-callout {
  margin: 1.9rem 0 0;
  padding: 1.35rem 1.6rem;
  background: var(--rp-callout-tint);
  border-left: 5px solid #3E6AE1;
  border-radius: 0 0.875rem 0.875rem 0;
  font-size: 1.1875rem;
  font-weight: 600;
  color: var(--rp-ink);
  line-height: 1.6;
}

/* A standalone callout that is not trailing a section body. */
.rp-callout--standalone {
  margin: 0 auto;
  max-width: 44rem;
}

/* ---- bridge-spine --------------------------------------------------------
   A 2px vertical bar fading up from transparent, carrying a short one-line
   transition. Leads the eye from one section into the next. */
.rp-bridge {
  font-size: 1.125rem;
  color: var(--rp-body);
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  max-width: 38ch;
  margin: 0.5rem auto;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.35rem;
  text-wrap: balance;
}

.rp-bridge::before {
  content: '';
  width: 2px;
  height: 44px;
  border-radius: 2px;
  background: linear-gradient(180deg, transparent, rgba(62, 106, 225, 0.45));
}

/* The same spine with no words, used to lead into the dark close. */
.rp-bridge-line {
  width: 2px;
  height: 44px;
  margin: 0 auto 1.5rem;
  border-radius: 2px;
  background: linear-gradient(180deg, transparent, rgba(62, 106, 225, 0.45));
}

/* ---- dark-cta-card -------------------------------------------------------
   Deep navy on the light canvas. The strongest contrast on the page, which is
   why it carries the ask. Body text here is white at reduced alpha, never the
   light-surface body grey. */
.rp-dark-cta {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  padding: 2.5rem 1.75rem;
  border-radius: var(--rp-card-radius);
  background: var(--rp-ink);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--rp-shadow-dark);
}

.rp-dark-cta-title {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #ffffff;
  line-height: 1.3;
  text-wrap: balance;
  margin: 0 0 0.85rem;
}

.rp-dark-cta-body {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.6;
  margin: 0 0 1.25rem;
}

.rp-dark-cta-kicker {
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  margin: 0 0 1.5rem;
}

.rp-dark-cta .btn-primary {
  width: auto;
  min-width: 240px;
}

/* ---- Chips ---------------------------------------------------------------
   Gold marks research and warm accents. Blue marks steps and primary icons. */
.rp-icon-chip {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(160deg, var(--rp-gold-soft), var(--rp-gold));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px -6px rgba(245, 165, 36, 0.7);
  flex-shrink: 0;
}

.rp-icon-chip svg {
  width: 22px;
  height: 22px;
  stroke: #22345f;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rp-step-chip {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(160deg, #3E6AE1, #7B5CE6);
  color: #ffffff;
  font-size: 1.125rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 16px -8px rgba(62, 106, 225, 0.5);
  flex-shrink: 0;
}

.rp-eyebrow-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(245, 165, 36, 0.16);
  color: #FFD9A0;
  border: 1px solid rgba(245, 165, 36, 0.4);
  padding: 0.35rem 0.7rem 0.35rem 0.6rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.rp-eyebrow-chip::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rp-gold);
}

/* ---- Section heading -----------------------------------------------------
   One oversized headline per view, then settle into calm body. */
.rp-section-heading {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--rp-ink);
  letter-spacing: -0.015em;
  line-height: 1.2;
  text-wrap: balance;
  margin: 0 0 1.5rem;
}

.rp-section-stack {
  max-width: 72rem;
  margin: 0 auto;
  /* The bottom padding is load-bearing: it keeps a band of light canvas
     between the navy CTA card and the navy footer. Without it the two dark
     surfaces touch and read as one block, which kills the contrast the dark
     card exists for. */
  padding: 0 1rem 4.5rem;
  display: flex;
  flex-direction: column;
  gap: 2.75rem;
}

/* ---- Desktop -------------------------------------------------------------
   Mobile-first. Base styles target mobile; this adjusts up. */
@media (min-width: 768px) {
  .rp-section-stack {
    gap: 3.75rem;
    padding-bottom: 6rem;
  }

  .rp-section-heading {
    font-size: 2rem;
  }

  .rp-field-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .rp-framed {
    padding: 2.5rem;
  }

  .rp-stat {
    font-size: 3.25rem;
  }

  .rp-dark-cta {
    padding: 3rem 2.5rem;
  }
}

/* ---- Outcome list --------------------------------------------------------
   Sits inside a gradient-frame. Advertises the outcome, not a feature list:
   each row is a thing the reader ends up holding. */
.rp-outcome-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.rp-outcome {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.rp-outcome-title {
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--rp-ink);
  margin: 0 0 0.35rem;
}

.rp-outcome-body {
  font-size: 0.9375rem;
  color: var(--rp-body);
  line-height: 1.6;
  margin: 0;
}

/* ---- The close -----------------------------------------------------------
   Heading, mascot, spine, dark card. The dark card against the light canvas
   is the strongest contrast on the page, which is why it carries the ask. */
.rp-close {
  text-align: center;
}

.rp-close-heading {
  font-size: 1.875rem;
  margin-bottom: 1.75rem;
}

.rp-close-media {
  max-width: 420px;
  margin: 0 auto 2rem;
}

.rp-close-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--rp-card-radius);
  box-shadow: var(--rp-shadow-light);
}

@media (min-width: 768px) {
  .rp-close-heading {
    font-size: 2.25rem;
  }

  .rp-close-media {
    max-width: 480px;
  }

  .rp-outcome-list {
    gap: 1.75rem;
  }
}