@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
/* 26DigitalPro App Showcase — clickable demo cards + app window.
   Scoped under .dp-* so it can drop into any page without clashing. */
.dp-showcase{
  --dp-ink:#0d2a5c; --dp-ink-2:#3c5480; --dp-muted:#7486a8;
  --dp-blue:#1B4FE0; --dp-blue-2:#1565e8; --dp-green:#177a5c; --dp-purple:#6b3fa0; --dp-orange:#c76a12;
  --dp-band:#eef4fd; --dp-card:#ffffff; --dp-line:#dfe7f3; --dp-pill:#e6effc; --dp-pill-ink:#0f49c9;
  --dp-shadow:0 1px 2px rgba(13,42,92,.06),0 6px 18px -8px rgba(13,42,92,.14);
  --dp-shadow-hi:0 2px 4px rgba(13,42,92,.08),0 16px 34px -12px rgba(27,79,224,.32);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--dp-ink);
}
.dp-showcase *,.dp-showcase *::before,.dp-showcase *::after,.dp-scrim *{box-sizing:border-box}
/* guard against site theme styles (Squarespace etc.) leaking in */
.dp-showcase .dp-card,.dp-scrim button,.dp-scrim a{text-transform:none;letter-spacing:normal;line-height:normal;min-height:0;text-shadow:none;background-image:none}
.dp-showcase h3.dp-title{font-family:inherit;text-transform:none;letter-spacing:-.01em;padding:0}
.dp-showcase p.dp-desc,.dp-note p{font-family:inherit;text-transform:none;letter-spacing:normal}
.dp-scrim a{text-decoration:none}
.dp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
@media (max-width:980px){.dp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
@media (max-width:620px){.dp-grid{grid-template-columns:minmax(0,1fr);gap:16px}}

/* ---- card as a real button ---- */
.dp-card{
  appearance:none;-webkit-appearance:none;font:inherit;color:inherit;text-align:left;cursor:pointer;
  display:flex;flex-direction:column;padding:0;margin:0;width:100%;
  background:var(--dp-card);border:1px solid var(--dp-line);border-radius:14px;overflow:hidden;
  box-shadow:var(--dp-shadow);position:relative;isolation:isolate;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s ease,border-color .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.dp-card:hover{transform:translateY(-4px);box-shadow:var(--dp-shadow-hi);border-color:#c5d5f0}
.dp-card:active,.dp-card.is-pressed{transform:translateY(1px) scale(.975);box-shadow:0 1px 2px rgba(13,42,92,.1);transition-duration:.08s}
.dp-card:focus-visible{outline:3px solid var(--dp-blue);outline-offset:3px}
.dp-card[aria-disabled="true"]{cursor:default}
.dp-card[aria-disabled="true"]:hover{transform:none;box-shadow:var(--dp-shadow);border-color:var(--dp-line)}
.dp-card[aria-disabled="true"]:active{transform:none}

.dp-head{display:flex;align-items:center;gap:22px;padding:34px 34px 30px;background:var(--dp-band)}
.dp-ic{width:72px;height:72px;border-radius:16px;display:grid;place-items:center;flex:none;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.dp-card:hover .dp-ic{transform:rotate(-4deg) scale(1.05)}
.dp-ic svg{width:34px;height:34px;color:#fff}
.dp-title{font-size:23px;font-weight:700;letter-spacing:-.01em;line-height:1.15;margin:0;color:var(--dp-ink)}
.dp-eyebrow{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dp-muted);margin-top:6px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dp-live{display:inline-flex;align-items:center;gap:6px;color:var(--dp-green);font-weight:600}
.dp-live::before{content:"";width:7px;height:7px;border-radius:50%;background:#22a06b;box-shadow:0 0 0 0 rgba(34,160,107,.5);animation:dp-pulse 2s infinite}
@keyframes dp-pulse{0%{box-shadow:0 0 0 0 rgba(34,160,107,.45)}70%{box-shadow:0 0 0 7px rgba(34,160,107,0)}100%{box-shadow:0 0 0 0 rgba(34,160,107,0)}}

.dp-body{padding:28px 34px 30px;display:flex;flex-direction:column;gap:22px;flex:1}
.dp-desc{font-size:16px;line-height:1.65;color:var(--dp-ink-2);margin:0}
.dp-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.dp-tag{font-size:13.5px;font-weight:700;color:var(--dp-pill-ink);background:var(--dp-pill);padding:9px 14px;border-radius:7px}
.dp-try{font-size:14px;font-weight:700;color:var(--dp-blue);display:inline-flex;align-items:center;gap:6px}
.dp-try svg{width:16px;height:16px;transition:transform .2s}
.dp-card:hover .dp-try svg{transform:translateX(4px)}
.dp-soon{font-size:13px;font-weight:600;color:var(--dp-muted)}

/* click ripple */
.dp-ripple{position:absolute;border-radius:50%;background:rgba(27,79,224,.18);transform:scale(0);pointer-events:none;z-index:-1;animation:dp-ripple .55s ease-out forwards}
@keyframes dp-ripple{to{transform:scale(1);opacity:0}}

/* ---- app window ---- */
.dp-scrim{position:fixed;inset:0;z-index:2147483000;background:rgba(7,18,40,.62);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;transition:opacity .2s ease}
.dp-scrim.is-open{opacity:1}
.dp-window{width:min(1180px,100%);height:min(900px,100%);background:#fff;border-radius:16px;box-shadow:0 30px 80px -20px rgba(0,0,0,.5);display:flex;flex-direction:column;overflow:hidden;transform:translateY(16px) scale(.97);transition:transform .25s cubic-bezier(.2,.8,.2,1);font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;color:#0d2a5c}
.dp-scrim.is-open .dp-window{transform:none}
.dp-bar{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid #e3eaf5;background:#f7faff}
.dp-dots{display:flex;gap:6px;flex:none}
.dp-dots i{width:11px;height:11px;border-radius:50%;background:#d5deec}
.dp-bar-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none}
.dp-bar-ic svg{width:18px;height:18px;color:#fff}
.dp-bar-title{min-width:0;flex:1}
.dp-bar-title b{display:block;font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dp-bar-title span{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#7486a8}
.dp-icon-btn{appearance:none;border:1px solid #d7e1f0;background:#fff;color:#0d2a5c;border-radius:9px;height:38px;padding:0 12px;display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;transition:background .15s,transform .1s}
.dp-icon-btn:hover{background:#eef4fd}
.dp-icon-btn:active{transform:scale(.95)}
.dp-icon-btn svg{width:16px;height:16px}
.dp-icon-btn.dp-close{width:38px;padding:0;justify-content:center}

.dp-note{display:flex;align-items:center;gap:16px;justify-content:space-between;flex-wrap:wrap;padding:14px 20px;background:linear-gradient(90deg,#0d2a5c,#1B4FE0);color:#fff}
.dp-note p{margin:0;font-size:14.5px;line-height:1.5;max-width:72ch}
.dp-note strong{font-weight:700}
.dp-note-short{display:none}
.dp-bar-title span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dp-scrim .dp-cta{letter-spacing:.06em;text-transform:uppercase}
.dp-cta{appearance:none;border:0;background:#fff;color:#1B4FE0;font:inherit;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:10px 16px;border-radius:9px;cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform .1s}
.dp-cta:active{transform:scale(.95)}

.dp-stage{position:relative;flex:1;min-height:0;background:#f1f4f9}
.dp-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
.dp-loading{position:absolute;inset:0;display:grid;place-items:center;color:#5a6f96;font-size:14px;gap:12px;align-content:center}
.dp-spin{width:34px;height:34px;border-radius:50%;border:3px solid #d5deec;border-top-color:#1B4FE0;animation:dp-spin .8s linear infinite;margin:0 auto}
@keyframes dp-spin{to{transform:rotate(360deg)}}

@media (max-width:700px){
  .dp-head{padding:24px 22px 22px;gap:16px}
  .dp-ic{width:58px;height:58px;border-radius:14px}
  .dp-ic svg{width:28px;height:28px}
  .dp-title{font-size:20px}
  .dp-body{padding:22px}
  .dp-scrim{padding:0}
  .dp-window{width:100%;height:100%;border-radius:0;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
  .dp-dots,.dp-full-label{display:none}
  .dp-note{padding:12px 16px}
  .dp-note{flex-wrap:nowrap;gap:12px}
  .dp-note p{font-size:12.5px}
  .dp-note-more{display:none}.dp-note-short{display:inline}
  .dp-cta{padding:9px 12px;font-size:11px}
  .dp-bar{padding:10px 12px;gap:10px}
}
@media (prefers-reduced-motion:reduce){
  .dp-card,.dp-ic,.dp-window,.dp-scrim,.dp-try svg{transition:none}
  .dp-ripple,.dp-live::before{animation:none}
}
/* keep card rows on one line at narrower card widths */
.dp-head{padding:30px 28px 26px;gap:18px}
.dp-body{padding:24px 28px 26px}
.dp-eyebrow{flex-wrap:nowrap;white-space:nowrap;font-size:11.5px;letter-spacing:.08em;gap:6px}
.dp-foot{flex-wrap:nowrap}
.dp-tag,.dp-try,.dp-soon{white-space:nowrap}
.dp-tag{padding:8px 11px;font-size:13px}
@media (max-width:700px){.dp-head{padding:22px 20px 20px}.dp-body{padding:20px}}
/* medium widths: two columns, and never let a label push outside its card */
@media (max-width:1100px){.dp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
@media (max-width:620px){.dp-grid{grid-template-columns:minmax(0,1fr);gap:16px}}
.dp-head>div:last-child{min-width:0}
.dp-title{overflow-wrap:anywhere}
.dp-eyebrow{overflow:hidden;text-overflow:ellipsis;display:block}
.dp-eyebrow>span{display:inline}
.dp-eyebrow .dp-live{display:inline-flex}
.dp-foot{flex-wrap:wrap;row-gap:10px}