/* ==========================================================
   JPXGLOBAL PREMIUM POLISH — v2.2.0
   Font readability, layout balance, desktop/laptop scale,
   container widths, section rhythm, card shadows, hero balance.
   ========================================================== */

/* ── GLOBAL TYPOGRAPHY FLOOR ──────────────────────────────── */
/* Belt-and-suspenders: ensure body text never falls below 16px */
body { font-size: 1rem; }                   /* 16px base */
p, li, td, dd, dt { font-size: 1rem; }     /* 16px paragraph minimum */
.section-body  { font-size: 1.0625rem; }   /* 17px section body */

/* Eyebrows: 12px minimum */
.eyebrow,
.section-eyebrow-icon,
.card__eyebrow,
.faq-group-heading,
.form-legend,
.sidebar-box__heading,
.footer__col-heading,
.scope-box__heading { font-size: 0.75rem !important; }  /* 12px */

/* Ensure card body text is legible */
.card__body,
.offering-card__body,
.comparison-card__body,
.caps-grid__body,
.caps-tile__title,
.svv-card__desc,
.reassurance-card__body,
.numbered-step__body,
.hiw-step__sub,
.mini-step__body { font-size: 0.9375rem; }   /* 15px minimum */

/* Nav items — readable */
.nav-link { font-size: 1rem; }
.nav-dropdown li a { font-size: 0.9375rem; }

/* Footer text */
.footer__nav-list a { font-size: 0.9375rem; }
.footer__desc { font-size: 0.9375rem; }

/* Buttons never tiny */
.btn { font-size: 0.9375rem; font-weight: 500; }
.btn--sm { font-size: 0.875rem; }
.btn--lg { font-size: 1rem; font-weight: 600; }

/* ── CONTAINER WIDTH SYSTEM ────────────────────────────────── */
.container {
  max-width: 1240px;
  padding: 0 2rem;
}
@media (min-width: 1025px) { .container { padding: 0 3rem; } }
@media (min-width: 1367px) { .container { padding: 0 4rem; max-width: 1320px; } }

/* Text-only sections: narrower container */
.container--text {
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
}

/* ── SECTION SPACING RHYTHM ────────────────────────────────── */
section { padding: 5rem 0; }
@media (min-width: 768px)  { section { padding: 6rem 0; } }
@media (min-width: 1025px) { section { padding: 7rem 0; } }

/* Tighter for hero/utility sections */
.section--compact { padding: 3rem 0; }
.section--hero    { padding: 5rem 0 4rem; }

/* ── HERO SECTIONS ─────────────────────────────────────────── */
/* v3.1.0: .hero / .hero__title / .hero__sub removed — this was one of
   three competing declarations (main.css, premium.css, and this file's
   own "1. HERO SUBTITLE VISIBILITY" patch further down) for the same
   selectors. The canonical hero system is assets/css/hero.css. */

/* ── SECTION TITLES ────────────────────────────────────────── */
.section-title {
  font-size: clamp(1.875rem, 4vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* ── CARD IMPROVEMENTS ─────────────────────────────────────── */
/* box-shadow/hover intentionally NOT redeclared here — main.css's
   .card / .card:hover own that via --shadow-elevation-2/3 so there's one
   authoritative shadow system instead of 3 competing declarations. */
.card {
  padding: 1.75rem;
  border-radius: 10px;
}
.card__title { font-size: 1.25rem; }
.card__body { font-size: 1rem; line-height: 1.72; }

/* ── GRID RESPONSIVE FIXES ─────────────────────────────────── */
/* 3-col on laptop becomes 2-col to avoid cramping */
@media (min-width: 1025px) and (max-width: 1280px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

/* Offering grid: laptop 2-col */
@media (min-width: 900px) and (max-width: 1200px) {
  .offering-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── OFFERING CARDS ─────────────────────────────────────────── */
.offering-card {
  padding: 1.875rem;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.offering-card__title { font-size: 1.125rem; }
.offering-card__body  { font-size: 0.9375rem; }
.offering-card__icon  { width: 56px; height: 56px; }

/* ── HOW IT WORKS STEPS ────────────────────────────────────── */
.hiw-step { padding: 1.75rem 1.25rem; border-radius: 10px; }
.hiw-step__title { font-size: 1.125rem; }
.hiw-step__sub   { font-size: 0.9375rem; line-height: 1.6; }
.hiw-step__icon-wrap { width: 58px; height: 58px; }

/* ── DPP FLOW DIAGRAM ──────────────────────────────────────── */
.dpp-flow__step  { padding: 1.75rem 1.125rem; border-radius: 10px; }
.dpp-flow__title { font-size: 1.0625rem; }
.dpp-flow__body  { font-size: 0.9375rem; line-height: 1.65; }
.dpp-flow__icon  { width: 60px; height: 60px; }

/* ── COMPARISON CARDS ──────────────────────────────────────── */
.comparison-card { padding: 1.625rem; border-radius: 10px; }
.comparison-card__title { font-size: 1.125rem; }
.comparison-card__body  { font-size: 0.9375rem; line-height: 1.65; }
.comparison-card__uses li { font-size: 0.875rem; }

/* ── CAPABILITIES TILES ────────────────────────────────────── */
.caps-grid { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .caps-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1025px){ .caps-grid { grid-template-columns: repeat(5, 1fr); } }
.caps-grid__item  { padding: 1.5rem; border-radius: 10px; }
.caps-grid__title { font-size: 0.9375rem; }
.caps-grid__body  { font-size: 0.875rem; }

/* ── SVG VISUAL CONTAINERS ─────────────────────────────────── */
.page-visual-block {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: transparent;
  margin: 0 auto;
}
.page-visual-block svg,
.page-visual-block img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}
.page-visual-block--narrow { max-width: 760px; }
.page-visual-block--wide   { max-width: 100%; }
.page-visual-block--hero   { max-width: 520px; }

/* Overflow-x wrapper for wide diagrams */
.diagram-scroll {
  overflow-x: auto;
  padding: 0.5rem 0;
  -webkit-overflow-scrolling: touch;
}
.diagram-scroll::-webkit-scrollbar { height: 4px; }
.diagram-scroll::-webkit-scrollbar-thumb { background: rgba(201,168,76,.3); border-radius: 2px; }

/* ── POSITIONING STATEMENT UPGRADE ────────────────────────── */
.positioning-statement {
  border-width: 2px;
  padding: 2rem 2.25rem;
  margin: 2.5rem 0;
}
.positioning-statement__text { font-size: clamp(1.1875rem, 2.5vw, 1.625rem); }
.positioning-statement__badge { font-size: 0.75rem; padding: 0.5rem 1.125rem; }

/* ── HEADER SCALE ──────────────────────────────────────────── */
.header__inner { height: 76px; }
.header__logo-text { font-size: 1.625rem; }
.header__logo img { height: 46px; }

/* ── FOOTER READABILITY ────────────────────────────────────── */
.footer__tagline { font-size: 0.75rem; }
.footer__ships-to { font-size: 0.875rem; }
.footer__copy { font-size: 0.875rem; }

/* ── FAQ ACCORDION READABILITY ─────────────────────────────── */
.faq-accordion__trigger { font-size: 1.0625rem; line-height: 1.55; }
.faq-accordion__answer  { font-size: 1rem; line-height: 1.85; }

/* ── SCOPE SPLIT READABILITY ───────────────────────────────── */
.scope-split__list li { font-size: 0.9375rem; }

/* ── PROCESS STEP READABILITY ──────────────────────────────── */
.process-step__title { font-size: 1.0625rem; }
.process-step__body  { font-size: 1rem; }
.numbered-step__title { font-size: 1.0625rem; }
.numbered-step__body  { font-size: 1rem; }

/* ── FORM READABILITY ──────────────────────────────────────── */
.form-label   { font-size: 0.9375rem; }
.form-control { font-size: 1rem; padding: 0.875rem 1.0625rem; }
.form-checkbox-label, .form-radio-label { font-size: 0.9375rem; }
.form-note { font-size: 0.875rem; }

/* ── TAG MOCKUP GRID ───────────────────────────────────────── */
.tag-mockup-grid { gap: 2.5rem; padding: 2rem 0; }
.tag-mockup__label { font-size: 0.8125rem; font-weight: 500; }

/* ── ABOUT TIMELINE ────────────────────────────────────────── */
.about-timeline__title { font-size: 1.375rem; }
.about-timeline__body  { font-size: 1rem; }
.about-timeline__era   { font-size: 0.6875rem; }

/* ── CONTACT REASSURANCE CARDS ─────────────────────────────── */
.reassurance-card__title { font-size: 1.0625rem; }
.reassurance-card__body  { font-size: 1rem; }

/* ── 404 PAGE ──────────────────────────────────────────────── */
.page-404__title { font-size: clamp(2rem, 4vw, 3rem); }
.page-404__body  { font-size: 1.0625rem; }

/* ── THANK YOU PAGE ────────────────────────────────────────── */
.thankyou-step__title { font-size: 1rem; }
.thankyou-step__body  { font-size: 0.9375rem; }

/* ── MOBILE STACKING ───────────────────────────────────────── */
@media (max-width: 767px) {
  section { padding: 4rem 0; }
  .container { padding: 0 1.25rem; }
  .cta-group   { flex-direction: column; }
  .cta-group .btn { width: 100%; justify-content: center; }
  .section-title { font-size: clamp(1.75rem, 6.5vw, 2.25rem); }
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .comparison-grid { grid-template-columns: 1fr; }
  .offering-grid { grid-template-columns: 1fr; }
  .caps-grid { grid-template-columns: repeat(2, 1fr); }
  .product-hub-cards { grid-template-columns: 1fr; }
  .static-vs-variable { grid-template-columns: 1fr; }
  .contact-reassurance { grid-template-columns: 1fr; }
  .scope-split { grid-template-columns: 1fr; }
  .hiw-steps { flex-direction: column; min-width: 0; }
  .hiw-arrow { transform: rotate(90deg); }
  .dpp-flow { flex-direction: column; }
  .dpp-flow__arrow { transform: rotate(90deg); align-self: center; }
  .tag-mockup-grid { grid-template-columns: repeat(2, 1fr); }
  .two-col-content, .two-col-content--60-40 { grid-template-columns: 1fr; }
  .positioning-statement { padding: 1.5rem 1.5rem 1.5rem 1.75rem; }
  .positioning-statement__text { font-size: 1.0625rem; }
}

/* ── TABLET ────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
  .container { padding: 0 2rem; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .caps-grid { grid-template-columns: repeat(3, 1fr); }
  .offering-grid { grid-template-columns: repeat(2, 1fr); }
  .comparison-grid { grid-template-columns: repeat(2, 1fr); }
  .section-title { font-size: clamp(1.875rem, 3.5vw, 2.5rem); }
}

/* ── LAPTOP ────────────────────────────────────────────────── */
@media (min-width: 1025px) and (max-width: 1366px) {
  .container { max-width: 1120px; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .caps-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── PREMIUM SECTION BACKGROUNDS ──────────────────────────── */
/* v3.0.0: moved to main.css using background-image (not this `background`
   shorthand) so .page-hero's photo/grain layers can compose on top instead
   of being reset back to none by the shorthand loading after it. See
   main.css's "Colour backgrounds" block. */

/* ── GOLD ACCENT SYSTEM ────────────────────────────────────── */
/* Section dividers */
.section-divider-gold {
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(201,168,76,.6) 30%, rgba(201,168,76,.8) 70%, transparent 100%);
  margin: 0;
  border: none;
}

/* ── SCROLL OVERFLOW PREVENTION ────────────────────────────── */
* { word-wrap: break-word; overflow-wrap: break-word; }
.card, .comparison-card, .offering-card { overflow: hidden; }


/* ==========================================================
   JPXGLOBAL v2.2.1 — FINAL CONTRAST & POLISH LAYER
   Fixes: dark-on-dark cards, hidden subtitles, footer
   readability, DPP alignment, premium hover, responsive.
   ========================================================== */

/* ── REUSABLE UTILITY CLASSES ─────────────────────────────── */

/* Light card on dark sections — high contrast */
.jpx-light-card {
  background: #F8F6F1;
  border: 1px solid #D9D3C7;
  border-radius: 12px;
  padding: 1.75rem;
  box-shadow: var(--shadow-elevation-3);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}
.jpx-light-card h1,.jpx-light-card h2,.jpx-light-card h3,.jpx-light-card h4 { color: #0D1B2A; }
.jpx-light-card p, .jpx-light-card li { color: #2E3A44; }

/* Premium charcoal card on dark sections — gold border, white text */
.jpx-dark-card-premium {
  background: #162636;
  border: 1px solid rgba(201,168,76,.24);
  border-radius: 12px;
  padding: 1.75rem;
  box-shadow: var(--shadow-elevation-3);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}
.jpx-dark-card-premium h1,.jpx-dark-card-premium h2,.jpx-dark-card-premium h3,.jpx-dark-card-premium h4 { color: #F8F6F1; }
.jpx-dark-card-premium p, .jpx-dark-card-premium li { color: #D8D2C7; }

/* Premium hover — apply to any card */
.jpx-premium-hover { transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal); }
.jpx-premium-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-elevation-4);
  border-color: rgba(201,168,76,.45);
}

/* Contrast panel — subtle gold/white wash for callouts on dark */
.jpx-contrast-panel {
  background: rgba(201,168,76,.08);
  border: 1px solid rgba(201,168,76,.24);
  border-radius: 14px;
  padding: 1.5rem 1.75rem;
}

/* Highlight statement — visible positioning line on dark */
.jpx-highlight-statement {
  max-width: 760px;
  font-size: 1.125rem;        /* 18px */
  line-height: 1.7;
  color: #D8D2C7;
  background: rgba(201,168,76,.08);
  border-left: 3px solid #C9A84C;
  padding: 1.125rem 1.375rem;
  border-radius: 14px;
  margin-top: 1.5rem;
}

/* Visual flow + step cards */
.jpx-visual-flow { display: flex; align-items: stretch; gap: 0; flex-wrap: nowrap; }
.jpx-step-card {
  background: #F8F6F1;
  border: 1px solid #D9D3C7;
  border-radius: 10px;
  padding: 1.5rem 1.125rem;
  box-shadow: var(--shadow-elevation-2);
}
.jpx-step-card h4 { color: #0D1B2A; }
.jpx-step-card p  { color: #2E3A44; }

/* ── 1. HERO SUBTITLE VISIBILITY — moved to hero.css (.page-hero__description) ── */

/* ── 2. MUTED TEXT ON DARK SECTIONS ──────────────────────── */
.text-muted-light { color: #D8D2C7 !important; }
.bg-navy .section-body:not(.text-white),
.bg-charcoal .section-body:not(.text-white) { color: #D8D2C7; }

/* Section body on navy that uses muted-light gets the readable tone */
.bg-navy .text-muted-light,
.section-sample-kit-cta .section-body,
.section-final-cta .section-body { color: #D8D2C7 !important; }

/* Disclaimer on dark — lift contrast */
.bg-navy .disclaimer { color: #BFB8AA; }

/* ── 3. CARD CONTRAST — NO DARK-ON-DARK ──────────────────── */

/* Any .card--navy sitting in a dark section: switch to charcoal + gold border + bright text.
   Deliberately a flat, lighter charcoal (#162636) rather than --gradient-navy — it needs to
   read as a distinct surface floating on top of a .bg-navy section, not blend into it. */
.card--navy {
  background: #162636;
  border: 1px solid rgba(201,168,76,.24);
  box-shadow: var(--shadow-elevation-3);
}
.card--navy .card__title { color: #F8F6F1; }
.card--navy .card__body  { color: #D8D2C7; }
.card--navy:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-elevation-4), var(--shadow-gold-glow);
  border-color: rgba(201,168,76,.45);
}

/* Generic cards placed inside navy sections — give them off-white surface */
.bg-navy .card:not(.card--navy) {
  background: #F8F6F1;
  border: 1px solid #D9D3C7;
}
.bg-navy .card:not(.card--navy) .card__title { color: #0D1B2A; }
.bg-navy .card:not(.card--navy) .card__body  { color: #2E3A44; }

/* Scope box (navy) — ensure list text readable */
.scope-box__heading { color: #C9A84C; }
.scope-list li { color: #D8D2C7; }

/* ── 4. SMART TAGS HOW-IT-WORKS (dark-on-dark fix) ───────── */
/* hiw navy/charcoal steps on navy section — lighten to off-white surfaces
   except the deliberate gold highlight step */
.bg-navy .hiw-step--navy,
.bg-navy .hiw-step--charcoal {
  background: #F8F6F1;
  border: 1px solid #D9D3C7;
  box-shadow: var(--shadow-elevation-3);
}
.bg-navy .hiw-step--navy .hiw-step__title,
.bg-navy .hiw-step--charcoal .hiw-step__title { color: #0D1B2A; }
.bg-navy .hiw-step--navy .hiw-step__sub,
.bg-navy .hiw-step--charcoal .hiw-step__sub { color: #2E3A44; }
.bg-navy .hiw-step--navy .hiw-step__num,
.bg-navy .hiw-step--charcoal .hiw-step__num { color: #B8902A; }
.bg-navy .hiw-step--navy .hiw-step__icon-wrap,
.bg-navy .hiw-step--charcoal .hiw-step__icon-wrap {
  background: rgba(13,27,42,.08);
  color: #0D1B2A;
}
/* Gold step keeps its gold identity (already high contrast) */
.hiw-step--gold { background-image: var(--gradient-foil); box-shadow: var(--shadow-gold-glow); }

/* ── 5. COMPARISON CARDS — premium table feel ────────────── */
.comparison-card {
  padding: 1.75rem;
  background: #FFFFFF;
  border: 1px solid #D9D3C7;
  box-shadow: var(--shadow-elevation-2);
  transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}
.comparison-card:hover { box-shadow: var(--shadow-elevation-3); transform: translateY(-3px); }
.comparison-card__title { font-size: 1.1875rem; }
.comparison-card__body  { font-size: 0.9375rem; color: #2E3A44; }
.comparison-card__uses li { font-size: 0.875rem; color: #3A4651; }
/* Active (NFC) card — charcoal with gold border, bright text */
.comparison-card--active {
  background: #162636;
  border: 1px solid rgba(201,168,76,.4);
  box-shadow: var(--shadow-elevation-3);
}
.comparison-card--active .comparison-card__title { color: #F8F6F1; }
.comparison-card--active .comparison-card__body  { color: #D8D2C7; }
.comparison-card--active .comparison-card__uses li { color: #C8C4BC; }
.comparison-card--active .comparison-card__icon { background: rgba(201,168,76,.18); color: #E8D080; }

/* ── 6. DPP SECTION ALIGNMENT (front-page + dpp page) ────── */
/* Balanced 38/62 split, vertically centred, compact */
.two-col-content--60-40 {
  align-items: center;
  gap: 2.5rem;
  max-width: 1240px;
  margin: 0 auto;
}
@media (min-width: 900px) {
  .two-col-content--60-40 { grid-template-columns: 38% 1fr; }
}

/* DPP flow as a premium compact diagram (not stretched) */
.dpp-flow {
  gap: 0;
  align-items: stretch;
}
.dpp-flow__step {
  min-width: 0;            /* allow equal compression */
  padding: 1.5rem 1rem 1.375rem;
  background: #F8F6F1;
  border: 1px solid #D9D3C7;
  box-shadow: var(--shadow-elevation-2);
}
.dpp-flow__step--jpx {
  background: #0D1B2A;
  border: 1px solid rgba(201,168,76,.5);
  box-shadow: 0 0 0 2px rgba(201,168,76,.22), var(--shadow-elevation-3);
}
.dpp-flow__step--jpx .dpp-flow__title { color: #F8F6F1; }
.dpp-flow__step--jpx .dpp-flow__body  { color: #D8D2C7; }
.dpp-flow__step--jpx .dpp-flow__icon  { background: rgba(201,168,76,.18); color: #E8D080; }
.dpp-flow__title { color: #0D1B2A; }
.dpp-flow__body  { color: #2E3A44; font-size: 0.875rem; }
.dpp-flow__num   { color: #B8902A; }
.dpp-flow__arrow { color: #C9A84C; }

/* DPP flow responsive: desktop horizontal, tablet stacked, mobile vertical timeline */
@media (max-width: 1024px) {
  .dpp-flow { flex-direction: column; gap: .75rem; }
  .dpp-flow__arrow { transform: rotate(90deg); align-self: center; margin: .25rem 0; }
  .dpp-flow__step { width: 100%; }
}

/* ── 7. FOOTER READABILITY ───────────────────────────────── */
.site-footer { background: #0D1B2A; padding: 5rem 0 2.5rem; }
.footer__col-heading {
  color: #C9A84C !important;
  font-size: 0.8125rem;          /* 13px */
  letter-spacing: .12em;
}
.footer__nav-list { gap: .5rem; }
.footer__nav-list a {
  color: #D8D2C7;
  font-size: 0.9375rem;          /* 15px */
  line-height: 2;
  transition: color .2s ease;
}
.footer__nav-list a:hover { color: #C9A84C; }
.footer__desc {
  color: #C8C4BC;
  font-size: 0.9375rem;          /* 15px */
  line-height: 1.8;
}
.footer__tagline { color: #BFB8AA; font-size: 0.75rem; }
.footer__logo-text { color: #F8F6F1; }
.footer__logo-text strong { color: #C9A84C; }
.footer__ships-to {
  color: #C8C4BC;
  font-size: 0.875rem;           /* 14px */
  line-height: 1.7;
  border-top: 1px solid rgba(255,255,255,.08);
}
.footer__flags { color: #C8C4BC; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.08); }
.footer__copy { color: #AFA89C; font-size: 0.875rem; }   /* 14px */

/* ── 8. PREMIUM CARD DEPTH (global) ──────────────────────── */
.card, .offering-card, .comparison-card, .caps-grid__item,
.product-hub-card, .reassurance-card, .svv-card, .thankyou-step {
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}
.offering-card:hover, .caps-grid__item:hover, .product-hub-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-elevation-4);
  border-color: rgba(201,168,76,.4);
}

/* ── 9. SVG VISUAL CONTRAST ON DARK ──────────────────────── */
/* Give embedded SVG diagrams a light surface when they sit on navy */
.bg-navy .page-visual-block:not(.page-visual-block--hero) {
  background: #F8F6F1;
  padding: 1.25rem;
  box-shadow: var(--shadow-elevation-3);
  border: 1px solid rgba(201,168,76,.18);
}
/* Hero composition keeps transparent (it has its own internal bg) */
.page-visual-block--hero { background: transparent; box-shadow: none; }

/* ── 10. POSITIONING STATEMENT (already prominent, reinforce) ── */
.positioning-statement__text { color: #1C2B3A; }
.positioning-statement__badge { background: #0D1B2A; color: #C9A84C; }

/* ── 11. TRUST STRIP READABILITY ─────────────────────────── */
.trust-strip__label { color: #0D1B2A; font-size: 0.9375rem; }
.trust-strip__desc  { color: #3A4651; font-size: 0.875rem; }

/* ── 12. WHATSAPP FAB — avoid covering CTAs on mobile ────── */
@media (max-width: 767px) {
  .whatsapp-fab { bottom: 1.25rem; right: 1.25rem; width: 52px; height: 52px; }
}

/* ── 13. LAPTOP HERO BALANCE — superseded by hero.css's own fluid
   clamp() + .page-hero__inner--split breakpoints, no laptop-specific
   patch needed. ── */

/* ── 14. SECTION INTRO TEXT ON DARK ──────────────────────── */
.bg-navy .section-intro .section-body,
.bg-navy .section-intro p { color: #D8D2C7; }

/* ── 15. NFC INTERACTION DIAGRAM LABELS (dark diagram) ───── */
.nfc-diagram__tag-footer span,
.nfc-diagram__phone-footer span { color: #C8C4BC; }
.nfc-diagram__dest-list li { color: #D8D2C7; }


/* ==========================================================
   JPXGLOBAL v2.2.2 — FINAL REFINEMENT
   NFC demo (clean result + z-index), authentication
   infographic, homepage DPP alignment, smart-tags process.
   ========================================================== */

/* ── Z-INDEX / STACKING FIX ───────────────────────────────── */
/* Header dropdown must never overlap page content/demos.
   Page content establishes its own stacking context below header. */
.site-header { z-index: 1000; }
.nfc-demo, .dpp-flow, .auth-info, .hiw-flow {
  position: relative;
  z-index: 1;       /* own stacking context, below sticky header */
}

/* ════════════════════════════════════════════════════════════
   NFC DEMO — clean, readable, premium (replaces blur)
   ════════════════════════════════════════════════════════════ */
.nfc-demo {
  background: linear-gradient(135deg, #0D1B2A 0%, #0f2236 60%, #0a1620 100%);
  border: 1px solid rgba(201,168,76,.22);
  border-radius: 16px;
  padding: 2.5rem 2rem;
  overflow: hidden;
}
.nfc-demo__stage {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  max-width: 620px;
  margin: 0 auto;
}

/* Tag + phone column */
.nfc-demo__col { display: flex; flex-direction: column; align-items: center; gap: .875rem; }

/* Tag card */
.nfc-demo__tag {
  width: 116px; padding: 1.125rem .875rem 1.375rem;
  background: #F8F6F1;
  border-radius: 10px 10px 8px 8px;
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
  box-shadow: 0 16px 44px rgba(0,0,0,.45);
  position: relative;
  transition: transform .3s ease;
}
.nfc-demo__tag::before {
  content: ''; position: absolute; top: -16px; left: 50%;
  transform: translateX(-50%); width: 1.5px; height: 16px;
  background: rgba(201,168,76,.6);
}
.nfc-demo__tag::after {
  content: ''; position: absolute; top: -20px; left: 50%;
  transform: translateX(-50%); width: 9px; height: 9px;
  border-radius: 50%; background: rgba(201,168,76,.45);
}
.nfc-demo.is-tapping .nfc-demo__tag { transform: translateX(8px); }
.nfc-demo__tag-brand {
  font-size: 0.625rem; font-weight: 700; letter-spacing: .15em;
  color: #0D1B2A;
}
.nfc-demo__tag-qr {
  width: 56px; height: 56px; background: #0D1B2A; border-radius: 5px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 7px;
}
.nfc-demo__tag-qr span { background: #F8F6F1; border-radius: 1px; }
.nfc-demo__tag-qr span:nth-child(2),
.nfc-demo__tag-qr span:nth-child(6),
.nfc-demo__tag-qr span:nth-child(8) { opacity: .35; }
.nfc-demo__tag-chip {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid rgba(201,168,76,.5);
  display: flex; align-items: center; justify-content: center;
  color: #C9A84C;
}

/* Signal waves */
.nfc-demo__signal {
  position: relative; width: 70px; height: 90px;
  display: flex; align-items: center; justify-content: center;
}
.nfc-demo__wave {
  position: absolute; left: 50%; top: 42%;
  width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border: 2px solid rgba(201,168,76,.5);
  border-radius: 50%;
  transform: scale(0); opacity: 0;
}
.nfc-demo.is-tapping .nfc-demo__wave--1 { animation: ndwave 1.3s ease-out 0s infinite; }
.nfc-demo.is-tapping .nfc-demo__wave--2 { animation: ndwave 1.3s ease-out .25s infinite; }
.nfc-demo.is-tapping .nfc-demo__wave--3 { animation: ndwave 1.3s ease-out .5s infinite; }
@keyframes ndwave {
  0%   { transform: scale(.3); opacity: .8; }
  100% { transform: scale(2.6); opacity: 0; }
}
.nfc-demo__signal-label {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  font-size: 0.625rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(201,168,76,.7); white-space: nowrap; font-weight: 600;
}

/* Phone */
.nfc-demo__phone {
  width: 168px; height: 320px;
  background: #11202f;
  border: 2px solid rgba(201,168,76,.2);
  border-radius: 24px;
  padding: 10px;
  position: relative;
  box-shadow: 0 20px 56px rgba(0,0,0,.5);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.nfc-demo.is-connected .nfc-demo__phone {
  border-color: rgba(201,168,76,.5);
  box-shadow: 0 0 0 3px rgba(201,168,76,.15), 0 24px 60px rgba(0,0,0,.5);
}
.nfc-demo__notch {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 44px; height: 5px; background: rgba(0,0,0,.4); border-radius: 3px; z-index: 3;
}
.nfc-demo__screen {
  width: 100%; height: 100%;
  background: #07111c; border-radius: 16px;
  overflow: hidden; position: relative;
}

/* Idle */
.nfc-demo__idle {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem;
  color: rgba(255,255,255,.5);
  font-size: 0.8125rem; letter-spacing: .04em;
  opacity: 1; transition: opacity .3s ease;
}
.nfc-demo__idle-icon {
  width: 56px; height: 56px; border-radius: 50%;
  border: 1.5px dashed rgba(201,168,76,.4);
  display: flex; align-items: center; justify-content: center; color: #C9A84C;
}
.nfc-demo.is-connected .nfc-demo__idle { opacity: 0; }

/* Result — clean white app screen, real readable content */
.nfc-demo__result {
  position: absolute; inset: 0;
  background: #FFFFFF;
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(8px);
  transition: opacity .35s ease .25s, transform .35s ease .25s;
}
.nfc-demo.is-connected .nfc-demo__result { opacity: 1; transform: translateY(0); }
.nfc-demo__browser-bar {
  display: flex; align-items: center; gap: .375rem;
  padding: .5rem .625rem; background: #EEECEA;
  border-bottom: 1px solid #DCD8D0;
}
.nfc-demo__lock { font-size: 0.625rem; opacity: .6; }
.nfc-demo__url {
  font-size: 0.625rem; font-family: 'DM Sans', sans-serif; color: #5A5550;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.nfc-demo__result-body { padding: .875rem .875rem 1rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.nfc-demo__result-hero {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .125rem;
}
.nfc-demo__result-icon {
  width: 38px; height: 38px; border-radius: 9px;
  background: rgba(201,168,76,.14); color: #B8902A;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.nfc-demo__result-tag {
  font-size: 0.5625rem; font-weight: 700; letter-spacing: .1em;
  color: #B8902A; background: rgba(201,168,76,.12);
  padding: .25rem .5rem; border-radius: 999px;
}
.nfc-demo__result-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1875rem; font-weight: 600; color: #0D1B2A;
  line-height: 1.2; margin: 0;
}
.nfc-demo__result-text {
  font-size: 0.75rem; color: #4A5560; line-height: 1.55; margin: 0; flex: 1;
}
.nfc-demo__result-cta {
  margin-top: auto;
  background: #0D1B2A; color: #F8F6F1;
  font-size: 0.75rem; font-weight: 600; text-align: center;
  padding: .5rem; border-radius: 7px;
  border-bottom: 2px solid #C9A84C;
}

/* Labels under tag/phone */
.nfc-demo__label { text-align: center; display: flex; flex-direction: column; gap: .15rem; }
.nfc-demo__label strong { font-size: 0.8125rem; color: #F8F6F1; font-weight: 600; }
.nfc-demo__label span { font-size: 0.6875rem; color: #C9A84C; }

/* Controls */
.nfc-demo__controls { margin-top: 2.25rem; text-align: center; }
.nfc-demo__controls-label { font-size: 0.875rem; color: #C8C4BC; margin-bottom: .875rem; }
.nfc-demo__tabs {
  display: inline-flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
  margin-bottom: 1.5rem;
}
.nfc-demo__tab {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(201,168,76,.22);
  color: #D8D2C7;
  font-size: 0.8125rem; font-weight: 500;
  padding: .5rem 1rem; border-radius: 999px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.nfc-demo__tab:hover { background: rgba(201,168,76,.12); color: #F8F6F1; }
.nfc-demo__tab.is-active {
  background: #C9A84C; color: #0D1B2A; border-color: #C9A84C; font-weight: 600;
}
.nfc-demo__trigger { margin: 0 auto; }
.nfc-demo__note {
  font-size: 0.75rem; color: #9A9590; line-height: 1.6;
  max-width: 480px; margin: 1rem auto 0;
}

/* NFC demo responsive */
@media (max-width: 767px) {
  .nfc-demo { padding: 1.75rem 1.25rem; }
  .nfc-demo__stage {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    max-width: 220px;
  }
  .nfc-demo__signal { transform: rotate(90deg); height: 56px; }
  .nfc-demo__phone { width: 150px; height: 286px; }
}

/* ════════════════════════════════════════════════════════════
   AUTHENTICATION INFOGRAPHIC (replaces awkward text cards)
   ════════════════════════════════════════════════════════════ */
.auth-info__stage {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 1.75rem 1rem 1.5rem;
  border-radius: 12px;
  position: relative;
  background: #F8F6F1;
  border: 1px solid #D9D3C7;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
/* Alternate subtle tint for rhythm */
.auth-info__stage:nth-child(odd) { background: #FFFFFF; }
/* JPXGLOBAL stage — premium navy highlight */
.auth-info__stage--jpx {
  background: #0D1B2A !important;
  border: 1px solid rgba(201,168,76,.5);
  box-shadow: 0 0 0 2px rgba(201,168,76,.22), 0 18px 42px rgba(13,27,42,.3);
}
.auth-info__icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(13,27,42,.07);
  display: flex; align-items: center; justify-content: center;
  color: #0D1B2A; margin-bottom: 1rem; flex-shrink: 0;
}
.auth-info__stage--jpx .auth-info__icon { background: rgba(201,168,76,.18); color: #E8D080; }
.auth-info__num {
  font-size: 0.625rem; font-weight: 700; letter-spacing: .12em;
  color: #B8902A; margin-bottom: .375rem;
}
.auth-info__stage--jpx .auth-info__num { color: #E8D080; }
.auth-info__title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.0625rem; font-weight: 600; color: #0D1B2A;
  line-height: 1.2; margin-bottom: .5rem;
}
.auth-info__stage--jpx .auth-info__title { color: #F8F6F1; }
.auth-info__role {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: .04em;
  padding: .25rem .625rem; border-radius: 999px; margin-top: auto;
}
.auth-info__role--buyer    { background: rgba(13,27,42,.08); color: #3A4651; }
.auth-info__role--jpx      { background: #C9A84C; color: #0D1B2A; }
.auth-info__role--consumer { background: rgba(13,27,42,.08); color: #3A4651; }
/* Arrow between stages */
.auth-info__arrow {
  display: flex; align-items: center; justify-content: center;
  color: #C9A84C; flex-shrink: 0; width: 28px; align-self: center;
}
/* Use flex layout with arrows interspersed */
.auth-info {
  display: flex; align-items: stretch; gap: 0;
}
.auth-info__stage { flex: 1; min-width: 0; }

/* Tablet: 2-row wrap */
@media (max-width: 1024px) {
  .auth-info { flex-wrap: wrap; justify-content: center; gap: .75rem; }
  .auth-info__stage { flex: 0 0 calc(33.333% - .75rem); }
  .auth-info__arrow { display: none; }
}
/* Mobile: vertical step flow */
@media (max-width: 639px) {
  .auth-info { flex-direction: column; gap: .75rem; }
  .auth-info__stage { flex: 1 1 auto; width: 100%; flex-direction: row; text-align: left; gap: 1rem; padding: 1.25rem; }
  .auth-info__icon { margin-bottom: 0; }
  .auth-info__role { margin-top: 0; margin-left: auto; align-self: center; }
  .auth-info__inner { flex: 1; }
}

/* ════════════════════════════════════════════════════════════
   HOMEPAGE DPP SECTION — balanced composition
   ════════════════════════════════════════════════════════════ */
/* The DPP flow on homepage uses a process rail behind compact cards */
.dpp-home {
  display: grid;
  grid-template-columns: 38% 1fr;
  gap: 3rem;
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
}
.dpp-home__copy { display: flex; flex-direction: column; gap: 1.25rem; }
.dpp-home__copy .cta-group { margin-top: .5rem; }
.dpp-home__visual { position: relative; }

/* Vertical compact flow with rail */
.dpp-rail {
  display: flex; flex-direction: column; gap: .875rem;
  position: relative;
}
.dpp-rail::before {
  content: ''; position: absolute; left: 27px; top: 28px; bottom: 28px;
  width: 2px; background: linear-gradient(180deg, rgba(201,168,76,.5), rgba(201,168,76,.15));
}
.dpp-rail__step {
  display: flex; align-items: center; gap: 1rem;
  background: #FFFFFF;
  border: 1px solid #D9D3C7;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.07);
  position: relative; z-index: 1;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.dpp-rail__step:hover { transform: translateX(4px); box-shadow: 0 12px 30px rgba(0,0,0,.1); border-color: rgba(201,168,76,.4); }
.dpp-rail__step--jpx {
  background: #0D1B2A;
  border: 1px solid rgba(201,168,76,.5);
  box-shadow: 0 0 0 2px rgba(201,168,76,.22), 0 16px 38px rgba(13,27,42,.28);
}
.dpp-rail__icon {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: rgba(13,27,42,.07); color: #0D1B2A;
  display: flex; align-items: center; justify-content: center;
}
.dpp-rail__step--jpx .dpp-rail__icon { background: rgba(201,168,76,.18); color: #E8D080; }
.dpp-rail__content { flex: 1; min-width: 0; }
.dpp-rail__num {
  font-size: 0.625rem; font-weight: 700; letter-spacing: .1em; color: #B8902A;
}
.dpp-rail__step--jpx .dpp-rail__num { color: #E8D080; }
.dpp-rail__title { font-size: 0.9375rem; font-weight: 600; color: #0D1B2A; line-height: 1.3; }
.dpp-rail__step--jpx .dpp-rail__title { color: #F8F6F1; }
.dpp-rail__badge {
  font-size: 0.5625rem; font-weight: 700; letter-spacing: .08em;
  background: #C9A84C; color: #0D1B2A;
  padding: .2rem .5rem; border-radius: 999px; flex-shrink: 0;
}

/* DPP home responsive */
@media (max-width: 900px) {
  .dpp-home { grid-template-columns: 1fr; gap: 2rem; }
}

/* ════════════════════════════════════════════════════════════
   SMART TAGS PROCESS — clearer stage meaning
   ════════════════════════════════════════════════════════════ */
.hiw-stage__meaning {
  font-size: 0.8125rem; color: #2E3A44; line-height: 1.5;
  margin-top: .375rem;
}
/* On the dark navy how-it-works, light cards already applied via v2.2.1.
   Add a "what's added" chip to each stage */
.hiw-chip {
  display: inline-block; margin-top: .625rem;
  font-size: 0.625rem; font-weight: 700; letter-spacing: .06em;
  padding: .25rem .5rem; border-radius: 999px;
  background: rgba(201,168,76,.15); color: #B8902A;
}
.hiw-step--gold .hiw-chip { background: rgba(13,27,42,.15); color: #0D1B2A; }

/* ── PREMIUM HOVER CONSISTENCY ────────────────────────────── */
.btn--gold:hover { filter: brightness(1.04); }
.btn--primary:hover, .btn--secondary:hover { filter: brightness(1.02); }