/* =====================================================================
   Styles for the components ported from calendly.html.
   Everything is nested inside `.cal` so none of it can collide with the
   Air stylesheet — put class="cal" on the wrapper and the rules apply.
   ===================================================================== */

@font-face{font-family:"Calendly Sans";src:url("https://calendly.com/_astro/calendly-sans-variable.D6oRyvrG.woff2") format("woff2");font-weight:100 900;font-style:oblique 0deg 10deg;font-display:swap}
@font-face{font-family:"Wulkan Text";src:url("https://calendly.com/_astro/wulkan-text-medium.7dXcUwno.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url("https://calendly.com/_astro/geist-latin.BfrrXRGr.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

.cal{
  --midnight:#071a31; --magnolia:#fcfbf8; --steel:#5f6d77; --linen:#f5f3ee;
  --silver:#d8dce0; --ash:#e4e6e9; --lake:#4890e3;
  --n200:#c6ccd2; --n350:#93a0aa; --n700:#3d464e;
  --mid-a05:rgba(7,26,49,.05); --mid-a10:rgba(7,26,49,.1);
  --text-primary:var(--midnight); --text-secondary:var(--steel);
  --bg-primary:var(--magnolia);
  --ease-in-out:cubic-bezier(.4,0,.2,1);
  position:relative;
  font-family:"Geist",system-ui,sans-serif;
  color:var(--midnight);
  -webkit-font-smoothing:antialiased;
}
.cal *{box-sizing:border-box}
.cal img{display:block;max-width:100%}

.cal{
  .squircle{corner-shape:squircle}
  .t-h3{font-family:"Geist",system-ui,sans-serif;font-weight:500;font-size:36px;line-height:1.1;letter-spacing:-1px;margin:0}
  .t-body-md{font-size:16px;line-height:1.4;font-weight:400;margin:0}
  .t-overline{font-family:"Geist",sans-serif;font-weight:600;font-size:12px;line-height:1.4;letter-spacing:.08em;text-transform:uppercase}
  .muted{color:var(--text-secondary)}
  p{margin:0}

  /* ---------------- link / badge ---------------- */
  .link-underline{display:inline-flex;align-items:center;gap:8px;font-family:"Geist",sans-serif;font-weight:500;font-size:14px;
    color:var(--midnight);border-bottom:1.5px solid var(--midnight);padding:9.5px 1.5px 8px;transition:color .15s,border-color .15s}
  .link-underline:hover{color:var(--steel);border-color:var(--steel)}
  .badge{display:inline-flex;align-items:center;justify-content:center;gap:4px;border-radius:4px;corner-shape:squircle;
    font-family:"Geist",sans-serif;font-weight:500;font-size:12px;line-height:1.4;padding:4px 8px;
    background:var(--mid-a05);color:var(--n700)}

  /* ---------------- multi-product hero ---------------- */
  .mph-inner{margin:0 auto;width:100%;max-width:996px;position:relative;z-index:2;
    filter:drop-shadow(0 4px 5px rgba(95,109,119,.04)) drop-shadow(0 10px 15px rgba(95,109,119,.04)) drop-shadow(0 40px 50px rgba(95,109,119,.1));
    transform:translate3d(0,0,0)}
  .mph-tabs{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:8px;margin:0 auto;width:fit-content;max-width:100%;padding-inline:12px}
  .mph-tab{position:relative;display:grid;width:56px;height:56px;place-items:center;z-index:10}
  .mph-tab .blob{position:absolute;inset:0}
  .mph-tab .blob svg{position:absolute;inset:0;width:100%;height:100%}
  .mph-goo{position:absolute;inset:0;transition:opacity .6s cubic-bezier(.5,0,.5,1);opacity:0}
  .mph-tab[aria-selected="true"] .mph-goo{opacity:1}
  .mph-goo-in{position:absolute;inset:0}
  .mph-goo-pill{display:none !important}
  .mph-tab .blob svg.mph-goo-neck{position:absolute;inset:auto;left:50%;top:100%;height:15px;width:32px;transform:translateX(-50%)}
  .mph-ring{position:absolute;inset:7.15%}
  .mph-ring svg{position:absolute;inset:0;width:100%;height:100%}
  .mph-tab .ico{position:relative;z-index:20;width:85.7%;height:85.7%}
  .mph-tab .ico-dim{position:absolute;inset:0;opacity:.35}
  .mph-tab .ico-lit{position:absolute;inset:0;opacity:0;transition:opacity .6s cubic-bezier(.5,0,.5,1)}
  .mph-tab[aria-selected="true"] .ico-lit{opacity:1}
  .mph-tab .glyph{position:absolute;inset:14.29%}
  .mph-tab .glyph svg{width:100%;height:100%}
  .mph-panels{position:relative;z-index:10;margin-top:14px;display:grid;border-radius:48px;corner-shape:squircle;
    background:var(--bg-primary);padding:48px}
  .mph-panel{grid-area:1/1;display:grid;align-items:center;align-content:center;gap:64px;
    grid-template-columns:320px minmax(0,516px);transition:opacity .5s var(--ease-in-out);pointer-events:none}
  .mph-panel[data-active="true"]{pointer-events:auto}
  .mph-panel-copy{display:flex;flex-direction:column;align-items:flex-start;gap:24px;width:320px}
  .prod-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
  .prod-logo{display:flex;align-items:center;height:24px;gap:4px}
  .prod-logo .mark{position:relative;width:24px;height:24px;flex:none}
  .prod-logo .mark>svg{position:absolute;inset:0;width:100%;height:100%}
  .prod-logo .mark .glyph{position:absolute;inset:14.29%}
  .prod-logo .mark .glyph svg{width:100%;height:100%}
  .prod-logo span{font-family:"Calendly Sans",sans-serif;font-weight:500;line-height:1;font-size:16px;color:var(--midnight);white-space:nowrap}
  .mph-visual{aspect-ratio:516/333;width:100%;overflow:hidden;border-radius:20px;corner-shape:squircle;background:#c3dffe}
  .mph-visual canvas{width:100%;height:100%;display:block}

  /* ---------------- pricing deck ---------------- */
  /* Every card keeps the same width in every state. Activating one only lifts
     it and wakes its gradient, so a long benefit list grows the row downward
     instead of squeezing the text sideways. */
  .tl-cards{position:relative;width:100%;display:flex;align-items:stretch;justify-content:center;gap:24px}
  .tl-card{display:flex;flex-direction:column;flex:0 0 384px;width:384px;max-width:100%;
    height:auto;min-height:0;overflow:hidden;border-radius:20px;corner-shape:squircle;background:#fff;position:relative;
    border:1px solid rgba(11,53,88,.08);
    box-shadow:0 2px 8px rgba(11,53,88,.04);
    transition:box-shadow .38s var(--ease-in-out),transform .38s var(--ease-in-out),border-color .38s var(--ease-in-out)}
  .tl-card:hover,
  .tl-card[data-state="active"]{box-shadow:0 20px 48px -12px rgba(11,53,88,.20);
    transform:translateY(-8px);border-color:rgba(11,53,88,.18);z-index:2}
  .tl-card-top{display:flex;width:100%;flex:1 1 auto;min-height:0;flex-direction:column;gap:4px;
    padding:30px 30px 0;position:relative;z-index:2}
  .pr-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:34px}
  .tl-card h3{font-family:"Calendly Sans",sans-serif;font-weight:500;font-size:28px;line-height:1.2;color:var(--midnight)}
  .pr-badge{flex:none;font-family:"Geist",sans-serif;font-weight:500;font-size:11px;line-height:1;letter-spacing:.04em;
    text-transform:uppercase;padding:6px 10px;border-radius:999px;corner-shape:squircle;background:#DBEE9F;color:var(--midnight)}
  .pr-tagline{font-size:14px;line-height:1.4;color:var(--text-secondary)}
  .pr-price{font-family:"Calendly Sans",sans-serif;font-weight:500;font-size:46px;line-height:1.05;
    letter-spacing:-.01em;color:var(--midnight);margin:6px 0 0}
  .pr-blurb{font-size:14px;line-height:1.4;color:var(--text-secondary);margin:6px 0 16px}
  .tl-steps{display:flex;flex-direction:column;gap:2px;padding-bottom:0}
  .tl-step{display:flex;align-items:flex-start;gap:12px}
  .tl-step .mark{position:relative;width:20px;height:20px;flex:none;margin-top:0}
  .tl-step .mark>svg{position:absolute;inset:0;width:100%;height:100%}
  .tl-step .glyph{position:absolute;inset:0;display:grid;place-items:center;padding:26%}
  .tl-step .glyph svg{width:100%;height:100%}
  .pr-item{display:flex;flex-direction:column;gap:1px;min-width:0}
  .pr-item b{font-weight:500;font-size:14px;line-height:1.35;color:var(--midnight)}
  .pr-item i{font-style:normal;font-size:13px;line-height:1.35;color:var(--text-secondary)}
  .tl-conn{margin-left:9px;height:8px;width:2px;background:var(--silver)}

  /* ---- tier gradient -------------------------------------------------
     Book / Prep / Capture's own gradient plates, one per tier. Two nested
     layers so the pointer parallax and the idle drift can both run: the clip
     carries the mask and the lean toward the cursor, the plate inside carries
     the slow travel. Bottom-weighted and quiet at rest, opening up and
     following the pointer on hover. */
  .tl-card-bg{
    position:absolute;
    inset:-2px;                 /* cover the border box, not just the padding box */
    pointer-events:none;
    z-index:1;
    overflow:hidden;
    border-radius:inherit;
  }

  .mesh-clip{
    position:absolute;
    inset:0;
    overflow:hidden;
    transition:opacity .85s cubic-bezier(.16,1,.3,1);
  }
  .mesh-img{
    position:absolute;
    inset:-24%;
    display:block;
    background-image:var(--grad-img);
    background-size:cover;
    background-position:50% 60%;
    filter:blur(18px);
    animation:gradDrift 19s ease-in-out infinite alternate;
  }
  /* resting: restrained, low saturation, gathered low in the card */
  .mesh-clip--rest{
    opacity:.5;
    -webkit-mask-image:linear-gradient(to top,#000 0%,#000 13%,rgba(0,0,0,.34) 25%,rgba(0,0,0,.08) 35%,transparent 45%);
    mask-image:linear-gradient(to top,#000 0%,#000 13%,rgba(0,0,0,.34) 25%,rgba(0,0,0,.08) 35%,transparent 45%);
  }
  .mesh-clip--rest .mesh-img{filter:blur(18px) saturate(.6)}
  /* hover: the same plate, a little more of it and a little more colour */
  .mesh-clip--wide{
    opacity:0;
    -webkit-mask-image:linear-gradient(to top,#000 0%,#000 34%,rgba(0,0,0,.5) 56%,rgba(0,0,0,.16) 74%,transparent 88%);
    mask-image:linear-gradient(to top,#000 0%,#000 34%,rgba(0,0,0,.5) 56%,rgba(0,0,0,.16) 74%,transparent 88%);
  }
  .mesh-clip--wide .mesh-img{filter:blur(18px) saturate(1)}
  /* The plate itself never moves. Under the cursor the card instead shows more
     of its own gradient: the same plate, registered in exactly the same place
     and carrying exactly the same colours, only brighter and a little more
     saturated, revealed through one wide soft circle centred on the pointer.
     The circle is positioned against the card's own box, so it sits where the
     cursor actually is; imported.js eases the two custom properties frame by
     frame, which is what makes it flow rather than snap. A second mask layer,
     the same bottom-weighted ramp the hover plate uses, keeps the lift out of
     the white top of the card. */
  .mesh-magnet{
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:0;
    -webkit-mask-image:
      radial-gradient(circle var(--mag-r,300px) at var(--px,50%) var(--py,78%),
        #000 0%,rgba(0,0,0,.76) 30%,rgba(0,0,0,.36) 54%,rgba(0,0,0,.1) 73%,transparent 87%),
      linear-gradient(to top,#000 0%,#000 34%,rgba(0,0,0,.5) 56%,rgba(0,0,0,.16) 74%,transparent 88%);
    mask-image:
      radial-gradient(circle var(--mag-r,300px) at var(--px,50%) var(--py,78%),
        #000 0%,rgba(0,0,0,.76) 30%,rgba(0,0,0,.36) 54%,rgba(0,0,0,.1) 73%,transparent 87%),
      linear-gradient(to top,#000 0%,#000 34%,rgba(0,0,0,.5) 56%,rgba(0,0,0,.16) 74%,transparent 88%);
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    mask-composite:intersect;
    transition:opacity .55s cubic-bezier(.16,1,.3,1);
  }
  .mesh-magnet .mesh-img{filter:blur(14px) saturate(1.85) brightness(1.1)}
  .tl-card:hover .mesh-magnet{opacity:.55}

  .tl-card:hover .mesh-clip--rest,
  .tl-card[data-state="active"] .mesh-clip--rest{opacity:.2}
  .tl-card:hover .mesh-clip--wide,
  .tl-card[data-state="active"] .mesh-clip--wide{opacity:.62}

  /* Bottom CTA area */
  .tl-card-bottom{position:relative;z-index:10;display:flex;align-items:stretch;justify-content:center;
    gap:10px;width:100%;padding:24px 30px;margin-top:auto}
  .pr-cta{position:relative;z-index:40;display:flex;align-items:center;justify-content:center;
    flex:1 1 auto;min-width:0;width:auto;height:48px;border-radius:12px;corner-shape:squircle;
    font-family:"Geist",sans-serif;font-size:15px;font-weight:500;text-decoration:none;
    background:rgba(255,255,255,.84);color:var(--midnight);
    border:1px solid rgba(11,53,88,.10);
    box-shadow:0 1px 2px rgba(11,53,88,.10),0 8px 20px -10px rgba(11,53,88,.28);
    transition:background .28s var(--ease-in-out),color .28s var(--ease-in-out),
               transform .28s var(--ease-in-out),box-shadow .28s var(--ease-in-out),
               border-color .28s var(--ease-in-out)}
  .tl-card:hover .pr-cta,
  .tl-card[data-state="active"] .pr-cta{background:var(--midnight);color:#fff;border-color:var(--midnight);
    transform:translateY(-2px);box-shadow:0 4px 14px rgba(11,53,88,.28)}
  .pr-cta:hover{background:#000;color:#fff;transform:translateY(-3px);box-shadow:0 6px 18px rgba(11,53,88,.38)}

  /* WhatsApp sits in the space freed by the narrower primary button */
  .pr-wa{position:relative;z-index:40;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
    width:48px;height:48px;border-radius:12px;corner-shape:squircle;text-decoration:none;
    background:rgba(255,255,255,.84);color:var(--midnight);
    border:1px solid rgba(11,53,88,.10);
    box-shadow:0 1px 2px rgba(11,53,88,.10),0 8px 20px -10px rgba(11,53,88,.28);
    transition:background .28s var(--ease-in-out),color .28s var(--ease-in-out),
               transform .28s var(--ease-in-out),box-shadow .28s var(--ease-in-out),
               border-color .28s var(--ease-in-out)}
  .pr-wa svg{width:20px;height:20px;display:block}
  .tl-card:hover .pr-wa,
  .tl-card[data-state="active"] .pr-wa{background:var(--midnight);color:#fff;border-color:var(--midnight);
    transform:translateY(-2px);box-shadow:0 4px 14px rgba(11,53,88,.28)}
  .pr-wa:hover{background:#1faa52;color:#fff;border-color:#1faa52;transform:translateY(-3px);
    box-shadow:0 6px 18px rgba(31,170,82,.36)}

  /* --- Social CTA buttons below pricing cards (WhatsApp & X) --- */
  .deck-socials{
    position:relative;
    z-index:20;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:16px;
    margin-top:40px;
    padding-bottom:12px;
  }
  .deck-social-btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:250px;
    max-width:100%;
    height:50px;
    padding:0 20px;
    box-sizing:border-box;
    border-radius:14px;
    corner-shape:squircle;
    color:#fff;
    font-family:"Geist",sans-serif;
    font-size:15px;
    font-weight:500;
    line-height:1;
    letter-spacing:-0.01em;
    white-space:nowrap;
    text-decoration:none;
    box-shadow:0 8px 24px -6px rgba(11,53,88,.24), 0 0 0 1px rgba(255,255,255,.45) inset;
    transition:transform .28s cubic-bezier(.2,0,0,1), box-shadow .28s cubic-bezier(.2,0,0,1), filter .28s ease;
    overflow:hidden;
  }
  .deck-social-btn::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    corner-shape:squircle;
    background:linear-gradient(180deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,0) 65%);
    pointer-events:none;
  }
  .deck-social-btn--wa{
    background:linear-gradient(135deg, #2fe675 0%, #1da851 52%, #0d7a38 100%);
  }
  .deck-social-btn--wa:hover{
    box-shadow:0 14px 34px -4px rgba(37,211,102,.55), 0 0 0 1px rgba(255,255,255,.75) inset;
    transform:translateY(-3px) scale(1.03);
  }
  .deck-social-btn--x{
    background:linear-gradient(135deg, #2e3c50 0%, #172231 52%, #090e16 100%);
  }
  .deck-social-btn--x:hover{
    box-shadow:0 14px 34px -4px rgba(11,53,88,.55), 0 0 0 1px rgba(255,255,255,.75) inset;
    transform:translateY(-3px) scale(1.03);
  }
  .deck-social-btn:active{
    transform:translateY(-1px) scale(.98);
  }
  .deck-social-ico{
    flex-shrink:0;
    position:relative;
    z-index:2;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.25));
    transition:transform .24s var(--ease-out);
  }
  .deck-social-ico--wa{
    width:22px;
    height:22px;
  }
  .deck-social-ico--x{
    width:18px;
    height:18px;
  }
  .deck-social-btn span{
    position:relative;
    z-index:2;
  }
  .deck-social-btn:hover .deck-social-ico{
    transform:scale(1.1);
  }

  /* ---------------- customer stories ---------------- */
  .st-stage{position:relative;width:100%;max-width:960px;margin:0 auto;height:513px}
  /* The radius and the inset the photograph sits in are one pair of numbers, so
     the frame inside a card can be given the corner that is actually concentric
     with the card's own — it was a flat 20px against a 64px card, which read as
     a rounded picture floating in a pill. */
  .st-card{--st-radius:64px;--st-inset:16px;
    position:absolute;left:50%;top:50%;background:#fff;border-radius:var(--st-radius);corner-shape:squircle;overflow:visible;
    transition:transform .6s var(--ease-in-out),width .6s var(--ease-in-out),height .6s var(--ease-in-out),opacity .4s;
    will-change:transform,width,height}
  .st-card[data-role="side"],.st-card[data-role="far"]{cursor:pointer}
  .st-card .shadow{position:absolute;inset:0;pointer-events:none;background:#fff;border-radius:inherit;corner-shape:squircle;
    filter:drop-shadow(0 10px 30px rgba(95,109,119,.08))}
  .st-card .clip{width:100%;height:100%;overflow:clip;position:relative;border-radius:inherit;corner-shape:squircle}
  /* The photograph is the small card's whole face, and on the wide card the
     same person is in the video slot, so the layer is simply a box that is
     either the card or that slot. It is never a loose shape floating over the
     copy, which is what made the change read as a double exposure. */
  .st-photo-layer{position:absolute;left:0;top:0;width:100%;height:100%;
    transition:opacity .45s var(--ease-in-out)}
  .st-photo-layer .pad{width:100%;height:100%;padding:var(--st-inset)}
  .st-photo-layer .frame{width:100%;height:100%;overflow:clip;position:relative;
    border-radius:calc(var(--st-radius) - var(--st-inset));corner-shape:squircle;background:var(--linen)}
  .st-photo-layer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .st-content{position:absolute;left:50%;top:50%;width:762px;height:513px;transform:translate(-50%,-50%);
    transition:opacity .45s var(--ease-in-out)}
  .st-content .row{width:100%;height:100%;display:flex;gap:16px;padding:16px;position:relative}
  .st-content .col{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:16px;gap:16px}
  .st-content h3{font-family:"Calendly Sans",sans-serif;font-weight:500;font-size:36px;line-height:1.1;letter-spacing:-1px;color:var(--midnight);width:100%}
  /* The opening quote used to hang outside the column, so the block it belongs
     to started half a character to the left of the title and of the names under
     it and nothing in the card lined up. It now sits on the column's own edge
     and the first line is indented past it by exactly its own width — the glyph
     measures .44em in this face at every size it is used at. */
  .st-quote{position:relative;min-width:0;width:100%;--q-mark:.44em}
  .st-quote .mark{font-family:"Wulkan Text",serif;font-weight:500;font-size:26px;line-height:1.2;color:var(--midnight);
    position:absolute;left:0;right:auto;top:0;white-space:pre;pointer-events:none}
  .st-quote p{font-family:"Wulkan Text",serif;font-weight:500;font-size:26px;line-height:1.2;color:var(--midnight);
    text-indent:var(--q-mark)}
  .st-meta{display:flex;gap:12px;min-width:0;width:100%;max-width:100%;overflow:hidden;align-items:flex-start}
  .st-meta .stack{display:flex;flex-direction:column;align-items:flex-start;min-width:0;max-width:100%;overflow:hidden;gap:0}
  /* The name and the role are a two-line caption under the quote, not two
     chips: without the plate behind them the text starts on the column's own
     edge with nothing to hand back, and the pair reads as one label. */
  .st-meta .badge{background:none;padding:2px 0;color:var(--n700)}
  .st-meta .dotrow{flex:none;display:flex;align-items:center;padding-inline:16px;height:8px}
  .st-media{position:relative;flex:none;overflow:clip;align-self:stretch;width:clamp(200px,50%,361px);
    border-radius:24px;corner-shape:squircle;background:var(--linen)}
  .st-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .st-dots{display:flex;align-items:center;gap:6px}
  .st-dot{height:8px;width:8px;border-radius:3px;overflow:hidden;background:var(--mid-a10);
    transition:width .3s var(--ease-in-out);flex:none}
  .st-dot[data-active="true"]{width:80px}
  .st-dot>i{display:block;height:100%;width:100%;border-radius:3px;background:var(--lake);transform-origin:0 50%;transform:scaleX(0)}

}

/* =====================================================================
   Air-side layout for the ported components + the gradient relocation
   ===================================================================== */
.cal-block{width:100%;max-width:1280px;margin-inline:auto;padding-inline:24px}

/* ---------------- 1 · product hero ---------------- */
/* The stage that used to carry the gradient is gone; the card floats on
   Air's sky and the gradient lives inside the card itself. */
.cal .mph-inner{max-width:1160px;margin-inline:auto}
.cal .mph-panel{
  grid-template-columns:minmax(0,360px) 1fr;
  gap:48px;
  align-items:stretch;
  min-height:390px;
  transition:opacity .45s cubic-bezier(.22,1,.36,1);
}
.cal .mph-panel-copy{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:20px;
  min-height:380px;
}
.cal .t-h3{font-size:34px;line-height:1.15;letter-spacing:-0.5px;min-height:78px}
.cal .t-body-md{font-size:16px;line-height:1.5;min-height:72px}
.cal .mph-panels{
  padding:44px 48px;
  min-height:480px;
  border-radius:48px;
  corner-shape:squircle;
  position:relative;
  overflow:hidden;
  background:rgba(252,251,248,.92);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:0 20px 50px -15px rgba(11,53,88,.12), 0 0 0 1px rgba(255,255,255,.6) inset;
}
.cal .mph-tab{width:64px;height:64px;cursor:pointer;transition:transform .22s cubic-bezier(.2,0,0,1)}
.cal .mph-tab:hover{transform:translateY(-2px)}
.cal .mph-tab:active{transform:scale(.95)}
.cal .mph-tab[aria-selected="true"]{transform:translateY(-1px)}
.cal .mph-goo-pill{display:none !important}
.cal .mph-tab .blob svg.mph-goo-neck{position:absolute;inset:auto;left:50%;top:100%;height:15px;width:32px;transform:translateX(-50%)}

.cal .mph-grad{
  position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  /* slide the artwork right and let it fade out under the copy column, so the
     headings read off a near-white card while the rest keeps its colour */
  -webkit-mask-image:linear-gradient(90deg,transparent 4%,rgba(0,0,0,.16) 20%,rgba(0,0,0,.55) 36%,rgba(0,0,0,.88) 50%,#000 64%);
          mask-image:linear-gradient(90deg,transparent 4%,rgba(0,0,0,.16) 20%,rgba(0,0,0,.55) 36%,rgba(0,0,0,.88) 50%,#000 64%);
}
.cal .mph-grad img{position:absolute;left:8%;top:0;height:100%;width:400%;max-width:none;filter:blur(70px);opacity:0;visibility:hidden;transition:opacity 1.05s cubic-bezier(.4,0,.2,1),visibility 0s 1.05s}
.cal .mph-grad img.is-current{opacity:.92;visibility:visible;transition:opacity 1.05s cubic-bezier(.4,0,.2,1),visibility 0s}
.cal .mph-grad::after{
  content:'';position:absolute;inset:0;z-index:1;opacity:0;visibility:hidden;pointer-events:none;
  background:var(--design-gradient) 50% 60% / cover;
  filter:blur(18px);
  transition:opacity 1.05s cubic-bezier(.4,0,.2,1),visibility 0s 1.05s
}
.cal .mph-panels[data-chapter="strategy"] .mph-grad::after{opacity:1;visibility:visible;transition:opacity 1.05s cubic-bezier(.4,0,.2,1),visibility 0s}
.cal .mph-panel{position:relative;z-index:1}

/* --- Visual rectangle matching yellow outline from image 4 with outer squircle radius --- */
.cal .mph-visual{
  position:relative;
  width:100%;
  height:100%;
  min-height:380px;
  align-self:stretch;
  border-radius:36px;
  corner-shape:squircle;
  background:rgba(195,223,254,.45);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  box-shadow:0 1px 2px rgba(11,53,88,.06), 0 0 0 1px rgba(255,255,255,.5) inset;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cal .mph-visual canvas{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  max-height:380px;
  display:block;
  object-fit:contain;
}

/* --- Rich micro-transitions between heros --- */
.cal .mph-panel .prod-row,
.cal .mph-panel .t-h3,
.cal .mph-panel .t-body-md,
.cal .mph-panel .link-underline{
  transition:transform .5s cubic-bezier(.16,1,.3,1), opacity .4s cubic-bezier(.16,1,.3,1);
  will-change:transform, opacity;
}
.cal .mph-panel[data-active="false"] .prod-row{
  transform:translateY(10px);
  opacity:0;
}
.cal .mph-panel[data-active="true"] .prod-row{
  transform:translateY(0);
  opacity:1;
  transition-delay:.03s;
}
.cal .mph-panel[data-active="false"] .t-h3{
  transform:translateY(14px);
  opacity:0;
}
.cal .mph-panel[data-active="true"] .t-h3{
  transform:translateY(0);
  opacity:1;
  transition-delay:.07s;
}
.cal .mph-panel[data-active="false"] .t-body-md{
  transform:translateY(16px);
  opacity:0;
}
.cal .mph-panel[data-active="true"] .t-body-md{
  transform:translateY(0);
  opacity:1;
  transition-delay:.11s;
}
.cal .mph-panel[data-active="false"] .link-underline{
  transform:translateY(16px);
  opacity:0;
}
.cal .mph-panel[data-active="true"] .link-underline{
  transform:translateY(0);
  opacity:1;
  transition-delay:.15s;
}

.cal .mph-panel .mph-visual{
  transition:transform .55s cubic-bezier(.16,1,.3,1), opacity .45s cubic-bezier(.16,1,.3,1);
  will-change:transform, opacity;
}
.cal .mph-panel[data-active="false"] .mph-visual{
  transform:scale(.96) translateY(8px);
  opacity:0;
}
.cal .mph-panel[data-active="true"] .mph-visual{
  transform:scale(1) translateY(0);
  opacity:1;
  transition-delay:.05s;
}

.cal .link-underline{text-decoration:none;background:none;cursor:pointer}
.cal .link-underline svg{width:20px;height:20px}

/* ---------------- 2 · timeline deck ---------------- */
.cal .tl-cards{max-width:1200px;margin-inline:auto}
.cal .tl-card{cursor:pointer}
.cal .tl-card[data-state="active"]{cursor:default}

/* ---------------- 3 · customer stories ---------------- */
#cal-stories{display:flex;flex-direction:column;align-items:center;width:100%;overflow:clip}
.cal .st-carousel-wrap{width:100%;display:flex;flex-direction:column;align-items:center;gap:48px;overflow:visible}
.cal .st-stage{position:relative;width:100%;max-width:960px;margin:0 auto;height:513px;transition:transform .3s var(--ease-in-out)}
.cal .st-card{cursor:default;--st-shrink:.1378;               /* side 105 / copy 762 */
  /* the video's box, grown by the photo's inset, as a share of the card */
  --st-slot-x:48.4252%;--st-slot-y:0%;--st-slot-w:51.5748%;--st-slot-h:100%;--st-slot-r:24px}
.cal .st-card[data-role="far"]{--st-shrink:.0971}            /* far  74  / copy 762 */
.cal .st-card[data-role="side"],.cal .st-card[data-role="far"]{cursor:pointer}
/* The copy is one fixed 762px block centred on a card that travels between
   105px and 762px wide. Left alone it is the card's own clip that reveals it,
   which is why the words looked like they slid in from the left: the window was
   opening around them. So the block is scaled to the card instead of being
   clipped by it. The numbers are not guesses — the card's width runs
   105 → 762 and the block's scale runs .1378 → 1 on the same curve over the
   same 600ms, and 762 × .1378 is 105, so the block's box tracks the card's
   width frame for frame and no edge ever cuts it. What is left to do is fade,
   and that fade now happens while the card is still moving rather than after it
   has stopped: an arrival during the movement reads as part of it, an arrival
   afterwards reads as a separate thing appearing. */
.cal .st-card .st-content{
  visibility:hidden;transform:translate(-50%,-50%) scale(var(--st-shrink));
  transition:transform .6s var(--ease-in-out),opacity .28s ease-in,visibility 0s linear .28s}
.cal .st-card[data-role="center"] .st-content{
  visibility:visible;transform:translate(-50%,-50%) scale(1);
  transition:transform .6s var(--ease-in-out),opacity .34s ease-out .1s,visibility 0s}
.cal .st-card .st-media{opacity:.4;transform:scale(.98);transition:opacity .24s ease-out,transform .4s ease-out}
.cal .st-card[data-role="center"] .st-media{opacity:1;transform:scale(1);transition-delay:.2s}
/* On the way in the photograph moves to the video's slot first and quickly,
   so the text column is clear before the copy has any opacity worth seeing,
   and only then does it fade, underneath a video of the same person that is
   already up. On the way out the order reverses: the photograph comes back in
   the slot while the video is still there to cover the swap, the words go, and
   the picture opens out into the room they leave behind. The two never share
   ground: at the slot its left edge is exactly the text column's right edge. */
.cal .st-photo-layer{
  transition:opacity .16s ease-out,
    left .34s var(--ease-out) .26s,top .34s var(--ease-out) .26s,
    width .34s var(--ease-out) .26s,height .34s var(--ease-out) .26s}
.cal .st-photo-layer .frame{transition:border-radius .34s var(--ease-out) .26s}
.cal .st-card[data-role="center"] .st-photo-layer{
  left:var(--st-slot-x);top:var(--st-slot-y);width:var(--st-slot-w);height:var(--st-slot-h);
  transition:opacity .2s ease-out .4s,
    left .34s var(--ease-out),top .34s var(--ease-out),
    width .34s var(--ease-out),height .34s var(--ease-out)}
.cal .st-card[data-role="center"] .st-photo-layer .frame{
  border-radius:var(--st-slot-r);transition:border-radius .34s var(--ease-out)}
.cal .st-dots{display:flex;align-items:center;justify-content:center;gap:6px}
.cal .st-dot{cursor:pointer;border:0;padding:0;background:rgba(255,255,255,.4)}
.cal .st-dot[data-active="true"]{background:rgba(255,255,255,.2)}
.cal .st-dot>i{background:#fff}

/* ---------------- responsive stage scaling ---------------- */
@media (max-width:1200px){ .cal .st-stage{transform:scale(.85);transform-origin:50% 50%;margin-block:-38px} }
@media (max-width:990px){ .cal .st-stage{transform:scale(.72);transform-origin:50% 50%;margin-block:-72px} }
/* =====================================================================
   The carousel stood up
   Below 860px imported.js swaps in the tall geometry; from here the card is
   a portrait one, copy over photograph. Nothing is scaled down any more, so
   the type is read at its real size, and the clip moves out to the full
   width of the screen so the cards on either side run off the edge instead
   of stopping at the container.
   ===================================================================== */
@media (max-width:860px){
  /* scoped to the carousel's own stage by id: the hero studies reuse the
     .st-stage class name for their own containers */
  .cal #st-stage{transform:none;margin-block:0;height:544px}

  /* the clip is the screen, not the padded column */
  .cal-block:has(#cal-stories){padding-inline:0;overflow:clip}
  #cal-stories{overflow:clip;width:100vw;max-width:100vw;margin-left:50%;transform:translateX(-50%)}
  .cal .st-carousel-wrap{gap:28px;overflow:clip}

  .cal .st-card{--st-radius:34px;--st-inset:8px;--st-shrink:.2171;   /* side 66 / copy 304 */
    /* stacked on a phone: the video sits under the words, not beside them */
    --st-slot-x:1.9737%;--st-slot-y:42.6145%;--st-slot-w:96.0526%;--st-slot-h:56.2405%;--st-slot-r:18px}
  .cal .st-card[data-role="far"]{--st-shrink:.1447}                  /* far  44 / copy 304 */

  /* copy on top, photograph underneath */
  .cal .st-content{width:304px;height:524px}
  .cal .st-content .row{flex-direction:column;gap:14px;padding:14px}
  /* Stacked like this the photograph is the widest thing on the card, so its
     frame is the edge everything else is read against. The column drops its own
     side padding and spans exactly the frame's width, which puts the title, the
     opening quote and the names on the frame's left line and ends the copy on
     its right one. */
  .cal .st-content .col{flex:0 0 auto;justify-content:flex-start;gap:10px;padding:10px 0 0}
  .cal .st-media{width:100%;align-self:auto;flex:1 1 auto;min-height:0;border-radius:18px}

  /* the copy was spaced for a 513px-tall column; here it sits close */
  .cal .st-content h3{font-size:23px;line-height:1.12;letter-spacing:-.4px}
  .cal .st-quote p,
  .cal .st-quote .mark{font-size:16px;line-height:1.25}
  .cal .st-meta{gap:8px}
  .cal .st-meta .dotrow{padding-inline:8px}

}

/* ---------------- responsive ---------------- */
@media (max-width:1240px){
  /* below the deck's natural width, scroll it sideways rather than rewrapping —
     rewrapping made the cards jump together on every state change */
  .cal-block:has(.tl-cards){overflow-x:auto;scrollbar-width:none}
  .cal-block:has(.tl-cards)::-webkit-scrollbar{display:none}
  .cal .tl-cards{min-width:1200px}
}
@media (max-width:1024px){
  /* the section is no longer pinned, so the visual goes back to its own ratio
     instead of being capped to fit one screen */
  .cal .mph-visual{height:auto;width:100%}
}
@media (max-width:940px){
  .cal .mph-panel{grid-template-columns:minmax(0,1fr);gap:32px}
  .cal .mph-panel-copy{width:100%}
  .cal .mph-panels{padding:32px}
  /* the panel is stacked now, so the copy sits above the visual rather than
     beside it — the fade has to run top-to-bottom or the headings end up on
     top of the strongest part of the artwork */
  .cal .mph-grad{
    -webkit-mask-image:linear-gradient(180deg,transparent 1%,rgba(0,0,0,.14) 14%,rgba(0,0,0,.5) 30%,rgba(0,0,0,.85) 44%,#000 58%);
            mask-image:linear-gradient(180deg,transparent 1%,rgba(0,0,0,.14) 14%,rgba(0,0,0,.5) 30%,rgba(0,0,0,.85) 44%,#000 58%);
  }
  .cal .mph-grad img{left:-20%;width:220%}
}

/* ===================== phones ===================== */
@media (max-width:860px){
  /* --- 4-step deck: stack it, every card fully open --- */
  .cal-block:has(.tl-cards){overflow-x:visible}
  .cal .tl-cards{min-width:0;max-width:440px;flex-direction:column;gap:16px}
  .cal .tl-card,
  .cal .tl-card[data-state="active"]{flex:0 0 auto;width:100%;height:auto;min-height:0;transform:none;
    box-shadow:0 16px 36px -14px rgba(11,53,88,.18)}
  .cal .tl-visual .grad{opacity:1}
  .cal .tl-card-top{padding:24px 24px 0}
  .cal .tl-card h3{font-size:24px}
  .cal .pr-price{font-size:38px}
  .cal .pr-blurb{margin-bottom:14px}
  .cal .tl-visual{height:96px;margin-top:12px}
  .cal .pr-cta{width:auto;margin-bottom:0}
  .cal .tl-card-bottom{padding:20px 24px}

}
@media (max-width:680px){
  .cal-block{padding-inline:16px}
  .cal .t-h3{font-size:28px}
  .cal .mph-panels{padding:22px 20px;border-radius:32px;min-height:0}
  .cal .mph-tab{width:52px;height:52px}
  .cal .mph-tabs{gap:6px}

  /* The desktop panel reserves a fixed height for each block and pushes the
     link to the floor with space-between, which on a phone opens two large
     holes: one under the heading and one above the link. Here the copy simply
     stacks at its natural height. */
  .cal .mph-panel{gap:20px;min-height:0}
  .cal .mph-panel-copy{justify-content:flex-start;gap:12px;min-height:0}
  .cal .t-h3{min-height:0;line-height:1.18}
  .cal .t-body-md{min-height:0;font-size:15px}
  .cal .mph-panel .prod-row{gap:8px}
  .cal .mph-panel .link-underline{padding-top:2px}

  /* The gradient is masked left-to-right, which keeps it off the copy while
     the panel is two columns. Stacked, that mask does nothing and the colour
     sits straight behind the text, so on a phone it is masked top-to-bottom
     instead and gathers under the study rather than over the words. */
  .cal .mph-grad{
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.05) 30%,rgba(0,0,0,.3) 48%,rgba(0,0,0,.72) 64%,#000 78%);
            mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.05) 30%,rgba(0,0,0,.3) 48%,rgba(0,0,0,.72) 64%,#000 78%);
  }
  .cal .mph-grad img{left:0;width:400%;filter:blur(80px)}
  .cal .mph-grad img.is-current{opacity:.8}

  .cal .mph-visual{min-height:250px;aspect-ratio:auto;border-radius:24px}
}

/* ---------------- Air-side section spacing ---------------- */
.overline{
  display:block;font-family:var(--font-head);font-size:12px;line-height:1.4;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.85);margin-bottom:14px;
}
.s--demo{padding:36px 0 32px}
.s--demo .u-h2-large{margin-bottom:0}
.s--demo .cal-block{margin-top:56px}

/* the library section is pinned: scrolling it steps through the products */
.s--library{height:calc(100lvh * 3.2);padding-top:0}
.s--library__sticky{
  position:sticky;
  top:var(--lib-sticky-top, -140px);
  min-height:100lvh;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:16px;
  padding-top:var(--hdr-h);
  padding-bottom:36px;
  box-sizing:border-box;
}
.s--library .u-body{
  max-width:540px;
  margin:0 auto 16px;
  color:rgba(255,255,255,.92);
}
.s--library .cal-block{margin-top:0}
/* one-column panels are taller than a short viewport, so below the stacking
   breakpoint the section unpins and simply scrolls */
@media (max-width:1024px){
  .s--library{height:auto;padding:96px 0}
  .s--library__sticky{position:static;min-height:0;padding-top:0;gap:32px}
  .s--library .u-body{margin:0 auto 30px}
}

/* no negative margin here: the original lets the pinned section finish before
   the next one starts, and riding up into it put the deck's heading on top of
   the last word while SCALE was still fading */
/* the pinned triptych leaves ~300px of empty tail after CONVERT fades; the
   deck starts inside it so the two sections read as continuous */
.s--deck{padding:20px 0 24px;margin-top:-520px;position:relative;z-index:2}
.s--deck .u-h2-large{margin-bottom:16px}
.s--deck .cal-block{margin-top:34px}

/* =====================================================================
   phone vertical rhythm — declared last so it wins over the desktop
   section paddings above, which are tuned for a 900px viewport
   ===================================================================== */
@media (max-width:860px){
  .tl-card{--mag-r:210px}
  .s--demo{padding:16px 0 4px}
  .s--demo .cal-block{margin-top:28px}
  .s--deck{padding:16px 0 24px;margin-top:-300px}
  .s--deck .cal-block{margin-top:26px}
  .s--library{padding:44px 0}
  .s--library__sticky{gap:22px}
}

/* =====================================================================
   the gradient plate's idle travel — top level, as @keyframes must be
   ===================================================================== */
@keyframes gradDrift{
  0%   {transform:translate3d(-4%,2%,0) scale(1.06)}
  50%  {transform:translate3d(5%,-3%,0) scale(1.16)}
  100% {transform:translate3d(-2%,4%,0) scale(1.08)}
}
@media (prefers-reduced-motion: reduce){
  .mesh-img{animation-duration:40s}
}


/* =====================================================================
   Hero studies — four chapters, one visual language and scene-specific clocks
   ===================================================================== */
.cal .mph-visual {
  background: #fff;
  box-shadow: 0 1px 2px rgba(11, 53, 88, .08), 0 0 0 1px rgba(11, 53, 88, .07) inset;
  container-type: inline-size;
}
.hviz {
  --ink: #0b2d5c;
  --blue: #2b84ff;
  --line: rgba(11, 45, 92, .14);
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 3cqw, 20px);
  padding: clamp(17px, 5cqw, 32px);
  overflow: hidden;
  color: var(--ink);
  background: radial-gradient(circle at 84% 16%, rgba(126, 190, 255, .12), transparent 38%), #fff;
}
.hviz i, .hviz b, .hviz u, .hviz s { display: block; font-style: normal; text-decoration: none }
.hviz .hs-head, .hviz .hs-foot { position: relative; z-index: 2; display: flex; align-items: center }
.hviz .hs-head {
  justify-content: space-between;
  font: 600 clamp(9px, 2cqw, 12px)/1.2 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hviz .hs-head span { color: rgba(11, 45, 92, .45) }
.hviz--strategy { --blue: #67ba6e; --chapter: #67ba6e; --chapter-grad: var(--design-gradient) }
.hviz--design { --blue: #2b84ff; --chapter: #2b84ff; --chapter-grad: linear-gradient(90deg, #b9dfff, #2b84ff) }
.hviz--build { --blue: #2b84ff; --chapter: #a783d3; --chapter-grad: var(--build-gradient) }
.hviz--growth { --blue: #a1ded7; --chapter: #a1ded7; --chapter-grad: linear-gradient(90deg, #C5F1EE, #E8F3ED) }
.hviz .hs-stage { position: relative; flex: 1; min-height: 0 }
.hviz .hs-cursor {
  position: absolute; z-index: 5; width: 18px; height: 21px;
  background: #000;
  clip-path: polygon(0 0, 0 100%, 4px 12px, 7px 18px, 10px 16px, 7px 11px, 15px 10px);
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, .8));
  pointer-events: none
}
.hviz .hs-foot { gap: 6px }
.hviz .hs-foot i { position: relative; flex: 1; height: 3px; border-radius: 9px; background: rgba(11, 45, 92, .09) }
.hviz--growth .hs-foot i:nth-child(1),
.hviz--strategy .hs-foot i:nth-child(2),
.hviz--design .hs-foot i:nth-child(3),
.hviz--build .hs-foot i:nth-child(4) { background: var(--chapter-grad) }
.hviz .hs-gradient-sample { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: #fcfbf8; pointer-events: none }
.hviz .de-art-stage { display: grid; place-items: center; padding: clamp(6px, 2cqw, 12px) }
.hviz .de-art-stage .ad-stage { border: 1px solid transparent }


/* Build: one page changes device shape without leaving centre. */
.hviz .bu-device {
  position: absolute; left: 50%; top: 50%; width: 88%; height: 82%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; gap: clamp(3px, 1cqw, 7px);
  padding: clamp(5px, 1.8cqw, 12px); border: 1px solid rgba(157, 123, 240, .24);
  border-radius: clamp(6px, 1.8cqw, 12px); background: white;
  box-shadow: 0 18px 35px -20px rgba(9, 51, 105, .5);
}
.hviz .bu-bar { display: flex; gap: 3px; height: 8%; border-bottom: 1px solid var(--line) }
.hviz .bu-bar b { flex: 0 0 auto; align-self: flex-start; width: clamp(2px, .7cqw, 4px); height: clamp(2px, .7cqw, 4px); border-radius: 50%; background: #1e5ea7 }
.hviz .bu-bar b:first-child { background: #6bb1ff }
.hviz .bu-bar b:last-child { background: #eb8be7 }
.hviz .bu-art { position: relative; height: 47%; overflow: hidden; border-radius: 4px; background: #a783d3 }
.hviz .bu-art::before, .hviz .bu-button::before { content: ''; position: absolute; inset: -20%; background: var(--build-gradient) 66.666667% 50% / 400% 100%; filter: blur(22px) }
.hviz .bu-button::before { inset: auto; left: -20%; top: 50%; width: 140%; height: 150px; transform: translateY(-50%) rotate(-25deg); filter: blur(18px) }
.hviz .bu-art::after { content: ''; position: absolute; width: 63%; aspect-ratio: 1; border: 6px solid rgba(255, 255, 255, .5); border-radius: 50%; right: -18%; top: -65% }
.hviz .bu-line { width: 78%; height: 4px; border-radius: 9px; background: rgba(11, 45, 92, .2) }
.hviz .bu-line--short { width: 54%; background: rgba(11, 45, 92, .11) }
.hviz .bu-button { position: relative; overflow: hidden; width: 42%; height: 10%; min-height: 5px; margin-top: auto; border-radius: 4px; background: #a783d3 }
.hviz.is-play .bu-device { animation: buMorph 8s cubic-bezier(.76, 0, .24, 1) infinite }
.hviz.is-play .bu-button { animation: buButtonFit 8s cubic-bezier(.76, 0, .24, 1) infinite }
@keyframes buButtonFit { 0%,17%,59%,100% { height:10% } 31%,44% { height:8% } }
@keyframes buMorph {
  0%, 17% { width: 88%; height: 82%; border-radius: 12px }
  31%, 44% { width: 27%; height: 78%; border-radius: 19px }
  59%, 72% { width: 57%; height: 80%; border-radius: 15px }
  88%, 100% { width: 88%; height: 82%; border-radius: 12px }
}


/* Strategy: the Pro card itself becomes the page. */
.hviz .stx-stage { isolation: isolate }
.hviz .stx-pricing, .hviz .stx-page-pricing {
  position: absolute; left: 2%; top: 9%; width: 96%; height: 82%;
  display: flex; gap: 2.2%; align-items: stretch;
}
.hviz .stx-pricing { z-index: 1 }
.hviz .stx-tier {
  --tier-light: #d8ebff;
  position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
  gap: clamp(4px, 1cqw, 8px); padding: clamp(8px, 1.7cqw, 14px);
  overflow: hidden; border: 1px solid #d8dfe6; border-radius: clamp(9px,2cqw,17px);
  background: linear-gradient(0deg,var(--tier-light),#fff 55%);
  box-shadow: 0 7px 18px -15px rgba(11,45,92,.55);
}
.hviz .stx-pricing > .stx-tier { position: absolute }
.hviz .stx-tier--1 { --tier-light: #e6f6cb; z-index: 2 }
.hviz .stx-tier--2 { --tier-light: #e8dcff }
.hviz .stx-name { font: 600 clamp(9px,1.8cqw,13px)/1.15 var(--font-body) }
.hviz .stx-tier strong { font: 600 clamp(17px,3.7cqw,29px)/1 var(--font-body); letter-spacing: -.04em }
.hviz .stx-tier > i { width: 76%; height: clamp(3px,.7cqw,5px); border-radius: 9px; background: rgba(11,45,92,.14) }
.hviz .stx-tier > i:nth-of-type(2) { width: 56%; background: rgba(11,45,92,.09) }
.hviz .stx-buy {
  display: grid; place-items: center; width: 100%; min-height: clamp(18px,4.7cqw,30px);
  margin-top: auto; border: 1px solid rgba(11,45,92,.12); border-radius: clamp(5px,1.3cqw,9px);
  background: rgba(255,255,255,.9); color: var(--ink); font: 600 clamp(7px,1.5cqw,10px)/1 var(--font-body);
}
.hviz .stx-cursor { left: 0; top: 0; opacity: 0 }
.hviz .stx-portal { position: absolute; left: -1px; top: -1px; display: block; overflow: hidden; opacity: 0 }
.hviz .stx-page-content { position: absolute; inset: 0 }
.hviz .stx-page-hero { position: absolute; left: 8%; top: 7%; width: 84%; display: flex; flex-direction: column; gap: 7% }
.hviz .stx-browser { display: flex; align-items: center; gap: 4px; height: 10%; border-bottom: 1px solid var(--line) }
.hviz .stx-browser b { width: clamp(3px,.8cqw,5px); aspect-ratio: 1; border-radius: 50%; background: var(--design-gradient) 50% 60% / cover }
.hviz .stx-page-art { width: 100%; height: 40%; border-radius: 8px; background: var(--design-gradient) 50% 60% / cover }
.hviz .stx-page-rule { width: 62%; height: 5%; border-radius: 8px; background: rgba(11,45,92,.18) }
.hviz .stx-page-rule--short { width: 42%; background: rgba(11,45,92,.1) }
.hviz .stx-page-cta { width: 30%; height: 13%; border-radius: 6px; background: var(--design-gradient) 50% 60% / cover }
.hviz .stx-page-pricing { transform-origin: center top }
.hviz .stx-page-section { position: absolute; left: 8%; width: 84%; display: flex; flex-direction: column; gap: 8%; justify-content: center }
.hviz .stx-page-section:nth-child(2) { flex-direction: row; align-items: center; gap: 7% }
.hviz .stx-page-section:nth-child(2) > .stx-page-art { width: 45%; height: 70% }
.hviz .stx-page-section > span:not(.stx-proof) { flex: 1; height: 55%; display: flex; flex-direction: column; gap: 15% }
.hviz .stx-proof { display: flex; gap: 5%; height: 55% }
.hviz .stx-proof i { flex: 1; border: 1px solid var(--line); border-radius: 8px; background: var(--design-gradient) 50% 60% / cover }

/* Growth: Google Search is rebuilt into its exact opening composition. */
.hviz .gx-stage { isolation: isolate; container-type: size }
.hviz .gx-logo { position: absolute; left: 29%; top: 15%; width: 42%; height: auto; overflow: visible }
.hviz .gx-google {
  --gx-pill: clamp(54px,15cqw,78px);
  position: absolute; left: 2%; top: 54%; width: 96%; height: clamp(34px,12cqh,52px);
  display: flex; align-items: center; gap: clamp(5px,1.65cqw,10px);
  padding: 0 clamp(8px,2cqw,14px); border: 1px solid #e2e3e7; border-radius: 999px;
  background: #fff; box-shadow: 0 2px 7px rgba(45,53,62,.08); transform-origin: center;
}
.hviz .gx-plus { width: clamp(13px,3.8cqw,21px); height: clamp(13px,3.8cqw,21px); flex: none; overflow: visible }
.hviz .gx-query { flex: 1; min-width: 0; display: flex; align-items: center; white-space: nowrap; color: #303238; font: 400 clamp(8px,2.35cqw,14px)/1 Arial,sans-serif }
.hviz .gx-typed { flex: none }
.hviz .gx-caret { width: 1px; height: 1.1em; margin-left: 1px; background: #45474a; flex: none; opacity: 0 }
.hviz .gx-mic, .hviz .gx-lens { display: block; flex: none; width: clamp(11px,3cqw,18px); height: clamp(11px,3cqw,18px); color: #444 }
.hviz .gx-mic svg, .hviz .gx-lens svg { display: block; width: 100%; height: 100% }
.hviz .gx-search { flex: 0 0 var(--gx-pill); height: 76%; position: relative; display: grid; place-items: center; color: #444 }
.hviz .gx-search::before { content: ''; position: absolute; right: 0; top: 50%; width: var(--pill-width,var(--gx-pill)); height: var(--pill-height,100%); border-radius: 999px; background: #edeef0; transform: translateY(-50%) }
.hviz .gx-search > span { position: relative; display: flex; gap: 3px; align-items: center; justify-content: center }
.hviz .gx-search svg { width: clamp(12px,3cqw,17px); height: clamp(12px,3cqw,17px) }
.hviz .gx-search b { font: 400 clamp(9px,2.15cqw,13px)/1 Arial,sans-serif }
.hviz .gx-results { position: absolute; left: 6%; top: 34%; width: 88%; height: 55%; display: flex; flex-direction: column; gap: 6%; opacity: 0 }
.hviz .gx-result { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 10%; padding: 2% 3%; border-radius: 9px; background: #fff }
.hviz .gx-result--first { flex: 1.55; border: 1px solid rgba(66,133,244,.2) }
.hviz .gx-result small { color: #60758c; font: 400 clamp(7px,1.7cqw,10px)/1.2 Arial,sans-serif }
.hviz .gx-result strong { color: #1a0dab; font: 400 clamp(8px,2.25cqw,14px)/1.3 Arial,sans-serif }
.hviz .gx-result-caret { color: #42474e }
.hviz .gx-result i { width: 80%; height: clamp(2px,.7cqw,4px); border-radius: 5px; background: #d4dde5 }
.hviz .gx-result i:last-child { width: 55% }
.hviz .gx-cursor { left: 0; top: 0; opacity: 0 }

@media (prefers-reduced-motion: reduce) {
  .hviz.is-play .hs-stage, .hviz.is-play .hs-stage *, .hviz.is-play .hs-stage::before { animation: none !important }
  .hviz .go-chart { stroke-dashoffset: 0 }
}

/* The carousel indicator is compact again; the fill is clipped to its pill. */
.cal .st-dot{position:relative;width:8px;height:8px;margin:0;display:block;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.4)}
.cal .st-dot[data-active="true"]{width:80px;background:rgba(255,255,255,.2)}
.cal .st-dot>i,.cal .st-dot[data-active="true"]>i{position:relative;width:100%;height:100%;border-radius:inherit}

/* =====================================================================
   Customer Stories - Video Player Component & Controls
   ===================================================================== */
.st-video-box {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background: #0b1522;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.st-video-box video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

@media (max-width: 860px) {
  .st-video-box { background-size: cover; background-position: center; }
  .st-video-box:not([data-frame-ready="true"]) video { opacity: 0; }
}

/* Vignette sutil para legibilidade */
.st-video-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(4, 26, 66, 0.35) 0%,
    rgba(4, 26, 66, 0.02) 24%,
    rgba(4, 26, 66, 0.05) 55%,
    rgba(4, 26, 66, 0.6) 100%
  );
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.2, 0, 0, 1);
  z-index: 2;
}

/* Botão Flutuante de Som no Topo (Canto Superior Direito) */
.st-vfloat-bar {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s cubic-bezier(0.2, 0, 0, 1), transform 0.25s cubic-bezier(0.2, 0, 0, 1);
}

/* Estilo transparente idêntico aos cards de 'Everything a page needs, built in' */
.st-vfloat-btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
  font-family: "Calendly Sans", system-ui, -apple-system, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow: 0 10px 30px -10px rgba(4, 26, 66, 0.5);
  transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1), background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.st-vfloat-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.42);
  transform: translateY(-1.5px);
  box-shadow: 0 14px 32px -8px rgba(4, 26, 66, 0.65);
}

.st-vfloat-btn:active {
  transform: scale(0.95);
}

.st-vfloat-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: block;
}

/* Botão de som mudo em VERMELHO */
.st-video-box[data-muted="true"] .st-btn-float-sound,
.st-video-box[data-muted="true"] .st-btn-vol-toggle {
  border-color: rgba(239, 68, 68, 0.65) !important;
  background: rgba(239, 68, 68, 0.22) !important;
  color: #ff5252 !important;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.28) !important;
}

/* Botão Central de Play - Estilo Transparente Glass */
.st-vcenter-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  cursor: pointer;
  box-shadow: 0 20px 48px -18px rgba(4, 26, 66, 0.6);
  transition: transform 0.26s cubic-bezier(0.2, 0, 0, 1), background 0.2s ease, border-color 0.2s ease, opacity 0.25s ease;
}

.st-vcenter-btn:hover {
  transform: translate(-50%, -50%) scale(1.08);
  background: rgba(255, 255, 255, 0.24);
  border-color: rgba(255, 255, 255, 0.55);
}

.st-vcenter-btn:active {
  transform: translate(-50%, -50%) scale(0.95);
}

.st-vcenter-btn svg {
  width: 24px;
  height: 24px;
  display: block;
}

.st-vcenter-pulse {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  animation: stVideoPulse 2.2s infinite ease-out;
  pointer-events: none;
}

@keyframes stVideoPulse {
  0% { transform: scale(0.95); opacity: 0.8; }
  60% { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* Quando tocando: botão central some; ao pausar: aparece */
.st-video-box[data-state="playing"] .st-vcenter-btn {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.85);
}

/* Alternância de ícones play / pause */
.st-video-box[data-state="playing"] .st-icon-play,
.st-video-box[data-state="playing"] .st-center-icon-play {
  display: none !important;
}

.st-video-box[data-state="paused"] .st-icon-pause,
.st-video-box[data-state="paused"] .st-center-icon-pause {
  display: none !important;
}

/* Alternância de ícones de som */
.st-video-box[data-muted="true"] .st-icon-sound-on,
.st-video-box[data-muted="true"] .st-vol-high,
.st-video-box[data-muted="true"] .st-vol-low {
  display: none !important;
}

.st-video-box[data-muted="false"] .st-icon-sound-off,
.st-video-box[data-muted="false"] .st-vol-mute {
  display: none !important;
}

.st-video-box[data-muted="false"][data-vol-level="high"] .st-vol-low {
  display: none !important;
}

.st-video-box[data-muted="false"][data-vol-level="low"] .st-vol-high {
  display: none !important;
}

/* Barra de Controles Inferior */
.st-vcontrols {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 14px 14px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.2, 0, 0, 1), transform 0.35s cubic-bezier(0.2, 0, 0, 1);
}

/* Regras de Visibilidade dos Controles:
   - Invisíveis por padrão durante reprodução
   - Ficam visíveis quando data-controls-visible="true" (no hover ou com delay de 0.8s após sair)
   - Sempre visíveis quando pausado
*/
.st-video-box[data-controls-visible="true"] .st-vfloat-bar,
.st-video-box[data-controls-visible="true"] .st-vcontrols {
  opacity: 1;
  pointer-events: auto;
}
.st-video-box[data-controls-visible="true"] .st-video-vignette {
  opacity: 1;
  pointer-events: none !important;
}

.st-video-box[data-state="paused"] .st-vfloat-bar,
.st-video-box[data-state="paused"] .st-vcontrols {
  opacity: 1;
  pointer-events: auto;
}
.st-video-box[data-state="paused"] .st-video-vignette {
  opacity: 1;
  pointer-events: none !important;
}

/* Scrubber / Timestamp Clicável */
.st-vscrub-wrap {
  width: 100%;
  height: 18px;
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  touch-action: none;
}

.st-vscrub-track {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  position: relative;
  transition: height 0.16s ease;
}

.st-vscrub-wrap:hover .st-vscrub-track,
.st-vscrub-wrap.is-dragging .st-vscrub-track {
  height: 6px;
}

.st-vscrub-buffered {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: rgba(255, 255, 255, 0.35);
  border-radius: inherit;
  transition: width 0.2s ease;
}

/* Branco na barra de progresso do vídeo */
.st-vscrub-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: #ffffff;
  border-radius: inherit;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.45);
}

.st-vscrub-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%) scale(0);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.6);
  transition: transform 0.15s ease;
}

.st-vscrub-wrap:hover .st-vscrub-thumb,
.st-vscrub-wrap.is-dragging .st-vscrub-thumb {
  transform: translate(-50%, -50%) scale(1);
}

.st-vscrub-tip {
  position: absolute;
  bottom: 22px;
  left: 0%;
  transform: translateX(-50%);
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(4, 26, 66, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-family: "Calendly Sans", system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.st-vscrub-wrap:hover .st-vscrub-tip,
.st-vscrub-wrap.is-dragging .st-vscrub-tip {
  opacity: 1;
}

/* Control Buttons Row - Mesma distância de 6px entre todos os blocos */
.st-vctrl-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.st-vctrl-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.st-vctrl-right {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

/* Botões com Transparência Glass igual ao .fcard - Altura uniforme 30px */
.st-vctrl-btn {
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  flex-shrink: 0;
  box-shadow: 0 8px 24px -8px rgba(4, 26, 66, 0.4);
}

.st-vctrl-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.42);
  color: #ffffff;
  transform: translateY(-1px);
}

.st-vctrl-btn:active {
  transform: scale(0.92);
}

.st-vctrl-btn svg {
  width: 15px;
  height: 15px;
  display: block;
}

/* -5s e +5s Buttons - Altura exata 30px */
.st-btn-step {
  box-sizing: border-box;
  width: auto;
  min-width: 34px;
  height: 30px;
  padding: 0 6px;
  gap: 2.5px;
  font-family: "Calendly Sans", system-ui, sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.st-btn-step svg {
  width: 12px;
  height: 12px;
}

/* Timestamp Button (Mostrador de tempo) - Altura exata de 30px e visual compacto */
.st-vtime-btn {
  box-sizing: border-box;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 8px;
  padding: 0 7px;
  color: rgba(255, 255, 255, 0.95);
  font-family: "Calendly Sans", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
  cursor: default;
  white-space: nowrap;
  box-shadow: 0 8px 24px -8px rgba(4, 26, 66, 0.4);
}

.st-vtime-sep {
  opacity: 0.45;
  margin: 0 2px;
}

/* Volume Group & Range Slider - Altura exata 30px e preenchimento harmônico */
.st-vvol-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  gap: 3px;
  position: relative;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 8px;
  padding: 0 8px 0 1px;
  box-shadow: 0 8px 24px -8px rgba(4, 26, 66, 0.4);
}

.st-vvol-wrap .st-vctrl-btn {
  width: 26px;
  height: 100%;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Slider de volume em branco e largura expandida ocupando o espaço restante */
.st-vvol-slider {
  flex: 1;
  width: 100%;
  min-width: 40px;
  height: 3.5px;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  accent-color: #ffffff;
  outline: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.st-vvol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #ffffff;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s ease;
}

.st-vvol-slider::-webkit-slider-thumb:hover {
  transform: scale(1.25);
}

.st-vvol-slider::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border: 1px solid #ffffff;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* Resting Card Photo Layer Styling for Video Card */
.st-photo-video-card {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, #13243a 0%, #08111d 100%);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: inherit;
  overflow: hidden;
}

.st-photo-video-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-family: "Calendly Sans", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
}

.st-photo-video-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  color: #071a31;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.st-photo-video-circle svg {
  width: 18px;
  height: 18px;
}

/* Mobile adjustments */
@media (max-width: 860px) {
  .st-vfloat-bar {
    top: 10px;
    left: 10px;
    right: 10px;
  }
  .st-vfloat-btn {
    padding: 5px 10px;
    font-size: 10.5px;
  }
  .st-vcontrols {
    padding: 28px 10px 10px;
  }
  .st-vtime-btn {
    position: absolute;
    top: 4px;
    left: 10px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .st-vvol-slider {
    width: 42px;
  }
  .st-btn-step span {
    display: inline-block;
  }
}