:root{
  --brand:#FFC83A;--brand-hover:#F2B518;--ink:#1E211F;--ink-soft:#5D605B;--cream:#FFF0C2;--canvas:#FBF8EE;
  --white:#fff;--line:#E6E3D8;--ok:#17663A;--bad:#B42318;
  --font-logo:'Unbounded','Arial Black',sans-serif;
  --font-ui:'Figtree',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --r:14px;--ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--canvas);color:var(--ink);font:400 1rem/1.6 var(--font-ui);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{width:min(1160px,100% - 32px);margin-inline:auto}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:4px}
.sec-yellow :focus-visible,.hero :focus-visible,.final :focus-visible{outline-color:var(--ink)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:10px 14px;border-radius:8px;z-index:50}
.skip:focus{left:8px}

/* logo */
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.wm{font-family:var(--font-logo);font-weight:500;font-size:1.3rem;line-height:1;letter-spacing:-.03em}
.wm b{font-weight:700}
.ico .bubble{fill:var(--brand)}.ico .check{fill:var(--ink)}
.foot .ico .check{fill:#1E211F}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;border-radius:12px;font:600 1rem/1 var(--font-ui);text-decoration:none;border:2px solid var(--ink);transition:transform .18s var(--ease),background-color .18s,color .18s;text-align:center}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#000}
.btn-line{background:transparent;color:var(--ink)}
.btn-line:hover{background:var(--brand)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:rgba(30,33,31,.08)}
.btn-lg{min-height:54px;padding:0 28px;font-size:1.0625rem}

/* header */
.top{position:sticky;top:0;z-index:40;background:var(--brand);border-bottom:2px solid var(--ink)}
.top-in{display:flex;align-items:center;gap:20px;min-height:64px}
.top .logo{margin-right:auto}
.top .ico .bubble{fill:var(--ink)}.top .ico .check{fill:var(--brand)}
.nav{display:none;gap:26px}
.nav a{text-decoration:none;font-weight:500;padding:8px 2px;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--ink)}
.top-cta{min-height:42px;padding:0 16px;font-size:.9375rem}
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer;min-height:42px;display:flex;align-items:center;padding:0 14px;border:2px solid var(--ink);border-radius:12px;font-weight:600}
.menu summary::-webkit-details-marker{display:none}
.menu-box{position:absolute;right:0;top:calc(100% + 10px);background:var(--white);border:2px solid var(--ink);border-radius:var(--r);padding:8px;min-width:200px;display:grid}
.menu-box a{padding:12px 14px;text-decoration:none;font-weight:500;border-radius:8px}
.menu-box a:hover{background:var(--cream)}
.top-cta{display:none}
@media(min-width:560px){.top-cta{display:inline-flex}}
@media(min-width:900px){.nav{display:flex}.menu{display:none}}

/* hero */
.hero{background:var(--brand);padding:56px 0 64px;position:relative}
.hero-in{display:grid;gap:22px;justify-items:start;max-width:1160px}
.hero h1{font-family:var(--font-logo);font-weight:700;font-size:clamp(1.9rem,5.4vw,3.7rem);line-height:1.08;letter-spacing:-.035em;max-width:19ch;text-wrap:balance;animation:rise .7s var(--ease) both}
.sub{font-size:clamp(1.0625rem,2.2vw,1.25rem);line-height:1.5;max-width:58ch;color:#2B2E2B;animation:rise .7s .1s var(--ease) both}
.cta-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px 16px;margin-top:6px;animation:rise .7s .2s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* mock: overflows the yellow into the cream */
.mock{margin-top:44px;margin-bottom:0;position:relative;z-index:2;background:var(--white);border:2px solid var(--ink);border-radius:18px;box-shadow:8px 8px 0 var(--ink);display:grid;grid-template-columns:1fr;overflow:hidden;animation:rise .8s .3s var(--ease) both}
.m-list,.m-crm{display:none}
.m-h{font-weight:600;font-size:.8125rem;color:var(--ink-soft);padding:14px 16px 8px}
.m-chat{padding-bottom:14px;display:grid;gap:10px;align-content:start;background:#FAF7EC}
.m-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--white);border-bottom:1px solid var(--line)}
.m-bar>span:nth-child(2){margin-right:auto;display:grid;line-height:1.3}
.m-bar i,.m-row i{font-style:normal;font-size:.8125rem;color:var(--ink-soft)}
.chip{font-size:.8125rem;font-weight:600;border:1.5px solid var(--ink);border-radius:999px;padding:4px 12px;background:var(--white)}
.av{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:.75rem;font-weight:600}
.a1{background:var(--brand)}.a2{background:#CDE8DB}.a3{background:#F6C9B8}.a4{background:#D9DFF2}
.bub{max-width:78%;padding:10px 14px;border-radius:14px;font-size:.9375rem;line-height:1.45;margin-inline:16px}
.bub.in{background:var(--white);border:1px solid var(--line);border-bottom-left-radius:4px}
.bub.out{background:var(--cream);margin-left:auto;border-bottom-right-radius:4px}
.m-in{margin:6px 16px 0;border:1px solid var(--line);background:var(--white);border-radius:12px;padding:11px 14px;font-size:.875rem;color:var(--ink-soft)}
@media(min-width:760px){
  .mock{grid-template-columns:230px 1fr}
  .m-list{display:block;border-right:1px solid var(--line)}
  .m-row{display:flex;align-items:center;gap:10px;padding:10px 16px;line-height:1.3}
  .m-row>span:nth-child(2){display:grid;min-width:0;margin-right:auto}
  .m-row b{font-weight:600}.m-row i{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .m-row.on{background:var(--cream)}
  .m-row em{font-style:normal;font-size:.75rem;font-weight:600;background:var(--brand);border-radius:999px;min-width:20px;height:20px;display:grid;place-items:center}
}
@media(min-width:1060px){
  .mock{grid-template-columns:230px 1fr 280px}
  .m-crm{display:grid;align-content:start;gap:12px;padding-bottom:16px;border-left:1px solid var(--line)}
  .m-crm>:not(.m-h){margin-inline:16px}
  .deal{display:grid;gap:4px;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
  .deal b{font-weight:600}
  .val{font:500 1.375rem/1.2 var(--font-logo);letter-spacing:-.03em;font-size:1.125rem}
  .stage{font-size:.8125rem;color:var(--ink-soft)}
  .note{background:var(--cream);border-radius:12px;padding:12px 14px;display:grid;gap:4px;font-size:.875rem}
  .note b{font-weight:600}
  .ok-line{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.875rem;color:var(--ok)}
}

/* sections */
.sec{padding:80px 0}
.sec-cream{background:var(--cream)}
.sec-yellow{background:var(--brand)}
h2{font-family:var(--font-logo);font-weight:500;font-size:clamp(1.5rem,3.6vw,2.4rem);line-height:1.15;letter-spacing:-.03em;max-width:22ch;text-wrap:balance}
h3{font-weight:600;font-size:1.125rem;line-height:1.3}
.lead{margin-top:12px;color:var(--ink-soft);font-size:1.125rem;max-width:56ch}
.sec-cream .lead{color:#4A4D48}

.pair{display:grid;gap:16px;margin-top:32px}
.col{background:var(--white);border:2px solid var(--ink);border-radius:var(--r);padding:24px;display:grid;gap:14px;align-content:start}
.col-yes{background:var(--brand)}
.col li{display:flex;gap:12px;align-items:flex-start}
.col ul{display:grid;gap:12px}
.fi{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.fi.sm{width:20px;height:20px;margin-top:3px;stroke-width:2.4}
.col-no .fi{color:var(--bad)}
.col-yes .fi{color:var(--ink)}
@media(min-width:800px){.pair{grid-template-columns:1fr 1fr}}

.feats{display:grid;gap:16px;margin-top:36px;grid-template-columns:1fr}
.feat{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:grid;gap:8px;align-content:start;transition:transform .2s var(--ease),border-color .2s}
.feat:hover{transform:translateY(-3px);border-color:var(--ink)}
.feat .fi{width:44px;height:44px;padding:10px;background:var(--brand);border-radius:12px;stroke:var(--ink);margin-bottom:6px;box-sizing:border-box}
.feat p{color:var(--ink-soft)}
@media(min-width:640px){.feats{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.feats{grid-template-columns:repeat(3,1fr)}}

.steps{display:grid;gap:16px;margin-top:36px;counter-reset:s}
.steps li{background:var(--white);border:2px solid var(--ink);border-radius:var(--r);padding:24px;display:grid;gap:8px;align-content:start}
.n{font-family:var(--font-logo);font-weight:700;width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--brand);display:grid;place-items:center;margin-bottom:6px}
.steps p{color:#3A3D39}
@media(min-width:800px){.steps{grid-template-columns:repeat(3,1fr)}}

.integ{display:grid;gap:22px;justify-items:start}
.badges{display:flex;flex-wrap:wrap;gap:12px}
.badges li{background:var(--white);border:2px solid var(--ink);border-radius:999px;padding:12px 26px;font-weight:600;font-size:1.125rem}
.badges .alt{background:var(--brand)}
.integ-note{color:var(--ink-soft)}

.plans{display:grid;gap:18px;margin-top:36px;align-items:stretch}
.plan{background:var(--white);border:2px solid var(--ink);border-radius:var(--r);padding:28px;display:grid;gap:14px;align-content:start;grid-template-rows:auto auto auto 1fr auto}
.plan.hot{background:var(--brand);box-shadow:8px 8px 0 var(--ink)}
.price{font-family:var(--font-logo);font-weight:500;font-size:1.75rem;letter-spacing:-.04em;line-height:1.2}
.price span{font:400 1rem var(--font-ui);letter-spacing:0}
.price .cur{font-weight:500;font-size:1.05rem;margin-right:5px}
.price small{font-size:.55em;letter-spacing:0;margin-left:1px;vertical-align:.55em}
.price .per{margin-left:4px;font-size:.9rem}
.price .talk{font:inherit;font-size:1.6rem;letter-spacing:-.04em}
.plan{position:relative}
.badge{position:absolute;top:-14px;left:24px;background:var(--ink);color:#fff;font-weight:700;font-size:.8rem;padding:4px 12px;border-radius:999px;letter-spacing:.02em}
.plan-example{margin-top:28px;font-weight:600}
.plan-note{margin-top:8px;font-size:.9rem;opacity:.75}
.psub{font-weight:500}
.plan ul{display:grid;gap:10px;align-content:start}
.plan li{padding-left:28px;position:relative}
.plan li::before{content:"";position:absolute;left:0;top:.35em;width:16px;height:9px;border-left:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:rotate(-45deg) scale(.8);transform-origin:center}
.plan .btn{width:100%;margin-top:6px}
.plan.hot .btn-ink:hover{background:#000}
@media(min-width:900px){.plans{grid-template-columns:repeat(4,1fr)}.plan{padding:24px 20px}.plan.hot{transform:translateY(-12px)}}

.faq{display:grid;gap:28px}
.faq-list{display:grid;gap:12px;max-width:820px}
details{background:var(--white);border:1px solid var(--line);border-radius:var(--r)}
details{transition:border-color .2s}
details[open]{border-color:var(--ink)}
summary{cursor:pointer;list-style:none;padding:18px 56px 18px 20px;font-weight:600;position:relative;min-height:56px}
summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:22px;top:50%;width:10px;height:10px;margin-top:-8px;border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);rotate:45deg;transition:rotate .3s var(--ease),margin-top .3s var(--ease)}
.faq details[open] summary::after{rotate:225deg;margin-top:-3px}
:root{interpolate-size:allow-keywords}
@supports selector(::details-content){
  .faq details::details-content{block-size:0;opacity:0;overflow:clip;transition:block-size .35s var(--ease),opacity .3s ease,content-visibility .35s allow-discrete}
  .faq details[open]::details-content{block-size:auto;opacity:1}
}
.faq details p{padding:0 20px 20px;color:#3A3D39;max-width:64ch}

.final{background:var(--brand);padding:80px 0;border-top:2px solid var(--ink)}
.final-in{display:grid;gap:18px;justify-items:start}
.final p{font-size:1.1875rem;max-width:44ch}
.final h2{max-width:20ch}

.foot{background:var(--ink);color:#F3F1E8;padding:44px 0}
.foot-in{display:grid;gap:20px}
.foot .wm{color:#FFF6DA}.foot .wm b{color:var(--brand)}
.foot address{font-style:normal;display:grid;gap:4px}
.flink{text-decoration:underline;text-decoration-color:var(--brand);text-decoration-thickness:2px;text-underline-offset:4px}
.foot :focus-visible{outline-color:var(--brand)}
.copy{color:#B9BCB4;font-size:.875rem}
@media(min-width:800px){.foot-in{grid-template-columns:1fr auto auto auto;align-items:center;gap:40px}}

@media(max-width:559px){
  .sec{padding:56px 0}
  .hero{padding:40px 0 48px}
  .mock{box-shadow:5px 5px 0 var(--ink)}
  .btn-lg{width:100%}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* sales blocks */
.cta-main{display:grid;gap:8px;justify-items:start}
.cta-note{font-size:.875rem;color:#3A3D39}
.sec-dark{background:var(--ink);color:#F3F1E8}
.sec-dark .lead{color:#C9CCC4}
.sec-dark :focus-visible{outline-color:var(--brand)}
.pain{display:grid;gap:16px;margin-top:36px}
.pcard{border:2px solid #4A4E49;border-left:6px solid var(--brand);border-radius:var(--r);padding:24px;display:grid;gap:8px;align-content:start}
.pcard p{color:#C9CCC4}
@media(min-width:700px){.pain{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.pain{grid-template-columns:repeat(4,1fr)}}
.cta-band{background:var(--brand);border-block:2px solid var(--ink);padding:44px 0}
.cta-band-in{display:grid;gap:20px;align-items:center}
.cta-band-t{font-family:var(--font-logo);font-weight:500;font-size:clamp(1.2rem,2.6vw,1.75rem);line-height:1.25;letter-spacing:-.03em;max-width:24ch}
@media(min-width:860px){.cta-band-in{grid-template-columns:1fr auto;gap:40px}}
.who{display:grid;gap:16px;margin-top:36px}
.wcard{background:var(--white);border:2px solid var(--ink);border-radius:var(--r);padding:24px;display:grid;gap:8px;align-content:start}
.wcard p{color:var(--ink-soft)}
@media(min-width:800px){.who{grid-template-columns:repeat(3,1fr)}}
.objs{display:grid;gap:16px;margin-top:36px}
.ocard{background:var(--white);border:2px solid var(--ink);border-radius:var(--r);padding:22px;display:flex;gap:14px;align-items:flex-start}
.ocard .fi{width:32px;height:32px;padding:6px;background:var(--brand);border-radius:50%;stroke:var(--ink);stroke-width:2.6;box-sizing:border-box}
.ocard div{display:grid;gap:6px}
.ocard p{color:var(--ink-soft)}
@media(min-width:760px){.objs{grid-template-columns:1fr 1fr}}
.ribbon{display:inline-block;margin-top:22px;background:var(--brand);border:2px solid var(--ink);border-radius:999px;padding:8px 18px;font-weight:500}
.ribbon b{font-weight:700;margin-right:6px}
.plans{margin-top:28px}
.after-plans{margin-top:40px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.after-plans p{font-weight:500;max-width:46ch}
@media(max-width:559px){.after-plans .btn,.cta-band .btn,.final .btn,.cta-main{width:100%}.cta-main{justify-items:stretch}.cta-note{text-align:center}}

/* ---- motion layer (v4) ---- */
/* FAQ: centered block and heading */
.faq{justify-items:center}
.faq h2{margin-inline:auto;text-align:center}
.faq-list{width:100%;max-width:820px}

/* header shadow after scroll (opacity only) */
.top::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;box-shadow:0 8px 22px rgba(30,33,31,.38);opacity:0;transition:opacity .25s;pointer-events:none}
.top.stuck::after{opacity:1}

/* buttons: press, shine sweep */
.btn:active{transform:scale(.97)}
.btn-ink{position:relative;overflow:hidden}
.btn-ink::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);transform:translateX(-130%) skewX(-18deg);pointer-events:none}
.btn-ink:not(.btn-lg)::after{transition:transform .6s var(--ease)}
.btn-ink:not(.btn-lg):hover::after{transform:translateX(330%) skewX(-18deg)}
.btn-lg.btn-ink::after{animation:shine 5.5s 1.5s infinite}
@keyframes shine{0%,70%{transform:translateX(-130%) skewX(-18deg)}100%{transform:translateX(330%) skewX(-18deg)}}

/* card hover: lift + hard shadow in brand style */
.feat,.pcard,.wcard,.ocard,.steps li,.col,.plan{transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .2s}
.feat:hover,.wcard:hover,.ocard:hover,.steps li:hover,.col:hover{transform:translateY(-4px);box-shadow:5px 5px 0 var(--ink)}
.pcard:hover{transform:translateY(-4px);box-shadow:5px 5px 0 var(--brand)}
.plan:hover{transform:translateY(-5px);box-shadow:6px 6px 0 var(--ink)}
@media(min-width:900px){.plan.hot:hover{transform:translateY(-17px);box-shadow:10px 10px 0 var(--ink)}}
.plan.hot::after{content:"";position:absolute;inset:-8px;border-radius:calc(var(--r) + 8px);border:3px solid var(--brand);pointer-events:none;animation:glow 2.8s ease-in-out infinite}
@keyframes glow{0%,100%{opacity:0;transform:scale(.99)}50%{opacity:.9;transform:scale(1.015)}}

/* scroll reveal: hidden only when main.js set .js; uses `translate` so hover transforms stay free */
.js [data-r]{opacity:0;translate:0 20px;transition:opacity .6s var(--ease) var(--d,0s),translate .6s var(--ease) var(--d,0s),transform .25s var(--ease),box-shadow .25s var(--ease),border-color .2s}
.js [data-r].is-in{opacity:1;translate:none}
.js .plan.is-in .price{transform-origin:left center;animation:pricepop .7s calc(var(--d,0s) + .25s) var(--ease) both}
@keyframes pricepop{from{transform:scale(.86);opacity:0}60%{transform:scale(1.06);opacity:1}to{transform:none;opacity:1}}

/* hero background: drifting soft blobs + slow dot grid, low contrast */
.hero{overflow:clip}
.hero>.wrap{position:relative;z-index:1}
.hero::before{content:"";position:absolute;inset:-24px;background-image:radial-gradient(rgba(255,240,194,.75) 2px,transparent 2.4px);background-size:24px 24px;animation:dots 14s linear infinite;pointer-events:none}
.hero::after{content:"";position:absolute;inset:-20%;background:radial-gradient(38% 42% at 22% 30%,rgba(255,240,194,.85),transparent 70%),radial-gradient(34% 38% at 80% 72%,rgba(242,181,24,.55),transparent 70%);animation:drift 20s ease-in-out infinite alternate;pointer-events:none}
@keyframes dots{to{transform:translate(24px,24px)}}
@keyframes drift{from{transform:translate(-3%,-2%) rotate(0)}to{transform:translate(4%,3%) rotate(8deg)}}

/* hero mock timeline: 14 s loop, transform/opacity only. Hidden states live in the keyframes, so no motion = everything visible. */
.slot{display:grid}
.slot>*{grid-area:1/1}
.typing{display:flex;align-items:center;gap:8px;font-size:.8125rem;color:var(--ink-soft);opacity:0;animation:t1 14s infinite}
.typing.t2{animation-name:t2}
.dots{display:flex;gap:4px}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--ink-soft);animation:dot 1s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-3px);opacity:1}}
.b1{animation:b1 14s infinite}.b2{animation:b2 14s infinite}.b3{animation:b3 14s infinite}.b4{animation:b4 14s infinite}
@keyframes b1{0%,2%{opacity:0;transform:translateY(10px) scale(.97)}5%,90%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(10px) scale(.97)}}
@keyframes b2{0%,18%{opacity:0;transform:translateY(10px) scale(.97)}21.5%,90%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(10px) scale(.97)}}
@keyframes b3{0%,30%{opacity:0;transform:translateY(10px) scale(.97)}33.5%,90%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(10px) scale(.97)}}
@keyframes b4{0%,45.5%{opacity:0;transform:translateY(10px) scale(.97)}49%,90%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(10px) scale(.97)}}
@keyframes t1{0%,10%{opacity:0;transform:translateY(6px)}12%,17%{opacity:1;transform:none}19%,100%{opacity:0}}
@keyframes t2{0%,37%{opacity:0;transform:translateY(6px)}39%,44%{opacity:1;transform:none}46%,100%{opacity:0}}
@media(min-width:1060px){
  .note{animation:note 14s infinite}
  .ok-line{animation:okl 14s infinite}
  .ok-line .fi{stroke-dasharray:24;animation:okpop 14s infinite}
}
@keyframes note{0%,54%{opacity:0;transform:translateY(8px)}58%,90%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(8px)}}
@keyframes okl{0%,61%{opacity:0}64%,90%{opacity:1}94%,100%{opacity:0}}
@keyframes okpop{0%,62%{transform:scale(0);stroke-dashoffset:24}68%{transform:scale(1.25);stroke-dashoffset:0}72%,100%{transform:scale(1);stroke-dashoffset:0}}
/* unread badge pulse */
@media(min-width:760px){
  .m-row em{position:relative}
  .m-row em::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid var(--brand-hover);animation:ring 2.2s ease-out infinite}
}
@keyframes ring{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.9)}}

/* integrations marquee (class added by main.js) */
.marq{width:100%;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.badges.marquee{flex-wrap:nowrap;gap:0;width:max-content;animation:marq 32s linear infinite;will-change:transform}
.badges.marquee li{flex:none;white-space:nowrap;margin-right:12px}
.marq:hover .badges.marquee{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-25%)}}

.guarantee{display:flex;align-items:center;gap:16px;max-width:640px;margin-top:24px;padding:18px 22px;background:var(--cream);border:2px solid var(--ink);border-radius:14px;font-size:1rem;opacity:1}
.guarantee h3{font-size:1.0625rem;margin:0 0 2px}
.guarantee p{margin:0;font-weight:500}
.g-ico{flex:none;width:44px;height:44px;fill:var(--brand);stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Below-plans block centered under the grid */
.plan-example,.plan-note{text-align:center}
.guarantee{margin-left:auto;margin-right:auto;text-align:left}
.after-plans{justify-content:center;text-align:center;flex-wrap:wrap}