/* ZAMPY / EDITORIAL PREMIUM — refined, crisp, accessible, responsive */
:root{--premium-ink:#182830;--premium-muted:#5e6d73;--premium-orange:#f4510b;--premium-ease:cubic-bezier(.22,1,.36,1)}
body{color:var(--premium-ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
section[id]{scroll-margin-top:91px}
.section-heading h2,.statement-grid h2{letter-spacing:-.057em;text-wrap:balance}
.section-heading p{color:#56656b;max-width:850px}
.section-heading-split>p{font-size:clamp(13.5px,1.12vw,16px);line-height:1.8}
.section{padding-top:clamp(62px,5.3vw,91px);padding-bottom:clamp(62px,5.3vw,91px)}
.section-heading{margin-bottom:clamp(25px,3vw,44px)}
.kicker{color:var(--premium-orange);letter-spacing:.17em}
/* A compact, editorial product journey. Tabs scroll in a single well-contained ribbon. */
.section-product .section-heading{max-width:900px;margin-bottom:30px}
.section-product .section-heading>p{max-width:835px}
.product-tabs{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;scrollbar-width:thin;scrollbar-color:#ffd4bd transparent;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:5px 5px 12px;gap:8px;scroll-padding:12px}
.product-tabs .product-tab{flex:none;scroll-snap-align:center;padding:11px 16px;border-radius:100px;font-weight:750;font-size:12px;white-space:nowrap}
.product-shortcuts{padding:12px 17px;border-radius:15px;gap:9px;margin:5px 0 18px}
.product-shortcuts>span{font-size:10px;letter-spacing:.1em}
.product-shortcuts button{border-radius:999px;transition:background .23s,border-color .23s,translate .23s}
.product-shortcuts button:hover{translate:0 -2px}
.product-showcase{
  display:grid!important;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr)!important;
  align-items:stretch!important;min-height:0!important;overflow:hidden;
  border:1px solid #eee8e0;border-radius:27px;background:#fff;
  box-shadow:0 15px 55px rgba(30,24,20,.055);
}
.product-showcase .showcase-text{
  display:flex!important;flex-direction:column!important;justify-content:center!important;
  align-self:stretch!important;min-height:0!important;
  padding:clamp(28px,3.6vw,55px) clamp(29px,4vw,65px)!important;
  background:linear-gradient(156deg,#fff 0%,#fff 72%,#fffaf5 100%);
}
.product-showcase .screen-counter{font-size:10px;font-weight:800;letter-spacing:.18em;color:#ed5a19;margin:0 0 14px}
.screen-context{display:inline-flex;align-self:flex-start;color:#67777d;background:#f6f5f3;border:1px solid #efeeeb;border-radius:999px;padding:7px 11px;font-size:10px;font-weight:800;letter-spacing:.065em;margin-bottom:23px}
.product-showcase .showcase-text h3{font-size:clamp(29px,3.2vw,43px);letter-spacing:-.058em;line-height:1.16;margin:0 0 20px;text-wrap:balance}
.product-showcase .showcase-text>p{font-size:clamp(13.5px,1.14vw,15.5px);line-height:1.89;letter-spacing:-.006em;color:#56676e;min-height:0!important;margin:0 0 23px}
.product-showcase .features-list{margin:0;gap:12px}
.product-showcase .features-list li{font-size:12.5px;line-height:1.52;align-items:flex-start;color:#34454d;font-weight:700}
.product-showcase .features-list .icon{flex:0 0 15px;margin-top:2px}
/* Every screenshot is centered in a dedicated image area; navigation stays above it. */
.product-showcase .showcase-phone{
  display:flex!important;flex-direction:column!important;justify-content:flex-start!important;
  align-items:center!important;min-height:0!important;max-height:none!important;
  padding:18px clamp(14px,2.6vw,31px) 24px!important;
  overflow:hidden;position:relative;isolation:isolate;
  background:radial-gradient(circle at 49% 42%,#fff3e8 0%,#fff8f1 43%,#fef9f4 72%,#fffaf6 100%);
}
.product-showcase .showcase-phone .showcase-blob{width:min(78%,460px);aspect-ratio:1;height:auto;top:21%;left:11%;background:#ffdecb;opacity:.43;pointer-events:none}
.phone-navigation{
  position:relative;z-index:3;display:flex;gap:12px;align-items:center;justify-content:space-between;
  width:100%;min-height:58px;padding:0 2px 12px;margin:0 auto 6px;
  border-bottom:1px solid rgba(225,184,159,.3);
}
.phone-navigation-label{font-size:10px;font-weight:850;letter-spacing:.18em;color:#c65a29}
.phone-navigation-controls{display:flex;align-items:center;justify-content:center;gap:8px;order:2}
.phone-navigation .circle-arrow{margin:0!important;flex:none;width:42px;height:42px;border-radius:50%;border:1px solid #edd5c5;background:#fff;color:#ef5416;box-shadow:0 4px 14px rgba(104,45,12,.055);transition:background .2s,translate .3s var(--premium-ease),border-color .2s}
.phone-navigation .circle-arrow:hover{background:#f6520b;color:#fff;border-color:#f6520b;translate:0 -2px}
.phone-navigation .circle-arrow:focus-visible,.phone-zoom:focus-visible{outline:3px solid #fba078;outline-offset:3px}
.phone-navigation .circle-arrow:first-child .icon{transform:rotate(180deg)}
.phone-zoom{order:3;flex:none;padding:10px 11px;border:1px solid #e9d1c1;border-radius:999px;background:#fff;color:#da5519;font-family:inherit;font-size:10px;font-weight:800;white-space:nowrap;cursor:pointer}
.phone-zoom:hover{background:#fff1e9}
.phone-visual{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:center;
  width:100%;height:clamp(435px,40vw,590px);margin:0 auto;
}
.product-showcase .showcase-phone .phone-visual img{
  display:block;position:relative!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;
  width:auto!important;height:100%!important;max-width:100%!important;
  max-height:100%!important;object-fit:contain!important;
  filter:none!important;scale:1!important;translate:none!important;transform:none!important;
  border-radius:0;box-shadow:none!important;flex:none;
  transition:opacity .21s ease!important;
}
.showcase-phone .showcase-corner{top:auto;bottom:58px;right:24px;opacity:.45;z-index:3}
.product-showcase .showcase-caption{position:relative;z-index:3;text-align:center;font-size:10px;line-height:1.4;letter-spacing:.09em;color:#9a6c51;margin-top:3px;min-height:22px;max-width:100%;padding:0 8px}
.product-transparency{margin-top:15px}
.subsection-cta{padding-top:19px}
/* Modal: smooth, but no blur/focus shifts in the rest of the document */
.screen-lightbox[hidden]{display:none!important}
.screen-lightbox{position:fixed;z-index:1000;inset:0;background:rgba(14,24,29,.97);display:flex;align-items:center;justify-content:center;padding:66px 18px 24px;overscroll-behavior:contain}
.screen-lightbox-inner{display:flex;align-items:center;justify-content:center;position:relative;width:100%;height:100%;max-height:100%;max-width:1050px}
.screen-lightbox-inner img{height:100%;width:100%;object-fit:contain;max-height:100%;max-width:100%;filter:none}
.screen-lightbox-close{position:absolute;right:0;top:-56px;color:#fff;background:#27353b;border:1px solid #586267;border-radius:999px;padding:12px 19px;font-weight:750;cursor:pointer}
.screen-lightbox-close:hover{background:#f4510b;border-color:#f4510b}
body.is-zoomed{overflow:hidden}
/* Competitor explanation: the contrast is in the model, not disparagement of existing operators. */
.section-competitor .section-heading{margin-bottom:28px}
.competitor-topline{background:#18292f;border:1px solid #283a40;border-radius:24px;padding:37px 40px;gap:30px}
.competitor-topline h3{font-size:clamp(27px,2.8vw,39px);letter-spacing:-.057em;line-height:1.19}
.competitor-topline p{line-height:1.8}
.competitor-pillar-grid{gap:9px}
.competitor-pillar-grid>div{border-radius:14px;background:#27383e;border-color:#41525b}
.ecosystem-story{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:18px 0 23px}
.ecosystem-step{border-radius:20px;border:1px solid #e9e6e1;background:#fff;padding:23px 23px 26px;min-width:0;transition:translate .32s var(--premium-ease),box-shadow .32s}
.ecosystem-step-featured{background:#f4510b;border-color:#f4510b;color:#fff;box-shadow:0 13px 31px #ec601b26}
.ecosystem-step:hover{translate:0 -3px;box-shadow:0 11px 30px #2b28191a}
.ecosystem-step-index{color:#e85a22;font-size:10px;font-weight:800;letter-spacing:.145em}
.ecosystem-step-featured .ecosystem-step-index{color:#ffe1d3}
.ecosystem-step-title{font-size:clamp(19px,1.7vw,24px);line-height:1.23;letter-spacing:-.05em;margin:18px 0 11px}
.ecosystem-step-copy{margin:0;color:#5b6a70;font-size:13px;line-height:1.78}
.ecosystem-step-featured .ecosystem-step-copy{color:#fff3e9}
.competitor-panel{border-radius:24px;box-shadow:0 18px 48px #20201e0b}
.competitor-option{transition:background .25s,border-color .25s,translate .28s var(--premium-ease);min-height:80px}
.competitor-option .competitor-option-label small{font-size:10px}
.competitor-option-label strong{font-size:13px}
.competitor-layout{gap:18px;align-items:start}
.competitor-detail{min-height:430px;border-radius:20px;transition:background .3s ease,border-color .3s ease,box-shadow .3s ease}
.competitor-detail>p{font-size:13.5px;line-height:1.78;max-width:none}
.competitor-feature-line{grid-template-columns:125px minmax(0,1fr);gap:15px;padding:15px 0}
.competitor-feature-line span{font-size:12.5px;line-height:1.73}
.competitor-detail.is-zampy{background:linear-gradient(156deg,#fa641d 0%,#f2510a 70%,#e54407 100%);border-color:#f4510b;box-shadow:0 17px 42px #eb551a2e;color:#fff}
.competitor-detail.is-zampy .competitor-detail-eyebrow,.competitor-detail.is-zampy h4{color:#fff}
.competitor-detail.is-zampy>p,.competitor-detail.is-zampy .competitor-feature-line span{color:#fff4ec}
.competitor-detail.is-zampy .competitor-feature-line{border-top-color:#ffffff6b}
.competitor-detail.is-zampy .competitor-feature-line b{color:#ffe6d5}
.competitor-detail.is-zampy .competitor-value-panel{background:#fff!important;border-color:#fff!important;color:#182830}
.competitor-detail.is-zampy .competitor-value-panel strong{color:#f4510b}
.competitor-detail.is-zampy>a{color:white;text-decoration:underline;text-underline-offset:4px}
.competitor-option.competitor-zampy{box-shadow:0 12px 26px #f4510b24}
/* Dramatic but restrained typography and interaction with no transparency blur. */
.value-card,.service-card,.metric-card,.adv-card,.roadmap-card,.team-card{box-shadow:0 3px 25px rgba(24,32,36,.018)}
.button:focus-visible,.product-tab:focus-visible,.competitor-option:focus-visible{outline:3px solid #ffa37b;outline-offset:3px}
.faq-list details[open] summary{color:#df4e11}
.reading-progress{box-shadow:none!important;height:2px}
/* Animation should never make copy look out of focus or shift hundreds of pixels. */
@media(prefers-reduced-motion:no-preference){
 .motion-ready .reveal{opacity:.95;translate:0 10px;filter:none!important;transition:opacity .52s var(--premium-ease),translate .58s var(--premium-ease)!important;transition-delay:0ms!important}
 .motion-ready .reveal.is-revealed{opacity:1;translate:0 0;filter:none!important}
 .hero-stage-ring,.hero-float-top{translate:0!important;transition:none!important}
 .showcase-phone:hover .phone-visual img{scale:1!important;translate:0!important}
}
@media(max-width:1100px){
 .product-showcase .showcase-text{padding:35px 32px!important}
 .phone-visual{height:clamp(425px,47vw,570px)}
 .phone-navigation-label{font-size:9px}
 .phone-navigation .circle-arrow{width:38px;height:38px}
 .ecosystem-story{gap:10px}
 .ecosystem-step{padding:19px}
}
@media(max-width:760px){
 .product-showcase{display:flex!important;flex-direction:column-reverse!important;align-items:stretch!important}
 .product-showcase .showcase-phone{min-height:0!important;max-height:none!important;padding:13px 15px 19px!important}
 .phone-navigation{min-height:56px;margin-bottom:3px;gap:6px}
 .phone-navigation-label{font-size:9px}
 .phone-visual{height:clamp(390px,100vw,590px)}
 .product-showcase .showcase-text{min-height:0!important;padding:29px 26px 33px!important}
 .screen-context{margin-bottom:15px}
 .product-showcase .showcase-text h3{font-size:clamp(26px,6vw,34px)}
 .product-showcase .showcase-text>p{font-size:13.5px;line-height:1.77}
 .product-showcase .features-list{gap:9px}
 .ecosystem-story{grid-template-columns:1fr;gap:9px}
 .ecosystem-step{padding:20px}
 .ecosystem-step-title{margin:9px 0 6px}
 .competitor-topline{padding:25px 22px}
 .competitor-detail{min-height:0;padding:24px 20px}
 .competitor-detail>p{font-size:13px}
 .section-product .section-heading{margin-bottom:22px}
 .product-shortcuts{margin-bottom:13px}
}
@media(max-width:450px){
 .phone-navigation .circle-arrow{width:36px;height:36px}
 .phone-navigation-label{font-size:8px;letter-spacing:.09em}
 .phone-zoom{font-size:9px;padding:8px}
 .phone-visual{height:clamp(355px,107vw,475px)}
 .product-showcase .showcase-phone{padding:9px 9px 17px!important}
 .product-showcase .showcase-text{padding:25px 20px 29px!important}
 .product-showcase .showcase-text h3{font-size:28px}
 .product-showcase .features-list li{font-size:12px}
 .section-heading h2{font-size:clamp(33px,8.4vw,42px)}
}
@media(prefers-reduced-motion:reduce){
 .motion-ready .reveal{opacity:1!important;translate:none!important;transition:none!important}
 .phone-navigation .circle-arrow,.ecosystem-step,.competitor-detail{transition:none!important}
}
/* Final mobile/cross-browser corrections */
.product-tabs{justify-content:flex-start!important}
.product-showcase .showcase-phone{height:auto!important}
@media(max-width:760px){.product-showcase .showcase-phone{height:auto!important;min-height:0!important}}

/* Refinement: clear separation of device and its caption on narrow screens. */
.product-showcase .showcase-caption{padding-top:9px!important;line-height:1.5!important;position:relative!important;z-index:4!important;}
@media(max-width:760px){
 .product-showcase .phone-visual{margin-bottom:13px!important;}
 .product-showcase .showcase-caption{margin-top:6px!important;min-height:24px!important;}
}
@media(max-width:450px){
 .product-showcase .phone-visual{height:clamp(345px,102vw,455px)!important;margin-bottom:18px!important;}
 .product-showcase .showcase-caption{font-size:9px!important;letter-spacing:.03em!important;}
}