/* Pricing cards in the "Squishy Pricing" style (built from the owner's description; the reference code was not supplied).
   Everything is scoped under .sq. Card colours are solid tokens below; text on every card is white or a light tint
   checked for WCAG AA (>= 4.5:1) against the card colour with the light shape layered on top (tests/pricing.test.mjs). */
.sq{container-type:inline-size;--sq-ink:#fff;--sq-navy:#131a32;--sq-cream:#fdf8f3;--sq-spring:cubic-bezier(.34,1.56,.64,1);--sq-light:rgba(255,255,255,.1);--sq-dark:rgba(19,26,50,.22)}
.sq .sq-card[data-tone=indigo]{--sq-bg:#4338ca;--sq-soft:#e8e6ff}
.sq .sq-card[data-tone=purple]{--sq-bg:#623be8;--sq-soft:#f0ebff}
.sq .sq-card[data-tone=pink]{--sq-bg:#be185d;--sq-soft:#ffe8f1}
:root[data-theme=dark] .sq .sq-card[data-tone=indigo]{--sq-bg:#3730a3}
:root[data-theme=dark] .sq .sq-card[data-tone=purple]{--sq-bg:#5530d0}
:root[data-theme=dark] .sq .sq-card[data-tone=pink]{--sq-bg:#a3164f}
@media(prefers-color-scheme:dark){
  :root:not([data-theme=light]):not([data-theme=dark]) .sq .sq-card[data-tone=indigo]{--sq-bg:#3730a3}
  :root:not([data-theme=light]):not([data-theme=dark]) .sq .sq-card[data-tone=purple]{--sq-bg:#5530d0}
  :root:not([data-theme=light]):not([data-theme=dark]) .sq .sq-card[data-tone=pink]{--sq-bg:#a3164f}
}

/* layout: 1 column; 2 + 1 (centred) on medium containers; 3 balanced columns on wide ones */
.sq .sq-grid{list-style:none;margin:1rem 0 1.25rem;padding:0;display:grid;gap:1.25rem;grid-template-columns:minmax(0,1fr)}
.sq .sq-cell{display:flex;min-width:0;transform-origin:50% 100%}
@container (min-width:560px){
  .sq .sq-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sq .sq-cell:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - .625rem)}
}
@container (min-width:900px){
  .sq .sq-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sq .sq-cell:last-child:nth-child(odd){grid-column:auto;justify-self:stretch;width:auto}
}

/* the card (keeps the legacy .plan class for existing journeys; these rules override its look) */
.sq .sq-card{position:relative;isolation:isolate;overflow:hidden;flex:1;min-width:0;display:flex;min-height:30rem;margin:0;padding:0;border:0;border-radius:28px;
  background:var(--sq-bg);color:var(--sq-ink);box-shadow:0 2px 4px rgba(19,26,50,.08),0 18px 40px -18px rgba(19,26,50,.55);
  transform:scale(1);transition:transform .55s var(--sq-spring),box-shadow .4s ease}
.sq .sq-card.cur{box-shadow:0 0 0 3px var(--bg),0 0 0 6px var(--sq-bg),0 18px 40px -18px rgba(19,26,50,.55)}
@media(hover:hover){.sq .sq-card:hover{transform:scale(1.03);box-shadow:0 4px 8px rgba(19,26,50,.1),0 30px 60px -20px rgba(19,26,50,.6)}}
.sq .sq-card:focus-within{transform:scale(1.03);box-shadow:0 4px 8px rgba(19,26,50,.1),0 30px 60px -20px rgba(19,26,50,.6)}

/* geometric shapes behind the content */
.sq .sq-shapes{position:absolute;inset:0;z-index:0;pointer-events:none}
.sq .sq-s{position:absolute;display:block;transition:transform .7s var(--sq-spring)}
.sq .sq-s>i{display:block;width:100%;height:100%;background:var(--sq-dark);animation:sq-float 9s ease-in-out infinite alternate}
.sq .sq-s.sq-light>i{background:var(--sq-light)}
.sq .sq-circle>i{border-radius:50%}
.sq .sq-square>i{border-radius:22%}
.sq .sq-ring>i{background:none!important;border-radius:50%;border:14px solid var(--sq-dark)}
.sq .sq-s2>i{animation-duration:11s;animation-delay:-3s}.sq .sq-s3>i{animation-duration:13s;animation-delay:-6s}.sq .sq-s4>i{animation-duration:10s;animation-delay:-2s}
@keyframes sq-float{from{transform:translate(0,0) rotate(0)}to{transform:translate(6px,-10px) rotate(8deg)}}

/* shape placement per tone (corners + overlapping pair low in the card) */
.sq [data-tone=indigo] .sq-s1{width:220px;height:220px;right:-70px;top:-60px}
.sq [data-tone=indigo] .sq-s2{width:120px;height:120px;right:24px;bottom:110px;rotate:18deg}
.sq [data-tone=indigo] .sq-s3{width:160px;height:160px;left:-60px;bottom:-40px}
.sq [data-tone=indigo] .sq-s4{width:90px;height:90px;left:60px;bottom:40px;rotate:-12deg}
.sq [data-tone=purple] .sq-s1{width:170px;height:170px;right:-40px;top:-50px}
.sq [data-tone=purple] .sq-s2{width:150px;height:150px;right:40px;top:30px}
.sq [data-tone=purple] .sq-s3{width:130px;height:130px;left:-30px;bottom:90px;rotate:24deg}
.sq [data-tone=purple] .sq-s4{width:180px;height:180px;right:-50px;bottom:-60px}
.sq [data-tone=pink] .sq-s1{width:150px;height:150px;right:-30px;top:-30px;rotate:30deg}
.sq [data-tone=pink] .sq-s2{width:210px;height:210px;left:-80px;top:40%}
.sq [data-tone=pink] .sq-s3{width:110px;height:110px;right:30px;bottom:70px;rotate:-20deg}
.sq [data-tone=pink] .sq-s4{width:140px;height:140px;right:-40px;bottom:-50px}
/* hover / keyboard focus: shapes move, scale and rotate (spring curve) */
@media(hover:hover){
  .sq .sq-card:hover .sq-s1{transform:translate(-14px,10px) scale(1.12) rotate(14deg)}
  .sq .sq-card:hover .sq-s2{transform:translate(10px,-12px) scale(.9) rotate(-28deg)}
  .sq .sq-card:hover .sq-s3{transform:translate(12px,-8px) scale(1.15) rotate(40deg)}
  .sq .sq-card:hover .sq-s4{transform:translate(-10px,-14px) scale(1.08) rotate(-18deg)}
}
.sq .sq-card:focus-within .sq-s1{transform:translate(-14px,10px) scale(1.12) rotate(14deg)}
.sq .sq-card:focus-within .sq-s2{transform:translate(10px,-12px) scale(.9) rotate(-28deg)}
.sq .sq-card:focus-within .sq-s3{transform:translate(12px,-8px) scale(1.15) rotate(40deg)}
.sq .sq-card:focus-within .sq-s4{transform:translate(-10px,-14px) scale(1.08) rotate(-18deg)}

/* content */
.sq .sq-body{position:relative;z-index:1;display:flex;flex-direction:column;gap:.55rem;width:100%;min-width:0;padding:1.6rem 1.5rem 1.5rem;overflow-wrap:anywhere}
.sq .sq-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;min-height:2rem}
.sq .sq-badges{display:flex;flex-wrap:wrap;gap:.4rem}
.sq .sq-badge{display:inline-flex;align-items:center;gap:.35em;border-radius:99px;padding:.3em .8em;font-size:.8rem;font-weight:700;line-height:1.2;background:#fff;color:var(--sq-navy)}
.sq .sq-badge.sq-cur{background:var(--sq-navy);color:#fff}
.sq .sq-badge .ico{width:14px;height:14px}
.sq .sq-name{margin:0;font-size:1.15rem;font-weight:700;letter-spacing:.01em;color:var(--sq-ink)}
.sq .sq-price{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem;line-height:1}
.sq .sq-amt{font-family:var(--font-d);font-size:clamp(2.6rem,7cqi,3.6rem);font-weight:800;letter-spacing:-.04em;color:var(--sq-ink)}
.sq .sq-per,.sq .sq-sub{color:var(--sq-soft);font-weight:600}
.sq .sq-sub{margin:0;font-size:.9rem}
.sq .sq-draft{margin:0;align-self:flex-start;display:inline-flex;align-items:center;gap:.4em;padding:.28em .7em;border:1px solid rgba(255,255,255,.65);border-radius:99px;font-size:.8rem;font-weight:650;color:#fff}
.sq .sq-draft .ico{width:14px;height:14px;flex:none}
.sq .sq-desc{margin:.2rem 0 .3rem;color:var(--sq-soft);line-height:1.45}
.sq .sq-feats{list-style:none;margin:0 0 1.2rem;padding:0;display:grid;gap:.45rem}
.sq .sq-feats li{display:flex;align-items:baseline;gap:.55rem;font-size:.94rem;line-height:1.35}
.sq .sq-feats .ico,.sq .sq-dash{flex:none;width:16px;height:16px;align-self:center;color:#fff;text-align:center;font-weight:800}
.sq .sq-k{flex:1;min-width:0;color:var(--sq-soft)}
.sq .sq-v{font-weight:700;color:#fff;text-align:end}
.sq .sq-feats li.off .sq-v{font-weight:600}
.sq .sq-foot{margin-top:auto;display:flex;flex-direction:column;gap:.5rem}
.sq .sq-btn{display:flex;align-items:center;justify-content:center;gap:.5em;width:100%;min-height:50px;padding:.7em 1em;border-radius:16px;border:2px solid #fff;background:#fff;color:var(--sq-navy);
  font:inherit;font-weight:700;text-align:center;text-decoration:none;line-height:1.25;cursor:pointer;transition:background .2s,transform .35s var(--sq-spring),box-shadow .2s}
.sq .sq-btn .ico{width:18px;height:18px;flex:none}
.sq .sq-btn:hover{background:var(--sq-cream);transform:translateY(-1px);box-shadow:0 10px 22px -12px rgba(19,26,50,.7)}
.sq .sq-btn:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:16px}
.sq .sq-btn[aria-disabled=true]{background:transparent;color:#fff;border:2px dashed rgba(255,255,255,.75);cursor:not-allowed;transform:none;box-shadow:none}
.sq .sq-btn[aria-busy=true]{opacity:.8;cursor:progress}
.sq .sq-why{margin:0;font-size:.82rem;line-height:1.4;color:var(--sq-soft);text-align:center}

/* page-level bar and honest notes (use the page theme, not the card colours) */
.sq .sq-bar{display:flex;justify-content:center;margin:.5rem 0}
.sq .sq-toggle{display:inline-flex;gap:.25rem;padding:.25rem;border-radius:99px;background:var(--card-2);border:1px solid var(--line)}
.sq .sq-toggle button{border:0;border-radius:99px;padding:.45em 1.1em;min-height:38px;background:none;color:var(--ink);font-weight:650;cursor:pointer}
.sq .sq-toggle button[aria-pressed=true]{background:var(--brand);color:var(--on-brand)}
.sq .sq-notes{display:grid;gap:.5rem;margin:.8rem 0 0}
.sq .sq-note{margin:0;display:flex;gap:.55rem;align-items:flex-start;padding:.7rem .9rem;border-radius:14px;background:var(--brand-l);color:var(--ink);border:1px solid var(--line)}
.sq .sq-note .ico{flex:none;width:18px;height:18px;margin-top:.1rem;color:var(--brand-d)}

/* touch screens: no hover state needed - every element is always visible (nothing is revealed only on hover) */
@media(hover:none){.sq .sq-card:hover{transform:none}}
/* reduced motion: static cards, no scale, no moving shapes */
@media(prefers-reduced-motion:reduce){
  .sq .sq-card,.sq .sq-card:hover,.sq .sq-card:focus-within{transform:none!important;transition:box-shadow .2s ease}
  .sq .sq-s,.sq .sq-s>i,.sq .sq-btn{animation:none!important;transition:none!important}
  .sq .sq-card:hover .sq-s,.sq .sq-card:focus-within .sq-s{transform:none}
  .sq .sq-btn:hover{transform:none}
}