/* ==========================================================================
   Brand v3 (11 Oct 2026, Luis): "fintech, Apple-grade polish".
   One layer on top of tokens.css + components.css, loaded last. Remove the
   enqueue in functions.php to switch the whole look back.

   - Money button: WhatsApp green as a gradient pill with a soft glow (option C).
   - Dark surfaces: deep navy-black with blue + green light glows and a faint grid,
     like a trading dashboard. Light surfaces stay white and calm.
   - Glass cards on dark, hairline + lift on light. Numbers tabular everywhere.
   - No Apple logos or wording: Apple-inspired, never Apple-branded.
   ========================================================================== */

:root {
  --c-ink: #0B0D12;
  --night: #07080D;
  --g-accent: linear-gradient(120deg, #3B82F6 0%, #22D3EE 100%);
  --g-wa: linear-gradient(180deg, #3BE584 0%, #1FC15F 52%, #149E4D 100%);
  --g-wa-hover: linear-gradient(180deg, #4AEC90 0%, #25CB66 52%, #17A853 100%);
  --wa-glow: 0 14px 34px -10px rgba(31, 193, 95, .75), 0 0 22px -4px rgba(59, 229, 132, .35), 0 2px 6px -2px rgba(20, 158, 77, .35);
  --wa-glow-hover: 0 18px 44px -10px rgba(31, 193, 95, .85), 0 0 30px -2px rgba(59, 229, 132, .45), 0 3px 8px -2px rgba(20, 158, 77, .4);
  --glass: rgba(255, 255, 255, .045);
  --glass-line: rgba(255, 255, 255, .09);
  --card-lift: 0 1px 1px rgba(11, 13, 18, .03), 0 12px 32px -12px rgba(11, 13, 18, .14);
}

/* ---------- Numbers read like a ticker ---------- */
.ip, .pboard, .price-table, .pstrip { font-variant-numeric: tabular-nums; }

/* ---------- Header: glass, clean wordmark (no underline) ---------- */
.ipv-header { background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid rgba(11, 13, 18, .06); }
.ipv-logo, .ipv-logo:hover, .ipv-logo:focus { text-decoration: none; }
.ipv-logo img { border-radius: 10px; box-shadow: 0 4px 14px -6px rgba(31, 193, 95, .55); }
.ipv-logo-txt { font-weight: 800; letter-spacing: -.035em; }
.ipv-logo-txt em { background: var(--g-accent); -webkit-background-clip: text; background-clip: text;
  color: transparent; }
/* Menu: no underlines (a template tell); quiet hover */
.ipv-nav a, .ipv-footer a { text-decoration: none; }
.ipv-nav a { color: var(--c-ink); opacity: .78; font-weight: 500; transition: opacity .15s var(--ease); }
.ipv-nav a:hover, .ipv-nav .current-menu-item > a { opacity: 1; text-decoration: none; }
.ipv-live { border-radius: 999px; padding: 5px 10px; background: rgba(22, 163, 74, .08);
  border: 1px solid rgba(22, 163, 74, .18); color: #15803D; }

/* ---------- The money button ---------- */
.wa-cta { position: relative; isolation: isolate; background: var(--g-wa); color: #fff; border: 0;
  border-radius: 999px; font-weight: 600; letter-spacing: -.01em; box-shadow: var(--wa-glow),
  inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(0, 0, 0, .08);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease); }
.wa-cta:hover { background: var(--g-wa-hover); color: #fff; text-decoration: none; transform: translateY(-1px);
  box-shadow: var(--wa-glow-hover), inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 -1px 0 rgba(0, 0, 0, .08); }
.wa-cta:active { transform: translateY(0) scale(.98); }
.wa-cta:focus-visible { outline: 3px solid rgba(59, 130, 246, .55); outline-offset: 3px; }
.wa-cta svg { filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .12)); }

/* Secondary buttons: glass on dark, hairline on light */
.btn-ghost { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn-ghost:hover { background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .3); }
.btn-outline { border: 1px solid rgba(11, 13, 18, .12); background: #fff; box-shadow: 0 1px 2px rgba(11, 13, 18, .04); }
.btn-outline:hover { border-color: rgba(59, 130, 246, .5); box-shadow: 0 0 0 4px rgba(59, 130, 246, .08); }

/* ---------- Sticky bar on phones: frosted glass ---------- */
.wa-sticky { background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid rgba(11, 13, 18, .06); }

/* The sticky bar sits outside .ip, so it missed the site font (serif + underline bug) */
.wa-sticky, .wa-sticky .wa-cta { font-family: var(--font-sans); }
.wa-sticky .wa-cta, .wa-sticky .wa-cta:hover { text-decoration: none; }

/* ---------- Dark surfaces: fintech night with light glows ---------- */
.surface-ink { background-color: var(--night); }
.surface-ink::before { background:
  radial-gradient(60% 70% at 88% -10%, rgba(59, 130, 246, .38), transparent 60%),
  radial-gradient(45% 55% at 0% 105%, rgba(31, 193, 95, .16), transparent 60%),
  radial-gradient(35% 40% at 55% 40%, rgba(34, 211, 238, .07), transparent 70%); }
.surface-ink::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(70% 80% at 70% 20%, #000 20%, transparent 75%);
  mask-image: radial-gradient(70% 80% at 70% 20%, #000 20%, transparent 75%); }
/* Ambient green light behind the hero's money button */
.hero .cta-row { position: relative; isolation: isolate; }
.hero .cta-row::before { content: ""; position: absolute; left: -40px; top: -30px; width: 320px; height: 140px; z-index: -1;
  pointer-events: none; background: radial-gradient(50% 50% at 50% 50%, rgba(31, 193, 95, .32), transparent 70%);
  filter: blur(6px); }
.surface-ink .eyebrow .tick { width: 6px; height: 6px; border-radius: 50%; background: #3BE584;
  box-shadow: 0 0 10px rgba(59, 229, 132, .8); }
.hero h1 em, .hero h1 .accent, .surface-ink h1 span[class*="accent"] { background: var(--g-accent);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.surface-ink .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .72);
  letter-spacing: .08em; }

/* Price board: glass card with a lit edge */
.pboard { background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025));
  border: 1px solid var(--glass-line); border-radius: 22px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.pboard .pb-price { letter-spacing: -.02em; }

/* ---------- Light surfaces: calm cards that lift ---------- */
.model-rail a, .model-grid a, .ecard { border: 1px solid rgba(11, 13, 18, .07); border-radius: 20px;
  box-shadow: var(--card-lift); }
.model-rail a:hover, .model-grid a:hover, .ecard:hover { border-color: rgba(59, 130, 246, .35);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, .06), 0 22px 44px -18px rgba(11, 13, 18, .25); }
/* Model cards: name and price lead, condition as a small tag */
.model-grid .m-name, .model-rail .m-name { color: var(--c-ink); font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.model-grid .m-price, .model-rail .m-price { white-space: nowrap; font-size: clamp(16px, 4.4vw, 19px); font-weight: 800;
  letter-spacing: -.025em; color: var(--c-ink); margin-top: 6px; }
.model-grid .m-cond, .model-rail .m-cond { display: inline-block; margin-top: 8px; padding: 2px 9px; border-radius: 999px;
  background: #F2F4F7; color: #4B5563; font-size: 12px; font-weight: 500; }
.m-thumb { background: radial-gradient(55% 55% at 50% 50%, rgba(59, 130, 246, .10), transparent 72%); }

/* Product page: price as the hero number */
.pdp-price { letter-spacing: -.04em; }
.chip { border-radius: 14px; border: 1px solid rgba(11, 13, 18, .1); }
.chip.is-sel { background: var(--c-ink); border-color: var(--c-ink); color: #fff;
  box-shadow: 0 6px 16px -8px rgba(11, 13, 18, .6); }

/* Closing CTA block: dark card with a green glow behind the button */
.cta-block { background: var(--night); border: 1px solid rgba(255, 255, 255, .06); border-radius: 28px; color: #fff;
  position: relative; overflow: hidden; isolation: isolate; }
.cta-block::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  radial-gradient(50% 70% at 50% 110%, rgba(31, 193, 95, .28), transparent 70%),
  radial-gradient(45% 60% at 100% 0%, rgba(59, 130, 246, .25), transparent 65%); }
.cta-block h2 { color: #fff; }
.cta-block p { color: rgba(255, 255, 255, .7); }

/* Tables: softer header, ink not black */
.price-table thead th { background: var(--c-ink); }

/* Footer matches the night surface */
.ipv-footer { background: var(--night); }

@media (prefers-reduced-motion: reduce) {
  .wa-cta, .model-grid a, .model-rail a, .ecard { transition: none; }
  .wa-cta:hover, .model-grid a:hover, .model-rail a:hover, .ecard:hover { transform: none; }
}

/* ---------- Labels: clean sentence case, no "terminal" monospace caps ---------- */
.ip .eyebrow, .surface-ink .eyebrow, .opt-label, .pay-label, .trust-n, .pill, .pcard-live, .ipv-live,
.price-table caption, .price-table thead th, .delta {
  font-family: var(--font-sans); text-transform: none; letter-spacing: -.005em; }
.ip .eyebrow, .surface-ink .eyebrow { font-size: 13px; font-weight: 600; }
.opt-label, .pay-label { font-size: 13px; font-weight: 600; color: var(--c-ink-mute); }
.trust-n { font-size: 13px; font-weight: 700; }
.ipv-live, .pcard-live { font-size: 12px; font-weight: 600; }
.pill { font-size: 11.5px; font-weight: 600; }
.price-table thead th { font-size: 13px; font-weight: 600; }
.delta { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Price table: soft action pills instead of blue web links ---------- */
#master a.mt-ask { display: inline-flex; align-items: center; min-height: 36px; margin: 0; padding: 0 12px; border-radius: 999px;
  background: rgba(31, 193, 95, .1); color: #0E7A3E; font-size: 13px; font-weight: 600; text-decoration: none;
  transition: background .15s var(--ease); }
#master a.mt-ask:hover { background: rgba(31, 193, 95, .18); text-decoration: none; }
.min-tag { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600; }
.price-table { border-radius: 18px; overflow: hidden; }

/* ---------- Hero spacing (11 Oct): nothing touches, the glow has room ---------- */
.hero .eyebrow { margin-bottom: 18px; }
.ip.hero h1, .hero h1 { margin: 0 0 18px; }
.hero .lead { margin: 0 0 28px; }
.hero .cta-row { margin: 0; gap: 12px; }
.ip.hero .hero-reassure, .hero .hero-reassure { margin: 22px 0 0; line-height: 1.5; }
.ip.hero .hero-stats, .hero .hero-stats { margin-top: 32px; }
@media (max-width: 820px) {
  .ip.hero, .hero { padding-top: 0; }
  .hero .hero-grid { padding-top: 32px; }
  .hero .eyebrow { margin-bottom: 16px; }
  .hero .lead { margin-bottom: 24px; }
  .hero .cta-row > * { width: 100%; }
  /* Stats stay on one row on phones instead of 2 + 1 */
  .ip.hero .hero-stats, .hero .hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
    flex-wrap: nowrap; margin-top: 28px; padding-top: 22px; }
  .hero .hero-stats strong { font-size: 18px; }
  .hero .hero-stats span { font-size: 12px; line-height: 1.35; }
}

/* Sticky bar steps aside while the hero's own WhatsApp button is on screen (inc/perf.php) */
.wa-sticky { transition: transform .28s var(--ease), opacity .28s var(--ease); }
.wa-sticky.is-tucked { transform: translateY(120%); opacity: 0; pointer-events: none; }

/* ---------- Home rhythm (11 Oct): one consistent gap between sections ---------- */
.hero + .ip > .sec { padding-top: 64px; padding-bottom: 0; }
.hero + .ip > .sec--local, .hero + .ip > .sec--trust { padding-bottom: 64px; margin-top: 0; }
.hero + .ip > .sec:last-child { padding-bottom: 64px; }
@media (max-width: 820px) {
  .hero + .ip > .sec { padding-top: 44px; }
  .hero + .ip > .sec--local, .hero + .ip > .sec--trust { padding-bottom: 44px; margin-top: 0; }
  .hero + .ip > .sec:last-child { padding-bottom: 44px; }
}