/* ============================================================
   d1.css — D1 TechCreative design system (refinement layer)
   Loads AFTER d1x.css. Tokens + compact sections + new components.
   Palette/fonts locked: #15161B ink · #F7F8FD paper · #2562FF blue
   · #E1E4EB line · Manrope.
   ============================================================ */

.d1x{
  --sh1:0 1px 2px rgba(21,22,27,.05);
  --sh2:0 14px 34px -20px rgba(21,34,74,.22);
  --sh3:0 34px 80px -36px rgba(21,34,74,.32);
  --ease:cubic-bezier(.32,.72,0,1);
  --r1:12px;--r2:18px;--r3:26px;--r4:34px;
}

/* ---- compact rhythm: tighten EVERY legacy section site-wide ---- */
.d1x.h5-sec{padding:clamp(44px,6vw,72px) 0}
.h5-head{margin-bottom:clamp(26px,4vw,38px)}

/* ---- header: glass bar ---- */
.d1h-bar{background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(1.5) blur(14px);backdrop-filter:saturate(1.5) blur(14px)}

/* ============================================================
   SECTIONS — two-tone white / paper, compact
   ============================================================ */
.sec{padding:clamp(44px,6vw,72px) 0;background:#fff;color:var(--ink);font-family:'Manrope',sans-serif}
.sec.alt{background:var(--paper)}
.sec.dk{background:
  radial-gradient(900px 420px at 85% -10%,rgba(37,98,255,.16),transparent 60%),
  linear-gradient(160deg,var(--navy1),var(--navy2));
  color:#fff}
.sec.tight{padding:clamp(30px,4vw,46px) 0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.wrap.nar{max-width:880px}

/* section header */
.sec-h{max-width:720px;margin:0 0 clamp(24px,3.6vw,36px)}
.sec-h.c{margin-left:auto;margin-right:auto;text-align:center}
.sec-h h1,.sec-h h2{margin:0 0 10px;font-weight:800;letter-spacing:-.03em;line-height:1.08;font-size:clamp(27px,3.5vw,42px);text-wrap:balance}
.sec-h p{margin:0;font-size:clamp(15px,1.6vw,17.5px);line-height:1.6;color:rgba(21,22,27,.62);text-wrap:pretty}
.sec.dk .sec-h h1,.sec.dk .sec-h h2,.sec.dk .sec-h h3{color:#F7F8FD}
.sec.dk .sec-h p{color:rgba(255,255,255,.66)}

/* eyebrow pill */
.kick{display:inline-flex;align-items:center;gap:7px;margin:0 0 14px;padding:6px 13px;border-radius:999px;
  background:rgba(37,98,255,.07);border:1px solid rgba(37,98,255,.16);
  font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);white-space:nowrap}
.kick::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 3px rgba(37,98,255,.16)}
.sec.dk .kick,.band .kick{background:rgba(37,98,255,.16);border-color:rgba(126,164,255,.3);color:#9DBBFF}
.sec.dk .kick::before,.band .kick::before{background:#9DBBFF;box-shadow:0 0 0 3px rgba(126,164,255,.2)}

/* ============================================================
   BUTTONS — pill, button-in-button arrow
   ============================================================ */
.btn{display:inline-flex;align-items:center;gap:10px;padding:9px 9px 9px 22px;border-radius:999px;border:0;cursor:pointer;
  background:var(--blue);color:#fff;font-family:'Manrope',sans-serif;font-size:15px;font-weight:800;letter-spacing:-.01em;
  text-decoration:none;box-shadow:0 14px 30px -14px rgba(37,98,255,.55),inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),background .5s var(--ease)}
.btn i{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;flex:none;
  background:rgba(255,255,255,.16);transition:transform .5s var(--ease),background .5s var(--ease)}
.btn i svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.btn:hover{transform:translateY(-2px);box-shadow:0 22px 44px -16px rgba(37,98,255,.6),inset 0 1px 0 rgba(255,255,255,.18)}
.btn:hover i{transform:translateX(2px)}
.btn:active{transform:scale(.98)}
.btn.gh{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:var(--sh1)}
.btn.gh i{background:rgba(21,22,27,.06)}
.btn.gh i svg{stroke:var(--ink)}
.btn.gh:hover{box-shadow:var(--sh2);border-color:rgba(21,22,27,.18)}
.btn.wh{background:#fff;color:var(--ink);box-shadow:0 16px 36px -16px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.6)}
.btn.wh i{background:rgba(37,98,255,.1)}
.btn.wh i svg{stroke:var(--blue)}
.btn.sm{padding:7px 7px 7px 17px;font-size:13.5px}
.btn.sm i{width:25px;height:25px}
.btn.sm i svg{width:12px;height:12px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn:focus-visible,.xp-it:focus-visible,a:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ============================================================
   DOUBLE-BEZEL CARD — outer tray + inner core
   ============================================================ */
.bez{background:rgba(21,34,74,.045);border:1px solid var(--line);border-radius:var(--r3);padding:6px;box-shadow:var(--sh1)}
.bez-in{background:#fff;border:1px solid rgba(225,228,235,.7);border-radius:calc(var(--r3) - 6px);height:100%;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.9),0 1px 2px rgba(21,22,27,.03)}
.sec.dk .bez{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
.sec.dk .bez-in{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
a.bez{display:block;text-decoration:none;color:inherit;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
a.bez:hover{transform:translateY(-4px);box-shadow:var(--sh2)}

/* media frame */
.frame{border-radius:var(--r2);overflow:hidden;background:var(--paper);border:1px solid var(--line)}
.frame img,.frame video{display:block;width:100%;height:auto}

/* ============================================================
   EXPLORER (.xp) — click left, opens right, auto-advances
   ============================================================ */
.xp{display:grid;grid-template-columns:minmax(280px,340px) 1fr;gap:14px;align-items:stretch}
.xp-list{display:flex;flex-direction:column;gap:6px;min-width:0}
.xp-it{position:relative;display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:16px;border:1px solid transparent;
  background:transparent;cursor:pointer;text-align:left;font-family:'Manrope',sans-serif;color:var(--ink);width:100%;
  transition:background .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease);overflow:hidden}
.xp-it:hover{background:rgba(21,34,74,.045)}
.xp-it.on{background:#fff;border-color:var(--line);box-shadow:var(--sh2)}
.xp-ic{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;flex:none;
  background:rgba(37,98,255,.08);border:1px solid rgba(37,98,255,.14);overflow:hidden;
  transition:background .5s var(--ease)}
.xp-ic img{width:100%;height:100%;object-fit:cover;border-radius:11px}
.xp-ic svg{width:19px;height:19px;stroke:var(--blue);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.xp-it.on .xp-ic{background:var(--blue);border-color:var(--blue)}
.xp-it.on .xp-ic svg{stroke:#fff}
.xp-tx{min-width:0;display:flex;flex-direction:column;gap:1px}
.xp-tx b{font-size:14.5px;font-weight:800;letter-spacing:-.015em;line-height:1.25}
.xp-tx small{font-size:12px;color:rgba(21,22,27,.55);line-height:1.35}
.xp-num{margin-left:auto;flex:none;font-size:10.5px;font-weight:800;color:rgba(21,22,27,.3);letter-spacing:.06em}
.xp-it.on .xp-num{color:var(--blue)}
.xp-bar{position:absolute;left:14px;right:14px;bottom:0;height:2px;border-radius:2px;background:rgba(37,98,255,.12);opacity:0;pointer-events:none}
.xp-bar i{display:block;height:100%;width:0;border-radius:2px;background:var(--blue)}
.xp-it.on .xp-bar{opacity:1}
.xp-it.on .xp-bar i{animation:xpbar var(--xpd,6s) linear forwards}
@keyframes xpbar{from{width:0}to{width:100%}}

/* right stage */
.xp-stage{position:relative;min-width:0;min-height:380px}
.xp-pane{position:absolute;inset:0;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:0;
  background:#fff;border:1px solid var(--line);border-radius:var(--r3);overflow:hidden;box-shadow:var(--sh1);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.985);
  transition:opacity .65s var(--ease),transform .65s var(--ease),visibility 0s .65s}
.xp-pane.on{opacity:1;visibility:visible;transform:none;transition:opacity .65s var(--ease),transform .65s var(--ease),visibility 0s}
.xp-media{position:relative;background:var(--paper);min-height:0;overflow:hidden}
.xp-media img,.xp-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.xp-copy{display:flex;align-items:center;gap:18px;padding:16px 20px;border-top:1px solid var(--line);background:#fff}
.xp-copy>div{min-width:0}
.xp-copy h3{margin:0 0 3px;font-size:16.5px;font-weight:800;letter-spacing:-.02em}
.xp-copy p{margin:0;font-size:13.5px;line-height:1.5;color:rgba(21,22,27,.6)}
.xp-copy .btn{margin-left:auto;flex:none}

/* explorer on paper background */
.sec.alt .xp-it:hover{background:rgba(21,34,74,.055)}
.sec.alt .xp-it.on,.sec.alt .xp-pane,.sec.alt .xp-copy{background:#fff}

/* mobile: the options sit in a rail down the left, the slide opens on the right.
   --xpr is the rail width, --xps the sticky offset (blue bar 34px + header 64px).
   The rail is the tall column, so the slide is what sticks — it stays beside
   whichever option you are looking at instead of scrolling away from the list. */
@media (max-width:900px){
  .xp{--xpr:clamp(104px,29vw,132px);--xps:110px;
      grid-template-columns:var(--xpr) minmax(0,1fr);gap:10px;align-items:start}
  .xp-list{flex-direction:column;gap:4px;padding:1px}
  .xp-it{flex:none;flex-direction:column;align-items:flex-start;gap:6px;
    padding:8px 9px 9px;border-radius:12px;border-color:var(--line);background:#fff}
  .xp-it.on{box-shadow:0 12px 26px -16px rgba(21,38,90,.5)}
  .xp-tx small{display:none}
  .xp-tx b{font-size:10.5px;line-height:1.25;letter-spacing:-.005em;white-space:normal;
    overflow-wrap:break-word}
  .xp-num{position:absolute;top:7px;right:8px;margin:0;font-size:9px;letter-spacing:.04em}
  .xp-ic{width:24px;height:24px;border-radius:8px}
  .xp-ic svg{width:14px;height:14px}
  .xp-bar{left:9px;right:9px}
  /* the option list is the tall column, so the open slide is what travels:
     it pins beside the rail instead of scrolling away from it */
  .xp-stage{min-height:0;position:sticky;top:var(--xps)}
  .xp-pane{position:relative;inset:auto;display:none}
  .xp-pane.on{display:grid}
  .xp-media{aspect-ratio:4/3;min-height:0}
  .xp-copy{flex-wrap:wrap;gap:9px;padding:13px 14px}
  .xp-copy h3{font-size:15px}
  .xp-copy p{font-size:12.5px;line-height:1.45}
  .xp-copy .btn{margin-left:0}
}
/* below the rail's comfortable width the icon carries the row and the label
   drops to a single clipped line, so the slide keeps usable width */
@media (max-width:420px){
  .xp{--xpr:92px;gap:8px}
  .xp-tx b{font-size:10.5px}
  .xp-num{display:none}
}

/* ============================================================
   GRIDS / LISTS / STATS / FAQ
   ============================================================ */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,54px);align-items:center}
@media (max-width:900px){.g3,.g4{grid-template-columns:1fr 1fr}.split{grid-template-columns:1fr;gap:22px}}
@media (max-width:560px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* tick list */
.ticks{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.ticks li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.5;font-weight:600}
.ticks li::before{content:"";flex:none;width:18px;height:18px;margin-top:1px;border-radius:50%;
  background:var(--blue) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4 10-11"/></svg>') center/10px no-repeat;
  box-shadow:0 4px 10px -4px rgba(37,98,255,.5)}
.sec.dk .ticks li{color:rgba(255,255,255,.86)}

/* stat strip */
.stx{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r2);overflow:hidden}
.stx>div{background:#fff;padding:20px 22px}
.stx b{display:block;font-size:clamp(24px,2.8vw,32px);font-weight:800;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.stx b em{font-style:normal;color:var(--blue)}
.stx span{display:block;margin-top:3px;font-size:12.5px;font-weight:600;color:rgba(21,22,27,.55);line-height:1.4}
.sec.dk .stx{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.1)}
.sec.dk .stx>div{background:rgba(16,26,51,.86)}
.sec.dk .stx b{color:#fff}
.sec.dk .stx span{color:rgba(255,255,255,.6)}
@media (max-width:900px){.stx{grid-template-columns:1fr 1fr}}

/* FAQ — side-by-side grid, no accordions */
.faqg{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.faqg .bez-in{padding:20px 22px}
.faqg h3{margin:0 0 8px;font-size:15.5px;font-weight:800;letter-spacing:-.015em;line-height:1.35}
.faqg p,.faqg .fa{margin:0;font-size:13.8px;line-height:1.6;color:rgba(21,22,27,.62)}
.faqg .fa p{margin:0 0 8px}
.faqg .fa p:last-child{margin:0}
.faqg a{color:var(--blue);font-weight:700;text-decoration:none}
@media (max-width:760px){.faqg{grid-template-columns:1fr}}

/* pillar card body (bez-in content on dark) */
.pcard{padding:24px;display:flex;flex-direction:column;gap:13px;height:100%;box-sizing:border-box}
.pcard h3{margin:0;font-size:17.5px;font-weight:800;letter-spacing:-.02em;line-height:1.3;color:inherit}
.pcard .ticks{margin:0}
.pcard .ticks li{font-size:13.8px;font-weight:600}
.pcard p{margin:0;font-size:13.8px;line-height:1.66;color:rgba(21,22,27,.62)}
.sec.dk .pcard p{color:rgba(255,255,255,.68)}

/* logo / word marquee */
.mq{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-tr{display:flex;align-items:center;gap:clamp(28px,4vw,56px);width:max-content;animation:mqx 36s linear infinite}
.mq:hover .mq-tr{animation-play-state:paused}
@keyframes mqx{to{transform:translateX(-50%)}}
.d1x .mchip{display:inline-flex;align-items:center;gap:9px;padding:11px 19px;border-radius:999px;background:#F7F8FD;border:1px solid var(--line);font-weight:700;font-size:13.5px;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.d1x .mchip svg{width:16px;height:16px;stroke:#2562FF;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.d1x .sec.dk .mchip,.d1x .h5-dark .mchip{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:#F7F8FD}
.d1x .sec.dk .mchip svg,.d1x .h5-dark .mchip svg{stroke:#7EA4FF}

/* ============================================================
   CTA BAND (dark) with mascot
   ============================================================ */
.band{position:relative;border-radius:var(--r4);overflow:hidden;--bandpb:clamp(34px,5vw,56px);padding:var(--bandpb) clamp(22px,4.5vw,58px);
  background:radial-gradient(700px 340px at 90% 0%,rgba(37,98,255,.28),transparent 60%),linear-gradient(160deg,var(--navy1),var(--navy2));
  color:#fff;display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center;box-shadow:var(--sh3)}
.band::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 0 1px rgba(255,255,255,.05)}
.band h2{margin:0 0 8px;font-size:clamp(23px,3vw,34px);font-weight:800;letter-spacing:-.03em;line-height:1.12;text-wrap:balance;color:#fff}
.band p{margin:0 0 18px;font-size:15px;line-height:1.6;color:rgba(255,255,255,.68);max-width:520px}
.band .masc{width:clamp(120px,15vw,190px);height:auto;filter:drop-shadow(0 20px 34px rgba(0,0,0,.4))}
@media (max-width:760px){.band{grid-template-columns:1fr;text-align:center}.band .masc{margin:0 auto;order:-1}.band .btn-row{justify-content:center}}

/* ============================================================
   SERVICE HERO — compact dark split with video
   ============================================================ */
.hero-s{padding:clamp(40px,5.4vw,64px) 0}
.hero-s .split{grid-template-columns:1.04fr 1fr}
.hero-s h1{margin:0 0 12px;font-size:clamp(29px,3.9vw,46px);font-weight:800;letter-spacing:-.03em;line-height:1.07;color:#fff;text-wrap:balance}
.hero-s h1 em{font-style:normal;color:#7EA4FF}
.hero-s .lede{margin:0 0 20px;font-size:clamp(14.5px,1.6vw,16.5px);line-height:1.65;color:rgba(255,255,255,.68);max-width:520px;text-wrap:pretty}
.hstats{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1)}
.hstats div{min-width:0}
.hstats b{display:block;font-size:19px;font-weight:800;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
.hstats span{display:block;font-size:11px;font-weight:700;color:rgba(255,255,255,.5);letter-spacing:.02em}
.hero-s .bez{padding:7px;border-radius:var(--r3)}
@media (max-width:900px){.hero-s .split{grid-template-columns:1fr}.hero-s .hstats{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px}}

/* ============================================================
   EXPLORER SOLO PANE — copy-first stage on navy
   ============================================================ */
.xp-pane.solo{display:block;grid-template-rows:none}
.xps{position:relative;height:100%;min-height:340px;padding:clamp(24px,3.6vw,46px);display:flex;flex-direction:column;justify-content:center;gap:13px;overflow:hidden;color:#fff;
  background:radial-gradient(640px 300px at 88% -8%,rgba(37,98,255,.32),transparent 62%),linear-gradient(158deg,var(--navy1),var(--navy2))}
.xps .gn{position:absolute;right:16px;bottom:-30px;font-size:clamp(120px,16vw,190px);font-weight:800;letter-spacing:-.06em;line-height:1;color:rgba(255,255,255,.045);pointer-events:none;user-select:none}
.xps-ic{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:15px;
  background:linear-gradient(150deg,#3E77FF,#1D50D8);box-shadow:0 14px 30px -10px rgba(37,98,255,.65),inset 0 1px 0 rgba(255,255,255,.3)}
.xps-ic svg{width:25px;height:25px;stroke:#fff;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.xps h3{margin:0;font-size:clamp(20px,2.4vw,27px);font-weight:800;letter-spacing:-.025em;line-height:1.15;max-width:22ch;text-wrap:balance}
.xps p{margin:0;font-size:15px;line-height:1.68;color:rgba(255,255,255,.7);max-width:52ch;text-wrap:pretty}
.xps .xps-tag{display:inline-flex;width:max-content;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;font-size:12px;font-weight:800;
  background:rgba(37,98,255,.18);border:1px solid rgba(126,164,255,.3);color:#B9CDFF}
@media (max-width:900px){
  .xp-pane.solo{display:none}
  .xp-pane.solo.on{display:block;opacity:1;transform:none;filter:none}
  .xps{min-height:0;padding:20px 17px 24px;gap:11px}
  .xps h3{font-size:clamp(16px,4.6vw,20px);max-width:none}
  .xps p{font-size:13.5px;line-height:1.6}
  .xps-ic{width:42px;height:42px;border-radius:13px}
  .xps-ic svg{width:21px;height:21px}
  .xps .gn{font-size:78px;bottom:-16px;right:10px}
}

/* ============================================================
   REVEALS — stagger extension (d1x.js toggles .in on .d1x .rv)
   ============================================================ */
.d1x .rv{opacity:0;transform:translateY(22px);filter:blur(6px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}
.d1x .rv.in{opacity:1;transform:none;filter:none}
.rv.d3{transition-delay:.27s}.rv.d4{transition-delay:.36s}.rv.d5{transition-delay:.45s}
@media (prefers-reduced-motion:reduce){
  .d1x .rv{opacity:1;transform:none;filter:none;transition:none}
  .xp-pane,.btn,a.bez{transition:none}
  .mq-tr{animation:none}
  .xp-it.on .xp-bar i{animation:none;width:100%}
}

/* ============================================================
   MOBILE OVERFLOW GUARDS
   Narrow screens were clipping content against the right edge. A grid
   column written as 1fr is minmax(auto,1fr), and its auto floor is the
   item's min-content width, so one nowrap child (the eyebrow pill, a
   button row, a tag) could push the whole column wider than the phone
   and everything inside it got cut off by the section's overflow:hidden.
   These rules put a real floor of zero under every column that carries
   copy, and let the few nowrap pieces wrap instead.
   ============================================================ */
@media (max-width:900px){
  /* eyebrow pill: wrap rather than force a min-content floor */
  .kick{white-space:normal;max-width:100%;letter-spacing:.13em;line-height:1.35;
    text-align:left;overflow-wrap:anywhere}

  /* every copy-bearing grid gets a zero floor and shrinkable children */
  .split,.hero-s .split,.hm .split,.band,.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}
  .split>*,.hero-s .split>*,.hm .split>*,.band>*,.wrap>*{min-width:0}
  .hero-s .hstats{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}

  /* pills and tags that were sized to their own text */
  .xps .xps-tag{width:auto;max-width:100%;white-space:normal;line-height:1.35;
    align-items:flex-start;overflow-wrap:anywhere}
  .xps .xps-tag svg{flex:none;margin-top:1px}

  /* button rows: allow the row to break instead of running off the edge */
  .btn-row{flex-wrap:wrap}
  .btn-row>*{max-width:100%;min-width:0}
  .btn{max-width:100%}
  .btn span,.btn b{min-width:0;overflow-wrap:anywhere}
}
@media (max-width:760px){
  .band{grid-template-columns:minmax(0,1fr)}
  .band>*{min-width:0}
}
/* last resort: nothing in the page body may paint past the viewport */
@media (max-width:900px){
  .wrap,.h5-in,.sec-h{max-width:100%}
}

/* ---- animated scenes: same auto-minimum trap, one floor for all of them ----
   Each scene is an absolutely positioned layout whose columns are written as
   1fr. A single nowrap child (a typing field, a stat label) raised the column's
   automatic minimum above the phone width and the scene box cropped the rest.
   Grid and flex only use that automatic minimum when min-width is auto, so
   putting a zero floor on every scene part is the whole fix. The eleven places
   that need a real minimum set their own and out-rank this. */
.d1x-viz *,
.sc-web-show *,.sc-seo-show *,.sc-crm-show *,.sc-data-show *,.sc-lead-show *,
.sc-rev-show *,.sc-soc-show *,.sc-soft-show *,.sc-strat-show *,.sc-voice-show *{min-width:0}

/* Hero CTA row on a phone. d1x.css pins .hm .btn-row to nowrap, which holds two
   buttons at half the row each. On a 360px screen that is 152px per button and
   "Get your growth plan" needs about 165px, so the label was clipped on every page
   that carries the hero. Below 430px the two buttons stack full width instead. */
@media (max-width:430px){
  .hm .btn-row{flex-wrap:wrap}
  .hm .btn-row>.btn{flex:1 1 100%;justify-content:center}
}

/* Phone scenes were being cut off at the bottom. .d1x-viz is a 1.02 aspect box, so at a
   360px screen it collapses to 306px tall while the scene content still needs 330 to 500.
   On desktop the same scenes finish with room to spare, so this is purely a narrow-screen
   problem. min-height combines with aspect-ratio as max(aspectHeight, minHeight), which
   makes every one of these a no-op above roughly 620px wide. The four tallest scenes also
   drop content in their own files rather than growing past about half a phone screen. */
@media (max-width:700px){
  .d1x-viz.sc-web{min-height:340px}
  .d1x-viz.sc-seo{min-height:340px}
  .d1x-viz.sc-lead{min-height:440px}
  .d1x-viz.sc-voice{min-height:450px}
  .d1x-viz.sc-crm{min-height:510px}
  .d1x-viz.sc-soc{min-height:510px}
  .d1x-viz.sc-rev{min-height:560px}
  .d1x-viz.sc-soft{min-height:560px}
  .d1x-viz.sc-data{min-height:560px}
  .d1x-viz.sc-strat{min-height:560px}
}

/* explorer scenes: copy on the left, a live illustration on the right; stacked on phones.
   The open pane sizes the stage on desktop so a taller scene never gets clipped. */
.xps.xsp{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,40%);align-items:center;gap:clamp(18px,3vw,36px);padding:clamp(22px,3vw,38px)}
.xsc{display:flex;flex-direction:column;gap:13px;min-width:0}
.xsa{position:relative;z-index:1;min-width:0}
.xsa svg{display:block;width:100%;height:auto;overflow:visible}
.xp-pane:not(.on) .xsa *{animation-play-state:paused}
@media(min-width:901px){.xp-pane.solo.on{position:relative;inset:auto}}
@media(max-width:900px){.xps.xsp{grid-template-columns:1fr;gap:14px;padding:16px 17px 22px}.xsc{gap:11px}.xsa{order:-1;width:min(100%,300px);margin:0 auto}}
@media (prefers-reduced-motion:reduce){.xsa *{animation:none!important}}