/* =========================================================
   Parabellum Press – Clean Theme CSS (Pricom child)
   Scope: only pages with body.pp-site
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  --pp-bg0:#0b0c18;
  --pp-bg1:#15182a;
  --pp-ink:#0c1020;
  --pp-text:#e9edf7;
  --pp-text-dim:rgba(233,237,247,.72);

  --pp-card:#f3f4f6;              /* light panel fill */
  --pp-card-ink:#0d1020;          /* light panel text */

  --pp-line:rgba(255,255,255,.10);
  --pp-line-dark:rgba(10,12,24,.14);

  --pp-green:#10b82c;
  --pp-cyan:#3fa9c9;

  --pp-radius:44px;
  --pp-radius-sm:22px;

  --pp-shadow:0 28px 90px rgba(0,0,0,.35);
  --pp-shadow-soft:0 16px 48px rgba(0,0,0,.18);

  --pp-wrap:1200px;
  --pp-pad:clamp(18px, 3.2vw, 34px);
}

/* =========================================================
   1) PRICOM RESET (only pp-site pages)
   ========================================================= */
body.pp-site{
  background:
    radial-gradient(1200px 520px at 12% 8%, rgba(16,184,44,.18), transparent 55%),
    radial-gradient(900px 520px at 88% 10%, rgba(63,169,201,.15), transparent 55%),
    radial-gradient(900px 620px at 70% 90%, rgba(216,168,95,.10), transparent 60%),
    linear-gradient(180deg, var(--pp-bg0), var(--pp-bg1) 45%, var(--pp-bg0));
  color: var(--pp-text);
}

body.pp-site .haru-page-title{ display:none !important; }

body.pp-site #haru-content-main,
body.pp-site main.haru-page.haru-container,
body.pp-site .h-row,
body.pp-site .page-content,
body.pp-site .page-content-wrap,
body.pp-site .entry-content{
  background: transparent !important;
}

body.pp-site main.haru-page.haru-container{
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Keep Pricom from forcing odd typography on our sections */
body.pp-site section[class^="pp-"]{
  font-family: inherit;
}

/* =========================================================
   2) Layout helpers
   ========================================================= */
.pp-wrap{
  width: min(var(--pp-wrap), calc(100% - 40px));
  margin-inline: auto;
}

section[class^="pp-"]{
  padding: 56px 0;
}

/* Tighten a touch on mobile */
@media (max-width: 980px){
  :root{ --pp-radius:32px; --pp-radius-sm:18px; }
  section[class^="pp-"]{ padding: 44px 0; }
  .pp-wrap{ width: min(var(--pp-wrap), calc(100% - 26px)); }
}

/* =========================================================
   3) THE SHELL (NO ::before overlay — cannot cover content)
   ========================================================= */
.pp-shell{
  border-radius: var(--pp-radius);
  box-shadow: var(--pp-shadow);
  overflow: hidden;
}

/* Dark shell = glassy panel */
.pp-shell--dark{
  background:
    radial-gradient(900px 520px at 10% 20%, rgba(63,169,201,.18), transparent 55%),
    radial-gradient(900px 520px at 90% 15%, rgba(16,184,44,.12), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--pp-text);
}

/* Light shell = clean, soft card */
.pp-shell--light{
  background: var(--pp-card);
  border: 1px solid rgba(20,24,40,.10);
  color: var(--pp-card-ink);
  box-shadow: var(--pp-shadow-soft);
}

/* Give inner shells padding automatically */
.pp-hero__inner,
.pp-snap__inner,
.pp-core__inner,
.pp-serve__inner,
.pp-process__inner,
.pp-trust__inner,
.pp-partner__inner,
.pp-final__inner{
  padding: var(--pp-pad);
  width: min(var(--pp-wrap), calc(100% - 40px));
  margin-inline: auto;
}

/* =========================================================
   4) Type + buttons (safe defaults)
   ========================================================= */
body.pp-site h1, body.pp-site h2, body.pp-site h3{
  letter-spacing: -0.02em;
}

.pp-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight: 600;
  font-size: 14px;
  opacity: .92;
}

.pp-dot{
  width:10px; height:10px;
  border-radius: 99px;
  background: var(--pp-green);
  box-shadow: 0 0 0 4px rgba(16,184,44,.18);
}

.pp-btnrow, .pp-final__btns, .pp-partner__btns, .pp-process__cta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top: 18px;
}

.pp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 18px;
  border-radius: 16px;
  font-weight: 700;
  text-decoration:none !important;
  line-height: 1;
  transition: transform .12s ease, opacity .12s ease;
}

.pp-btn:active{ transform: translateY(1px); }

.pp-btn--primary{
  background: var(--pp-green);
  color: #071008 !important;
  border: 1px solid rgba(0,0,0,.18);
}

.pp-btn--outline{
  background: rgba(255,255,255,.06);
  color: var(--pp-text) !important;
  border: 1px solid rgba(255,255,255,.18);
}

.pp-btn--outlineDark{
  background: rgba(10,12,24,.06);
  color: var(--pp-card-ink) !important;
  border: 1px solid rgba(10,12,24,.18);
}

/* =========================================================
   5) Section-specific structure (matches your markup)
   ========================================================= */

/* HERO */
.pp-hero__inner{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(14px, 2.6vw, 28px);
  align-items: center;
}

.pp-hero__content h1{
  font-size: clamp(34px, 4.0vw, 56px);
  margin: 14px 0 10px;
}

.pp-hero__content p{
  margin: 0;
  color: var(--pp-text-dim);
  max-width: 62ch;
}

.pp-hero__media{
  border-radius: var(--pp-radius-sm);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  min-height: 220px;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  padding: 16px;
}

.pp-mediaLabel{
  font-size: 12px;
  letter-spacing: .12em;
  opacity: .65;
}

/* SNAP */
.pp-snap__grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.pp-snap__item{
  border-radius: var(--pp-radius-sm);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  padding: 14px 14px;
}

.pp-snap__title{
  font-weight: 800;
  margin-bottom: 6px;
}

.pp-snap__text{
  color: var(--pp-text-dim);
  font-size: 14px;
}

/* CORE (What we do) */
.pp-core__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2.6vw, 26px);
  align-items: start;
}

.pp-core__sub{
  margin-top: 6px;
  color: rgba(13,16,32,.70);
}

.pp-core__list{
  margin-top: 16px;
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.pp-core__item{
  border-radius: var(--pp-radius-sm);
  border: 1px solid rgba(10,12,24,.10);
  background: #ffffff;
  padding: 14px 14px;
}

.pp-core__itemTitle{
  font-weight: 900;
  margin-bottom: 6px;
}

.pp-core__itemText{
  color: rgba(13,16,32,.70);
  font-size: 14px;
}

.pp-core__mediaInner{
  border-radius: var(--pp-radius-sm);
  background: #ffffff;
  border: 1px solid rgba(10,12,24,.10);
  padding: 18px;
}

.pp-core__badge{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(16,184,44,.12);
  border: 1px solid rgba(16,184,44,.22);
  color: #0b3b14;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .08em;
  margin-bottom: 10px;
}

.pp-core__thumbs{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.pp-core__thumb{
  border-radius: 16px;
  min-height: 72px;
  background: linear-gradient(135deg, rgba(16,184,44,.10), rgba(63,169,201,.08));
  border: 1px solid rgba(10,12,24,.08);
}

/* SERVE */
.pp-serve__grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 18px;
}

.pp-serve__card{
  background: #ffffff;
  border: 1px solid rgba(10,12,24,.10);
  border-radius: var(--pp-radius-sm);
  padding: 16px;
}

.pp-serve__pill{
  display:inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(16,184,44,.10);
  border: 1px solid rgba(16,184,44,.20);
  color: #0b3b14;
  font-weight: 900;
  font-size: 12px;
  margin-bottom: 12px;
}

.pp-serve__card p{
  color: rgba(13,16,32,.70);
  font-size: 14px;
}

/* PROCESS */
.pp-process__grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 18px;
}

.pp-process__step{
  background: #ffffff;
  border: 1px solid rgba(10,12,24,.10);
  border-radius: var(--pp-radius-sm);
  padding: 16px;
}

.pp-process__num{
  width: 34px; height: 34px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(10,12,24,.06);
  border: 1px solid rgba(10,12,24,.12);
  font-weight: 900;
  margin-bottom: 10px;
}

.pp-process__step p{
  color: rgba(13,16,32,.70);
  font-size: 14px;
}

/* TRUST (dark section cards) */
.pp-trust__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 18px;
}

.pp-trust__card{
  border-radius: var(--pp-radius-sm);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  padding: 16px;
}

.pp-trust__card p{
  color: var(--pp-text-dim);
  font-size: 14px;
}

/* PARTNER */
.pp-partner__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(14px, 2.6vw, 26px);
  align-items: start;
}

.pp-partner__kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight: 800;
  font-size: 13px;
}

.pp-partner__dot{
  width:10px; height:10px;
  border-radius: 999px;
  background: var(--pp-cyan);
  box-shadow: 0 0 0 4px rgba(63,169,201,.16);
}

.pp-partner__bullets{
  margin: 14px 0 0;
  padding-left: 18px;
}

.pp-partner__panel{
  background: #ffffff;
  border: 1px solid rgba(10,12,24,.10);
  border-radius: var(--pp-radius-sm);
  padding: 18px;
}

.pp-partner__panelText{
  color: rgba(13,16,32,.70);
}

/* FINAL CTA */
.pp-final__card{
  max-width: 920px;
  margin-inline: auto;
  text-align:center;
}

.pp-final__kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight: 800;
  opacity: .92;
}

.pp-final__dot{
  width:10px; height:10px;
  border-radius: 999px;
  background: var(--pp-green);
  box-shadow: 0 0 0 4px rgba(16,184,44,.18);
}

.pp-final__card h2{
  font-size: clamp(30px, 3.2vw, 46px);
  margin: 14px 0 10px;
}

.pp-final__card p{
  margin: 0 auto;
  color: var(--pp-text-dim);
  max-width: 68ch;
}

.pp-final__fine{
  margin-top: 14px;
  color: rgba(233,237,247,.70);
  font-size: 14px;
}

/* =========================================================
   6) Responsive stacks
   ========================================================= */
@media (max-width: 1100px){
  .pp-snap__grid{ grid-template-columns: repeat(2, 1fr); }
  .pp-serve__grid{ grid-template-columns: repeat(2, 1fr); }
  .pp-process__grid{ grid-template-columns: repeat(2, 1fr); }
  .pp-trust__grid{ grid-template-columns: 1fr; }
}

@media (max-width: 980px){
  .pp-hero__inner{ grid-template-columns: 1fr; }
  .pp-core__grid{ grid-template-columns: 1fr; }
  .pp-partner__grid{ grid-template-columns: 1fr; }
  .pp-core__thumbs{ grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   Vertical Rhythm Tightening (pp-site only)
   ========================================================= */

/* A) Reduce default section padding */
body.pp-site section[class^="pp-"]{
  padding: 36px 0; /* was 56px */
}
@media (max-width: 980px){
  body.pp-site section[class^="pp-"]{
    padding: 28px 0; /* was 44px */
  }
}

/* B) Add consistent spacing between shells (instead of big section padding) */
body.pp-site .pp-hero__inner,
body.pp-site .pp-snap__inner,
body.pp-site .pp-core__inner,
body.pp-site .pp-serve__inner,
body.pp-site .pp-process__inner,
body.pp-site .pp-trust__inner,
body.pp-site .pp-partner__inner,
body.pp-site .pp-final__inner{
  margin-top: 18px;
  margin-bottom: 18px;
}
@media (max-width: 980px){
  body.pp-site .pp-hero__inner,
  body.pp-site .pp-snap__inner,
  body.pp-site .pp-core__inner,
  body.pp-site .pp-serve__inner,
  body.pp-site .pp-process__inner,
  body.pp-site .pp-trust__inner,
  body.pp-site .pp-partner__inner,
  body.pp-site .pp-final__inner{
    margin-top: 14px;
    margin-bottom: 14px;
  }
}

/* C) Normalize typography margins inside sections */
body.pp-site section[class^="pp-"] h1,
body.pp-site section[class^="pp-"] h2,
body.pp-site section[class^="pp-"] h3{
  margin-top: 0;
  margin-bottom: 10px;
}

body.pp-site section[class^="pp-"] p{
  margin-top: 0;
  margin-bottom: 10px;
}

body.pp-site section[class^="pp-"] p:last-child{
  margin-bottom: 0;
}

/* D) Pull CTA rows closer so they don’t “float” */
body.pp-site .pp-btnrow,
body.pp-site .pp-final__btns,
body.pp-site .pp-partner__btns,
body.pp-site .pp-process__cta{
  margin-top: 14px; /* was 18px */
}

/* E) Reduce big gaps created by grids */
body.pp-site .pp-snap__grid,
body.pp-site .pp-serve__grid,
body.pp-site .pp-process__grid,
body.pp-site .pp-trust__grid{
  margin-top: 14px; /* was 18px */
}

/* F) Prevent any stray WP block wrappers from adding weird spacing */
body.pp-site .entry-content > *{
  margin-top: 0 !important;
}

/* =========================================================
   COMPONENTS: Cards + Pills + Numbers (consistent system)
   Works with existing markup (no HTML changes required)
   ========================================================= */

/* --- Card tokens --- */
:root{
  --pp-card-bg:#ffffff;
  --pp-card-border:rgba(10,12,24,.10);
  --pp-card-ink:#0d1020;
  --pp-card-dim:rgba(13,16,32,.70);
  --pp-card-radius:var(--pp-radius-sm);
  --pp-card-pad:16px;
}

/* --- Base card styling applied to all “card-like” blocks --- */
body.pp-site .pp-core__item,
body.pp-site .pp-serve__card,
body.pp-site .pp-process__step,
body.pp-site .pp-trust__card{
  border-radius: var(--pp-card-radius);
  padding: var(--pp-card-pad);
  box-shadow: none;
  transition: transform .12s ease, border-color .12s ease, background-color .12s ease;
}

/* Light cards (inside light shells) */
body.pp-site .pp-core__item,
body.pp-site .pp-serve__card,
body.pp-site .pp-process__step{
  background: var(--pp-card-bg);
  border: 1px solid var(--pp-card-border);
  color: var(--pp-card-ink);
}

/* Dark cards (inside dark shells) */
body.pp-site .pp-trust__card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--pp-text);
}

/* Hover / focus polish (desktop only) */
@media (hover:hover){
  body.pp-site .pp-core__item:hover,
  body.pp-site .pp-serve__card:hover,
  body.pp-site .pp-process__step:hover{
    transform: translateY(-1px);
    border-color: rgba(16,184,44,.28);
  }
  body.pp-site .pp-trust__card:hover{
    transform: translateY(-1px);
    border-color: rgba(255,255,255,.20);
    background: rgba(255,255,255,.075);
  }
}

/* --- Consistent card typography --- */
body.pp-site .pp-core__itemTitle,
body.pp-site .pp-serve__card h3,
body.pp-site .pp-process__step h3,
body.pp-site .pp-trust__card h3{
  margin: 0 0 8px 0;
  font-weight: 900;
  letter-spacing: -0.01em;
}

body.pp-site .pp-core__itemText,
body.pp-site .pp-serve__card p,
body.pp-site .pp-process__step p{
  margin: 0;
  color: var(--pp-card-dim);
  font-size: 14px;
  line-height: 1.45;
}

body.pp-site .pp-trust__card p{
  margin: 0;
  color: var(--pp-text-dim);
  font-size: 14px;
  line-height: 1.45;
}

/* --- Pills: one consistent style everywhere --- */
body.pp-site .pp-serve__pill,
body.pp-site .pp-core__badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .08em;
  border: 1px solid rgba(16,184,44,.22);
  background: rgba(16,184,44,.12);
  color: #0b3b14;
}

/* If you want pills to be slightly smaller */
@media (max-width: 980px){
  body.pp-site .pp-serve__pill,
  body.pp-site .pp-core__badge{
    padding: 7px 10px;
    font-size: 11px;
  }
}

/* --- Number badge: same look in Process steps --- */
body.pp-site .pp-process__num{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 950;
  background: rgba(10,12,24,.06);
  border: 1px solid rgba(10,12,24,.12);
  color: rgba(13,16,32,.88);
  margin-bottom: 10px;
}

/* --- Consistent grid gaps across card grids --- */
body.pp-site .pp-core__list{ gap: 12px; }
body.pp-site .pp-serve__grid{ gap: 14px; }
body.pp-site .pp-process__grid{ gap: 14px; }
body.pp-site .pp-trust__grid{ gap: 14px; }

/* --- Optional: unify “card inner rounding” everywhere --- */
body.pp-site .pp-core__mediaInner{
  border-radius: var(--pp-card-radius);
  border: 1px solid var(--pp-card-border);
}

/* =========================================================
   MOBILE POLISH (<= 980px)
   - Smaller shell radius
   - Better padding + spacing
   - Cleaner grids (Snap / Serve / Process / Core thumbs)
   ========================================================= */

@media (max-width: 980px){

  /* 1) Shell + inner padding */
  :root{
    --pp-radius: 26px;
    --pp-radius-sm: 16px;
  }

  body.pp-site .pp-shell{
    border-radius: var(--pp-radius) !important;
  }

  body.pp-site .pp-hero__inner,
  body.pp-site .pp-snap__inner,
  body.pp-site .pp-core__inner,
  body.pp-site .pp-serve__inner,
  body.pp-site .pp-process__inner,
  body.pp-site .pp-trust__inner,
  body.pp-site .pp-partner__inner,
  body.pp-site .pp-final__inner{
    padding: 18px !important; /* tighter than desktop */
    width: calc(100% - 22px) !important;
    margin-inline: auto !important;
  }

  /* 2) Typography scale (less “desktopy” on mobile) */
  body.pp-site .pp-hero__content h1{
    font-size: clamp(28px, 8vw, 38px) !important;
    line-height: 1.05 !important;
  }

  body.pp-site .pp-final__card h2{
    font-size: clamp(24px, 7vw, 34px) !important;
    line-height: 1.1 !important;
  }

  /* 3) Buttons: full-width stack (better thumb reach) */
  body.pp-site .pp-btnrow,
  body.pp-site .pp-final__btns,
  body.pp-site .pp-partner__btns,
  body.pp-site .pp-process__cta{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body.pp-site .pp-btn{
    width: 100% !important;
    justify-content: center !important;
    padding: 13px 16px !important;
    border-radius: 14px !important;
  }

  /* 4) HERO: remove cramped two-column feel */
  body.pp-site .pp-hero__inner{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body.pp-site .pp-hero__media{
    min-height: 170px !important;
    border-radius: var(--pp-radius-sm) !important;
  }

  /* 5) SNAP grid: 2 columns, then 1 column on very small screens */
  body.pp-site .pp-snap__grid{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  body.pp-site .pp-snap__item{
    padding: 12px !important;
    border-radius: var(--pp-radius-sm) !important;
  }

  @media (max-width: 520px){
    body.pp-site .pp-snap__grid{
      grid-template-columns: 1fr !important;
    }
  }

  /* 6) SERVE cards: 1 column (keeps text readable) */
  body.pp-site .pp-serve__grid{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* 7) PROCESS steps: 1 column, tighter spacing */
  body.pp-site .pp-process__grid{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body.pp-site .pp-process__num{
    width: 34px !important;
    height: 34px !important;
    border-radius: 12px !important;
  }

  /* 8) CORE thumbs: 2 columns (avoid tiny 3-col grid) */
  body.pp-site .pp-core__thumbs{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* 9) TRUST cards: keep one-column with comfortable spacing */
  body.pp-site .pp-trust__grid{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* 10) Partner panel spacing */
  body.pp-site .pp-partner__panel{
    padding: 16px !important;
    border-radius: var(--pp-radius-sm) !important;
  }

  /* 11) Reduce section padding overall (mobile rhythm) */
  body.pp-site section[class^="pp-"]{
    padding: 26px 0 !important;
  }
}

/* Wizard utilities */
.pp-hide{display:none !important;}

.pp-wiz-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:14px;
  margin:10px 0 0;
}

.pp-wiz-summary__text{opacity:.9;font-size:.95em}
.pp-wiz-edit{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.18);
  background:transparent;
  cursor:pointer;
  font:inherit;
  font-weight:700;
}

/* Progress bar */
.pp-wiz-progress{
  max-width:920px;margin:0 auto 14px;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:16px;
}
.pp-wiz-progress__top{
  display:flex;justify-content:space-between;align-items:center;
  gap:10px;margin-bottom:8px;
}
.pp-wiz-progress__bar{
  height:10px;border-radius:999px;
  background:rgba(0,0,0,.10);
  overflow:hidden;
}
.pp-wiz-progress__fill{
  height:100%;width:0%;
  background:rgba(0,0,0,.92);
  transition:width .25s ease;
}