/* Pixelgeometry - apple.css
 * Loaded after studio.css. Restyles the whole site to an Apple-like standard:
 * SF-style type, light grey (#f5f5f7) surfaces, large rounded boxes and 1px
 * hairline borders, near-flat shadows, blue accent, translucent glass header.
 * Everything keys off the shared tokens, so pages inherit it without markup
 * changes. Remove the <link> in includes/layout-start.php to roll back.
 */

:root{
  --bg:#fff;
  --bg-soft:#f5f5f7;
  --ink:#1d1d1f;
  --ink-2:#424245;
  --muted:#6e6e73;
  --muted-2:#86868b;
  --line:#d2d2d7;
  --line-2:#e8e8ed;
  --purple:#0071e3;
  --purple-2:#2997ff;
  --purple-deep:#0058b0;
  --purple-soft:#e8f2fd;
  --indigo:#0058b0;
  --navy:#000;
  --navy-2:#1d1d1f;
  --navy-3:#2d2d2f;
  --page-edge:#fff;
  --header-bg:rgba(251,251,253,.78);
  --shadow:0 1px 2px rgba(0,0,0,.03),0 8px 24px rgba(0,0,0,.04);
  --shadow-lg:0 2px 4px rgba(0,0,0,.03),0 24px 60px rgba(0,0,0,.10);
  --shadow-cta:none;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --r-xs:.5rem;--r-sm:.75rem;--r:.9rem;--r-md:1.1rem;--r-lg:1.6rem;--r-xl:1.9rem;
  --hairline:1px solid var(--line-2);
}
html[data-theme="dark"]{
  --bg:#000;
  --bg-soft:#161617;
  --ink:#f5f5f7;
  --ink-2:#d2d2d7;
  --muted:#a1a1a6;
  --muted-2:#86868b;
  --line:#424245;
  --line-2:#2d2d2f;
  --purple:#2997ff;
  --purple-2:#47a6ff;
  --purple-deep:#0a84ff;
  --purple-soft:#0a2540;
  --page-edge:#000;
  --header-bg:rgba(22,22,23,.78);
  --shadow:none;
  --shadow-lg:0 24px 60px rgba(0,0,0,.5);
}

/* ---- Type ---------------------------------------------------------------- */
body{font-family:var(--font);color:var(--ink);letter-spacing:-.011em;font-feature-settings:"ss01","cv11";background:var(--bg)}
main{background:var(--bg)}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.03em;word-spacing:0;line-height:1.08}
h1{letter-spacing:-.037em}
.hero h1{font-weight:700}
.eyebrow,.hv-now-kind{letter-spacing:.02em;text-transform:none;font-weight:600}
.grad-text{background:linear-gradient(90deg,#0071e3 0%,#7a5cff 52%,#e0449a 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
a:focus-visible,button:focus-visible{outline:2px solid var(--purple);outline-offset:3px}

/* ---- Header: translucent glass with a hairline ---------------------------- */
.site-header{background:var(--header-bg);-webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);border-bottom:1px solid var(--line-2);box-shadow:none}
.site-header.scrolled{box-shadow:none;border-bottom-color:var(--line)}
.mega-panel{border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);background:var(--bg)}

/* ---- Buttons: pills ------------------------------------------------------- */
.btn{border-radius:var(--r-pill);font-weight:500;letter-spacing:-.01em;box-shadow:none}
.btn-primary,.btn-primary:hover{background:var(--purple);border:1px solid transparent;box-shadow:none;color:#fff}
.btn-primary:hover{background:var(--purple-deep)}
.btn-ghost{border:1px solid var(--line);background:transparent}
.btn-ghost:hover{background:var(--bg-soft)}
.btn-text{font-weight:500}

/* ---- Surfaces: grey canvas, white rounded cards, hairline borders ---------- */
.home main > section:nth-of-type(even):not(.hero){background:var(--bg-soft)}
.svc,.t-card,.career-role,.review,.proof-card,.reviews-bar,.stats-row,.faq-item,
.price-card,.tool-card,.post-card,.blog-card,.loc-card,.industry-card,.work-card,.case-card,
.contact-card,.form-card,.panel,.card,.checkout-card,.summary-card,.offer-nav{
  border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:none
}
.home main > section:nth-of-type(even):not(.hero) :is(.svc,.t-card,.career-role,.review,.proof-card,.faq-item){background:var(--bg)}
html[data-theme="dark"] :is(.svc,.t-card,.career-role,.review,.proof-card,.reviews-bar,.stats-row,.faq-item){background:var(--bg-soft);border-color:var(--line-2)}
input,select,textarea{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 4px rgba(0,113,227,.16)}
hr,.trust-row{border-color:var(--line-2)}
img.rounded,.rounded-img{border-radius:var(--r-lg)}

/* ---- Home hero: calm, centred, then the pinned showcase -------------------- */
.hero.hero--logos,
html[data-theme="dark"] .hero.hero--logos{background:var(--bg) none;overflow:clip;padding:2.2rem 0 0}
.hero.hero--logos .hero-grid{grid-template-columns:minmax(0,1fr);gap:0;min-height:0;justify-items:stretch}
.hero.hero--logos .hero-copy{background:none;text-align:center;max-width:58rem;margin-inline:auto;padding-bottom:2.2rem;will-change:transform,opacity;transform-origin:50% 0}
.hero.hero--logos .eyebrow{margin-bottom:.7rem;color:var(--purple)}
.hero.hero--logos .hero-copy h1{margin-inline:auto;max-width:none;font-size:clamp(2.2rem,4.6vw,3.9rem);line-height:1.06}
.hero.hero--logos .hero-copy h1 br{display:none}
.hero.hero--logos .hero-lead,.hero.hero--logos .hero-caption{margin-inline:auto;max-width:42rem}
.hero.hero--logos .hero-lead{margin-top:1rem;font-size:var(--fs-lg);color:var(--muted)}
.hero.hero--logos .hero-cta{justify-content:center;margin-top:1.3rem}
.hero.hero--logos .hero-caption{margin-top:.7rem}

/* Showcase, default (phones, reduced motion, no JS): a swipeable row. */
.hero-live{width:100%;min-width:0;background:var(--bg-soft);border:1px solid var(--line-2);border-radius:var(--r-xl);box-shadow:none}
.hv-sticky{display:flex;flex-direction:column;gap:1rem;padding:1.3rem 1rem 1.1rem}
.hv-head{display:flex;align-items:center;justify-content:center;gap:.7rem;text-align:left}
.hv-head strong{display:block;font-family:var(--display);font-size:var(--fs-lg);font-weight:600;letter-spacing:-.02em;color:var(--ink);line-height:1.2}
.hv-sub{display:block;color:var(--muted);font-size:var(--fs-sm)}
.hv-pulse{flex:none;width:.7rem;height:.7rem;margin:0 .3rem;border-radius:50%;background:#30d158;box-shadow:0 0 0 0 rgba(48,209,88,.5);animation:hv-pulse 2.2s ease-out infinite}
@keyframes hv-pulse{70%{box-shadow:0 0 0 .55rem rgba(48,209,88,0)}100%{box-shadow:0 0 0 0 rgba(48,209,88,0)}}
.hv-stage{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:.2rem 0 .6rem}
.hv-stage::-webkit-scrollbar{display:none}
.hv-track{display:flex;gap:.9rem;width:max-content;padding-inline:.2rem}
.hv-card{flex:0 0 min(78vw,26rem);display:flex;flex-direction:column;min-width:0;border-radius:var(--r-lg);overflow:hidden;background:var(--bg);border:1px solid var(--line-2);color:inherit;scroll-snap-align:center;box-shadow:0 1px 2px rgba(0,0,0,.03),0 12px 32px rgba(0,0,0,.06);backface-visibility:hidden}
.hv-bar{display:flex;align-items:center;gap:.3rem;padding:.55rem .75rem;background:var(--bg-soft);border-bottom:1px solid var(--line-2)}
.hv-bar i{width:.55rem;height:.55rem;border-radius:50%;background:#d1d1d6}
.hv-bar i:first-child{background:#ff5f57}.hv-bar i:nth-child(2){background:#febc2e}.hv-bar i:nth-child(3){background:#28c840}
.hv-bar em{flex:1;min-width:0;margin-left:.5rem;padding:.14rem .7rem;border-radius:99px;background:var(--bg);border:1px solid var(--line-2);color:var(--muted);font-size:var(--fs-xs);font-style:normal;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hv-card img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.hv-cap{position:relative;display:flex;flex-direction:column;gap:.1rem;padding:.75rem 1rem;padding-right:4rem;text-align:left}
.hv-cap b{font-family:var(--display);font-size:var(--fs-md);font-weight:600;letter-spacing:-.02em;color:var(--ink);line-height:1.25}
.hv-cap small{color:var(--muted);font-size:var(--fs-xs);line-height:1.3}
.hv-live{position:absolute;top:.8rem;right:.9rem;padding:.12rem .55rem;border-radius:99px;border:1px solid rgba(48,209,88,.4);color:#1d8a3a;font-size:.66rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
html[data-theme="dark"] .hv-live{color:#63e68a}
.hv-now{display:flex;flex-direction:column;align-items:center;gap:.15rem;text-align:center;transition:opacity .14s ease,transform .14s ease}
.hv-now.is-swap{opacity:0;transform:translateY(.35rem)}
.hv-now-kind{color:var(--muted);font-size:var(--fs-sm)}
.hv-now-name{font-family:var(--display);font-size:var(--fs-xl);font-weight:600;letter-spacing:-.03em;color:var(--ink);line-height:1.1}
.hv-now-link{display:inline-flex;align-items:center;gap:.35rem;margin-top:.3rem;color:var(--purple);font-size:var(--fs-md)}
.hv-now-link:hover{text-decoration:underline}
.hv-now-link .icon{width:.9rem;height:.9rem;font-size:.9rem}
.hv-dots{display:flex;justify-content:center;align-items:center;gap:.5rem;margin:0;padding:0;list-style:none}
.hv-dots button{display:block;width:.5rem;height:.5rem;padding:0;border-radius:99px;background:var(--line);transition:width .35s cubic-bezier(.2,.8,.2,1),background .35s}
.hv-dots button.is-on{width:1.7rem;background:var(--ink)}

/* Showcase, pinned (wide screens, motion allowed): vertical scroll drives the
   track sideways. The section is tall; the inner scene sticks under the header
   while it plays, then lets go and the page carries on. */
@media (min-width:52.0625rem){
  .hero-live.is-pinned{height:calc(100vh + (var(--hv-n,5) - 1) * 58vh);background:none;border:0;border-radius:0;position:relative}
  .is-pinned .hv-sticky{position:sticky;top:var(--nav-h,4.5rem);height:calc(100vh - var(--nav-h,4.5rem));justify-content:center;gap:clamp(.6rem,1.8vh,1.2rem);padding:0 0 1.2rem;
    background:var(--bg-soft);border:1px solid var(--line-2);border-radius:var(--r-xl);overflow:hidden}
  .is-pinned .hv-stage{overflow:hidden;perspective:1800px;perspective-origin:50% 40%;padding:0;scroll-snap-type:none;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
  .is-pinned .hv-track{--cw:min(56vw,calc((100vh - 23rem) * 1.6));gap:3.2vw;padding:1.2rem 0;will-change:transform;transform-style:preserve-3d}
  .is-pinned .hv-card{flex:0 0 var(--cw);width:var(--cw);will-change:transform,opacity;box-shadow:0 2px 4px rgba(0,0,0,.04),0 28px 70px rgba(0,0,0,.14)}
  .is-pinned .hv-cap{display:none}
  .is-pinned .hv-head{padding-top:clamp(.6rem,2vh,1.2rem)}
  .is-pinned .hv-now-name{font-size:clamp(1.5rem,3.2vh,2.2rem)}
}
@media (prefers-reduced-motion:reduce){
  .hv-pulse{animation:none}
  .hv-now,.hv-dots button{transition:none}
}
html[data-theme="dark"] .hv-card{box-shadow:0 24px 60px rgba(0,0,0,.55)}

/* ---- Scroll reveal (apple.js adds .rv / .rv-in) ---------------------------- */
.rv{opacity:0;transform:translateY(28px) scale(.985);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--rv-d,0s)}
.rv.rv-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ---- Phones --------------------------------------------------------------- */
@media (max-width:52rem){
  .hero.hero--logos .hero-copy{text-align:left}
  .hero.hero--logos .hero-copy h1 br{display:inline}
  .hero.hero--logos .hero-cta{justify-content:flex-start}
  .hero-live{margin-top:.4rem;border-radius:var(--r-lg)}
  .hv-head{justify-content:flex-start}
}

/* ---- Page heroes and nav: clearer section label, bold Careers link ---------- */
.page-hero .eyebrow{display:inline-flex;margin-bottom:.9rem;font-size:1.15rem;font-weight:700;letter-spacing:-.01em;color:var(--purple)}
/* Only the page you are on is bold: plain links via aria-current, dropdown
   triggers via .is-current (set by apple.js when their menu holds this page). */
.site-header .nav-links > a[aria-current="page"],
.site-header .nav-links .nav-item > button.is-current{font-weight:700;color:var(--ink)}

/* ---- One continuous background: no differently coloured side columns -------- */
body,html[data-theme="dark"] body{background:var(--bg)}
.home .hero,html[data-theme="dark"] .home .hero{width:100%;margin-inline:0;box-shadow:none;clip-path:none}
.hero,html[data-theme="dark"] .hero{background-color:var(--bg);background-image:none!important}

/* ---- Spacing: rounded boxes float with a clear gap from every band edge ------- */
.home .hero.hero--logos{padding-bottom:2.8rem}
.home .stats{padding:2.4rem 0 2.4rem}
.home .offerings-section,.home .package-section{padding-block:2.8rem}
.home .stats .stats-row{margin-bottom:1.2rem}
.home .stats .proof-layout{gap:1.2rem}
.home .trust-row{margin-top:1.6rem}
@media (max-width:52rem){
  .home .hero.hero--logos{padding-bottom:1.8rem}
  .home .stats{padding:1.6rem 0}
  .home .offerings-section,.home .package-section{padding-block:1.8rem}
}
/* The hero is full width now, so its content box needs real side margins. */
.home .hero .wrap{width:min(var(--max),92%)}

/* Eyebrow icon: a clean glyph sized to the label, not the dot-with-halo style
   that plain <i> markers use. */
.eyebrow i.icon{width:auto;height:auto;border-radius:0;background:none;box-shadow:none;font-size:.95em;line-height:1;color:var(--purple);vertical-align:baseline;margin-right:.1rem}
.eyebrow{align-items:center}

/* ---- Brand lockup: icon + live-text wordmark ------------------------------- */
.brand{gap:.7rem;align-items:center}
.brand-logo,.brand-logo-light{height:2.75rem;width:2.75rem;max-width:none;object-fit:contain;flex:none}
.brand-text{display:flex;flex-direction:column;justify-content:center;line-height:1;white-space:nowrap}
.brand-text b{font-family:var(--display);font-size:1.32rem;font-weight:600;letter-spacing:-.034em;color:var(--ink)}
.brand-text small{display:block;margin-top:.28rem;font-size:.58rem;font-weight:600;letter-spacing:.52em;text-transform:uppercase;color:var(--muted);margin-right:-.52em}
.site-footer .brand-text b{color:#f5f5f7}
.site-footer .brand-text small{color:#9aa3bb}
@media (max-width:52rem){
  .brand-logo,.brand-logo-light{height:2.4rem;width:2.4rem}
  .brand-text b{font-size:1.15rem}
  .brand-text small{font-size:.52rem}
}
.site-footer .foot-brand .brand{display:inline-flex;flex-direction:row;align-items:center;gap:.7rem;max-width:none}

/* Ghost buttons on always-dark surfaces keep white text, so their hover must be
   a translucent lift, never the light --bg-soft fill. */
.dark-mod .btn-ghost:hover,.mega-promo .btn-ghost:hover,.pkg-ghost:hover,.pkg .btn-ghost:hover,.final-inner .btn-ghost:hover,
.dark-mod .btn-ghost:focus-visible,.mega-promo .btn-ghost:focus-visible,.pkg-ghost:focus-visible,.pkg .btn-ghost:focus-visible,.final-inner .btn-ghost:focus-visible{
  background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.4)
}

/* =========================================================================
   How it works: a scroll-driven journey. Steps scroll on the left with a
   colour-filling line; a sticky stage on the right shows a small animated
   picture of whichever step is active. Phones: one column, picture inline.
   ========================================================================= */
.hiw-head{text-align:center;max-width:44rem;margin:0 auto 2.6rem}
.hiw-head h2{font-size:clamp(1.9rem,3.6vw,2.9rem);letter-spacing:-.035em}
.hiw-head p{margin-top:.7rem;color:var(--muted);font-size:var(--fs-lg)}
.hiw-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,27rem);gap:clamp(2rem,6vw,5.5rem);align-items:start}

/* Steps + progress line */
.hiw-steps{position:relative;margin:0;padding:0 0 0 4.6rem;list-style:none;--hiw-p:0}
.hiw-steps::before,.hiw-steps::after{content:"";position:absolute;left:1.55rem;top:3rem;bottom:3rem;width:3px;margin-left:-1.5px;border-radius:3px}
.hiw-steps::before{background:var(--line-2)}
.hiw-steps::after{background:linear-gradient(180deg,#0a84ff,#30b25c 18%,#af52de 34%,#ff375f 50%,#ff9f0a 66%,#32ade6 82%,#14b8a6);clip-path:inset(0 0 calc((1 - var(--hiw-p)) * 100%) 0)}
.hiw-step{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.65rem;min-height:58vh;padding:1.4rem 0;transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1);transform-origin:0 50%}
.hiw.is-live .hiw-step{opacity:.3;transform:scale(.985)}
.hiw.is-live .hiw-step.is-done{opacity:.55}
.hiw.is-live .hiw-step.is-on{opacity:1;transform:none}
.hiw-badge{position:absolute;left:-4.6rem;top:calc(50% - 1.6rem);width:3.2rem;height:3.2rem;display:grid;place-items:center;border-radius:50%;background:var(--bg);border:2px solid var(--line);color:var(--muted);font-size:1.15rem;transition:background .4s,color .4s,border-color .4s,transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.hiw-n{position:absolute;top:-.45rem;right:-.45rem;min-width:1.3rem;height:1.3rem;padding:0 .25rem;display:grid;place-items:center;border-radius:99px;background:var(--bg-soft);border:1px solid var(--line);font-style:normal;font-size:.68rem;font-weight:700;color:var(--muted);transition:background .4s,color .4s,border-color .4s}
.hiw-step.is-done .hiw-badge{border-color:var(--c);color:var(--c);background:color-mix(in srgb,var(--c) 12%,var(--bg))}
.hiw-step.is-done .hiw-n{background:var(--c);border-color:var(--c);color:#fff}
.hiw-step.is-on .hiw-badge{background:var(--c);border-color:var(--c);color:#fff;transform:scale(1.14);box-shadow:0 0 0 .55rem color-mix(in srgb,var(--c) 18%,transparent),0 .8rem 1.8rem color-mix(in srgb,var(--c) 38%,transparent)}
.hiw-step.is-on .hiw-n{background:var(--bg);border-color:var(--c);color:var(--c)}
.hiw-when{display:inline-block;padding:.2rem .75rem;border-radius:99px;font-size:.8rem;font-weight:600;color:var(--c);background:color-mix(in srgb,var(--c) 13%,transparent)}
.hiw-step h3{font-size:clamp(1.75rem,3.1vw,2.6rem);letter-spacing:-.035em;line-height:1.08}
.hiw-step p{max-width:32rem;color:var(--muted);font-size:1.1rem;line-height:1.6}
.hiw-step .btn{margin-top:.5rem}
.hiw-inline{display:none}

/* Sticky stage */
.hiw-stage{position:sticky;top:6.5rem;display:flex;flex-direction:column;height:min(34rem,calc(100vh - 8.5rem));border:1px solid var(--line-2);border-radius:var(--r-xl);background:var(--bg-soft);overflow:hidden}
.hiw-stage-top{display:flex;flex-direction:column;gap:.15rem;padding:1.2rem 1.4rem .8rem}
.hiw-stage-top span{color:var(--muted);font-size:var(--fs-sm)}
.hiw-stage-top b{color:var(--ink)}
.hiw-stage-top strong{font-family:var(--display);font-size:1.25rem;font-weight:600;letter-spacing:-.025em;color:var(--ink)}
.hiw-seg{display:flex;gap:.3rem;padding:0 1.4rem}
.hiw-seg i{flex:1;height:4px;border-radius:4px;background:var(--line);transition:background .4s}
.hiw-seg i.is-done,.hiw-seg i.is-on{background:var(--c)}
.hiw-panels{position:relative;flex:1}
.hiw-panel{position:absolute;inset:0;display:grid;place-items:center;padding:1.4rem 1.6rem;opacity:0;transform:translateY(16px) scale(.96);pointer-events:none;transition:opacity .55s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.hiw-panel::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(70% 60% at 50% 55%,color-mix(in srgb,var(--c) 24%,transparent),transparent 70%)}
.hiw-panel>*{position:relative;z-index:1}
.hiw-panel.is-on{opacity:1;transform:none}

/* Illustrations */
.ha{position:relative;width:min(100%,21rem);padding:1rem;border:1px solid var(--line-2);border-radius:1.2rem;background:var(--bg);box-shadow:0 1.1rem 3rem rgba(0,0,0,.10);color:var(--ink);font-size:.9rem;text-align:left}
.ha-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:.8rem}
.ha-top small{color:var(--muted);font-size:.74rem}
.ha-btn{display:flex;align-items:center;justify-content:center;gap:.45rem;margin-top:.5rem;padding:.65rem 1rem;border-radius:99px;background:var(--c);color:#fff;font-weight:600}
.ha-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.9rem}
.ha-chips span,.ha-tag{display:inline-flex;align-items:center;gap:.4rem;padding:.22rem .7rem;border-radius:99px;font-size:.74rem;font-weight:600;color:var(--c);background:color-mix(in srgb,var(--c) 13%,transparent)}
.ha-tag{margin-top:.8rem}
.ha-win{display:flex;align-items:center;gap:.28rem;padding:.45rem .65rem;margin:-1rem -1rem 0;border-radius:1.2rem 1.2rem 0 0;background:var(--bg-soft);border-bottom:1px solid var(--line-2)}
.ha-win i{width:.5rem;height:.5rem;border-radius:50%;background:#ff5f57}.ha-win i:nth-child(2){background:#febc2e}.ha-win i:nth-child(3){background:#28c840}
.ha-win em{flex:1;margin-left:.4rem;padding:.1rem .6rem;border-radius:99px;background:var(--bg);border:1px solid var(--line-2);font-size:.68rem;font-style:normal;color:var(--muted);text-align:center}
.ha-page{margin:.8rem 0 0;padding:.8rem;border-radius:.8rem;background:var(--bg-soft)}
.ha .b{display:block;border-radius:.45rem;background:var(--line)}
.ha .b1{height:1.3rem;width:62%;background:var(--c)}
.ha .b2{height:.65rem;width:86%;margin-top:.5rem}
.ha-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:.7rem}
.ha-cols .b{height:3.1rem}

/* 1 form */
.ha-fld{margin-bottom:.65rem}
.ha-fld span{display:block;margin-bottom:.25rem;font-size:.72rem;color:var(--muted)}
.ha-fld i{position:relative;display:block;height:1.9rem;border:1px solid var(--line);border-radius:.6rem;background:var(--bg-soft);overflow:hidden}
.ha-fld i::after{content:"";position:absolute;left:.55rem;top:50%;width:calc(var(--w) - 1.1rem);height:.45rem;margin-top:-.225rem;border-radius:.3rem;background:var(--c)}
/* 2 pay */
.ha-amt{margin:.2rem 0 .6rem;font-size:2.7rem;font-weight:700;letter-spacing:-.045em;line-height:1}
.ha-amt small{margin-left:.45rem;font-size:.9rem;font-weight:500;letter-spacing:0;color:var(--muted)}
.ha-line{display:flex;justify-content:space-between;gap:.8rem;padding:.5rem 0;border-top:1px solid var(--line-2);font-size:.82rem}
.ha-muted b{font-weight:500;color:var(--muted);text-align:right}
.ha-pay-btn{position:relative;overflow:hidden}
.ha-pay-btn .t2{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.4rem;background:#1c8f45;opacity:0;transform:translateY(100%)}
/* 3 plan */
.ha-tree{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto 1.7rem auto;justify-items:center;margin-top:.3rem}
.ha-tree::before{content:"";grid-column:1/-1;grid-row:2;align-self:stretch;width:66%;justify-self:center;border:2px solid var(--line);border-bottom:0;border-radius:.7rem .7rem 0 0}
.ha-tree .n{padding:.38rem .8rem;border:1px solid var(--line);border-radius:.7rem;background:var(--bg);font-size:.8rem;font-weight:600}
.ha-tree .n0{grid-column:1/-1;grid-row:1;background:var(--c);border-color:var(--c);color:#fff}
.ha-tree .n1,.ha-tree .n2,.ha-tree .n3{grid-row:3}
/* 5 review bubbles */
.ha-say{position:absolute;display:flex;align-items:center;gap:.4rem;padding:.45rem .75rem;border-radius:.95rem;font-size:.74rem;font-weight:600;box-shadow:0 .6rem 1.4rem rgba(0,0,0,.14)}
.ha-say.s1{top:3.7rem;right:-.9rem;background:var(--c);color:#fff;border-bottom-right-radius:.25rem}
.ha-say.s2{bottom:3.1rem;left:-.9rem;background:var(--bg);border:1px solid var(--line-2);border-bottom-left-radius:.25rem}
.ha-say.s2 i{color:#30b25c}
.ha-review .ha-page{padding-bottom:3rem}
/* 6 launch */
.ha-checks{margin:0 0 .8rem;padding:0;list-style:none}
.ha-checks li{display:flex;align-items:center;gap:.55rem;padding:.42rem 0;border-bottom:1px solid var(--line-2);font-weight:500}
.ha-checks i{color:#30b25c}
.ha-live{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.7rem;border-radius:.95rem;background:var(--c);color:#fff;font-weight:600}
/* 7 grow */
.ha-bars{display:flex;align-items:flex-end;gap:.45rem;height:7rem;border-bottom:1px solid var(--line-2)}
.ha-bars span{flex:1;height:var(--h);border-radius:.4rem .4rem .1rem .1rem;background:linear-gradient(var(--c),color-mix(in srgb,var(--c) 40%,transparent))}

/* Animations run only while a picture's step is active (.is-on ancestor). */
.is-on .ha-fld i::after{animation:ha-type 1s backwards}
.is-on .ha-fld:nth-of-type(1) i::after{animation-delay:.25s}
.is-on .ha-fld:nth-of-type(2) i::after{animation-delay:.7s}
.is-on .ha-fld:nth-of-type(3) i::after{animation-delay:1.15s}
.is-on .ha-form .ha-btn{animation:ha-in .5s 1.7s backwards}
.is-on .ha-amt{animation:ha-in .5s .15s backwards}
.is-on .ha-pay-btn .t1{animation:ha-t1 .3s 1.5s forwards}
.is-on .ha-pay-btn .t2{animation:ha-pop .45s 1.5s forwards}
.is-on .ha-tree .n{animation:ha-in .5s backwards}
.is-on .ha-tree .n0{animation-delay:.1s}.is-on .ha-tree .n1{animation-delay:.5s}.is-on .ha-tree .n2{animation-delay:.65s}.is-on .ha-tree .n3{animation-delay:.8s}
.is-on .ha-chips span{animation:ha-in .45s backwards}
.is-on .ha-chips span:nth-child(1){animation-delay:1.1s}.is-on .ha-chips span:nth-child(2){animation-delay:1.25s}.is-on .ha-chips span:nth-child(3){animation-delay:1.4s}
.is-on .ha-build .b{animation:ha-in .5s backwards}
.is-on .ha-build .b1{animation-delay:.2s}.is-on .ha-build .b2{animation-delay:.4s}
.is-on .ha-build .b3{animation-delay:.65s}.is-on .ha-build .b4{animation-delay:.85s}.is-on .ha-build .b5{animation-delay:1.05s}
.is-on .ha-tag{animation:ha-in .5s 1.3s backwards}
.is-on .ha-review .ha-say.s1{animation:ha-in .5s .35s backwards}
.is-on .ha-review .ha-say.s2{animation:ha-in .5s 1.4s backwards}
.is-on .ha-checks li{animation:ha-slide .5s backwards}
.is-on .ha-checks li:nth-child(1){animation-delay:.2s}.is-on .ha-checks li:nth-child(2){animation-delay:.7s}.is-on .ha-checks li:nth-child(3){animation-delay:1.2s}
.is-on .ha-live{animation:ha-in .6s 1.8s backwards}
.is-on .ha-live i{animation:ha-fly 1.5s 2.4s ease-in-out infinite}
.is-on .ha-bars span{animation:ha-grow .9s cubic-bezier(.2,.8,.2,1) backwards}
.is-on .ha-bars span:nth-child(1){animation-delay:.1s}.is-on .ha-bars span:nth-child(2){animation-delay:.2s}.is-on .ha-bars span:nth-child(3){animation-delay:.3s}.is-on .ha-bars span:nth-child(4){animation-delay:.4s}.is-on .ha-bars span:nth-child(5){animation-delay:.5s}.is-on .ha-bars span:nth-child(6){animation-delay:.6s}
@keyframes ha-in{from{opacity:0;transform:translateY(.55rem) scale(.9)}}
@keyframes ha-slide{from{opacity:0;transform:translateX(-.8rem)}}
@keyframes ha-type{from{width:0}}
@keyframes ha-grow{from{height:0}}
@keyframes ha-t1{to{opacity:0}}
@keyframes ha-pop{to{opacity:1;transform:none}}
@keyframes ha-fly{0%,100%{transform:translate(0,0)}50%{transform:translate(.3rem,-.3rem)}}

html[data-theme="dark"] .ha{box-shadow:none;background:#1c1c1e}
html[data-theme="dark"] .hiw-badge,html[data-theme="dark"] .ha-tree .n,html[data-theme="dark"] .ha-say.s2{background:#1c1c1e}
html[data-theme="dark"] .ha-win,html[data-theme="dark"] .ha-page{background:#2c2c2e}
html[data-theme="dark"] .ha-win em{background:#1c1c1e}

/* Phones: one column, picture inside each step */
@media (max-width:52rem){
  .hiw-head{margin-bottom:1.6rem;text-align:left}
  .hiw-grid{grid-template-columns:minmax(0,1fr)}
  .hiw-stage{display:none}
  .hiw-steps{padding-left:3.5rem}
  .hiw-steps::before,.hiw-steps::after{left:1.25rem;top:2rem;bottom:2rem}
  .hiw-step{min-height:0;padding:1.6rem 0}
  .hiw.is-live .hiw-step,.hiw.is-live .hiw-step.is-done{opacity:1;transform:none}
  .hiw-badge{left:-3.5rem;top:1.6rem;width:2.5rem;height:2.5rem;font-size:.95rem}
  .hiw-inline{display:block;width:100%;margin-top:.8rem;padding:.4rem 0}
  .ha{width:min(100%,22rem)}
  .ha-say.s1{right:-.2rem}.ha-say.s2{left:-.2rem}
}
@media (prefers-reduced-motion:reduce){
  .hiw-step,.hiw-badge,.hiw-n,.hiw-panel,.hiw-seg i{transition:none}
  .hiw *{animation:none!important}
  .hiw-panel{transform:none}
}

/* =========================================================================
   Home "How It Works": horizontal steps. Wide screens pin the section and
   vertical scroll slides the steps sideways, one at a time, with a filling
   timeline above. Phones and reduced motion get a swipeable row instead.
   ========================================================================= */
.hh{position:relative;padding:4rem 0 3.2rem;background:var(--bg-soft)}
.hh-pin{display:flex;flex-direction:column;gap:1.6rem}
.hh-head{text-align:center;max-width:40rem;margin:0 auto}
.hh-head h2{font-size:clamp(1.9rem,3.6vw,2.9rem);letter-spacing:-.035em}
.hh-head p{margin-top:.55rem;color:var(--muted);font-size:var(--fs-lg)}

/* Timeline rail */
.hh-rail{position:relative;display:grid;grid-template-columns:repeat(var(--hh-n,7),1fr);margin:1.6rem 0 0;padding:0;list-style:none;--hh-p:0}
.hh-rail::before,.hh-rail::after{content:"";position:absolute;top:1.4rem;left:calc(50% / var(--hh-n,7));right:calc(50% / var(--hh-n,7));height:3px;margin-top:-1.5px;border-radius:3px}
.hh-rail::before{background:var(--line)}
.hh-rail::after{background:linear-gradient(90deg,#0a84ff,#30b25c 17%,#af52de 33%,#ff375f 50%,#ff9f0a 67%,#32ade6 83%,#14b8a6);clip-path:inset(0 calc((1 - var(--hh-p)) * 100%) 0 0)}
.hh-rail li{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:.5rem;min-width:0;text-align:center}
.hh-rail button{width:2.8rem;height:2.8rem;display:grid;place-items:center;border-radius:50%;background:var(--bg);border:2px solid var(--line);color:var(--muted);font-size:1rem;transition:background .4s,color .4s,border-color .4s,transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.hh-rail span{font-size:.78rem;font-weight:600;line-height:1.25;color:var(--muted);transition:color .4s;padding:0 .2rem}
.hh-rail button.is-done{border-color:var(--c);color:var(--c);background:color-mix(in srgb,var(--c) 12%,var(--bg))}
.hh-rail button.is-on{background:var(--c);border-color:var(--c);color:#fff;transform:scale(1.15);box-shadow:0 0 0 .45rem color-mix(in srgb,var(--c) 18%,transparent),0 .6rem 1.4rem color-mix(in srgb,var(--c) 36%,transparent)}
.hh-rail li:has(button.is-on) span{color:var(--ink)}

/* Cards: default is a swipeable row */
.hh-view{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:.4rem 0 1rem}
.hh-view::-webkit-scrollbar{display:none}
.hh-track{display:flex;gap:1.1rem;width:max-content;padding-inline:max(4vw,1rem)}
.hh-card{--cw:min(86vw,26rem);flex:0 0 var(--cw);width:var(--cw);display:flex;flex-direction:column;gap:.65rem;padding:1.4rem 1.5rem 1.3rem;border:1px solid var(--line-2);border-radius:1.6rem;background:var(--bg);box-shadow:0 1px 2px rgba(0,0,0,.03),0 14px 36px rgba(0,0,0,.06);scroll-snap-align:center;transition:border-color .4s,box-shadow .4s}
.hh-card header{display:flex;align-items:center;gap:.65rem}
.hh-ico{display:grid;place-items:center;width:2.7rem;height:2.7rem;border-radius:.85rem;background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--c);font-size:1.1rem;transition:background .4s,color .4s,transform .5s cubic-bezier(.2,.8,.2,1)}
.hh-num{font-size:var(--fs-sm);color:var(--muted)}
.hh-when{margin-left:auto;padding:.18rem .7rem;border-radius:99px;font-size:.74rem;font-weight:600;color:var(--c);background:color-mix(in srgb,var(--c) 13%,transparent)}
.hh-card h3{font-size:clamp(1.45rem,2.2vw,1.85rem);letter-spacing:-.03em;line-height:1.1}
.hh-card>p{color:var(--muted);font-size:var(--fs-body);line-height:1.55}
.hh-card.is-on{border-color:color-mix(in srgb,var(--c) 45%,var(--line-2));box-shadow:0 2px 4px rgba(0,0,0,.03),0 26px 60px color-mix(in srgb,var(--c) 22%,transparent)}
.hh-card.is-on .hh-ico{background:var(--c);color:#fff;transform:scale(1.08) rotate(-4deg)}
.hh-art{display:grid;place-items:center;margin-top:auto;padding-top:.5rem}
.hh-art .ha{width:100%;max-width:21rem;box-shadow:0 .6rem 1.6rem rgba(0,0,0,.08)}
.hh-foot{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.8rem 1.4rem}

/* Pinned: wide screens, motion allowed */
@media (min-width:52.0625rem){
  .hh.is-pinned{height:calc(100vh + (var(--hh-n,7) - 1) * 52vh);padding:0}
  .hh.is-pinned .hh-pin{position:sticky;top:var(--nav-h,4.75rem);height:calc(100vh - var(--nav-h,4.75rem));justify-content:center;gap:clamp(.7rem,2vh,1.4rem);overflow:hidden}
  .hh.is-pinned .hh-head h2{font-size:clamp(1.7rem,3vw,2.5rem)}
  .hh.is-pinned .hh-rail{margin-top:clamp(.6rem,1.6vh,1.4rem)}
  .hh.is-pinned .hh-view{overflow:hidden;scroll-snap-type:none;padding:.2rem 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
  .hh.is-pinned .hh-track{gap:2vw;padding-inline:0;will-change:transform}
  .hh.is-pinned .hh-card{--cw:min(27rem,40vw);will-change:transform,opacity;transition:border-color .4s,box-shadow .4s}
}
@media (min-width:52.0625rem) and (max-height:800px){
  .hh.is-pinned .hh-art{display:none}
  .hh.is-pinned .hh-head p{display:none}
}

html[data-theme="dark"] .hh-card{background:#1c1c1e;box-shadow:none}
html[data-theme="dark"] .hh-rail button{background:#1c1c1e}
html[data-theme="dark"] .hh-art .ha{background:#2c2c2e;box-shadow:none}

@media (max-width:52rem){
  .hh{padding:2.6rem 0 2.2rem}
  .hh-head{text-align:left;margin:0}
  .hh-rail span{display:none}
  .hh-rail button{width:2.2rem;height:2.2rem;font-size:.8rem}
  .hh-rail::before,.hh-rail::after{top:1.1rem}
  .hh-foot{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .hh-rail button,.hh-card,.hh-ico{transition:none}
  .hh *{animation:none!important}
}

/* =========================================================================
   Products: apps and extension, stacked sticky cards (home) + phone/browser art
   ========================================================================= */
.prod{padding:4.5rem 0 3rem;background:var(--bg)}
.prod-head{text-align:center;max-width:40rem;margin:0 auto 2.4rem}
.prod-head .eyebrow{margin-inline:auto}
.prod-head h2{font-size:clamp(1.9rem,3.6vw,2.9rem);letter-spacing:-.035em;margin-top:.6rem}
.prod-head p{margin-top:.55rem;color:var(--muted);font-size:var(--fs-lg)}
.prod-stack{display:grid;gap:1.4rem}
.prod-card{--top:calc(var(--nav-h,4.75rem) + 1rem + var(--i,0) * .9rem);position:sticky;top:var(--top);display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:2rem;min-height:min(30rem,72vh);padding:2.2rem 2.6rem;border:1px solid var(--line-2);border-radius:2rem;background:linear-gradient(135deg,color-mix(in srgb,var(--c) 9%,var(--bg)),var(--bg) 62%);box-shadow:0 1px 2px rgba(0,0,0,.03),0 22px 54px rgba(0,0,0,.07);overflow:hidden}
.prod-kicker{display:inline-flex;align-items:center;gap:.45rem;padding:.25rem .8rem;border-radius:99px;font-size:.78rem;font-weight:600;color:var(--c);background:color-mix(in srgb,var(--c) 13%,transparent)}
.prod-copy h3{font-size:clamp(1.7rem,3vw,2.5rem);letter-spacing:-.035em;line-height:1.08;margin:.8rem 0 .3rem}
.prod-tag{font-size:var(--fs-lg);font-weight:600;color:var(--ink)}
.prod-copy p{margin-top:.5rem;color:var(--muted);line-height:1.55;max-width:34rem}
.prod-copy p.prod-tag{color:var(--c)}
.prod-chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:1rem 0 0;padding:0;list-style:none}
.prod-chips li{padding:.2rem .75rem;border:1px solid var(--line);border-radius:99px;font-size:.78rem;font-weight:600;color:var(--muted);background:var(--bg)}
.prod-cta{display:flex;align-items:center;flex-wrap:wrap;gap:.8rem 1.4rem;margin-top:1.4rem}
.prod-art{display:grid;place-items:center;min-height:20rem;perspective:1100px}
.prod-foot{text-align:center;margin-top:2rem;color:var(--muted)}
.prod-foot a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}

/* phone mockup */
.pv-phone{position:relative;width:14.5rem;aspect-ratio:9/18.5;padding:.55rem;border-radius:2.2rem;background:#1d1d1f;box-shadow:0 2rem 3.4rem rgba(0,0,0,.22),inset 0 0 0 2px #3a3a3c;transform:rotateY(-12deg) rotateX(4deg) rotateZ(1.5deg);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.prod-card:nth-child(even) .pv-phone{transform:rotateY(12deg) rotateX(4deg) rotateZ(-1.5deg)}
.prod-card.is-on .pv-phone{transform:none}
.pv-notch{position:absolute;top:.85rem;left:50%;width:4rem;height:1.05rem;margin-left:-2rem;border-radius:99px;background:#000;z-index:2}
.pv-screen{height:100%;display:flex;flex-direction:column;gap:.55rem;padding:2.1rem .8rem .8rem;border-radius:1.7rem;background:#fff;color:#1d1d1f;overflow:hidden;font-size:.7rem}
.pv-bar{display:flex;justify-content:space-between;align-items:center}
.pv-bar b{font-size:.78rem}
.pv-bar small{color:#86868b;font-size:.66rem}
.pv-vastu{background:linear-gradient(#fff7ef,#fff)}
.pv-dial{position:relative;width:7.4rem;height:7.4rem;margin:.2rem auto 0}
.pv-ring{position:absolute;inset:0;border-radius:50%;border:2px solid #f5792a55;background:radial-gradient(circle,#fff 55%,#ffe9d6)}
.pv-dial .d{position:absolute;font-weight:700;font-size:.62rem;color:#c2540a}
.pv-dial .dn{top:.25rem;left:50%;transform:translateX(-50%)}.pv-dial .ds{bottom:.25rem;left:50%;transform:translateX(-50%)}
.pv-dial .de{right:.35rem;top:50%;transform:translateY(-50%)}.pv-dial .dw{left:.35rem;top:50%;transform:translateY(-50%)}
.pv-needle{position:absolute;inset:0;animation:pv-spin 6s ease-in-out infinite}
.pv-needle i{position:absolute;left:50%;top:18%;width:.4rem;height:32%;margin-left:-.2rem;background:#e5352b;clip-path:polygon(50% 0,100% 100%,0 100%)}
.pv-hub{position:absolute;left:50%;top:50%;width:.6rem;height:.6rem;margin:-.3rem;border-radius:50%;background:#1d1d1f}
@keyframes pv-spin{0%,100%{transform:rotate(-26deg)}50%{transform:rotate(38deg)}}
.pv-score{padding:.5rem .6rem;border-radius:.8rem;background:#fff;border:1px solid #f1d9c4}
.pv-score span{color:#86868b}
.pv-score b{display:block;font-size:1.35rem;letter-spacing:-.03em;color:#c2540a}
.pv-score b small{font-size:.7rem;color:#86868b}
.pv-meter{height:.35rem;margin-top:.3rem;border-radius:9px;background:#f4e6d9;overflow:hidden}
.pv-meter i{display:block;height:100%;width:82%;border-radius:9px;background:linear-gradient(90deg,#f5792a,#30b25c);transform-origin:left;animation:pv-fill 3.4s ease-in-out infinite alternate}
@keyframes pv-fill{from{transform:scaleX(.35)}to{transform:scaleX(1)}}
.pv-rows{display:grid;gap:.3rem}
.pv-rows span{display:flex;align-items:center;gap:.35rem;padding:.4rem .5rem;border-radius:.6rem;background:#f5f5f7}
.pv-rows em{margin-left:auto;font-style:normal;font-weight:700;color:#248a3d}
.pv-trivia{background:#f5f5f7}
.pv-pips{display:flex;gap:.2rem}
.pv-pips i{flex:1;height:.28rem;border-radius:9px;background:#d2d2d7}
.pv-pips i.on{background:#636366}
.pv-trivia h4{font-size:.92rem;line-height:1.25;letter-spacing:-.02em;margin:.2rem 0 .1rem}
.pv-opts{display:grid;gap:.3rem}
.pv-opts span{display:flex;align-items:center;gap:.5rem;padding:.45rem .55rem;border-radius:.65rem;background:#fff;border:1px solid #e5e5ea}
.pv-opts b{display:grid;place-items:center;width:1.1rem;height:1.1rem;border-radius:50%;background:#e5e5ea;font-size:.62rem}
.pv-opts .ok{animation:pv-pop 3.2s ease-in-out infinite}
.pv-opts .ok b{background:#30b25c;color:#fff}
@keyframes pv-pop{0%,30%{transform:scale(1);background:#fff;border-color:#e5e5ea}45%,100%{transform:scale(1.03);background:#eafaf0;border-color:#30b25c}}
.pv-expl{padding:.45rem .55rem;border-radius:.65rem;background:#eaf2ff;color:#0a4aa8;line-height:1.35}
.pv-next{margin-top:auto;padding:.5rem;text-align:center;border-radius:99px;background:#1d1d1f;color:#fff;font-weight:600}

/* browser + extension popup */
.pv-browser{position:relative;width:min(100%,26rem);aspect-ratio:1.18;border-radius:1.1rem;background:#fff;border:1px solid var(--line);box-shadow:0 1.6rem 3rem rgba(0,0,0,.14);overflow:hidden;transform:rotateY(10deg) rotateX(3deg);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.prod-card.is-on .pv-browser{transform:none}
.pv-browser .ha-win{display:flex;align-items:center;gap:.3rem;padding:.55rem .7rem;background:#f5f5f7;border-bottom:1px solid #e5e5ea}
.pv-browser .ha-win i{width:.55rem;height:.55rem;border-radius:50%;background:#d2d2d7}
.pv-browser .ha-win em{margin-left:.5rem;font-style:normal;font-size:.68rem;color:#86868b;background:#fff;border-radius:99px;padding:.12rem .7rem}
.pv-chat{display:grid;gap:.5rem;padding:1rem 1.1rem}
.pv-chat .m{height:1.5rem;width:62%;border-radius:.8rem;background:#e5e5ea}
.pv-chat .m.u{margin-left:auto;background:#cfe3ff}
.pv-chat .m.s{height:2.4rem;width:74%}
.pv-pop{position:absolute;right:.9rem;top:3rem;width:12.2rem;padding:.8rem;border-radius:1rem;background:#fff;border:1px solid #d2d2d7;box-shadow:0 1rem 2.2rem rgba(0,0,0,.18);color:#1d1d1f;font-size:.7rem;animation:pv-float 5s ease-in-out infinite}
@keyframes pv-float{50%{transform:translateY(-.4rem)}}
.pv-pop-h{display:flex;flex-direction:column;margin-bottom:.55rem}
.pv-pop-h b{font-size:.82rem}
.pv-pop-h small{color:#86868b}
.pv-fmts{display:flex;flex-wrap:wrap;gap:.25rem}
.pv-fmts span{padding:.15rem .5rem;border-radius:99px;background:#eaf2ff;color:#0a4aa8;font-weight:700;font-size:.62rem;animation:pv-chip 4.2s ease-in-out infinite;animation-delay:calc(var(--k) * .3s)}
@keyframes pv-chip{0%,60%,100%{background:#eaf2ff;color:#0a4aa8}25%{background:#0a84ff;color:#fff}}
.pv-dl{margin-top:.6rem;padding:.4rem;text-align:center;border-radius:99px;background:#0a84ff;color:#fff;font-weight:600}
.pv-saved{margin-top:.5rem;color:#248a3d;font-weight:600}

html[data-theme="dark"] .prod-card{background:linear-gradient(135deg,color-mix(in srgb,var(--c) 14%,#1c1c1e),#1c1c1e 65%);box-shadow:none}
html[data-theme="dark"] .prod-chips li{background:#2c2c2e}
html[data-theme="dark"] .pv-browser{background:#1c1c1e}
html[data-theme="dark"] .pv-chat .m{background:#2c2c2e}
html[data-theme="dark"] .pv-chat .m.u{background:#1f3a5f}
html[data-theme="dark"] .pv-browser .ha-win{background:#2c2c2e;border-color:#3a3a3c}
html[data-theme="dark"] .pv-browser .ha-win em{background:#1c1c1e}

@media (max-width:52rem){
  .prod{padding:2.8rem 0 2rem}
  .prod-head{text-align:left;margin-inline:0}
  .prod-head .eyebrow{margin-inline:0}
  .prod-card{position:relative;top:auto;grid-template-columns:1fr;padding:1.5rem;min-height:0;gap:1rem}
  .prod-art{min-height:0;order:-1}
  .pv-phone{width:12rem}
  .prod-foot{text-align:left}
}
@media (prefers-reduced-motion:reduce){
  .prod-card{position:relative;top:auto}
  .pv-phone,.pv-browser{transform:none!important;transition:none}
  .pv-needle,.pv-meter i,.pv-opts .ok,.pv-pop,.pv-fmts span{animation:none!important}
}

/* App detail pages */
.app-hero{padding:4rem 0 3rem;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 10%,var(--bg)),var(--bg))}
.app-hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:2.4rem;align-items:center}
.app-hero h1{font-size:clamp(2.2rem,4.8vw,3.8rem);letter-spacing:-.04em;line-height:1.04;margin:.9rem 0 .5rem}
.app-hero .lead{color:var(--muted);font-size:var(--fs-lg);line-height:1.55;max-width:34rem}
.app-hero .prod-art{min-height:22rem}
.app-hero .pv-phone{width:16rem}
.app-hero .pv-phone{transform:none;animation:pv-bob 6s ease-in-out infinite}
@keyframes pv-bob{50%{transform:translateY(-.6rem)}}
.app-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.app-feat{padding:1.4rem;border:1px solid var(--line-2);border-radius:1.4rem;background:var(--bg)}
.app-feat i{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:.85rem;background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--c);font-size:1.05rem}
.app-feat h3{font-size:1.1rem;margin:.8rem 0 .3rem;letter-spacing:-.02em}
.app-feat p{color:var(--muted);line-height:1.5;font-size:var(--fs-body)}
.app-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;counter-reset:s;margin:0;padding:0;list-style:none}
.app-steps li{position:relative;padding:1.3rem;border-radius:1.4rem;background:var(--bg-soft)}
.app-steps li::before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:2rem;height:2rem;margin-bottom:.7rem;border-radius:50%;background:var(--c);color:#fff;font-weight:700}
.app-steps b{display:block;margin-bottom:.25rem}
.app-steps span{color:var(--muted);font-size:var(--fs-body);line-height:1.45}
.app-note{padding:1.4rem 1.6rem;border-radius:1.4rem;background:var(--bg-soft);color:var(--muted);line-height:1.55}
.app-sect{padding:3rem 0}
.app-sect h2{font-size:clamp(1.6rem,3vw,2.3rem);letter-spacing:-.035em;margin-bottom:1.4rem}
@media (max-width:52rem){
  .app-hero{padding:2.4rem 0 2rem}
  .app-hero .wrap{grid-template-columns:1fr}
  .app-feats,.app-steps{grid-template-columns:1fr}
}
html[data-theme="dark"] .app-feat{background:#1c1c1e}