/* ============================================================================
   jp-brand.css — The JetPatient Design Language · single source of brand truth
   ----------------------------------------------------------------------------
   One layer every surface can consume: marketing pages, Price X-Ray, Passport
   panels, Clinic Portal inserts. Components reference these via
   var(--jp-brand-*, <fallback>) so adopting the layer is incremental and safe.

   The brand in one sentence: *aviation-grade trust for medical travel* —
   deep navy authority, cyan lift, boarding-pass and inked-stamp motifs,
   Plus Jakarta Sans with tight display tracking, generous radii, honest motion.

   Block: Brand Layer v1 (2026-07-16 · v2.2.4)
   ============================================================================ */
:root{
  /* ── color · core ─────────────────────────────────────────────────────── */
  --jp-brand-navy:       #0A2D6E;   /* authority — headers, primary actions   */
  --jp-brand-navy-deep:  #082452;   /* hover / depth                          */
  --jp-brand-navy-ink:   #0D1E42;   /* footers, night surfaces                */
  --jp-brand-cyan:       #00C9C0;   /* lift — accents, success-forward CTAs   */
  --jp-brand-cyan-deep:  #0FA79F;   /* hover, links on light                  */
  --jp-brand-cyan-tint:  #E6FAF9;   /* washes                                 */
  --jp-brand-cyan-line:  #99E8E3;   /* tinted borders                         */

  /* ── color · neutrals ─────────────────────────────────────────────────── */
  --jp-brand-ink:        #12233F;   /* body text                              */
  --jp-brand-ink-2:      #516079;   /* supporting text                        */
  --jp-brand-ink-3:      #8A97AC;   /* captions, hints                        */
  --jp-brand-bg:         #F5F8FC;   /* page canvas                            */
  --jp-brand-card:       #FFFFFF;
  --jp-brand-line:       #E4EAF3;
  --jp-brand-line-2:     #CFD9E8;

  /* ── color · semantic ─────────────────────────────────────────────────── */
  --jp-brand-green:      #0E9F6E;   /* savings, verified, success             */
  --jp-brand-green-tint: #E7F7F0;
  --jp-brand-green-line: #8AE0BF;
  --jp-brand-amber:      #C2760A;   /* caution, over-median                   */
  --jp-brand-amber-tint: #FBF1DE;
  --jp-brand-coral:      #D85A30;   /* alerts, struck-through past prices     */
  --jp-brand-purple:     #6C5CE0;   /* AI reasoning, agent voice              */
  --jp-brand-purple-tint:#EEEBFB;

  /* ── type ─────────────────────────────────────────────────────────────── */
  --jp-brand-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --jp-brand-track-display: -0.02em;  /* headlines                            */
  --jp-brand-track-label:   0.08em;   /* uppercase kickers                    */

  /* ── shape & elevation ────────────────────────────────────────────────── */
  --jp-brand-r-sm:  10px;
  --jp-brand-r:     14px;
  --jp-brand-r-lg:  22px;
  --jp-brand-shadow:    0 1px 3px rgba(16,42,84,.06), 0 8px 24px rgba(16,42,84,.06);
  --jp-brand-shadow-lg: 0 24px 60px rgba(10,45,110,.16);

  /* ── motion ───────────────────────────────────────────────────────────── */
  --jp-brand-ease:      cubic-bezier(.22,.8,.32,1);
  --jp-brand-dur-fast:  .16s;
  --jp-brand-dur:       .3s;
  --jp-brand-dur-slow:  .5s;
}

/* ── primitives (opt-in classes — safe to load anywhere) ─────────────────── */
.jp-b-card{ background:var(--jp-brand-card); border:1px solid var(--jp-brand-line);
  border-radius:var(--jp-brand-r-lg); box-shadow:var(--jp-brand-shadow); }
.jp-b-kicker{ font-family:var(--jp-brand-font); font-size:12.5px; font-weight:800;
  letter-spacing:var(--jp-brand-track-label); text-transform:uppercase; color:var(--jp-brand-cyan-deep); }
.jp-b-btn{ font-family:var(--jp-brand-font); font-weight:700; font-size:14.5px;
  border-radius:var(--jp-brand-r-sm); padding:11px 22px; cursor:pointer; border:1px solid transparent;
  transition:transform var(--jp-brand-dur-fast) var(--jp-brand-ease), box-shadow var(--jp-brand-dur-fast); }
.jp-b-btn--navy{ background:var(--jp-brand-navy); color:#fff; }
.jp-b-btn--navy:hover{ background:var(--jp-brand-navy-deep); transform:translateY(-1px); box-shadow:0 8px 20px rgba(10,45,110,.25); }
.jp-b-btn--cyan{ background:var(--jp-brand-cyan); color:#04302D; }
.jp-b-btn--cyan:hover{ background:var(--jp-brand-cyan-deep); color:#fff; transform:translateY(-1px); }
.jp-b-badge{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800;
  text-transform:uppercase; letter-spacing:.04em; border-radius:999px; padding:3px 10px;
  background:var(--jp-brand-cyan-tint); color:var(--jp-brand-cyan-deep); border:1px solid var(--jp-brand-cyan-line); }
.jp-b-badge--verified{ background:var(--jp-brand-green-tint); color:var(--jp-brand-green); border-color:var(--jp-brand-green-line); }

/* ── the inked stamp motif (shared with Passport milestones) ─────────────── */
.jp-b-stamp{ display:inline-grid; place-items:center; width:96px; height:96px; border-radius:50%;
  border:3px double var(--jp-brand-green); color:var(--jp-brand-green);
  font-family:var(--jp-brand-font); font-size:10px; font-weight:900; text-transform:uppercase;
  letter-spacing:.1em; text-align:center; line-height:1.5; transform:rotate(-9deg);
  background:radial-gradient(circle at 50% 40%, rgba(14,159,110,.07), transparent 70%); }
.jp-b-stamp.inked{ animation:jpBrandStamp .45s var(--jp-brand-ease) both; }
@keyframes jpBrandStamp{
  0%{ opacity:0; transform:rotate(-9deg) scale(1.9); }
  55%{ opacity:1; transform:rotate(-9deg) scale(.94); }
  100%{ transform:rotate(-9deg) scale(1); }
}
/* Animation runs for everyone (per design intent). */


/* Accessibility — reduced motion (restored 2026-08-10, v2.6.0).
   The inked-stamp motif animates; honour the user's setting. */
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) {
  .jp-stamp, .jp-stamp *, [class*="inked"], [class*="stamp"] {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-fill-mode: forwards !important;
    transition-duration: 1ms !important;
  }
}