/* Phone pricing: tappable stat tiles + liquid pill adapted to touch (research/phone-v7/cursor-footer-pricing.md §3).
   Transforms and colour are driven by price-press.js through the Web Animations API (the tiles and the pill already carry the
   phone-reveal transform/opacity transitions; a CSS transition here would overwrite them). This file only holds the static
   parts: the stretched link, the fill layer (a pseudo element with its own transition) and the focus rings. */
@media (max-width:940px){
  .phs-price .st{position:relative;-webkit-tap-highlight-color:transparent}
  .phs-price .st-go{position:absolute;inset:0;border-radius:inherit;z-index:1;-webkit-tap-highlight-color:transparent}
  .phs-price .st-go:focus-visible{outline:2px solid #000;outline-offset:3px}
  /* affordance (OPTION, owner call): Cuberto's card-link glyph (sprite arrow-up-right, 16 box, stroke 2), 2rem, top-right on the tile padding */
  .phs-price .st::after{content:"";position:absolute;top:31.2px;right:31.2px;width:20.8px;height:20.8px;background:currentColor;opacity:.5;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath stroke='%23000' stroke-width='2' d='M3 13 13 3m0 8.65V3H4.35'/%3E%3C/svg%3E") center/contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath stroke='%23000' stroke-width='2' d='M3 13 13 3m0 8.65V3H4.35'/%3E%3C/svg%3E") center/contain no-repeat;
    pointer-events:none}
  /* pill: Cuberto CtaButton ripple = dome fill translateY(101%) to 0, radius 50% 50% 0 0 to 0, cubic-bezier(.4,0,0,1) */
  .phs-price .phs-pill{position:relative;overflow:hidden;isolation:isolate;-webkit-tap-highlight-color:transparent}
  .phs-price .phs-pill::before{content:"";position:absolute;inset:-1px;z-index:-1;background:#000;border-radius:50% 50% 0 0;
    transform:translateY(101%);transition:transform .5s cubic-bezier(.4,0,0,1),border-radius .5s cubic-bezier(.4,0,0,1);pointer-events:none}
  .phs-price .phs-pill.is-on::before{transform:translateY(0);border-radius:0;transition-duration:.5s,.9s}
  .phs-price .phs-pill:focus-visible{outline:2px solid #000;outline-offset:3px}
}
@media (max-width:940px) and (prefers-reduced-motion:reduce){ .phs-price .phs-pill::before{transition:none} }