/*!
 * ClickPop Studio (1.8) — website-design pages. Sits on base.css + site.css tokens; logical properties only.
 * One loud thing per page: the navy "drafting table" hero with the fan of live demos. Everything else is quiet.
 */
@layer components{
  /* ── hero ─────────────────────────────────────────────── */
  .st-hero{position:relative;overflow:clip;color:#F2F6FF;background:
      radial-gradient(60rem 30rem at 85% -10%,rgb(31 78 209/.55),transparent 60%),
      radial-gradient(40rem 26rem at 0% 110%,rgb(255 123 26/.16),transparent 60%),
      linear-gradient(var(--cp-navy),var(--cp-navy));
    padding-block:clamp(2rem,5vw,4.5rem) clamp(2.5rem,6vw,5rem)}
  .st-hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
    background-image:linear-gradient(rgb(255 255 255/.045) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255/.045) 1px,transparent 1px);
    background-size:32px 32px;mask-image:linear-gradient(180deg,#000 40%,transparent)}
  .st-hero__in{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
  .crumbs--inv,.crumbs--inv a{color:#A9B7D6}
  .st-brand{display:inline-flex;align-items:center;gap:.6rem;margin-block:1rem .75rem;padding:.35rem .8rem .35rem .55rem;border:1px solid rgb(255 255 255/.16);border-radius:var(--bubble);
    --logo-ink:#fff;--logo-mark:#fff}
  .st-brand .logo-svg,.st-brand svg{height:22px;width:auto}
  .st-brand span{font-weight:800;font-size:var(--t-sm);color:var(--orange-300);padding-inline-start:.6rem;border-inline-start:1px solid rgb(255 255 255/.2)}
  .st-hero__t{font-size:clamp(2.15rem,1.2rem + 3.6vw,4.1rem);line-height:1.22;font-weight:900;letter-spacing:0;color:#fff;text-wrap:balance}
  .st-hero__p{margin-block-start:1.1rem;max-width:36rem;font-size:clamp(1rem,.95rem + .3vw,1.15rem);line-height:2;color:#C9D4EE}
  .st-hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.4rem;margin-block-start:1.6rem}
  .st-link{display:inline-flex;align-items:center;gap:.35rem;font-weight:700;color:#fff;text-decoration:none;border-block-end:1px solid rgb(255 255 255/.35);padding-block-end:2px}
  .st-link:hover{border-color:#fff}
  .st-link--ink{color:var(--ink);border-color:var(--line-2)}
  [dir="ltr"] .st-link .i{transform:scaleX(-1)}
  .st-hero__facts{display:flex;flex-wrap:wrap;gap:.6rem;margin:2rem 0 0;padding:0;list-style:none}
  .st-hero__facts li{display:grid;gap:.1rem;padding:.6rem .9rem;border-radius:var(--bubble);background:rgb(255 255 255/.06);border:1px solid rgb(255 255 255/.1)}
  .st-hero__facts b{font-size:var(--t-md);color:#fff}
  .st-hero__facts span{font-size:var(--t-xs);color:#A9B7D6}

  /* the fan of live demos */
  .st-fan{position:relative;aspect-ratio:1.08;min-height:300px}
  .st-fan__w{position:absolute;margin:0;width:78%;border-radius:12px;overflow:hidden;background:#0B1A38;
    box-shadow:0 30px 60px -20px rgb(0 0 0/.6),0 0 0 1px rgb(255 255 255/.08);transition:transform .5s var(--ease)}
  .st-fan__w img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
  .st-fan__w figcaption{position:absolute;inset-block-end:.6rem;inset-inline-start:.6rem;padding:.2rem .6rem;border-radius:var(--bubble);font-size:.72rem;font-weight:800;background:rgb(8 28 62/.85);color:#fff;backdrop-filter:blur(6px)}
  .st-fan__bar{display:flex;align-items:center;gap:5px;height:26px;padding-inline:10px;background:#13254A}
  .st-fan__bar i{width:8px;height:8px;border-radius:50%;background:rgb(255 255 255/.25)}
  .st-fan__bar em{margin-inline-start:auto;font-style:normal;font-size:.68rem;color:#A9B7D6}
  .st-fan__w--0{inset-block-start:0;inset-inline-end:0;transform:rotate(4deg) scale(.9);opacity:.85}
  .st-fan__w--1{inset-block-start:16%;inset-inline-start:0;transform:rotate(-5deg) scale(.94)}
  .st-fan__w--2{inset-block-end:0;inset-inline-end:8%;transform:rotate(1.5deg)}
  .st-fan:hover .st-fan__w--0{transform:rotate(7deg) scale(.9) translate(-4%,-3%)}
  .st-fan:hover .st-fan__w--1{transform:rotate(-8deg) scale(.94) translate(4%,0)}
  @media (max-width:900px){
    .st-hero__in{grid-template-columns:1fr}
    .st-fan{aspect-ratio:1.25;max-width:560px;width:100%;justify-self:center}
  }
  @media (prefers-reduced-motion:reduce){.st-fan__w{transition:none}}

  .st-proof{border-block-end:1px solid var(--line);background:var(--surface)}
  .st-proof__in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem 1.5rem;margin:0 auto;padding-block:1rem;list-style:none}
  .st-proof__in li{display:flex;align-items:center;gap:.55rem;font-size:var(--t-sm);font-weight:700;color:var(--ink-2)}
  .st-proof__in .i{color:var(--brand);flex-shrink:0}
  @media (max-width:900px){.st-proof__in{grid-template-columns:repeat(2,minmax(0,1fr))}}

  /* ── shared section heads ─────────────────────────────── */
  .st-head{max-width:46rem;margin-block-end:clamp(1.25rem,3vw,2rem)}
  .st-head .lead{margin-block-start:.6rem}
  .st-head--row{max-width:none;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem}
  .st-head--row>div{max-width:46rem}
  .st-head--inv .h-section{color:#fff}.st-head--inv .lead{color:#C9D4EE}
  .st-note{margin-block-start:1rem;font-size:var(--t-sm);color:var(--ink-3)}
  .st-price{font-size:.55em;font-weight:700;color:var(--pop-ink);margin-inline-start:.4rem;white-space:nowrap}

  /* ── packages ─────────────────────────────────────────── */
  .plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;align-items:stretch;padding-block-start:.9rem}
  .plan{position:relative;display:flex;flex-direction:column;gap:1rem;padding:1.5rem 1.35rem 1.35rem;border-radius:var(--bubble-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1)}
  .plan--pop{background:var(--cp-navy);color:#E7EDFC;border-color:var(--cp-navy);box-shadow:var(--sh-3);transform:translateY(-.75rem)}
  :root[data-theme="dark"] .plan--pop{background:#10265A;border-color:#2B4A93}
  .plan__flag{position:absolute;inset-block-start:-.8rem;inset-inline-start:1.2rem;padding:.25rem .75rem;border-radius:var(--bubble);background:var(--pop);color:#081C3E;font-size:var(--t-xs);font-weight:900}
  .plan__name{display:flex;align-items:baseline;gap:.6rem;font-size:1.65rem;font-weight:900;color:inherit}
  .plan__name span{font-size:var(--t-xs);font-weight:700;color:var(--ink-3);letter-spacing:.02em}
  .plan--pop .plan__name span{color:#93A6D6}
  .plan__pitch{margin-block-start:.25rem;font-size:var(--t-sm);color:var(--ink-2);line-height:1.8}
  .plan--pop .plan__pitch{color:#C9D4EE}
  .plan__price{display:flex;align-items:baseline;gap:.45rem;padding-block:.35rem .9rem;border-block-end:1px dashed var(--line-2)}
  .plan--pop .plan__price{border-color:rgb(255 255 255/.18)}
  .plan__price b{font-size:clamp(2.4rem,2rem + 1.6vw,3.25rem);line-height:1;font-weight:900;color:var(--ink)}
  .plan--pop .plan__price b{color:#fff}
  .plan__price span{font-size:var(--t-sm);font-weight:700;color:var(--ink-3)}
  .plan--pop .plan__price span{color:#A9B7D6}
  .plan__meta{display:grid;gap:.35rem;margin:0;padding:0;list-style:none;font-size:var(--t-sm);font-weight:700}
  .plan__meta li{display:flex;align-items:center;gap:.5rem}
  .plan__meta .i{color:var(--brand)}
  .plan--pop .plan__meta .i{color:var(--orange-300)}
  .plan__list{display:grid;gap:.55rem;margin:0;padding:0;list-style:none;font-size:var(--t-sm);line-height:1.8;color:var(--ink-2)}
  .plan--pop .plan__list{color:#DCE4F7}
  .plan__list li{display:grid;grid-template-columns:auto 1fr;gap:.5rem;align-items:start}
  .plan__list .i{margin-block-start:.3rem;color:var(--ok)}
  .plan--pop .plan__list .i{color:#7EE2AE}
  .plan__for{font-size:var(--t-xs);color:var(--ink-3);line-height:1.9;margin-block-start:auto}
  .plan--pop .plan__for{color:#A9B7D6}
  .plan__cta{display:grid;gap:.6rem;justify-items:center}
  .plan__demos{font-size:var(--t-sm);font-weight:700;color:var(--link)}
  .plan--pop .plan__demos{color:#C3D3FF}
  .plan--pop .btn--brand{color:#081C3E}
  @media (max-width:1000px){.plans{grid-template-columns:1fr;max-width:34rem;margin-inline:auto}.plan--pop{transform:none}}

  /* ── comparison matrix ────────────────────────────────── */
  .matrix-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
  .matrix,.ptable{width:100%;min-width:640px;border-collapse:collapse;font-size:var(--t-sm)}
  .matrix th,.matrix td,.ptable th,.ptable td{padding:.7rem .9rem;text-align:start;border-block-end:1px solid var(--line);vertical-align:middle}
  .matrix thead th{position:sticky;inset-block-start:0;background:var(--surface);font-weight:900;color:var(--ink);z-index:1}
  .matrix thead th small{display:block;font-weight:700;font-size:var(--t-xs);color:var(--ink-3)}
  .matrix thead th:not(:first-child){text-align:center}
  .matrix tbody th{font-weight:600;color:var(--ink-2);width:40%}
  .matrix td{text-align:center;color:var(--ink);font-weight:600}
  .matrix .is-pop{background:color-mix(in srgb,var(--brand) 7%,transparent)}
  .matrix__g th{padding-block:.55rem;background:var(--bg-2);font-size:var(--t-xs);font-weight:900;color:var(--ink-3)!important;width:auto!important}
  .matrix__y{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ok-bg);color:var(--ok)}
  .matrix__n{color:var(--ink-3)}
  .ptable thead th{font-size:var(--t-xs);color:var(--ink-3);font-weight:800;background:var(--bg-2)}
  .ptable tbody th{font-weight:900;font-size:var(--t-md);white-space:nowrap}
  .ptable tbody th small{display:block;font-size:.7rem;color:var(--pop-ink);font-weight:800}
  .ptable td{color:var(--ink-2)}
  .ptable td.strong{font-weight:900;color:var(--ink);white-space:nowrap}
  .ptable tr.is-pop{background:color-mix(in srgb,var(--brand) 6%,transparent)}

  /* ── demos ────────────────────────────────────────────── */
  .st-tier+.st-tier{margin-block-start:2.5rem}
  .st-tier__t{display:flex;align-items:baseline;gap:.6rem;margin-block-end:1rem;font-size:var(--t-xl);font-weight:900}
  .st-tier__t span{font-size:var(--t-sm);color:var(--pop-ink);font-weight:800}
  .dgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
  @media (max-width:1000px){.dgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media (max-width:640px){.dgrid{grid-template-columns:1fr}}
  .dcard{display:flex;flex-direction:column;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);overflow:hidden;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
  .dcard:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
  .dcard__shot{display:block;background:color-mix(in srgb,var(--dc) 18%,var(--bg-2))}
  .dcard__bar{display:flex;gap:5px;align-items:center;height:22px;padding-inline:10px;background:color-mix(in srgb,var(--dc) 85%,#000)}
  .dcard__bar i{width:7px;height:7px;border-radius:50%;background:rgb(255 255 255/.35)}
  .dcard__shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
  .dcard__body{display:flex;flex-direction:column;gap:.45rem;padding:1rem 1.1rem 1.15rem;flex:1}
  .dcard__type{font-size:var(--t-xs);font-weight:800;color:var(--dc)}
  :root[data-theme="dark"] .dcard__type{color:color-mix(in srgb,var(--dc) 55%,#fff)}
  .dcard__name{font-size:var(--t-lg);font-weight:900}
  .dcard__name a{color:var(--ink);text-decoration:none}
  .dcard__desc{font-size:var(--t-sm);color:var(--ink-2);line-height:1.9}
  .dcard__tech{display:flex;flex-wrap:wrap;gap:.3rem;margin:0;padding:0;list-style:none}
  .dcard__tech li{font-size:.72rem;font-weight:700;padding:.12rem .5rem;border-radius:999px;background:var(--bg-2);color:var(--ink-2)}
  .dcard__go{margin-block-start:auto;padding-block-start:.4rem;display:inline-flex;align-items:center;gap:.35rem;font-weight:800;font-size:var(--t-sm);color:var(--link)}

  /* ── process (a real sequence → numbered) ─────────────── */
  .st-steps{counter-reset:st;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem;margin:0;padding:0;list-style:none}
  .st-steps li{counter-increment:st;position:relative;display:flex;flex-direction:column;gap:.4rem;padding-block-start:3rem}
  .st-steps li::before{content:counter(st,persian);position:absolute;inset-block-start:0;inset-inline-start:0;display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:var(--bubble);background:var(--brand);color:#fff;font-weight:900}
  :root:lang(en) .st-steps li::before{content:counter(st)}
  .st-steps li::after{content:"";position:absolute;inset-block-start:1.1rem;inset-inline-start:2.8rem;inset-inline-end:-.6rem;height:2px;background:linear-gradient(90deg,var(--line-2) 50%,transparent 0) 0 0/10px 2px}
  .st-steps li:last-child::after{display:none}
  .st-steps h3{font-size:var(--t-md);font-weight:900}
  .st-steps p{font-size:var(--t-sm);color:var(--ink-2);line-height:1.9}
  .st-steps span{margin-block-start:auto;font-size:var(--t-xs);font-weight:800;color:var(--pop-ink)}
  @media (max-width:900px){.st-steps{grid-template-columns:1fr}.st-steps li{padding-block-start:0;padding-inline-start:3.2rem}.st-steps li::after{display:none}}

  /* ── navy band ────────────────────────────────────────── */
  .st-ink{background:var(--hero);color:#E7EDFC}
  .st-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
  @media (max-width:800px){.st-two{grid-template-columns:1fr}}
  .st-panel{padding:1.4rem;border-radius:var(--bubble-lg);border:1px solid rgb(255 255 255/.12);background:rgb(255 255 255/.04)}
  .st-panel h3{font-size:var(--t-xl);font-weight:900;color:#fff;margin-block-end:.75rem}
  .st-panel ul{display:grid;gap:.6rem;margin:0;padding-inline-start:1.1rem;font-size:var(--t-sm);line-height:1.9;color:#C9D4EE}
  .st-panel li::marker{color:var(--orange-300)}
  .st-panel--light{background:var(--surface);border-color:var(--line);display:grid;gap:.8rem;justify-items:start}
  .st-panel--light h3{color:var(--ink);margin:0}
  .st-panel--light p{color:var(--ink-2);font-size:var(--t-sm);line-height:1.95}
  .st-endcta{display:grid;justify-items:center;gap:1.25rem;text-align:center}
  .st-endcta .h-section{color:#fff;max-width:32rem}

  /* ── guarantees, case, features ───────────────────────── */
  .st-guar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
  @media (max-width:900px){.st-guar{grid-template-columns:1fr}}
  .st-guar article{display:grid;gap:.5rem;align-content:start;padding:1.3rem;border-radius:var(--bubble-lg);border:1px solid var(--line);background:var(--surface)}
  .st-guar h3{font-size:var(--t-lg);font-weight:900}
  .st-guar p{font-size:var(--t-sm);color:var(--ink-2);line-height:1.95}
  .st-guar__p{justify-self:start;font-size:.72rem;font-weight:800;padding:.15rem .55rem;border-radius:999px;background:var(--ok-bg);color:var(--ok)}
  .st-case{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:2rem;align-items:center}
  @media (max-width:900px){.st-case{grid-template-columns:1fr}}
  .st-case__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin:0;padding:0;list-style:none}
  .st-case__list li{display:grid;gap:.25rem;padding:1rem;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line)}
  .st-case__list b{font-size:var(--t-md)}
  .st-case__list span{font-size:var(--t-sm);color:var(--ink-2);line-height:1.8}
  .st-feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem 1.5rem}
  @media (max-width:900px){.st-feats{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media (max-width:560px){.st-feats{grid-template-columns:1fr}}
  .st-feats article{display:grid;gap:.4rem}
  .st-feats .i{width:28px;height:28px;color:var(--brand)}
  .st-feats h3{font-size:var(--t-md);font-weight:900}
  .st-feats p{font-size:var(--t-sm);color:var(--ink-2);line-height:1.9}

  /* ── sub-page header ──────────────────────────────────── */
  .st-page{padding-block:clamp(1.5rem,4vw,3rem) clamp(1.25rem,3vw,2rem);border-block-end:1px solid var(--line);background:
      linear-gradient(rgb(13 58 184/.05) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,rgb(13 58 184/.05) 1px,transparent 1px) 0 0/28px 28px,var(--bg)}
  .st-page__t{margin-block-start:1rem;font-size:clamp(1.9rem,1.3rem + 2.4vw,3.1rem);font-weight:900;line-height:1.3;text-wrap:balance}
  .st-page__p{margin-block-start:.9rem;max-width:48rem;font-size:var(--t-lg);line-height:2;color:var(--ink-2)}
  .st-page .st-hero__cta{margin-block-start:1.25rem}

  /* ── order block + form ───────────────────────────────── */
  .st-order{background:linear-gradient(180deg,var(--bg-2),var(--bg));border-block-start:1px solid var(--line)}
  .st-order__in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(1.5rem,4vw,3rem);align-items:start}
  @media (max-width:900px){.st-order__in{grid-template-columns:1fr}}
  .st-order__side .lead{margin-block-start:.5rem}
  .st-next{display:grid;gap:.8rem;margin:1.25rem 0 0;padding:0;list-style:none;counter-reset:nx}
  .st-next li{counter-increment:nx;display:grid;grid-template-columns:2rem 1fr;gap:.1rem .7rem}
  .st-next li::before{content:counter(nx,persian);grid-row:span 2;display:grid;place-items:center;width:2rem;height:2rem;border-radius:var(--bubble);background:var(--brand-soft);color:var(--brand);font-weight:900}
  .st-next b{font-size:var(--t-md)}
  .st-next span{font-size:var(--t-sm);color:var(--ink-2)}
  .st-call{margin-block-start:1.25rem;font-size:var(--t-sm);color:var(--ink-2)}
  .st-call a{font-weight:900;font-size:var(--t-md)}
  .st-order__form{padding:clamp(1.1rem,3vw,1.75rem);border-radius:var(--bubble-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-2)}

  .wdform{display:grid;gap:.25rem}
  .wdform__hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .wdform__steps{display:flex;gap:.5rem;margin:0 0 1rem;padding:0;list-style:none;font-size:var(--t-xs);font-weight:800;color:var(--ink-3)}
  .wdform__steps li{display:flex;align-items:center;gap:.4rem;padding:.3rem .7rem .3rem .4rem;border-radius:var(--bubble);background:var(--bg-2)}
  .wdform__steps span{display:grid;place-items:center;width:1.4rem;height:1.4rem;border-radius:50%;background:var(--surface)}
  .wdform__steps li.is-on{background:var(--brand-soft);color:var(--brand)}
  .wdform__steps li.is-on span{background:var(--brand);color:#fff}
  .wdform__steps[hidden]{display:none}
  .wdform__step{border:0;margin:0;padding:0;min-width:0}
  .wdform__step[hidden]{display:none}
  .field__label{font-size:var(--t-sm);font-weight:700;color:var(--ink-2)}
  .field__label small{font-weight:500}
  .grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1rem}
  @media (max-width:560px){.grid2{grid-template-columns:1fr}}
  .wdplans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}
  @media (max-width:640px){.wdplans{grid-template-columns:repeat(2,minmax(0,1fr))}}
  .wdplan{position:relative;cursor:pointer}
  .wdplan input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
  .wdplan span{display:grid;gap:.1rem;height:100%;padding:.65rem .75rem;border-radius:var(--bubble);border:1.5px solid var(--line-2);background:var(--surface);transition:border-color var(--dur),background var(--dur)}
  .wdplan b{font-size:var(--t-md);font-weight:900;color:var(--ink)}
  .wdplan small{font-size:.74rem;color:var(--ink-3)}
  .wdplan:hover span{border-color:var(--line-strong)}
  .wdplan input:checked+span{border-color:var(--brand);background:var(--brand-soft)}
  .wdplan input:focus-visible+span{outline:2px solid var(--focus);outline-offset:2px}
  .wdplan--unsure b{font-weight:800}
  .wdchips{display:flex;flex-wrap:wrap;gap:.4rem}
  .wdform__next{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin-block:.25rem .5rem}
  .wdform__next .muted{font-size:var(--t-xs)}
  .wdform__end{display:grid;gap:.75rem;margin-block-start:.5rem;padding-block-start:1rem;border-block-start:1px dashed var(--line-2)}
  .wdform__note{display:flex;align-items:center;gap:.4rem;justify-content:center;font-size:var(--t-xs);color:var(--ink-3)}
  .wdform.is-two .wdform__end{display:none}
  .wdform.is-two.on-2 .wdform__end{display:grid}

  /* ── thanks ───────────────────────────────────────────── */
  .st-thanks__card{display:grid;justify-items:center;gap:.75rem;text-align:center;padding:clamp(1.5rem,4vw,2.5rem);border-radius:var(--bubble-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-2)}
  .st-thanks__ok{display:grid;place-items:center;width:64px;height:64px;border-radius:var(--bubble-lg);background:var(--ok-bg);color:var(--ok)}
  .st-thanks__ok .i,.st-thanks__ok svg{width:34px;height:34px}
  .st-thanks .st-next{text-align:start;max-width:28rem}

}