/* ============================================================
   PEC GLOBAL — Importer of Record Germany subpage
   Page-scoped styles ONLY. The homepage never loads this file.
   Reuses all tokens from pec-styles.css and shared cc-* helpers
   from pec-customs.css; adds ior-* classes for surfaces not yet
   covered (comparison table, stat cards, requirement grid, steps).
   ============================================================ */

/* ---------- Section 2 — What is an IOR (text + dark compare card) ---------- */
.ior-explain{
  margin-top:50px;display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(30px,4vw,56px);align-items:start;
}
.ior-text p{color:var(--ink-70);font-size:15.5px;line-height:1.78;margin-bottom:16px}
.ior-text p:last-child{margin-bottom:0}
.ior-text strong{color:var(--ink);font-weight:700}
@media(max-width:880px){.ior-explain{grid-template-columns:1fr;gap:34px}}

/* dark comparison card */
.ior-compare{
  background:var(--navy-900);color:#fff;border-radius:var(--r-card);
  padding:clamp(26px,3vw,38px);box-shadow:var(--sh-card);position:sticky;top:96px;
}
.ior-compare h3{color:#fff;font-size:21px;letter-spacing:-.02em;margin-bottom:20px}
.ior-crow{
  display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:14px;
  padding:15px 0;border-top:1px solid var(--on-dark-line);align-items:center;
}
.ior-crow.head{
  padding-top:0;border-top:none;font-size:11px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;color:var(--on-dark-70);
}
.ior-crow .rk{font-size:13.5px;font-weight:600;color:#fff;line-height:1.35}
.ior-crow .rv{font-size:13px;line-height:1.4}
.ior-crow .rv.bad{color:#ff8590;font-weight:600}
.ior-crow .rv.good{color:#5fe06f;font-weight:600}
.ior-crow .rv .ico{width:14px;height:14px;flex:none;margin-right:5px;vertical-align:-2px}
@media(max-width:560px){
  .ior-compare{position:static}
  .ior-crow{grid-template-columns:1fr;gap:5px;padding:14px 0}
  .ior-crow.head{display:none}
  .ior-crow .rk{font-size:14px}
  .ior-crow .rv::before{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;opacity:.7;display:block}
  .ior-crow .rv.bad::before{content:"Without IOR"}
  .ior-crow .rv.good::before{content:"With PEC Global"}
}

/* ---------- Section 3 — Why Germany (stat cards + two columns) ---------- */
.ior-stats{margin-top:48px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.ior-stat{
  background:var(--navy);color:#fff;border-radius:var(--r-card);
  padding:clamp(26px,2.6vw,34px) clamp(22px,2.2vw,28px);box-shadow:var(--sh-card);
}
.ior-stat .num{font-family:var(--mono);font-size:clamp(32px,3.6vw,48px);font-weight:700;line-height:1;letter-spacing:-.02em}
.ior-stat .num .u{color:#5fe06f}
.ior-stat .lbl{margin-top:14px;font-size:13.5px;line-height:1.55;color:var(--on-dark-70);font-weight:500}
@media(max-width:860px){.ior-stats{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.ior-stats{grid-template-columns:1fr}}

.ior-twocol{margin-top:46px;display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px)}
.ior-twocol h3{font-size:21px;letter-spacing:-.02em;margin-bottom:12px;color:var(--ink)}
.ior-twocol p{color:var(--ink-70);font-size:15.5px;line-height:1.74}
@media(max-width:760px){.ior-twocol{grid-template-columns:1fr;gap:28px}}

/* ---------- Section 4 — Requirements grid ---------- */
.ior-cards{margin-top:48px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ior-card{
  background:#fff;border-radius:var(--r-card);padding:32px 30px;box-shadow:var(--sh-card);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.ior-card:hover{transform:translateY(-4px);box-shadow:var(--sh-card-lg)}
.ior-card .ic{
  width:54px;height:54px;border-radius:14px;background:var(--green-tint);color:var(--green-700);
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;
}
.ior-card .ic .ico{width:26px;height:26px}
.ior-card h3{font-size:19px;letter-spacing:-.02em;margin-bottom:10px;color:var(--ink)}
.ior-card p{color:var(--ink-70);font-size:14.5px;line-height:1.66}
@media(max-width:920px){.ior-cards{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.ior-cards{grid-template-columns:1fr}}

/* ---------- Section 5 — Process (vertical numbered steps) ---------- */
.ior-steps{margin-top:50px;display:flex;flex-direction:column;gap:18px;max-width:1000px;margin-left:auto;margin-right:auto}
.ior-step{
  display:grid;grid-template-columns:auto 56px 1fr;gap:26px;align-items:start;
  background:#fff;border-radius:var(--r-card);padding:28px 32px;box-shadow:var(--sh-card);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.ior-step:hover{transform:translateY(-3px);box-shadow:var(--sh-card-lg)}
.ior-step .sn{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--green-700);letter-spacing:.04em;padding-top:16px}
.ior-step .si{width:56px;height:56px;border-radius:15px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.ior-step .si .ico{width:26px;height:26px}
.ior-step h3{font-size:19px;letter-spacing:-.02em;margin-bottom:8px;color:var(--ink)}
.ior-step p{color:var(--ink-70);font-size:15px;line-height:1.66}
@media(max-width:620px){
  .ior-step{grid-template-columns:48px 1fr;gap:16px 18px}
  .ior-step .sn{grid-column:1/-1;padding-top:0}
}

/* ---------- Section 7 — Trust band (built on .ctaband) ---------- */
.ior-band-stack{display:flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:60ch}
.ior-band-stack h3{color:#fff;font-size:clamp(23px,2.8vw,33px);letter-spacing:-.025em;line-height:1.12}
.ior-band-stack p{color:var(--on-dark-70);font-size:16px;line-height:1.7;margin:0}