/* =========================================================
   DMP Brand System — shared CSS
   Used by all marketing pieces in the share.dmprocessing.com
   library. One source of truth for tokens, type, and base
   layout. Per-piece styles live inline in each HTML file.
   ========================================================= */

:root{
  /* DMP Brand */
  --ultramarine:  #004ED3;
  --ultramarine-d: #003BAA;
  --aqua:         #2BD8C2;
  --aqua-l:       #4EE7D3;
  --spruce:       #00937B;
  --ink:          #0B2340;
  --ink-2:        rgba(11,35,64,0.78);
  --ink-3:        rgba(11,35,64,0.58);
  --ink-4:        rgba(11,35,64,0.40);
  --rule:         rgba(11,35,64,0.10);
  --rule-2:       rgba(11,35,64,0.06);
  --paper:        #FAFAF7;
  --paper-2:      #F4F4EF;
  --paper-3:      #EEEEE8;

  --f-display: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --f-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --max: 1200px;
  --gut: clamp(20px, 3.5vw, 56px);

  --ease: cubic-bezier(.2,.8,.2,1);
  --shadow-card: 0 30px 60px -30px rgba(11,35,64,0.22), 0 8px 20px -8px rgba(11,35,64,0.10);
  --shadow-lift: 0 40px 80px -30px rgba(11,35,64,0.30), 0 12px 24px -10px rgba(11,35,64,0.14);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family: var(--f-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.45;
  overflow-x: hidden;
}
::selection{background:rgba(43,216,194,0.45);color:var(--ink)}
a{color: inherit}

/* -------- TYPE -------- */
.eyebrow{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
h1,h2,h3,h4{font-family: var(--f-display); letter-spacing:-0.03em; line-height:1; margin:0; color: var(--ink); font-weight: 800}
.display{font-size: clamp(56px, 10.5vw, 168px); letter-spacing: -0.045em; font-weight: 800; line-height: 0.92}
.h2{font-size: clamp(40px, 6vw, 88px); letter-spacing:-0.035em; font-weight:800; line-height:0.95}
.h3{font-size: clamp(24px, 2.6vw, 36px); letter-spacing:-0.025em; font-weight:700; line-height:1.05}
.lead{font-size: clamp(18px, 1.6vw, 24px); color: var(--ink-2); line-height:1.45; font-weight:400; letter-spacing:-0.01em}
.kicker{font-size: clamp(13px, 1vw, 15px); color: var(--ink-3); font-weight:500}

/* -------- LAYOUT -------- */
.wrap{max-width: var(--max); margin:0 auto; padding: 0 var(--gut)}
.section{padding: clamp(72px, 10vw, 160px) 0; position: relative}
.rule{height:1px; background: var(--rule); margin: 0}

/* -------- NAV -------- */
.nav{
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  background: rgba(250,250,247,0.75);
  border-bottom: 1px solid var(--rule);
}
.nav-inner{display:flex; align-items:center; justify-content: space-between; height: 56px}
.brand{display:flex; align-items:center; gap: 10px; font-family: var(--f-display); font-weight: 800; letter-spacing: -0.03em; font-size: 17px; white-space: nowrap}
.brand .suffix{color: var(--ink-3); font-weight: 600}
@media (max-width: 820px){ .brand .suffix{display:none} }
.brand-mark{width: 26px; height: 26px; background-image: url('brand/logo-mark-color.jpg'); background-size: contain; background-repeat: no-repeat; background-position: center}
.nav-links{display:flex; gap: 28px; font-size: 13px; color: var(--ink-2); font-weight: 500}
.nav-links a{color:inherit; text-decoration: none; transition: color .2s}
.nav-links a:hover{color: var(--ink)}
.nav-cta{
  font-family: var(--f-body); font-size: 13px; font-weight: 600;
  background: var(--ultramarine); color: var(--paper);
  padding: 8px 14px; border-radius: 999px; text-decoration: none;
  transition: transform .2s ease, background .2s ease;
}
.nav-cta:hover{transform: translateY(-1px); background: var(--ultramarine-d)}
@media (max-width: 720px){ .nav-links{display:none} }

/* -------- BUTTONS -------- */
.btn{
  display:inline-flex; align-items:center; gap: 10px;
  font-family: var(--f-body); font-weight: 600; font-size: 15px;
  padding: 16px 22px; border-radius: 999px;
  text-decoration: none;
  transition: transform .2s, background .2s;
  cursor: pointer; border: 0;
}
.btn-primary{background: var(--aqua); color: var(--ink)}
.btn-primary:hover{transform: translateY(-2px); background: var(--aqua-l)}
.btn-secondary{background: transparent; color: var(--paper); border: 1px solid rgba(250,250,247,0.28)}
.btn-secondary:hover{background: rgba(250,250,247,0.08)}
.btn-ink{background: var(--ink); color: var(--paper)}
.btn-ink:hover{transform: translateY(-2px); background: #061730}

/* -------- HERO base -------- */
.hero{
  position: relative;
  padding: clamp(80px, 11vw, 160px) 0 clamp(60px, 8vw, 120px);
  overflow: hidden;
  isolation: isolate;
}
.hero .eyebrow{margin-bottom: 22px}
.hero h1{max-width: 14ch; margin-bottom: 28px}
.hero p.lead{max-width: 58ch}
.hero-glow{
  position: absolute; inset: -10% -10% auto -10%; height: 80%;
  z-index: -1; pointer-events: none;
  filter: blur(40px); opacity: 0.85;
}

/* -------- HOW IT WORKS -------- */
.how{padding: clamp(96px, 12vw, 180px) 0}
.how .head{display:grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 80px); align-items: end; margin-bottom: clamp(48px, 6vw, 96px)}
@media (max-width: 900px){.how .head{grid-template-columns: 1fr}}

.steps{display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(20px, 2vw, 32px)}
@media (max-width: 980px){.steps{grid-template-columns: 1fr}}
.step{
  padding: clamp(28px, 2.6vw, 40px);
  border-radius: 24px;
  background: var(--paper);
  border: 1px solid var(--rule);
  transition: transform .5s var(--ease), border-color .3s;
  position: relative;
  overflow: hidden;
  min-height: 440px;
  display:flex; flex-direction: column;
}
.step:hover{transform: translateY(-4px); border-color: var(--ink-3)}
.step .num{font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.2em; color: var(--ink-3); display:flex; align-items:center; gap: 10px; margin-bottom: 18px}
.step .num b{font-weight: 600; color: var(--ink)}
.step h3{margin-bottom: 10px}
.step p{color: var(--ink-2); margin: 0 0 24px; font-size: 15.5px; line-height: 1.55}
.step .visual{margin-top: auto; border-radius: 16px; background: var(--paper-3); border: 1px solid var(--rule); padding: 20px; min-height: 180px; position: relative; overflow: hidden}

/* -------- PROS / CONS -------- */
.pros{background: var(--paper-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule)}
.pros .grid{display:grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 48px)}
@media (max-width: 900px){.pros .grid{grid-template-columns: 1fr}}
.pros .col{background: var(--paper); border: 1px solid var(--rule); border-radius: 24px; padding: clamp(28px, 3vw, 44px)}
.pros .col h3{margin-bottom: 8px}
.pros .col .sub{color: var(--ink-3); font-size: 14px; margin-bottom: 28px; font-family: var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase}
.pros ul{list-style:none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px}
.pros li{display:flex; gap: 14px; align-items: flex-start; font-size: 16px; line-height: 1.45; color: var(--ink-2)}
.pros li .icon{flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; display:grid; place-items:center; font-size: 13px; font-weight: 700; margin-top: 1px}
.pros .yes .icon{background: rgba(43,216,194,0.25); color: var(--spruce)}
.pros .no .icon{background: rgba(11,35,64,0.08); color: var(--ink-2)}
.pros li b{color: var(--ink); font-weight: 600}

/* -------- WHY DMP -------- */
.why{padding: clamp(96px, 12vw, 160px) 0}
.why .wrap{display:grid; grid-template-columns: 1fr 1.2fr; gap: clamp(32px, 5vw, 80px); align-items: start}
@media (max-width: 900px){.why .wrap{grid-template-columns: 1fr}}
.why ol{list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-top: 1px solid var(--rule)}
.why ol li{padding: 24px 0; border-bottom: 1px solid var(--rule); display:grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: baseline}
.why ol li .n{font-family: var(--f-mono); font-size: 12px; color: var(--ink-3); letter-spacing: 0.14em}
.why ol li h4{font-family: var(--f-display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; margin-bottom: 6px}
.why ol li p{margin: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.55}

/* -------- CTA -------- */
.cta{
  background: var(--ink);
  color: var(--paper);
  padding: clamp(80px, 10vw, 140px) 0;
  position: relative; overflow: hidden;
}
.cta::before{
  content:""; position: absolute; inset: 0; pointer-events:none;
  background:
    radial-gradient(40% 50% at 10% 30%, rgba(43,216,194,0.30), transparent 60%),
    radial-gradient(45% 55% at 90% 70%, rgba(0,78,211,0.32), transparent 60%);
  filter: blur(10px);
}
.cta .wrap{position: relative}
.cta .eyebrow{color: rgba(250,250,247,0.62)}
.cta h2{color: var(--paper); margin-bottom: 24px}
.cta .lead{color: rgba(250,250,247,0.82); margin-bottom: 40px; max-width: 56ch}
.cta-row{display:flex; gap: 16px; flex-wrap: wrap}
.contact{
  display:grid; grid-template-columns: 1fr 1fr; gap: 24px;
  margin-top: 56px; padding-top: 32px; border-top: 1px solid rgba(250,250,247,0.14);
}
.contact .item .k{font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(250,250,247,0.58); margin-bottom: 10px}
.contact .item .v{font-family: var(--f-display); font-weight: 700; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.02em; color: var(--paper)}
.contact .item .v a{color: inherit; text-decoration: none}
@media (max-width: 720px){.contact{grid-template-columns: 1fr}}

/* Agent personalization card */
.agent-card{
  margin-top: 40px; padding: 22px 24px;
  background: rgba(250,250,247,0.06);
  border: 1px solid rgba(250,250,247,0.16);
  border-radius: 18px;
  display: inline-flex; align-items: center;
  backdrop-filter: blur(8px);
}
.agent-card[hidden]{display: none}
.agent-card-row{display:flex; align-items:center; gap: 16px}
.agent-avatar{width: 52px; height: 52px; border-radius: 50%; background: var(--aqua); color: var(--ink); display:grid; place-items:center; font-family: var(--f-display); font-weight: 800; font-size: 18px; letter-spacing: -0.02em; flex-shrink: 0}
.agent-eyebrow{font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(250,250,247,0.62); margin-bottom: 4px}
.agent-name{font-family: var(--f-display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; color: var(--paper)}

/* -------- FOOTER -------- */
.foot{padding: 40px 0; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); border-top: 1px solid var(--rule)}
.foot .wrap{display:flex; justify-content: space-between; gap: 16px; flex-wrap: wrap}

/* -------- REVEAL -------- */
.reveal{opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease)}
.reveal.in{opacity: 1; transform: none}
.reveal.d1{transition-delay: .08s}
.reveal.d2{transition-delay: .16s}
.reveal.d3{transition-delay: .24s}
.reveal.d4{transition-delay: .32s}

/* -------- PRINT FAB -------- */
.print-fab{
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  background: var(--ink); color: var(--paper);
  border: 0; font-family: var(--f-body); font-weight: 600; font-size: 13px;
  padding: 12px 18px; border-radius: 999px; cursor: pointer;
  box-shadow: 0 20px 40px -12px rgba(11,35,64,0.35);
  display:inline-flex; align-items:center; gap: 8px;
}
.print-fab:hover{transform: translateY(-1px)}
.print-fab svg{width: 14px; height: 14px}

/* -------- PRINT styles -------- */
@media print{
  @page{size: Letter; margin: 0.4in}
  html, body{background: #fff !important; color: #0B2340 !important}
  .nav, .print-fab, .marquee{display:none !important}
  .section, .hero, .how, .pros, .why, .cta{padding: 28px 0 !important}
  .wrap{max-width: none !important; padding: 0 24px !important}
  .hero-glow, .cta::before{display:none !important}
  .cta{background: #0B2340 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact}
  *{-webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important}
  .reveal{opacity:1 !important; transform:none !important}
  h1, h2, h3, h4, .step, .col{break-inside: avoid; page-break-inside: avoid}
  h2, h3{break-after: avoid; page-break-after: avoid}
  .display{font-size: 64pt !important; line-height: 0.95 !important}
  .h2{font-size: 32pt !important}
}