/*
 * Lokarta — visual consistency layer
 * Source of truth: accepted HOME (assets/css/main.css).
 * Loaded after dedicated page styles to keep all public views on one type scale and palette.
 */

/* ---------- canonical page aliases ---------- */
.pr-page {
  --pr-dark: var(--graphite); --pr-dark-2: var(--anthracite); --pr-cream: var(--cream);
  --pr-light: var(--cream-2); --pr-border: var(--line-light); --pr-gold: var(--gold);
  --pr-gold-soft: rgba(201,167,122,.16);
}
.crm-page {
  --crm-dark: var(--graphite); --crm-dark2: var(--anthracite); --crm-cream: var(--cream);
  --crm-light: var(--cream-2); --crm-gold: var(--gold); --crm-border: var(--line-light);
  --crm-wborder: var(--line-dark);
}
.dg-page {
  --dg-gold: var(--gold); --dg-dark: var(--graphite); --dg-cream: var(--cream);
  --dg-light: var(--cream-2); --dg-border: var(--line-light); --dg-white-border: var(--line-dark);
}
.dm-page {
  --dm-dark: var(--graphite); --dm-dark-2: var(--anthracite); --dm-cream: var(--cream);
  --dm-light: var(--cream-2); --dm-gold: var(--gold); --dm-border: var(--line-light);
  --dm-white-border: var(--line-dark);
}
.fq-page { --fq-gold: var(--gold); --fq-graphite: var(--graphite); --fq-cream: var(--cream); --fq-line: var(--line-light); }
.fn-page {
  --fn-dark: var(--graphite); --fn-dark2: var(--anthracite); --fn-light: var(--cream-2);
  --fn-cream: var(--cream); --fn-gold: var(--gold); --fn-border: var(--line-light);
  --fn-white-border: var(--line-dark); --fn-muted: var(--muted);
}
.hc-page { --hc-gold: var(--gold); --hc-bronze: var(--bronze); --hc-ink: var(--ink); --hc-graphite: var(--graphite); --hc-cream: var(--cream); }
.wi-page {
  --wi-dark: var(--graphite); --wi-dark2: var(--anthracite); --wi-cream: var(--cream);
  --wi-light: var(--cream-2); --wi-gold: var(--gold); --wi-gold2: #D7B786;
  --wi-text: var(--ink); --wi-muted: var(--muted); --wi-line: var(--line-light); --wi-line-dark: var(--line-dark);
}
.mp-page {
  --mp-line: var(--line-light); --mp-gold: var(--gold); --mp-ink: var(--ink); --mp-muted: var(--muted);
  --mpv2-border: rgba(201,167,122,.20); --mpv2-soft: var(--cream); --mpv2-card: var(--cream-2);
  --mpv2-dark: var(--graphite); --mpv2-dark2: var(--anthracite);
}
.jd-page {
  --jd-dark: var(--graphite); --jd-dark-2: var(--anthracite); --jd-cream: var(--cream);
  --jd-cream-2: var(--cream-2); --jd-light: #fff; --jd-border: var(--line-light);
  --jd-white-border: var(--line-dark); --jd-gold: var(--gold); --jd-gold-soft: rgba(201,167,122,.18);
  --jd-text: var(--ink);
}
.kl-page { --kl-gold: var(--gold); --kl-bronze: var(--bronze); --kl-ink: var(--ink); --kl-soft: var(--cream); --kl-line: var(--line-light); }
.kt-page { --kt-ink: var(--graphite); --kt-cream: var(--cream); --kt-paper: var(--cream-2); --kt-gold: var(--gold); --kt-gold-deep: var(--bronze); --kt-line: var(--line-light); }
.wz-page, .wza-page, .wzar-page { --wz-gold: var(--gold); --wz-bronze: var(--bronze); --wz-dark: var(--graphite); --wz-panel: var(--anthracite); --wz-cream: var(--cream); --wz-line: var(--line-light); }
.ws-page { --ws-gold: var(--gold); --ws-graphite: var(--graphite); --ws-anth: var(--anthracite); --ws-cream: var(--cream); --ws-line: var(--line-light); }

/* ---------- section surfaces: same as HOME ---------- */
#main-content > section.section-dark { background-color: var(--graphite); }
#main-content > section.section-light { background-color: #fff; color: var(--ink); }
#main-content > section.section-cream { background-color: var(--cream); color: var(--ink); }

/* ---------- typography: one real font system ---------- */
#main-content { font-family: var(--body); }
#main-content h1,
#main-content h2,
#main-content h3 { font-family: var(--display); font-weight: 500; letter-spacing: -.045em; }

/* Hero H1 = HOME scale. Internal UI/mockup headings are intentionally excluded. */
.an-hero-copy h1,
.pr-hero-copy h1,
.crm-hero-copy h1,
.dg-hero-copy h1,
.dm-hero-copy h1,
.fq-hero-copy h1,
.fn-hero-copy h1,
.hc-hero-copy h1,
.wi-hero-copy h1,
.ig-hero-copy h1,
.mp-hero-copy h1,
.jd-hero-copy h1,
.jc-hero h1,
.kl-hero-copy h1,
.kt-hero-copy h1,
.lc-hero-copy h1,
.ol-hero-copy h1,
.rv-hero-copy h1,
.wz-hero-copy h1,
.wza-head-copy h1,
.wzar-hero h1,
.ws-hero-copy h1,
.product-hero h1,
.prose h1 {
  font-size: var(--type-hero);
  line-height: .94;
  letter-spacing: -.045em;
  font-weight: 500;
}

/* Primary section H2 = HOME scale. */
.pr-page .section-heading h2, .pr-page .pr-copy h2, .pr-page .pr-no-fake-box h2, .pr-page .pr-final-box h2,
.crm-page .section-heading h2, .crm-page .crm-copy h2, .crm-final-box h2,
.dg-page .dg-copy h2, .dg-page .section-heading h2, .dg-page .dg-demo-box h2, .dg-page .dg-final-box h2, .dg-law-main h2, .dg-change-copy h2,
.dm-page .section-heading h2, .dm-page .dm-copy h2, .dm-page .dm-after-box h2, .dm-page .dm-final-box h2,
.fn-page .section-heading h2, .fn-page .fn-copy h2, .fn-page .fn-connection-heading h2, .fn-page .fn-final-box h2,
.hc-one-source-copy h2, .hc-control-copy h2, .hc-example-copy h2, .hc-final-copy h2,
.wi-page .section-heading h2, .wi-copy h2, .wi-contact-copy h2,
.ig-split-copy h2, .ig-final-copy h2,
.mp-page-v2 .mp-known .mp-copy h2, .mp-page-v2 .mp-types .section-heading h2, .mp-page-v2 .mp-depth .mp-copy h2, .mp-page-v2 .mp-final-box h2,
.jd-page .section-heading h2, .jd-page .jd-copy h2, .jd-page .jd-demo-box h2, .jd-page .jd-final-box h2,
.jc-copy h2, .jc-law-copy h2, .jc-demo-copy h2, .jc-faq-intro h2, .jc-final h2,
.kl-source-copy h2, .kl-context-copy h2, .kl-files-copy h2, .kl-final-copy h2,
.kt-quote-copy h2, .kt-demo-copy h2, .kt-final-card h2,
.lc-split-copy h2, .lc-final-copy h2,
.ol-split-copy h2, .ol-final-copy h2,
.rv-status-copy h2, .rv-conflict-copy h2, .rv-mobile-copy h2, .rv-boundary-copy h2, .rv-faq-intro h2, .rv-final-box h2,
.wz-split-copy h2, .wz-architecture-copy h2, .wz-final-copy h2, .wza-next-card h2,
.ws-copy h2, .ws-faq-intro h2, .ws-final h2 {
  font-size: var(--type-section);
  line-height: .99;
  letter-spacing: -.045em;
  font-weight: 500;
}

/* Secondary H2 tier for grouped/knowledge content. */
.fq-group-head h2,
.fq-truth-card h2,
.wza-content h2,
.wzar-grid h2 {
  font-size: var(--type-subsection);
  line-height: 1.05;
  letter-spacing: -.04em;
  font-weight: 500;
}

/* Hero lead/support text = HOME hierarchy. */
.an-hero-lead,
.pr-hero-lead,
.crm-hero-lead,
.dg-hero-lead,
.dm-hero-lead,
.fq-hero-lead,
.fn-hero-lead,
.hc-hero-lead,
.wi-hero-lead,
.ig-hero-lead,
.mp-hero-lead,
.jd-hero-lead,
.jc-hero-lead,
.kl-hero-lead,
.kt-hero-lead,
.lc-hero-lead,
.ol-hero-lead,
.rv-hero-lead,
.wz-hero-lead,
.ws-hero-lead,
.product-hero .hero-body .lead {
  font-size: var(--type-lead);
  line-height: 1.55;
  color: rgba(255,255,255,.82);
}

.crm-hero-secondary,
.dg-hero-secondary,
.dm-hero-secondary,
.wi-hero-secondary,
.ol-hero-support,
.product-hero .hero-body p:not(.lead) {
  font-size: 15px;
  line-height: 1.62;
  color: rgba(255,255,255,.54);
}

/* Long-form/content copy: same rhythm as HOME; excludes hero and interface microcopy. */
.section-light [class$="-copy"]:not([class*="hero-copy"]) > p:not(.eyebrow),
.section-cream [class$="-copy"]:not([class*="hero-copy"]) > p:not(.eyebrow) {
  font-size: 17px;
  line-height: 1.7;
  color: var(--muted);
}
.section-dark [class$="-copy"]:not([class*="hero-copy"]) > p:not(.eyebrow) {
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255,255,255,.58);
}

/* HOME semantic accent rules, including pages that previously used local aliases. */
#main-content .section-dark h1 em,
#main-content .section-dark h2 em { color: var(--gold); font-style: normal; }
#main-content .section-light h1 em,
#main-content .section-light h2 em,
#main-content .section-cream h1 em,
#main-content .section-cream h2 em { color: var(--bronze); font-style: normal; }

/* Keep all standard outlines and text tones on the canonical palette. */
#main-content .eyebrow { color: var(--gold); }
#main-content .section-light .eyebrow,
#main-content .section-cream .eyebrow,
#main-content .eyebrow-dark { color: var(--bronze); }

/* The O Lokarcie frontend preview may demonstrate layouts, but not foreign brand palettes. */
.ol-preview-window,
.ol-preview-window[data-active="estate"],
.ol-preview-window[data-active="boutique"] {
  --ol-front-accent: var(--gold);
  --ol-front-bg: var(--cream);
}

/* ---------- responsive scale copied from HOME ---------- */
@media (max-width: 1180px) {
  .an-hero-copy h1, .pr-hero-copy h1, .crm-hero-copy h1, .dg-hero-copy h1, .dm-hero-copy h1,
  .fq-hero-copy h1, .fn-hero-copy h1, .hc-hero-copy h1, .wi-hero-copy h1, .ig-hero-copy h1,
  .mp-hero-copy h1, .jd-hero-copy h1, .jc-hero h1, .kl-hero-copy h1, .kt-hero-copy h1,
  .lc-hero-copy h1, .ol-hero-copy h1, .rv-hero-copy h1, .wz-hero-copy h1, .wza-head-copy h1,
  .wzar-hero h1, .ws-hero-copy h1, .product-hero h1, .prose h1 {
    font-size: clamp(50px, 5.7vw, 72px);
  }
}

@media (max-width: 720px) {
  .an-hero-copy h1, .pr-hero-copy h1, .crm-hero-copy h1, .dg-hero-copy h1, .dm-hero-copy h1,
  .fq-hero-copy h1, .fn-hero-copy h1, .hc-hero-copy h1, .wi-hero-copy h1, .ig-hero-copy h1,
  .mp-hero-copy h1, .jd-hero-copy h1, .jc-hero h1, .kl-hero-copy h1, .kt-hero-copy h1,
  .lc-hero-copy h1, .ol-hero-copy h1, .rv-hero-copy h1, .wz-hero-copy h1, .wza-head-copy h1,
  .wzar-hero h1, .ws-hero-copy h1, .product-hero h1, .prose h1 {
    font-size: clamp(44px, 13vw, 64px);
  }

  .pr-page .section-heading h2, .pr-page .pr-copy h2, .pr-page .pr-no-fake-box h2, .pr-page .pr-final-box h2,
  .crm-page .section-heading h2, .crm-page .crm-copy h2, .crm-final-box h2,
  .dg-page .dg-copy h2, .dg-page .section-heading h2, .dg-page .dg-demo-box h2, .dg-page .dg-final-box h2, .dg-law-main h2, .dg-change-copy h2,
  .dm-page .section-heading h2, .dm-page .dm-copy h2, .dm-page .dm-after-box h2, .dm-page .dm-final-box h2,
  .fn-page .section-heading h2, .fn-page .fn-copy h2, .fn-page .fn-connection-heading h2, .fn-page .fn-final-box h2,
  .hc-one-source-copy h2, .hc-control-copy h2, .hc-example-copy h2, .hc-final-copy h2,
  .wi-page .section-heading h2, .wi-copy h2, .wi-contact-copy h2, .ig-split-copy h2, .ig-final-copy h2,
  .mp-page-v2 .mp-known .mp-copy h2, .mp-page-v2 .mp-types .section-heading h2, .mp-page-v2 .mp-depth .mp-copy h2, .mp-page-v2 .mp-final-box h2,
  .jd-page .section-heading h2, .jd-page .jd-copy h2, .jd-page .jd-demo-box h2, .jd-page .jd-final-box h2,
  .jc-copy h2, .jc-law-copy h2, .jc-demo-copy h2, .jc-faq-intro h2, .jc-final h2,
  .kl-source-copy h2, .kl-context-copy h2, .kl-files-copy h2, .kl-final-copy h2,
  .kt-quote-copy h2, .kt-demo-copy h2, .kt-final-card h2, .lc-split-copy h2, .lc-final-copy h2,
  .ol-split-copy h2, .ol-final-copy h2, .rv-status-copy h2, .rv-conflict-copy h2, .rv-mobile-copy h2,
  .rv-boundary-copy h2, .rv-faq-intro h2, .rv-final-box h2, .wz-split-copy h2, .wz-architecture-copy h2,
  .wz-final-copy h2, .wza-next-card h2, .ws-copy h2, .ws-faq-intro h2, .ws-final h2 {
    font-size: clamp(36px, 10.5vw, 50px);
  }

  .an-hero-lead, .pr-hero-lead, .crm-hero-lead, .dg-hero-lead, .dm-hero-lead, .fq-hero-lead,
  .fn-hero-lead, .hc-hero-lead, .wi-hero-lead, .ig-hero-lead, .mp-hero-lead, .jd-hero-lead,
  .jc-hero-lead, .kl-hero-lead, .kt-hero-lead, .lc-hero-lead, .ol-hero-lead, .rv-hero-lead,
  .wz-hero-lead, .ws-hero-lead, .product-hero .hero-body .lead { font-size: 17px; }
}

@media (max-width: 420px) {
  .an-hero-copy h1, .pr-hero-copy h1, .crm-hero-copy h1, .dg-hero-copy h1, .dm-hero-copy h1,
  .fq-hero-copy h1, .fn-hero-copy h1, .hc-hero-copy h1, .wi-hero-copy h1, .ig-hero-copy h1,
  .mp-hero-copy h1, .jd-hero-copy h1, .jc-hero h1, .kl-hero-copy h1, .kt-hero-copy h1,
  .lc-hero-copy h1, .ol-hero-copy h1, .rv-hero-copy h1, .wz-hero-copy h1, .wza-head-copy h1,
  .wzar-hero h1, .ws-hero-copy h1, .product-hero h1, .prose h1 { font-size: 42px; }
}