/* =====================================================================
   DPG SQUARE FLYERS — styles
   Screen: scaled preview of the letter page.  Print: exact 8.5 x 11 in.
   ===================================================================== */
:root{
  --navy:#0E1630;          /* text + headline */
  --ink:#3A4559;           /* body text */
  --muted:#6B7486;         /* fine print */
  --cyan:#00B6DF;          /* DPG accent (from logo) */
  --blue:#0077B6;          /* readable accent on white */
  --line:#E3E8EF;
  --soft:#F3F6FA;
  --font:'Poppins', 'Helvetica Neue', Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);background:#E9EDF2;color:var(--navy);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
h1,h2,p,ol{margin:0;padding:0}
ol{list-style:none}

/* ---------- Toolbar (screen only) ---------- */
.toolbar{position:sticky;top:0;z-index:10;background:#FFFFFF;border-bottom:1px solid var(--line)}
.toolbar-inner{max-width:1100px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.toolbar-logo{height:28px;width:auto}
.tabs{display:flex;gap:6px}
.tabs:first-of-type{margin-left:auto}
.tab .mx-flag{width:20px;height:auto;margin-right:7px;vertical-align:-2px;border-radius:2px}
.tab{font:500 14px/1 var(--font);padding:11px 16px;border-radius:999px;border:1px solid #C9D2DE;background:#fff;color:var(--navy);cursor:pointer}
.tab.is-on{background:var(--navy);border-color:var(--navy);color:#fff}
.print-btn{font:600 14px/1 var(--font);padding:12px 18px;border-radius:999px;border:0;background:var(--blue);color:#fff;cursor:pointer}
.print-btn:hover{background:#0089CF}
.tab:focus-visible,.print-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.admin-warning{max-width:1100px;margin:0 auto;padding:10px 16px 12px;font-size:13px;line-height:1.5;color:#7A4A00;background:#FFF6E0;border-top:1px solid #F3DFA8}
.admin-warning code{font-size:12px;background:#fff;padding:1px 5px;border-radius:4px}

/* ---------- Stage + scaled preview ---------- */
.stage{padding:28px 16px 48px}
.flyer{display:none;margin:0 auto;width:calc(8.5in * var(--scale,1));height:calc(11in * var(--scale,1));
  box-shadow:0 18px 50px rgba(14,22,48,.14);border-radius:4px;overflow:hidden;background:#fff}
.flyer.is-shown{display:block}
.page{width:8.5in;height:11in;transform:scale(var(--scale,1));transform-origin:top left;background:#fff;
  padding:.5in .6in .4in;display:flex;flex-direction:column;overflow:hidden;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}

/* ---------- Flyer: brand row ---------- */
.brand-row{display:flex;align-items:center;justify-content:space-between;gap:.3in}
.dpg-logo{height:.42in;width:auto}
.sq-badge{height:.4in;width:auto}

/* ---------- Hero ---------- */
.hero{margin-top:.34in}
.audience{font-size:9.5pt;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--blue);display:flex;align-items:center;gap:10px}
.audience::before{content:"";width:.32in;height:2.5px;background:var(--cyan);border-radius:2px}
.lang-es .audience::before{display:none}
.audience .mx-flag{width:.36in;height:auto;border-radius:2px;flex:0 0 auto}
/* Spanish copy runs longer: slightly tighter type so it still fits one page */
.lang-es .hero h1{font-size:31pt}
.lang-es .why .quote{font-size:11pt}
.lang-es .cta h2{font-size:17pt}
.lang-es .hero{margin-top:.3in}
.lang-es .benefits li{padding:.1in 0}
.lang-es .why{padding:.2in .26in}
.hero h1{margin-top:.14in;font-size:33pt;line-height:1.08;font-weight:700;letter-spacing:-.02em;color:var(--navy);max-width:7.3in}
.hero .sub{margin-top:.16in;font-size:12.5pt;line-height:1.5;font-weight:300;color:var(--ink);max-width:6.3in}

/* ---------- Three benefits ---------- */
.benefits{margin-top:.26in;border-top:1px solid var(--line)}
.benefits li{display:flex;align-items:center;gap:.24in;padding:.115in 0;border-bottom:1px solid var(--line)}
.num{flex:0 0 .4in;height:.4in;border-radius:50%;border:1.5px solid var(--cyan);color:var(--blue);
  display:flex;align-items:center;justify-content:center;font-size:13pt;font-weight:600}
.benefits h2{font-size:14pt;line-height:1.25;font-weight:600;color:var(--navy)}
.benefits p{margin-top:1px;font-size:11.5pt;line-height:1.45;font-weight:300;color:var(--ink)}

/* ---------- Why work with DPG (the differentiator) ---------- */
.why{margin-top:.24in;display:flex;gap:.3in;align-items:center;background:var(--soft);border-radius:16px;padding:.22in .28in;border-left:5px solid var(--cyan)}
.why-photo{flex:0 0 1.1in;height:1.1in;border-radius:50%;overflow:hidden;background:#FFFFFF;border:2px solid var(--cyan);box-sizing:border-box}
.why-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.why.no-photo .why-photo{display:none}
.why h2{font-size:14.5pt;font-weight:700;color:var(--navy);line-height:1.25}
.why .quote{margin-top:.06in;font-size:11.5pt;line-height:1.5;font-weight:400;color:var(--navy)}
.why .sig{margin-top:.08in;font-size:10pt;line-height:1.35}
.why .sig span{display:block}
.consultant-name{font-weight:600;color:var(--navy)}
.consultant-title{font-weight:300;color:var(--ink)}

/* ---------- CTA + QR ---------- */
.cta{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.35in;padding-top:.24in}
.cta-copy{flex:1}
.cta h2{font-size:18.5pt;line-height:1.15;font-weight:700;letter-spacing:-.01em;color:var(--navy);max-width:4.6in}
.cta-sub{margin-top:.08in;font-size:12pt;font-weight:400;color:var(--blue)}
.contact{margin-top:.14in;display:flex;flex-wrap:wrap;gap:4px 18px;font-size:11pt;line-height:1.4;color:var(--navy)}
.contact span{white-space:nowrap}
.c-url{font-weight:600}
.c-phone,.c-email{font-weight:400}
.qr-wrap{flex:0 0 auto;text-align:center}
.qr{width:1.4in;height:1.4in;padding:.13in;background:#fff;border:1px solid #D5DDE8;border-radius:10px}
.qr svg{display:block;width:100%;height:100%}
.qr svg path,.qr svg rect[fill="black"]{fill:#000}
.qr-label{margin-top:.07in;font-size:9.5pt;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.qr-missing{font-size:9pt;color:#B00020}

/* ---------- Footer ---------- */
.fine{margin-top:.16in;padding-top:.1in;border-top:1px solid var(--line);font-size:8pt;color:var(--muted);text-align:center;letter-spacing:.02em}

/* ---------- Small screens: toolbar stacks ---------- */
@media (max-width:760px){
  .toolbar-inner{gap:10px}
  .tabs,.tabs:first-of-type{margin-left:0;width:100%}
  .tab{flex:1;padding:11px 8px;font-size:13px}
  .print-btn{width:100%}
  .stage{padding:16px 16px 32px}
}

/* =====================================================================
   PRINT — exact US Letter, one flyer, no web UI
   ===================================================================== */
@page{size:letter portrait;margin:0}
@media print{
  html,body{background:#fff !important;width:8.5in;height:11in}
  .no-print{display:none !important}
  .stage{padding:0 !important}
  .flyer{width:8.5in !important;height:11in !important;margin:0 !important;box-shadow:none !important;border-radius:0 !important;overflow:hidden;page-break-after:avoid;break-after:avoid}
  .page{transform:none !important;page-break-inside:avoid;break-inside:avoid}
  /* only the selected flyer prints (button or Ctrl+P) */
  .flyer:not(.is-shown){display:none !important}
  /* stay readable if the printer drops backgrounds */
  .why{border:1px solid var(--line);border-left:5px solid var(--cyan)}
}