/* =============================================================
   SALESHAX · Lead Magnet — A4 Print/PDF system
   Built on the SALESHAX CI (colors_and_type.css) + the editorial
   visual language of the reference case study (halos, dot-texture,
   gradient-dark panels, italic-accent headlines, sky-tinted depth).
   ============================================================= */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&family=Playfair+Display:ital,wght@0,400;1,400&display=swap');

@font-face{font-family:"Gestura Display";src:url("../fonts/GesturaDisplay-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Gestura Display";src:url("../fonts/GesturaDisplay-LightItalic.otf") format("opentype");font-weight:300;font-style:italic;font-display:swap;}
@font-face{font-family:"Gestura Display";src:url("../fonts/GesturaDisplay-Semibold.otf") format("opentype");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Gestura Display";src:url("../fonts/GesturaDisplay-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap;}

:root{
  /* neutrals */
  --white:#FFFFFF;
  --near-black:#0A0A0A;
  --black:#000000;
  --warm:#F5F3EF;
  --paper:#FAFAFA;
  --ink:#000;
  --ink-78:rgba(0,0,0,.78);
  --ink-70:rgba(0,0,0,.70);
  --ink-60:rgba(0,0,0,.60);
  --ink-50:rgba(0,0,0,.50);
  --ink-40:rgba(0,0,0,.40);
  --ink-12:rgba(0,0,0,.12);
  --ink-08:rgba(0,0,0,.08);
  --ink-05:rgba(0,0,0,.05);
  /* grey ramp */
  --grey-900:#3A3A3A;
  --grey-600:#666666;
  --grey-500:#666666;
  --grey-350:#999999;
  --grey-250:#D9D9D9;
  --grey-150:#EDEDED;
  /* sky accent */
  --sky-050:#E0EFF5;
  --sky-100:#BAE1F0;
  --sky-200:#90CFE8;
  --ice:#90CFE8;
  --ice-2:#65BADB;
  --sky-500:#1796C9;
  --blue:#1796C9;
  --sky-600:#0C85B4;
  --blue-d:#0C85B4;
  --deep:#02324F;
  --sky-900:#02324F;
  --positive:#2E6F4B;
  /* the live accent (tweakable) */
  --accent:var(--sky-500);
  --accent-deep:var(--sky-600);
  --rule:rgba(0,0,0,.10);
  --rule-faint:rgba(0,0,0,.06);
  --rule-d:rgba(255,255,255,.14);

  --font-display:"Gestura Display","Playfair Display",Georgia,serif;
  --font-sans:"Geist","Inter",system-ui,-apple-system,sans-serif;
  --font-ui:"DM Sans","Geist",system-ui,sans-serif;

  /* print type scale (pt) */
  --t-h1:34pt;
  --t-h2:21pt;
  --t-h3:13.5pt;
  --t-lead:12pt;
  --t-body:10pt;
  --t-small:8.6pt;
  --t-eyebrow:8pt;

  --maxtext:158mm;
}

/* ---------- screen shell ---------- */
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-sans);
  color:var(--ink);
  background:#dcdce0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:-0.01em;
}
::selection{background:var(--ice);color:#000;}
img{max-width:100%;display:block;}

.doc{
  display:flex;flex-direction:column;align-items:center;
  gap:18px;padding:40px 16px 80px;
}

/* ---------- the A4 page ---------- */
.page{
  position:relative;
  width:210mm;height:297mm;
  background:var(--white);
  overflow:hidden;
  box-shadow:0 18px 50px -18px rgba(0,0,0,.45);
}
.page-in{
  position:relative;z-index:2;
  width:100%;height:100%;
  padding:18mm 22mm 16mm;
  display:flex;flex-direction:column;
}

/* running header / footer for content pages */
.rhead{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:7mm;margin-bottom:9mm;
  border-bottom:1px solid var(--rule);
}
.rhead .logo{height:13px;color:#000;display:inline-flex;}
.rhead .logo svg{height:13px;width:auto;display:block;}
.logo-wm{display:block;width:auto;color:currentColor;}
.rhead .logo .logo-wm{height:10px;}
/* explicit white on dark pages — robust across DOM-capture exports */
.cover .logo-wm,.closing .logo-wm,.opener .logo-wm{color:#fff;fill:#fff;}
.rhead .meta{
  font-family:var(--font-ui);font-weight:500;
  font-size:7pt;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-50);
}
.rfoot{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:6mm;margin-top:auto;
  border-top:1px solid var(--rule);
  font-family:var(--font-ui);font-size:7pt;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-40);
}
.rfoot .pg{font-family:var(--font-display);font-style:italic;font-size:11pt;color:var(--accent-deep);letter-spacing:-0.02em;text-transform:none;}
.flow{flex:1;min-height:0;}

/* dark + warm page variants */
.page.dark{background:var(--near-black);color:#fff;}
.page.warm{background:var(--warm);}

/* ---------- decorative layers ---------- */
.dotgrid{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px, rgba(0,0,0,.16) 1px, transparent 1.6px);
  background-size:16px 16px;
}
.dotgrid.fade-top{
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 42%);
  mask-image:linear-gradient(180deg,#000 0%,transparent 42%);
  opacity:.5;
}
.dotgrid.fade-bottom{
  -webkit-mask-image:linear-gradient(0deg,#000 0%,transparent 42%);
  mask-image:linear-gradient(0deg,#000 0%,transparent 42%);
  opacity:.5;
}
.dotgrid.on-dark{background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.13) 1px, transparent 1.7px);background-size:18px 18px;}
.halo{
  position:absolute;z-index:1;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle, rgba(144,207,232,.30), transparent 70%);
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-sans);font-weight:500;
  font-size:var(--t-eyebrow);letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-deep);
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--ice-2);}
.eyebrow.plain{color:var(--ink-60);}
.dark .eyebrow{color:var(--ice);}

h1,h2,h3{margin:0;text-wrap:pretty;}
.h1{
  font-family:var(--font-display);font-weight:400;
  font-size:var(--t-h1);line-height:1.04;letter-spacing:-0.035em;color:#000;
}
.h2{
  font-family:var(--font-display);font-weight:400;
  font-size:var(--t-h2);line-height:1.1;letter-spacing:-0.03em;color:#000;
}
.h3{
  font-family:var(--font-sans);font-weight:600;
  font-size:var(--t-h3);line-height:1.25;letter-spacing:-0.03em;color:#000;
}
.dark .h1,.dark .h2,.dark .h3{color:#fff;}
em.ac,.ac{
  font-family:var(--font-display);font-style:italic;font-weight:300;
  color:var(--grey-500);
}
.h1 .ac,.h2 .ac{color:var(--grey-500);}
.dark .ac{color:rgba(255,255,255,.6);}
.ac.blue{color:var(--accent-deep);}
.dark .ac.blue{color:var(--ice);}

.lead{
  font-family:var(--font-sans);font-weight:400;
  font-size:var(--t-lead);line-height:1.5;letter-spacing:-0.02em;
  color:var(--ink-78);max-width:var(--maxtext);
}
.dark .lead{color:rgba(255,255,255,.8);}
p.body,.body{
  font-family:var(--font-sans);font-weight:400;
  font-size:var(--t-body);line-height:1.58;letter-spacing:-0.01em;
  color:var(--ink-78);max-width:var(--maxtext);margin:0 0 8pt;
}
.dark .body{color:rgba(255,255,255,.78);}
.body strong{font-weight:600;color:#000;}
.dark .body strong{color:#fff;}
.small{font-size:var(--t-small);line-height:1.5;color:var(--ink-60);}

/* section sub-label inside content pages */
.kicker{
  font-family:var(--font-ui);font-weight:500;font-size:8pt;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-50);
  margin-bottom:4mm;
}

/* ============================================================
   COMPONENTS
   ============================================================ */

/* — Kennzahl-Karte (.bignum) — */
.bignum{
  position:relative;overflow:hidden;
  padding:7mm 8mm;border-radius:10px;border:1px solid var(--rule);
  background:radial-gradient(ellipse 90% 80% at 20% -10%, rgba(144,207,232,.30), transparent 62%), #fff;
}
.bignum .lbl{font-family:var(--font-ui);font-weight:500;font-size:7.5pt;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-50);margin-bottom:3mm;}
.bignum .n{font-family:var(--font-display);font-weight:400;font-size:46pt;line-height:.9;letter-spacing:-0.05em;color:#000;}
.bignum .n em{font-style:italic;color:var(--accent-deep);font-weight:400;}
.bignum .cap{font-size:9pt;line-height:1.45;color:var(--ink-60);margin-top:3mm;max-width:62mm;}

/* — Takeaway-Box (.takeaway) — */
.takeaway{
  position:relative;overflow:hidden;
  padding:7mm 8mm;border-radius:10px;
  background:linear-gradient(180deg,#fff 0%, #E7F3F8 100%);
  border:1px solid var(--rule);
}
.takeaway::before{content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle at 1px 1px, rgba(12,133,180,.18) 1px, transparent 1.6px);
  background-size:16px 16px;
  -webkit-mask-image:linear-gradient(135deg, transparent 8%, #000 55%, transparent 95%);
  mask-image:linear-gradient(135deg, transparent 8%, #000 55%, transparent 95%);
  opacity:.55;}
.takeaway .lbl{position:relative;font-family:var(--font-ui);font-weight:500;font-size:7.5pt;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:3mm;display:inline-flex;gap:7px;align-items:center;}
.takeaway .lbl .dot{width:6px;height:6px;border-radius:50%;background:var(--ice-2);}
.takeaway .txt{position:relative;font-family:var(--font-display);font-weight:400;font-size:18pt;line-height:1.16;letter-spacing:-0.03em;color:#000;}
.takeaway .txt em{font-style:italic;color:var(--accent-deep);font-weight:400;}

/* — Pull-Quote (.pull) — */
.pull{position:relative;padding:4mm 0;}
.pull blockquote{
  margin:0;font-family:var(--font-display);font-weight:400;font-style:italic;
  font-size:19pt;line-height:1.28;letter-spacing:-0.02em;color:#000;
  padding-left:7mm;border-left:2px solid var(--accent);max-width:150mm;
}
.pull blockquote em{color:var(--accent-deep);}
.pull .cite{margin-top:4mm;padding-left:7mm;font-family:var(--font-ui);font-size:8.5pt;letter-spacing:.04em;color:var(--ink-60);}
.dark .pull blockquote{color:#fff;}

/* — Numbered list (.numbered) — */
ol.numbered{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5mm;counter-reset:nl;}
ol.numbered>li{display:grid;grid-template-columns:13mm 1fr;gap:5mm;align-items:start;counter-increment:nl;}
ol.numbered>li::before{
  content:counter(nl,decimal-leading-zero);
  font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:22pt;line-height:1;color:var(--grey-350);letter-spacing:-0.03em;
}
ol.numbered .t{font-family:var(--font-sans);font-weight:600;font-size:11pt;letter-spacing:-0.02em;color:#000;margin-bottom:1.5mm;}
ol.numbered .d{font-size:9.5pt;line-height:1.5;color:var(--ink-70);}
ol.numbered.tight>li::before{font-size:18pt;}

/* — Vorher/Nachher diagram (.diagram) — */
.diagram{display:flex;flex-direction:column;gap:0;border-radius:10px;overflow:hidden;border:1px solid var(--rule);}
.diagram .row{display:grid;grid-template-columns:30mm 1fr;align-items:center;gap:6mm;padding:5mm 7mm;}
.diagram .row.before{background:#F7F6F3;}
.diagram .row.after{background:linear-gradient(180deg,#fff 0%, #EAF5FA 100%);border-top:1px solid var(--rule);}
.diagram .tag{font-family:var(--font-ui);font-weight:600;font-size:8pt;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-50);}
.diagram .row.after .tag{color:var(--accent-deep);}
.diagram .val{font-family:var(--font-sans);font-size:10pt;line-height:1.45;color:var(--ink-78);}
.diagram .row.after .val{color:#000;font-weight:500;}

/* — Schwach/Stark compare table (.compare) — */
.compare{border-radius:10px;overflow:hidden;border:1px solid var(--rule);}
.compare .ch{display:grid;grid-template-columns:1fr 1fr;}
.compare .ch>div{padding:3.5mm 6mm;font-family:var(--font-ui);font-weight:600;font-size:8pt;letter-spacing:.14em;text-transform:uppercase;}
.compare .ch .a{background:#F2F1EE;color:var(--ink-50);}
.compare .ch .b{background:#E7F3F8;color:var(--accent-deep);}
.compare .r{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule);}
.compare .r>div{padding:4mm 6mm;font-size:9.2pt;line-height:1.45;}
.compare .r .a{color:var(--ink-60);border-right:1px solid var(--rule);}
.compare .r .a::before{content:"“";font-family:var(--font-display);color:var(--grey-350);margin-right:1px;}
.compare .r .a::after{content:"”";font-family:var(--font-display);color:var(--grey-350);}
.compare .r .b{color:#000;}
.compare .r .b::before{content:"“";font-family:var(--font-display);color:var(--ice-2);margin-right:1px;}
.compare .r .b::after{content:"”";font-family:var(--font-display);color:var(--ice-2);}

/* — generic sky card / panel — */
.card{position:relative;overflow:hidden;padding:6mm 7mm;border-radius:10px;border:1px solid var(--rule);
  background:radial-gradient(ellipse 100% 80% at 50% -20%, rgba(144,207,232,.24), transparent 68%), #fff;}
.card .ic{width:9mm;height:9mm;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:4mm;
  background:radial-gradient(circle,#fff,#E0EFF5);border:1px solid rgba(23,150,201,.2);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.8),0 3px 8px rgba(12,133,180,.12);}
.card .ic svg{width:16px;height:16px;stroke:var(--accent-deep);fill:none;}
.card .t{font-family:var(--font-sans);font-weight:600;font-size:10.5pt;letter-spacing:-0.02em;color:#000;margin-bottom:2mm;}
.card .s{font-size:9pt;line-height:1.5;color:var(--ink-60);}

/* checklist (.checklist) */
.checklist{display:flex;flex-direction:column;gap:0;}
.checklist .item{display:grid;grid-template-columns:8mm 1fr;gap:4mm;align-items:start;padding:3.6mm 0;border-bottom:1px solid var(--rule);}
.checklist .item:last-child{border-bottom:none;}
.checklist .box{width:5mm;height:5mm;border-radius:3px;border:1.5px solid var(--accent);margin-top:.3mm;flex-shrink:0;
  background:radial-gradient(circle,#fff,#EAF5FA);}
.checklist .item .x{font-size:9.6pt;line-height:1.4;color:var(--ink-78);}
.checklist .item .x b{font-weight:600;color:#000;}

/* small inline check pill list */
ul.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3mm;}
ul.checks li{display:grid;grid-template-columns:6mm 1fr;gap:3.5mm;align-items:start;font-size:9.5pt;line-height:1.45;color:var(--ink-78);}
ul.checks li .ck{width:5mm;height:5mm;border-radius:50%;background:radial-gradient(circle,#fff,#E0EFF5);border:1px solid rgba(23,150,201,.25);display:flex;align-items:center;justify-content:center;margin-top:.3mm;}
ul.checks li .ck svg{width:10px;height:10px;stroke:var(--accent-deep);fill:none;}
ul.checks.neg li .ck{background:#F3F2EF;border-color:var(--rule);}
ul.checks.neg li .ck svg{stroke:var(--grey-350);}

/* capsule button (brand signature) */
.btn{display:inline-flex;align-items:center;gap:9px;padding:3px;border-radius:100px;background:rgba(0,0,0,.1);text-decoration:none;}
.btn .core{display:inline-flex;align-items:center;gap:9px;padding:10px 22px 10px 18px;border-radius:100px;
  background:linear-gradient(180deg,#000 0%,#666 100%);color:#fff;font-family:var(--font-sans);font-weight:500;font-size:10pt;letter-spacing:-0.04em;}
.btn.on-dark{background:rgba(255,255,255,.16);}
.btn.light .core{background:linear-gradient(180deg,#fff 0%, #D0D0D0 100%);color:#000;}
.btn .g{width:14px;height:16px;display:inline-flex;flex-direction:column;justify-content:space-between;}
.btn .g span{height:2.5px;background:currentColor;border-radius:1px;}
.btn .g span:nth-child(1){width:14px;}
.btn .g span:nth-child(2){width:10px;}
.btn .g span:nth-child(3){width:6px;}

/* divider */
.hr{height:1px;background:var(--rule);border:none;margin:6mm 0;}

/* generic helpers */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:6mm;}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:5mm;}
.stack-sm{display:flex;flex-direction:column;gap:4mm;}
.stack{display:flex;flex-direction:column;gap:6mm;}
.mt-a{margin-top:auto;}
.spacer{flex:1;}

/* ============================================================
   PAGE TYPE: COVER (dark)
   ============================================================ */
.cover .page-in{padding:20mm 22mm;}
.cover .ctop{display:flex;align-items:center;justify-content:space-between;}
.cover .logo svg{height:16px;color:#fff;}
.cover .ctop .ed{font-family:var(--font-ui);font-weight:500;font-size:7.5pt;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55);}
.cover .arch{position:absolute;right:-6mm;top:42mm;width:118mm;z-index:1;opacity:.96;
  filter:drop-shadow(0 18px 40px rgba(12,133,180,.35));}
.cover .ttl{position:relative;z-index:3;margin-top:auto;}
.cover .ttl .eyebrow{color:var(--ice);margin-bottom:8mm;}
.cover h1{font-family:var(--font-display);font-weight:400;font-size:52pt;line-height:.98;letter-spacing:-0.04em;color:#fff;max-width:150mm;}
.cover h1 em{font-style:italic;font-weight:300;color:var(--ice);}
.cover .sub{margin-top:9mm;font-size:12pt;line-height:1.5;color:rgba(255,255,255,.8);max-width:120mm;}
.cover .cfoot{position:relative;z-index:3;margin-top:11mm;padding-top:6mm;border-top:1px solid var(--rule-d);
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--font-ui);font-size:8pt;letter-spacing:.06em;color:rgba(255,255,255,.6);}

/* ============================================================
   PAGE TYPE: CHAPTER OPENER
   ============================================================ */
.opener .page-in{padding:20mm 22mm 16mm;}
.opener .tag{display:flex;align-items:baseline;gap:6mm;margin-bottom:auto;}
.opener .tag .no{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:64pt;line-height:.8;color:var(--accent);letter-spacing:-0.04em;}
.opener .tag .meta{font-family:var(--font-ui);font-weight:500;font-size:8pt;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-50);padding-bottom:3mm;}
.opener .tag .meta .pillar{color:var(--accent-deep);}
.opener h2.big{font-family:var(--font-display);font-weight:400;font-size:40pt;line-height:1.02;letter-spacing:-0.035em;color:#000;max-width:160mm;}
.opener h2.big em{font-style:italic;font-weight:300;color:var(--accent-deep);}
.opener .lead{margin-top:8mm;font-size:13pt;}
.opener .o-take{margin-top:10mm;}

/* dark opener (for the 3 Hebel — pillars) */
.opener.dark h2.big{color:#fff;}
.opener.dark h2.big em{color:var(--ice);}
.opener.dark .tag .meta{color:rgba(255,255,255,.55);}
.opener.dark .tag .meta .pillar{color:var(--ice);}
.opener.dark .tag .no{color:var(--ice);}
.opener.dark .lead{color:rgba(255,255,255,.82);}
.opener.dark .arch{position:absolute;right:-10mm;top:14mm;width:100mm;z-index:1;opacity:.9;filter:drop-shadow(0 16px 36px rgba(12,133,180,.4));}
.opener .o-take .takeaway{position:relative;z-index:3;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}
.opener .o-take .takeaway .txt{font-size:16pt;max-width:150mm;}
.opener .o-main{position:relative;z-index:3;}

/* ============================================================
   TOC
   ============================================================ */
.toc-list{display:flex;flex-direction:column;gap:0;margin-top:2mm;}
.toc-list .row{display:grid;grid-template-columns:14mm 1fr auto;gap:5mm;align-items:baseline;padding:4.4mm 0;border-bottom:1px solid var(--rule);}
.toc-list .row .no{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:16pt;color:var(--grey-350);letter-spacing:-0.03em;}
.toc-list .row.pillar .no{color:var(--accent);}
.toc-list .row .nm{font-family:var(--font-sans);font-size:11.5pt;letter-spacing:-0.02em;color:#000;}
.toc-list .row.pillar .nm{font-weight:600;}
.toc-list .row .nm .sub{display:block;font-size:8.6pt;color:var(--ink-50);font-weight:400;margin-top:.5mm;}
.toc-list .row .pg{font-family:var(--font-display);font-style:italic;font-size:12pt;color:var(--accent-deep);}

/* hero diagnostic (standout) */
.diag .qbox{position:relative;overflow:hidden;border-radius:12px;padding:7mm 8mm;color:#fff;
  background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(12,133,180,.6) 100%),linear-gradient(180deg,#02324F 0%,#000 75%);}
.diag .qbox::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.12) 1px, transparent 1.7px);background-size:18px 18px;opacity:.6;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 40%);mask-image:linear-gradient(180deg,transparent,#000 40%);}
.diag .qbox .q{position:relative;font-family:var(--font-display);font-weight:400;font-size:18pt;line-height:1.2;letter-spacing:-0.02em;}
.diag .qbox .q em{font-style:italic;color:var(--ice);}
.diag .three{display:grid;grid-template-columns:repeat(3,1fr);gap:5mm;margin-top:6mm;}
.diag .dcard{position:relative;overflow:hidden;border-radius:10px;border:1px solid var(--rule);padding:6mm;
  background:radial-gradient(ellipse 100% 70% at 50% -10%, rgba(144,207,232,.26), transparent 65%), #fff;}
.diag .dcard .obj{font-family:var(--font-display);font-style:italic;font-size:13pt;line-height:1.2;color:#000;margin-bottom:4mm;min-height:18mm;}
.diag .dcard .arrow{display:flex;align-items:center;gap:3mm;margin-bottom:3mm;}
.diag .dcard .arrow .ln{flex:1;height:1px;background:var(--rule);}
.diag .dcard .arrow .gap{font-family:var(--font-ui);font-weight:600;font-size:7.5pt;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep);}
.diag .dcard .lk{font-family:var(--font-sans);font-weight:600;font-size:11pt;color:var(--accent-deep);letter-spacing:-0.02em;margin-bottom:2mm;}
.diag .dcard .ex{font-size:8.8pt;line-height:1.45;color:var(--ink-60);}

/* value equation formula */
.formula{position:relative;overflow:hidden;border-radius:12px;border:1px solid var(--rule);padding:8mm;text-align:center;
  background:radial-gradient(ellipse 70% 80% at 50% 0%, rgba(144,207,232,.3), transparent 65%), #fff;}
.formula .eq{display:inline-flex;align-items:center;gap:6mm;flex-wrap:wrap;justify-content:center;}
.formula .frac{display:inline-flex;flex-direction:column;align-items:center;gap:3mm;}
.formula .frac .top,.formula .frac .bot{font-family:var(--font-display);font-size:15pt;letter-spacing:-0.02em;color:#000;padding:0 4mm;white-space:nowrap;}
.formula .frac .bar{width:100%;height:1.5px;background:var(--accent);}
.formula .frac .top em,.formula .frac .bot em{font-style:italic;color:var(--accent-deep);}
.formula .eqs{font-family:var(--font-display);font-size:24pt;color:var(--grey-350);}
.formula .mx{font-family:var(--font-display);font-size:30pt;color:#000;font-weight:400;}
.formula .note{margin-top:6mm;font-size:8.6pt;color:var(--ink-60);letter-spacing:.02em;}
.formula .updown{display:inline-flex;gap:4px;align-items:center;font-family:var(--font-ui);font-weight:600;font-size:7.5pt;letter-spacing:.1em;text-transform:uppercase;}
.formula .up{color:var(--positive);}
.formula .down{color:var(--accent-deep);}

/* price ladder */
.ladder{display:flex;flex-direction:column;gap:3mm;}
.ladder .rung{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6mm;padding:4.5mm 6mm;border-radius:9px;border:1px solid var(--rule);background:#fff;}
.ladder .rung .seg{font-family:var(--font-sans);font-weight:500;font-size:10pt;color:#000;}
.ladder .rung .seg .d{display:block;font-size:8.4pt;color:var(--ink-50);font-weight:400;margin-top:.5mm;}
.ladder .rung .pr{font-family:var(--font-display);font-style:italic;font-size:16pt;color:var(--accent-deep);letter-spacing:-0.02em;white-space:nowrap;}
.ladder .rung.hi{background:radial-gradient(ellipse 90% 100% at 100% 50%, rgba(144,207,232,.3), transparent 60%), #fff;border-color:rgba(23,150,201,.35);}

/* stacking math (value stacking) */
.stackmath{border-radius:10px;border:1px solid var(--rule);overflow:hidden;}
.stackmath .li{display:grid;grid-template-columns:1fr auto;gap:6mm;padding:3.6mm 6mm;border-bottom:1px solid var(--rule);font-size:9.4pt;color:var(--ink-70);}
.stackmath .li .v{font-family:var(--font-sans);font-weight:500;color:#000;}
.stackmath .li.sum{background:#0A0A0A;color:#fff;}
.stackmath .li.sum .lab{color:rgba(255,255,255,.7);}
.stackmath .li.sum .v{font-family:var(--font-display);font-style:italic;font-size:14pt;color:var(--ice);}
.stackmath .li.now{background:#E7F3F8;border-bottom:none;}
.stackmath .li.now .lab{color:var(--accent-deep);font-weight:600;}
.stackmath .li.now .v{font-family:var(--font-display);font-style:italic;font-size:16pt;color:var(--accent-deep);}
.stackmath .li.strike .v{text-decoration:line-through;color:var(--grey-350);font-weight:400;}

/* scenario A/B */
.scenario{display:grid;grid-template-columns:1fr 1fr;gap:5mm;}
.scenario .sc{border-radius:10px;border:1px solid var(--rule);padding:6mm;background:#F7F6F3;}
.scenario .sc.b{background:linear-gradient(180deg,#fff 0%, #E7F3F8 100%);border-color:rgba(23,150,201,.3);position:relative;overflow:hidden;}
.scenario .sc .lab{font-family:var(--font-ui);font-weight:600;font-size:7.5pt;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-50);margin-bottom:3mm;}
.scenario .sc.b .lab{color:var(--accent-deep);}
.scenario .sc .quote{font-family:var(--font-display);font-style:italic;font-size:12.5pt;line-height:1.25;color:#000;margin-bottom:3mm;}
.scenario .sc .note{font-size:8.8pt;line-height:1.45;color:var(--ink-60);}

/* ============================================================
   CTA / CLOSING (dark)
   ============================================================ */
.closing .page-in{padding:20mm 22mm;text-align:center;align-items:center;}
.closing .orb{position:absolute;top:24mm;left:50%;transform:translateX(-50%);width:90mm;height:90mm;border-radius:50%;z-index:1;
  background:radial-gradient(circle, rgba(144,207,232,.28), transparent 68%);}
.closing .orb2{position:absolute;top:38mm;left:50%;transform:translateX(-50%);width:46mm;height:46mm;border-radius:50%;z-index:1;
  background:radial-gradient(circle, rgba(144,207,232,.4), rgba(23,150,201,.12));
  box-shadow:inset 0 10px 14px rgba(23,150,201,.1),inset 0 2px 14px rgba(12,133,180,.25);}
.closing .arch{position:absolute;top:26mm;left:50%;transform:translateX(-50%);width:74mm;z-index:2;opacity:.96;filter:drop-shadow(0 16px 34px rgba(12,133,180,.4));}
.closing .body-wrap{position:relative;z-index:3;margin-top:auto;}
.closing .eyebrow{justify-content:center;color:var(--ice);margin-bottom:6mm;}
.closing h2{font-family:var(--font-display);font-weight:400;font-size:38pt;line-height:1.04;letter-spacing:-0.035em;color:#fff;max-width:150mm;margin:0 auto;}
.closing h2 em{font-style:italic;font-weight:300;color:var(--ice);}
.closing .sub{margin:7mm auto 0;font-size:11.5pt;line-height:1.55;color:rgba(255,255,255,.78);max-width:120mm;}
.closing .url{margin-top:8mm;display:inline-flex;align-items:center;gap:8px;padding:4mm 7mm;border-radius:100px;border:1px solid rgba(255,255,255,.2);
  font-family:var(--font-sans);font-weight:500;font-size:12pt;letter-spacing:-0.02em;color:#fff;}
.closing .url b{color:var(--ice);font-weight:500;}
.closing .sign{position:relative;z-index:3;margin-top:auto;padding-top:7mm;border-top:1px solid var(--rule-d);width:100%;
  display:flex;align-items:center;justify-content:space-between;}
.closing .sign .nm{font-family:var(--font-display);font-style:italic;font-size:14pt;color:#fff;}
.closing .sign .ad{font-family:var(--font-ui);font-size:7.5pt;letter-spacing:.06em;color:rgba(255,255,255,.55);text-align:right;line-height:1.5;}

/* image plate */
.plate{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--rule);}
.plate img{width:100%;height:100%;object-fit:cover;}
.plate .cap{position:absolute;left:5mm;bottom:5mm;right:5mm;font-family:var(--font-ui);font-size:8pt;letter-spacing:.04em;color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.6);}

/* ============================================================
   TWEAKS PANEL (vanilla; wired to host edit-mode)
   ============================================================ */
#tweaks{position:fixed;right:18px;bottom:18px;width:300px;z-index:9999;display:none;
  background:#fff;border:1px solid var(--rule);border-radius:14px;box-shadow:0 30px 70px -28px rgba(0,0,0,.45);
  font-family:var(--font-ui);}
#tweaks.open{display:block;}
#tweaks .th{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--rule);}
#tweaks .th .t{font-weight:600;font-size:12.5px;letter-spacing:-0.01em;}
#tweaks .th .x{border:none;background:transparent;font-size:17px;cursor:pointer;color:var(--ink-50);line-height:1;}
#tweaks .tb{padding:6px 16px 14px;max-height:70vh;overflow:auto;}
#tweaks .row{padding:11px 0;border-bottom:1px solid var(--rule);}
#tweaks .row:last-child{border-bottom:none;}
#tweaks .row .l{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-50);margin-bottom:8px;}
#tweaks .opts{display:flex;flex-wrap:wrap;gap:6px;}
#tweaks .opt{padding:7px 13px;border-radius:100px;border:1px solid var(--rule);background:#fff;color:#000;font-size:11.5px;cursor:pointer;transition:all .16s ease;}
#tweaks .opt:hover{border-color:var(--accent-deep);}
#tweaks .opt.active{background:linear-gradient(180deg,#000,#444);color:#fff;border-color:#000;}
#tweaks .sw{width:20px;height:20px;border-radius:50%;padding:0;border:2px solid transparent;}
#tweaks .sw.active{border-color:#000;}

/* density tweak */
body.d-airy{--t-body:10.5pt;--t-lead:12.5pt;}
body.d-compact{--t-body:9.4pt;--t-lead:11pt;}

/* display-font fallback tweak */
body.disp-fallback{--font-display:"Playfair Display",Georgia,"Times New Roman",serif;}

/* page-margin guides tweak */
body.guides .page-in::after{content:"";position:absolute;inset:18mm 22mm 16mm;border:1px dashed rgba(23,150,201,.5);pointer-events:none;z-index:50;}
body.guides .cover .page-in::after,
body.guides .opener .page-in::after,
body.guides .closing .page-in::after{inset:20mm 22mm;}

/* accent tweak (deep blue vs brand blue vs near-black ink) */
body.acc-deep{--accent:var(--sky-600);--accent-deep:var(--sky-900);}
body.acc-ink{--accent:#1a1a1a;--accent-deep:#000;}

/* PDF / print button (screen only) */
#pdfBtn{position:fixed;left:18px;bottom:18px;z-index:9998;display:inline-flex;align-items:center;gap:8px;
  padding:11px 18px;border-radius:100px;border:none;cursor:pointer;
  background:linear-gradient(180deg,#0A0A0A,#3A3A3A);color:#fff;
  font-family:var(--font-sans);font-weight:500;font-size:13px;letter-spacing:-0.02em;
  box-shadow:0 16px 34px -14px rgba(0,0,0,.5);transition:transform .16s ease,box-shadow .16s ease;}
#pdfBtn:hover{transform:translateY(-2px);box-shadow:0 22px 44px -16px rgba(12,133,180,.5);}
#pdfBtn svg{width:15px;height:15px;stroke:var(--ice);fill:none;stroke-width:2;}

/* ============================================================
   PRINT
   ============================================================ */
@media print{
  @page{size:A4;margin:0;}
  html,body{background:#fff;}
  .doc{display:block;gap:0;padding:0;transform:none !important;margin-bottom:0 !important;}
  .page{box-shadow:none;margin:0;page-break-after:always;break-after:page;width:210mm;height:297mm;}
  .page:last-child{page-break-after:auto;}
  #tweaks,#tweakFab,#pdfBtn{display:none !important;}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
}

/* screen scaling on small viewports */
@media (max-width:880px){
  .doc{transform-origin:top center;}
}