:root {
  --cb-navy:#09295f;
  --cb-blue:#0c55d9;
  --cb-blue-2:#0a46b6;
  --cb-teal:#1fb8aa;
  --cb-aqua:#eafcff;
  --cb-soft:#f6fbff;
  --cb-line:#dbe9f8;
  --cb-text:#23385f;
  --cb-muted:#5f7191;
  --cb-card:#ffffff;
  --cb-shadow:0 18px 45px rgba(9,41,95,.09);
  --cb-radius:24px;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--cb-text);background:#fff;font-size:16px;line-height:1.55}
a{color:inherit;text-decoration:none} img{max-width:100%;height:auto;display:block}.cb-container{width:min(1180px,calc(100% - 48px));margin-inline:auto}.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--cb-line)}.nav-wrap{height:78px;display:flex;align-items:center;gap:30px}.brand{display:flex;align-items:center;gap:10px;font-weight:850;color:var(--cb-blue);letter-spacing:-.03em}.brand-mark{width:36px;height:36px;border:4px solid var(--cb-teal);border-radius:14px 14px 18px 18px;color:var(--cb-teal);display:grid;place-items:center;font-size:20px;line-height:1}.brand-text{font-size:29px}.primary-nav{display:flex;align-items:center;justify-content:center;gap:34px;margin-left:auto;font-weight:700;color:#13294e;font-size:15px}.primary-nav a{position:relative;padding:28px 0}.primary-nav a.active::after,.primary-nav a:hover::after{content:"";position:absolute;left:0;right:0;bottom:17px;height:3px;background:var(--cb-teal);border-radius:10px}.nav-cta{margin-left:18px}.nav-toggle{display:none;margin-left:auto;border:0;background:#eef7ff;border-radius:12px;padding:10px 12px;color:var(--cb-navy);font-size:22px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:10px;padding:14px 24px;font-weight:800;line-height:1;border:2px solid transparent;transition:.18s ease;white-space:nowrap}.btn-primary{background:var(--cb-blue);color:#fff;box-shadow:0 12px 24px rgba(12,85,217,.18)}.btn-primary:hover{background:var(--cb-blue-2);transform:translateY(-1px)}.btn-outline{background:#fff;color:var(--cb-blue);border-color:var(--cb-blue)}.section{padding:52px 0}.hero{overflow:hidden;border-bottom:1px solid var(--cb-line);background:radial-gradient(circle at 18% 32%,#dff8ff 0 18%,transparent 38%),linear-gradient(100deg,#f7fcff 0%,#edfaff 56%,#fff 100%)}.hero-grid{min-height:520px;display:grid;grid-template-columns:1fr 1.28fr;gap:44px;align-items:center;padding:64px 0}.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--cb-blue);font-weight:800;font-size:14px;margin-top:18px}.hero h1,.page-title{font-size:clamp(42px,5.1vw,72px);line-height:1.05;margin:0 0 22px;color:var(--cb-navy);letter-spacing:-.055em}.hero p{font-size:18px;max-width:560px;margin:0 0 28px}.button-row{display:flex;gap:18px;align-items:center;flex-wrap:wrap}.device-cluster{min-height:420px;display:flex;align-items:end;justify-content:center;gap:14px;position:relative}.device-cluster::after{content:"";position:absolute;right:0;bottom:0;width:260px;height:300px;background:linear-gradient(140deg,rgba(31,184,170,.12),rgba(12,85,217,.08));filter:blur(8px);border-radius:42px;z-index:0}.phone,.tablet,.wide-ui{position:relative;z-index:1;background:#fff;border:8px solid #121923;border-radius:34px;box-shadow:0 22px 48px rgba(9,41,95,.18);overflow:hidden}.phone{width:205px;min-height:380px}.phone.small{width:168px;min-height:315px}.phone::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:92px;height:22px;background:#121923;border-radius:0 0 14px 14px;z-index:2}.tablet{width:370px;min-height:330px;border-radius:28px}.screen{padding:34px 16px 16px;background:#fff;min-height:100%;font-size:12px}.tablet .screen,.wide-ui .screen{padding:22px}.screen-title{font-weight:850;color:var(--cb-navy);font-size:18px;margin-bottom:10px}.search-bar{background:#f3f7fb;border-radius:10px;color:#7c8ea8;padding:8px 10px;margin-bottom:10px}.list-item{display:flex;justify-content:space-between;gap:8px;padding:10px 0;border-bottom:1px solid #edf2f7}.avatar{width:26px;height:26px;display:inline-grid;place-items:center;background:#eafcff;border-radius:50%;margin-right:7px}.status{font-size:11px;font-weight:800;border-radius:999px;padding:4px 8px;background:#eafcff;color:#00857a}.status.orange{background:#fff1dd;color:#bd5b00}.status.green{background:#e9fbf1;color:#148447}.tabbar{position:absolute;left:0;right:0;bottom:0;height:44px;background:#fff;border-top:1px solid #edf2f7;display:flex;justify-content:space-around;align-items:center;color:#70809a;font-size:10px}.bingo{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;text-align:center;margin:10px 0}.bingo div{background:#f4f8fb;border-radius:6px;padding:5px 3px;font-weight:800;color:#13294e}.mini-button{background:var(--cb-teal);color:#fff;border-radius:12px;text-align:center;padding:10px;font-weight:800;margin:10px 0}.section-head{text-align:center;margin-bottom:28px}.section-head h2,.split h2,.panel h2,.cta h2{margin:0 0 8px;color:var(--cb-navy);font-size:clamp(30px,3vw,42px);line-height:1.12;letter-spacing:-.04em}.section-head p{margin:0 auto;color:var(--cb-muted);max-width:720px}.feature-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}.feature-grid.five{grid-template-columns:repeat(5,1fr)}.feature-card{background:#fff;border:1px solid var(--cb-line);border-radius:18px;padding:24px 18px;text-align:center;box-shadow:0 8px 22px rgba(9,41,95,.045);min-height:170px}.icon-bubble{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;margin:0 auto 12px;background:#e0fbf7;color:var(--cb-teal);font-size:30px}.feature-card:nth-child(2n) .icon-bubble{background:#f0e8ff;color:#7b52e9}.feature-card:nth-child(3n) .icon-bubble{background:#fff0e2;color:#f07a20}.feature-card:nth-child(5n) .icon-bubble{background:#ffecef;color:#ea5570}.feature-card h3{margin:0 0 6px;color:var(--cb-navy);font-size:18px}.feature-card p{font-size:14px;margin:0;color:var(--cb-muted)}.split,.panel,.safety,.cta,.benefit-card{border:1px solid var(--cb-line);border-radius:var(--cb-radius);background:linear-gradient(120deg,#fff 0%,#f5fcff 100%);box-shadow:0 10px 28px rgba(9,41,95,.05)}.split{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:26px;margin-top:24px;align-items:center}.panel{padding:28px;margin-top:18px}.panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}.check-list{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:12px}.check-list li{position:relative;padding-left:32px}.check-list li::before{content:"✓";position:absolute;left:0;top:0;color:#008c83;font-weight:900}.mini-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}.mini-cards.four{grid-template-columns:repeat(4,1fr)}.mini-card{background:#fff;border:1px solid var(--cb-line);border-radius:18px;padding:18px;text-align:center}.mini-card strong{display:block;color:var(--cb-navy);margin:8px 0 4px}.mini-card span{display:block;color:var(--cb-muted);font-size:13px}.mini-card-icon{display:block;width:100%;margin:0 auto 8px;text-align:center;line-height:1;font-size:22px}.safety{padding:30px;display:grid;grid-template-columns:260px 1fr 310px;gap:28px;align-items:center;margin-top:28px;background:linear-gradient(90deg,#eafcff,#f8fdff)}.shield-art{height:185px;border-radius:28px;background:radial-gradient(circle at 50% 35%,rgba(31,184,170,.22),transparent 56%),linear-gradient(145deg,#e6fbf7,#f6fdff);position:relative;display:grid;place-items:center;overflow:hidden}.shield-art::before{content:"📍";width:104px;height:118px;border-radius:42px 42px 48px 48px;background:linear-gradient(145deg,#19b9ab,#0c8179);display:grid;place-items:center;color:white;font-size:46px;box-shadow:0 16px 26px rgba(31,184,170,.25)}.safety-list{background:#fff;border-radius:18px;border:1px solid var(--cb-line);padding:18px}.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.benefit-card{padding:22px;display:flex;gap:18px;align-items:center}.placeholder-photo{height:118px;min-width:150px;border-radius:18px;background:linear-gradient(145deg,#eafcff,#fff0e8);display:grid;place-items:center;color:var(--cb-navy);font-size:48px;overflow:hidden}.cta{padding:34px;display:grid;grid-template-columns:310px 1fr 280px;gap:28px;align-items:center;margin-top:28px;background:linear-gradient(120deg,#f6fcff,#eaf7ff)}.cta .placeholder-photo{height:190px;min-width:270px}.store-badges{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}.store-badge{background:#0b0d12;color:#fff;border-radius:8px;padding:8px 14px;font-size:13px;font-weight:800}.site-footer{border-top:1px solid var(--cb-line);padding:22px 0;background:#fff}.footer-wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}.footer-brand .brand-text{font-size:22px}.footer-links{display:flex;gap:70px;color:#34476a;font-size:14px}.demo-form{background:#fff;border:1px solid var(--cb-line);border-radius:var(--cb-radius);padding:26px;box-shadow:var(--cb-shadow)}.demo-form label{display:block;font-weight:800;color:var(--cb-navy);font-size:14px;margin:0 0 6px}.demo-form input,.demo-form textarea,.demo-form select{width:100%;border:1px solid #cadbef;border-radius:12px;padding:13px 14px;font:inherit;margin-bottom:14px}.demo-form textarea{min-height:130px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.hero-simple{padding:70px 0 38px;background:linear-gradient(120deg,#f7fcff,#edfaff);border-bottom:1px solid var(--cb-line)}.hero-simple .cb-container{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:center}.page-content{padding:70px 0}.wp-content{max-width:860px;margin:auto}.wp-content h1,.wp-content h2{color:var(--cb-navy)}.mobile-only{display:none}
@media (max-width:1050px){.hero-grid,.split,.panel-grid,.safety,.cta,.hero-simple .cb-container{grid-template-columns:1fr}.device-cluster{justify-content:flex-start;overflow:hidden}.feature-grid,.feature-grid.five{grid-template-columns:repeat(3,1fr)}.safety{gap:18px}.cta .placeholder-photo{min-width:0}.primary-nav{gap:18px}.footer-links{gap:24px}}
@media (max-width:760px){.cb-container{width:min(100% - 28px,1180px)}.nav-wrap{height:68px}.brand-text{font-size:23px}.nav-toggle{display:block}.primary-nav{display:none;position:absolute;top:68px;left:14px;right:14px;background:#fff;border:1px solid var(--cb-line);box-shadow:var(--cb-shadow);border-radius:18px;padding:16px;flex-direction:column;align-items:flex-start;gap:0}.primary-nav.open{display:flex}.primary-nav a{padding:12px 6px}.primary-nav a.active::after,.primary-nav a:hover::after{bottom:6px}.nav-cta{display:none}.hero-grid{padding:44px 0}.hero h1,.page-title{font-size:42px}.device-cluster{min-height:auto}.phone{width:170px;min-height:320px}.tablet{width:300px;min-height:280px}.feature-grid,.feature-grid.five,.mini-cards,.mini-cards.four,.benefits,.form-grid{grid-template-columns:1fr}.split,.panel,.safety,.cta{padding:20px}.footer-wrap{flex-direction:column}.footer-links{flex-wrap:wrap;justify-content:center;gap:18px}.cta{gap:18px}.desktop-only{display:none}.mobile-only{display:block}}
.brand-logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brand-logo {
  display: block;
  width: auto;
  height: 52px;
  max-width: 220px;
  object-fit: contain;
}

@media (max-width: 768px) {
  .brand-logo {
    height: 44px;
    max-width: 190px;
  }
}

.footer-logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.footer-logo {
  display: block;
  width: auto;
  height: 48px;
  max-width: 210px;
  object-fit: contain;
}

@media (max-width: 768px) {
  .footer-logo {
    height: 42px;
    max-width: 185px;
  }
}

/* Real product screenshot styles */
.real-device-cluster {
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  position: relative;
}
.real-device-cluster::after {
  content: "";
  position: absolute;
  right: 3%;
  bottom: 4%;
  width: 280px;
  height: 260px;
  background: linear-gradient(140deg, rgba(31,184,170,.12), rgba(12,85,217,.08));
  filter: blur(8px);
  border-radius: 42px;
  z-index: 0;
}
.real-device-cluster .real-shot,
.real-shot {
  position: relative;
  z-index: 1;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 22px 34px rgba(9,41,95,.16));
}
.real-shot.phone-shot { width: min(250px, 32vw); max-height: 520px; }
.real-shot.phone-shot.small { width: min(205px, 25vw); }
.real-shot.phone-shot.tall { width: min(275px, 34vw); }
.real-shot.tablet-shot { width: min(390px, 42vw); max-height: 450px; border-radius: 24px; }
.real-device-cluster .phone-shot:nth-child(1) { transform: translateY(10px) rotate(-2deg); }
.real-device-cluster .phone-shot:nth-child(2) { transform: translateY(-8px); }
.real-device-cluster .phone-shot:nth-child(3),
.real-device-cluster .tablet-shot:nth-child(3) { transform: translateY(12px) rotate(2deg); }
.screenshot-pair,
.screenshot-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}
.screenshot-pair .phone-shot { width: min(235px, 38vw); max-height: 520px; }
.screenshot-pair .phone-shot.small { width: min(190px, 32vw); }
.screenshot-row .phone-shot { width: min(185px, 25vw); max-height: 420px; }
.screenshot-card {
  background: #fff;
  border: 1px solid var(--cb-line);
  border-radius: 22px;
  padding: 16px;
  box-shadow: 0 10px 28px rgba(9,41,95,.06);
  display: grid;
  place-items: center;
}
.screenshot-card .real-shot { filter: drop-shadow(0 14px 18px rgba(9,41,95,.12)); }
.feature-card.with-preview { padding-bottom: 0; overflow: hidden; }
.feature-card.with-preview .feature-preview {
  margin: 14px auto 0;
  width: 92%;
  max-height: 190px;
  object-fit: contain;
  object-position: top center;
  filter: drop-shadow(0 10px 16px rgba(9,41,95,.12));
}
.panel .tablet-shot { width: min(420px, 100%); max-height: 430px; }
.panel .phone-shot { width: min(260px, 100%); max-height: 520px; }
.panel .phone-shot.small { width: min(210px, 45%); }
.cta-image {
  border-radius: 20px;
  width: 100%;
  height: 190px;
  object-fit: cover;
  object-position: center;
}
.safety-shot {
  width: min(240px, 100%);
  max-height: 330px;
  object-fit: contain;
  margin: auto;
  filter: drop-shadow(0 16px 22px rgba(9,41,95,.12));
}
@media (max-width:1050px){
  .real-shot.phone-shot,.real-shot.phone-shot.small,.real-shot.phone-shot.tall{width:min(220px, 30vw)}
  .real-shot.tablet-shot{width:min(340px, 42vw)}
}
@media (max-width:760px){
  .real-device-cluster{min-height:auto;gap:10px;overflow:hidden;justify-content:flex-start;padding-bottom:12px}
  .real-shot.phone-shot,.real-shot.phone-shot.small,.real-shot.phone-shot.tall{width:172px;min-width:172px;max-height:330px}
  .real-shot.tablet-shot{width:260px;min-width:260px;max-height:320px}
  .screenshot-pair .phone-shot,.screenshot-pair .phone-shot.small{width:150px;max-height:330px}
  .screenshot-row{justify-content:flex-start;overflow:auto;padding-bottom:8px;flex-wrap:nowrap}
  .screenshot-row .phone-shot{width:150px;min-width:150px;max-height:320px}
  .feature-card.with-preview .feature-preview{max-height:150px}
}


/* Cohesive screenshot device shells */
.iphone-frame {
  position: relative;
  z-index: 1;
  width: min(205px, 100%);
  aspect-ratio: 390 / 844;
  background: transparent;
  border: 0;
  border-radius: 34px;
  box-shadow: 0 20px 36px rgba(9, 41, 95, .18);
  overflow: hidden;
  flex: 0 0 auto;
}
.iphone-frame::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 82px;
  height: 24px;
  border-radius: 999px;
  background: #05070b;
  z-index: 4;
}
.iphone-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 7px solid #0b1018;
  border-radius: 34px;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 3;
}
.iphone-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 34px;
  display: block;
  filter: none;
}

.iphone-frame.already-framed {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  aspect-ratio: auto;
  overflow: visible;
}
.iphone-frame.already-framed::before {
  display: none;
}
.iphone-frame.already-framed img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 0;
  filter: drop-shadow(0 18px 28px rgba(9,41,95,.18));
}
.screenshot-card .iphone-frame.already-framed img {
  filter: drop-shadow(0 14px 18px rgba(9,41,95,.12));
}
.iphone-frame.small { width: min(172px, 100%); }
.iphone-frame.medium { width: min(192px, 100%); }
.iphone-frame.large { width: min(225px, 100%); }
.iphone-frame.shift-up { transform: translateY(-12px); }
.iphone-frame.shift-down { transform: translateY(14px); }
.iphone-frame.rotate-left { transform: rotate(-2deg); }
.iphone-frame.rotate-right { transform: rotate(2deg); }
.iphone-frame.shift-up.rotate-left { transform: translateY(-12px) rotate(-2deg); }
.iphone-frame.shift-down.rotate-right { transform: translateY(14px) rotate(2deg); }

.real-device-cluster .iphone-frame { margin-inline: 2px; }
.screenshot-pair .iphone-frame { width: min(190px, 38vw); }
.screenshot-pair .iphone-frame.small { width: min(160px, 32vw); }
.screenshot-row .iphone-frame { width: min(165px, 25vw); }

.engagement-panel .panel-grid {
  grid-template-columns: .88fr 1.12fr;
  gap: 36px;
}
.engagement-device-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  justify-items: center;
  gap: 18px;
  min-height: 430px;
}
.engagement-device-grid .iphone-frame:nth-child(1) { transform: translateY(-10px) rotate(-2deg); }
.engagement-device-grid .iphone-frame:nth-child(2) { transform: translateY(8px); }
.engagement-device-grid .iphone-frame:nth-child(3) { transform: translateY(28px) rotate(2deg); }

@media (max-width:1050px){
  .engagement-panel .panel-grid{grid-template-columns:1fr;}
  .engagement-device-grid{min-height:auto;grid-template-columns:repeat(3, minmax(120px,1fr));}
}
@media (max-width:760px){
  .iphone-frame,.iphone-frame.small,.iphone-frame.medium,.iphone-frame.large{width:150px;min-width:150px;}
  .real-device-cluster .iphone-frame{width:160px;min-width:160px;}
  .screenshot-pair .iphone-frame,.screenshot-pair .iphone-frame.small{width:145px;min-width:145px;}
  .screenshot-row .iphone-frame{width:145px;min-width:145px;}
  .engagement-device-grid{display:flex;overflow:auto;justify-content:flex-start;padding:8px 2px 20px;gap:14px;}
  .engagement-device-grid .iphone-frame:nth-child(n){transform:none;}
}
.cta > .iphone-frame { justify-self: center; }
.screenshot-card .iphone-frame { margin: 0 auto; }

/* 2026-05 layout pass: more cohesive phone framing across pages */
.real-device-cluster.compact {
  gap: 12px;
  justify-content: center;
  align-items: flex-end;
  min-height: 410px;
}
.real-device-cluster.compact .iphone-frame {
  width: min(182px, 23vw);
}
.real-device-cluster.compact .iphone-frame:nth-child(1) { transform: translateY(12px) rotate(-2deg); }
.real-device-cluster.compact .iphone-frame:nth-child(2) { transform: translateY(0); }
.real-device-cluster.compact .iphone-frame:nth-child(3) { transform: translateY(10px) rotate(2deg); }

.screenshot-pair-balanced {
  justify-content: center;
  gap: 22px;
}
.screenshot-pair-balanced .iphone-frame {
  width: min(182px, 23vw);
}

.screenshot-row.uniform {
  gap: 18px;
  justify-content: center;
  align-items: flex-end;
}
.screenshot-row.uniform .iphone-frame {
  width: min(168px, 18vw);
}

.cta .iphone-frame {
  justify-self: center;
}

@media (max-width: 1050px) {
  .real-device-cluster.compact { min-height: auto; }
  .real-device-cluster.compact .iphone-frame,
  .screenshot-pair-balanced .iphone-frame,
  .screenshot-row.uniform .iphone-frame {
    width: min(248px, 32vw);
  }
}

@media (max-width: 760px) {
  .real-device-cluster.compact {
    justify-content: flex-start;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 10px;
  }
  .real-device-cluster.compact .iphone-frame,
  .screenshot-pair-balanced .iphone-frame,
  .screenshot-row.uniform .iphone-frame {
    width: 208px;
    min-width: 208px;
  }
  .screenshot-pair-balanced {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 8px;
    flex-wrap: nowrap;
  }
  .screenshot-row.uniform {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 8px;
    flex-wrap: nowrap;
  }
}


/* Final device-frame fix:
   preframed-shot is used for screenshots that ALREADY include an iPhone shell.
   These images are output directly, not placed inside .iphone-frame, so no second shell is applied. */
.preframed-shot {
  position: relative;
  z-index: 1;
  display: block;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 28px rgba(9,41,95,.18));
  flex: 0 0 auto;
}
.preframed-shot.small { width: min(255px, 100%); }
.preframed-shot.medium { width: min(285px, 100%); }
.preframed-shot.large { width: min(335px, 100%); }
.preframed-shot.shift-up { transform: translateY(-12px); }
.preframed-shot.shift-down { transform: translateY(14px); }
.preframed-shot.rotate-left { transform: rotate(-2deg); }
.preframed-shot.rotate-right { transform: rotate(2deg); }
.preframed-shot.shift-up.rotate-left { transform: translateY(-12px) rotate(-2deg); }
.preframed-shot.shift-down.rotate-right { transform: translateY(14px) rotate(2deg); }
.preframed-shot.shift-down.rotate-left { transform: translateY(14px) rotate(-2deg); }
.preframed-shot.shift-up.rotate-right { transform: translateY(-12px) rotate(2deg); }

.real-device-cluster .preframed-shot { margin-inline: 2px; }
.screenshot-pair .preframed-shot { width: min(282px, 38vw); }
.screenshot-pair .preframed-shot.small { width: min(238px, 32vw); }
.screenshot-row .preframed-shot { width: min(246px, 25vw); }
.cta > .preframed-shot,
.cta .preframed-shot { justify-self: center; }
.screenshot-card .preframed-shot {
  margin: 0 auto;
  filter: drop-shadow(0 14px 18px rgba(9,41,95,.12));
}
.real-device-cluster.compact .preframed-shot { width: min(272px, 29vw); }
.real-device-cluster.compact .preframed-shot:nth-child(1) { transform: translateY(12px) rotate(-2deg); }
.real-device-cluster.compact .preframed-shot:nth-child(2) { transform: translateY(0); }
.real-device-cluster.compact .preframed-shot:nth-child(3) { transform: translateY(10px) rotate(2deg); }
.screenshot-pair-balanced .preframed-shot { width: min(272px, 29vw); }
.screenshot-row.uniform .preframed-shot { width: min(250px, 22vw); }

@media (max-width: 1050px) {
  .real-device-cluster.compact .preframed-shot,
  .screenshot-pair-balanced .preframed-shot,
  .screenshot-row.uniform .preframed-shot {
    width: min(170px, 28vw);
  }
}

@media (max-width: 760px) {
  .preframed-shot,
  .preframed-shot.small,
  .preframed-shot.medium,
  .preframed-shot.large {
    width: 210px;
    min-width: 210px;
  }
  .real-device-cluster .preframed-shot {
    width: 220px;
    min-width: 220px;
  }
  .screenshot-pair .preframed-shot,
  .screenshot-pair .preframed-shot.small {
    width: 202px;
    min-width: 202px;
  }
  .screenshot-row .preframed-shot {
    width: 145px;
    min-width: 145px;
  }
  .engagement-device-grid .preframed-shot:nth-child(n) {
    transform: none;
  }
  .real-device-cluster.compact .preframed-shot,
  .screenshot-pair-balanced .preframed-shot,
  .screenshot-row.uniform .preframed-shot {
    width: 148px;
    min-width: 148px;
  }
}


/* 2026-05 final alignment fix: keep framed and wrapped phones the same visual size */
.real-device-cluster.compact {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-end;
  gap: 18px;
  min-height: 410px;
}
.real-device-cluster.compact > .iphone-frame,
.real-device-cluster.compact > .preframed-shot {
  width: min(182px, 23vw) !important;
  min-width: 0;
}
.real-device-cluster.compact > .iphone-frame:nth-child(1),
.real-device-cluster.compact > .preframed-shot:nth-child(1) { transform: translateY(12px) rotate(-2deg); }
.real-device-cluster.compact > .iphone-frame:nth-child(2),
.real-device-cluster.compact > .preframed-shot:nth-child(2) { transform: translateY(0); }
.real-device-cluster.compact > .iphone-frame:nth-child(3),
.real-device-cluster.compact > .preframed-shot:nth-child(3) { transform: translateY(10px) rotate(2deg); }

.screenshot-pair-balanced {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 22px;
}
.screenshot-pair-balanced > .iphone-frame,
.screenshot-pair-balanced > .preframed-shot {
  width: min(182px, 23vw) !important;
  min-width: 0;
}

.screenshot-row.uniform {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-end;
  gap: 18px;
}
.screenshot-row.uniform > .iphone-frame,
.screenshot-row.uniform > .preframed-shot {
  width: min(168px, 18vw) !important;
  min-width: 0;
}

.cta > .iphone-frame,
.cta > .preframed-shot,
.cta .iphone-frame,
.cta .preframed-shot {
  width: min(172px, 100%) !important;
}

@media (max-width: 1050px) {
  .real-device-cluster.compact,
  .screenshot-pair-balanced,
  .screenshot-row.uniform {
    justify-content: center;
  }
  .real-device-cluster.compact > .iphone-frame,
  .real-device-cluster.compact > .preframed-shot,
  .screenshot-pair-balanced > .iphone-frame,
  .screenshot-pair-balanced > .preframed-shot,
  .screenshot-row.uniform > .iphone-frame,
  .screenshot-row.uniform > .preframed-shot {
    width: min(170px, 28vw) !important;
  }
}

@media (max-width: 760px) {
  .real-device-cluster.compact,
  .screenshot-pair-balanced,
  .screenshot-row.uniform {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 10px;
    gap: 12px;
  }
  .real-device-cluster.compact > .iphone-frame,
  .real-device-cluster.compact > .preframed-shot,
  .screenshot-pair-balanced > .iphone-frame,
  .screenshot-pair-balanced > .preframed-shot,
  .screenshot-row.uniform > .iphone-frame,
  .screenshot-row.uniform > .preframed-shot {
    width: 148px !important;
    min-width: 148px;
  }
}

/* 2026-05 mobile-only layout polish
   Desktop/tablet styles above are untouched. This block only changes small screens. */
@media (max-width: 760px) {
  /* Give mobile sections a tighter rhythm so cards do not feel stretched out. */
  .section { padding: 38px 0; }
  .section-head { margin-bottom: 20px; }
  .section-head h2,
  .split h2,
  .panel h2,
  .cta h2 { font-size: clamp(27px, 8vw, 34px); }
  .hero-grid { gap: 18px; padding: 28px 0 24px; }

  /* Pull hero phones closer to the copy on mobile so the layout feels tighter. */
  .hero .real-device-cluster.compact {
    margin-top: -8px;
    min-height: auto;
    padding-top: 0;
  }

  /* Scale down the coded iPhone shell details for mobile so the notch does not look oversized. */
  .iphone-frame {
    border-radius: 26px;
    box-shadow: 0 14px 24px rgba(9, 41, 95, .16);
  }
  .iphone-frame::before {
    top: 5px;
    width: 50px;
    height: 14px;
    border-radius: 0 0 10px 10px;
  }
  .iphone-frame::after {
    border-width: 5px;
    border-radius: 26px;
  }
  .iphone-frame img {
    border-radius: 26px;
  }

  /* Hero phone clusters: keep all three phones visible on-screen, no sideways scrolling. */
  .real-device-cluster.compact {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-end;
    gap: 8px;
    overflow: visible;
    padding: 4px 0 10px;
  }
  .real-device-cluster.compact > .iphone-frame,
  .real-device-cluster.compact > .preframed-shot {
    width: clamp(96px, 29vw, 118px) !important;
    min-width: 0 !important;
    flex: 0 1 clamp(96px, 29vw, 118px);
  }
  .real-device-cluster.compact > .iphone-frame:nth-child(1),
  .real-device-cluster.compact > .preframed-shot:nth-child(1) { transform: translateY(8px) rotate(-2deg); }
  .real-device-cluster.compact > .iphone-frame:nth-child(2),
  .real-device-cluster.compact > .preframed-shot:nth-child(2) { transform: translateY(0); }
  .real-device-cluster.compact > .iphone-frame:nth-child(3),
  .real-device-cluster.compact > .preframed-shot:nth-child(3) { transform: translateY(8px) rotate(2deg); }

  /* Two-image screenshot groups should stay side-by-side on mobile. */
  .screenshot-pair,
  .screenshot-pair-balanced {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-end;
    gap: 12px;
    overflow: visible;
    padding-bottom: 0;
  }
  .screenshot-pair > .iphone-frame,
  .screenshot-pair > .preframed-shot,
  .screenshot-pair-balanced > .iphone-frame,
  .screenshot-pair-balanced > .preframed-shot {
    width: clamp(132px, 40vw, 162px) !important;
    min-width: 0 !important;
    flex: 0 1 clamp(132px, 40vw, 162px);
  }

  /* Four-image rows become a clean 2x2 grid instead of a horizontal scroller. */
  .screenshot-row.uniform {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: center;
    align-items: end;
    gap: 14px 12px;
    overflow: visible;
    padding-bottom: 0;
  }
  .screenshot-row.uniform > .iphone-frame,
  .screenshot-row.uniform > .preframed-shot {
    width: clamp(130px, 40vw, 160px) !important;
    min-width: 0 !important;
  }

  /* Three engagement screenshots should fit together instead of scrolling. */
  .engagement-device-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-items: center;
    align-items: end;
    gap: 8px;
    overflow: visible;
    padding: 6px 0 0;
  }
  .engagement-device-grid > .iphone-frame,
  .engagement-device-grid > .preframed-shot {
    width: clamp(96px, 29vw, 116px) !important;
    min-width: 0 !important;
  }
  .engagement-device-grid .iphone-frame:nth-child(n),
  .engagement-device-grid .preframed-shot:nth-child(n) { transform: none; }

  /* Feature/utility cards: use two columns on mobile to avoid huge empty one-column cards. */
  .feature-grid,
  .feature-grid.five,
  .mini-cards,
  .mini-cards.four,
  .benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .feature-card,
  .mini-card,
  .benefit-card {
    min-height: 0;
    padding: 16px 12px;
    border-radius: 18px;
  }
  .feature-card h3 { font-size: 17px; }
  .feature-card p,
  .mini-card span { font-size: 13px; line-height: 1.35; }
  .mini-card-icon { font-size: 20px; margin: 0 auto 8px; justify-self: center; align-self: start; }
  .icon-bubble {
    width: 52px;
    height: 52px;
    font-size: 25px;
    margin-bottom: 10px;
  }
  .benefit-card {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 8px;
  }
  .benefit-card h3 { margin: 4px 0; }
  .benefit-card p { margin: 0; font-size: 13px; line-height: 1.35; }

  /* Feature preview cards on the Features page: shorter cards and better preview sizing. */
  .feature-card.with-preview { padding: 16px 10px 0; }
  .feature-card.with-preview .feature-preview {
    width: 100%;
    max-height: 155px;
    margin-top: 10px;
  }

  /* Cards that have three mini-cards can wrap as 2 + 1 without wasting vertical space. */
  .mini-cards .mini-card {
    display: grid;
    align-content: center;
    min-height: 118px;
  }

  /* If a mobile section only has 3 cards in a 2-column layout, center the last card. */
  .mini-cards:not(.four) > .mini-card:last-child:nth-child(odd),
  .benefits > .benefit-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: min(calc(50% - 6px), 260px);
    justify-self: center;
  }

  /* Keep panel/CTA interiors compact after stacked layout kicks in. */
  .split,
  .panel,
  .safety,
  .cta { padding: 18px; }
  .panel-grid { gap: 22px; }
  .cta { text-align: center; }
}

.demo-form .wpcf7-form label {
  display: block;
  font-weight: 800;
  color: var(--cb-navy);
  font-size: 14px;
  margin: 0 0 6px;
}

.demo-form .wpcf7-form input,
.demo-form .wpcf7-form textarea,
.demo-form .wpcf7-form select {
  width: 100%;
  border: 1px solid #cadbef;
  border-radius: 12px;
  padding: 13px 14px;
  font: inherit;
  margin-bottom: 14px;
}

.demo-form .wpcf7-form textarea {
  min-height: 130px;
}

.demo-form .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 10px;
  padding: 14px 24px;
  font-weight: 800;
  line-height: 1;
  border: 2px solid transparent;
  background: var(--cb-blue);
  color: #fff;
  box-shadow: 0 12px 24px rgba(12,85,217,.18);
  cursor: pointer;
}

.demo-form .wpcf7-submit:hover {
  background: var(--cb-blue-2);
}