/* Core And Solutions - styling for the pages we add ourselves (services, articles). The template's own pages are
   Framer exports; these are plain HTML, so this file carries everything: the same Geist type, the same colours,
   the same 1600px container, the same rounded header pill and dark footer. */

@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/assets/fonts.gstatic.com/s/geist/v5/gyByhwUxId8gMEwcGFU.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{--red:#fc4040;--ink:#121212;--mute:#6b6b6b;--bg:#f2f2f2;--line:rgba(18,18,18,.12);--radius:16px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Geist","Geist Placeholder",system-ui,sans-serif;
  font-size:16px;line-height:1.55;letter-spacing:-.02em;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:100%;max-width:1600px;margin:0 auto;padding:0 40px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header ------------------------------------------------------------------- */
.hd{position:fixed;inset:16px 0 auto;z-index:50;pointer-events:none}
.hd__bar{pointer-events:auto;display:flex;align-items:center;gap:16px;max-width:1520px;margin:0 auto;padding:12px 14px 12px 22px;
  background:#fff;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.08)}
.hd__mark{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:600;letter-spacing:-.04em;text-decoration:none;color:var(--ink);flex:none}
.hd__logo{width:22px;height:22px;display:block;flex:none}
.hd__nav{display:flex;gap:22px;margin-left:auto;align-items:center}
.hd__nav a{font-size:15px;text-decoration:none;color:var(--ink);opacity:.82;transition:opacity .2s ease}
.hd__nav a:hover,.hd__nav a[aria-current="page"]{opacity:1}
.hd__cta{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border-radius:10px;background:var(--red);color:#fff;
  text-decoration:none;font-size:14px;font-weight:600;line-height:1;white-space:nowrap;transition:background .25s ease,transform .25s ease}
.hd__cta:hover{background:var(--ink);transform:translateY(-1px)}
.hd__nav .hd__cta{display:none}   /* the one inside the menu is for the mobile layout only */
.hd__burger{display:none;margin-left:auto;width:42px;height:42px;border:0;border-radius:50%;background:transparent;cursor:pointer;position:relative}
.hd__burger span{position:absolute;left:11px;right:11px;height:2px;background:var(--ink);transition:transform .3s ease,opacity .3s ease}
.hd__burger span:nth-child(1){top:16px}.hd__burger span:nth-child(2){top:24px}
.hd[data-open="1"] .hd__burger span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.hd[data-open="1"] .hd__burger span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
@media (max-width:899.98px){
  .hd__burger{display:block}
  .hd__nav{position:absolute;top:calc(100% + 8px);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:#fff;
    border-radius:20px;padding:8px;box-shadow:0 20px 40px rgba(0,0,0,.12);display:none}
  .hd[data-open="1"] .hd__nav{display:flex}
  .hd__nav a{padding:13px 16px;border-radius:12px;font-size:16px}
  .hd__nav a:hover{background:#f3f3f3}
  .hd__cta{display:none}
  .hd__nav .hd__cta{display:inline-flex;justify-content:center;margin:6px 4px 4px}
}

/* hero --------------------------------------------------------------------- */
.hero{padding:170px 0 80px}
.eyebrow{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--mute);margin:0 0 22px}
.eyebrow b{color:var(--red);font-weight:400}
.hero h1{margin:0;font-size:clamp(34px,5.4vw,74px);line-height:1.04;font-weight:500;letter-spacing:-.045em;max-width:16ch}
.hero__lead{margin:24px 0 0;max-width:62ch;font-size:clamp(16px,1.5vw,19px);line-height:1.55;color:var(--mute)}
.hero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin:36px 0 0}
.btn{display:inline-flex;align-items:center;gap:8px;padding:15px 24px;border-radius:12px;text-decoration:none;font-size:15px;font-weight:600;
  transition:background .25s ease,color .25s ease,transform .25s ease;border:1px solid transparent}
.btn--red{background:var(--red);color:#fff}
.btn--red:hover{background:var(--ink);transform:translateY(-1px)}
.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{background:var(--red);transform:translateY(-1px)}
.btn--ghost{border-color:var(--line);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink);transform:translateY(-1px)}
.btn--light{background:#fff;color:var(--ink)}
.btn--light:hover{background:var(--red);color:#fff;transform:translateY(-1px)}
.hero__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:56px 0 0;border-top:1px solid var(--line);padding-top:28px}
.hero__stat b{display:block;font-size:34px;font-weight:500;letter-spacing:-.05em;line-height:1.1}
.hero__stat span{font-size:14px;color:var(--mute)}

/* sections ----------------------------------------------------------------- */
.sec{padding:84px 0}
.sec--white{background:#fff}
.sec--dark{background:var(--ink);color:#fff;--mute:rgba(255,255,255,.62);--line:rgba(255,255,255,.14)}
.sec h2{margin:0;font-size:clamp(28px,3.4vw,46px);line-height:1.1;font-weight:500;letter-spacing:-.045em;max-width:20ch}
.sec__lead{margin:18px 0 0;max-width:68ch;font-size:17px;color:var(--mute)}
.sec__body{margin-top:38px}
.sec__body p{margin:0 0 16px;max-width:72ch;font-size:16.5px;line-height:1.6}
.sec__body p:last-child{margin-bottom:0}
.sec__body h3{margin:34px 0 10px;font-size:21px;font-weight:600;letter-spacing:-.03em}

.bullets{list-style:none;margin:0;padding:0;display:grid;gap:12px;max-width:74ch}
.bullets li{position:relative;padding-left:26px;font-size:16.5px;line-height:1.55}
.bullets li:before{content:"";position:absolute;left:0;top:10px;width:8px;height:8px;border-radius:50%;background:var(--red)}
.bullets li b{font-weight:600}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;gap:9px}
.sec--dark .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.card h3{margin:0;font-size:18px;font-weight:600;letter-spacing:-.03em}
.card p{margin:0;font-size:14.5px;line-height:1.5;color:var(--mute)}
.card__n{font-size:13px;font-weight:600;color:var(--red)}

.steps{display:grid;gap:1px;margin-top:34px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.step{display:flex;gap:18px;padding:24px 26px;background:#fff}
.sec--dark .step{background:var(--ink)}
.step b{flex:none;color:var(--red);font-size:13px;font-weight:600;padding-top:4px}
.step h3{margin:0 0 6px;font-size:18px;font-weight:600;letter-spacing:-.03em}
.step p{margin:0;font-size:15px;color:var(--mute);max-width:78ch}

.faq{margin-top:34px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;font-size:17.5px;font-weight:500;letter-spacing:-.03em;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:6px;top:18px;font-size:22px;color:var(--red);transition:transform .25s ease}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq p{margin:0 0 20px;max-width:74ch;font-size:16px;color:var(--mute)}

.demos{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px}
.demo{border-radius:var(--radius);overflow:hidden;background:#fff;border:1px solid var(--line);text-decoration:none;color:inherit;
  display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.sec--dark .demo{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.demo:hover{transform:translateY(-4px)}
.demo img{aspect-ratio:16/10;object-fit:cover;width:100%}
.demo span{padding:14px 16px;font-size:14.5px;font-weight:600;letter-spacing:-.03em;display:flex;justify-content:space-between;gap:8px}
.demo span i{font-style:normal;color:var(--red)}

.band{margin-top:80px;background:var(--ink);color:#fff;border-radius:24px;padding:56px 48px;display:flex;flex-wrap:wrap;gap:28px;
  align-items:center;justify-content:space-between}
.band h2{margin:0;max-width:22ch;color:#fff}
.band p{margin:12px 0 0;max-width:52ch;color:rgba(255,255,255,.66);font-size:16.5px}
.band__side{display:flex;flex-direction:column;gap:12px;min-width:240px}

.note{margin-top:28px;padding:20px 22px;border-left:3px solid var(--red);background:rgba(252,64,64,.06);border-radius:0 12px 12px 0;
  font-size:16px;line-height:1.55;max-width:74ch}
.sec--dark .note{background:rgba(255,255,255,.05)}

.crumbs{font-size:13.5px;color:var(--mute);padding-top:0;margin:0 0 22px}
.crumbs a{text-decoration:none;color:var(--mute)}
.crumbs a:hover{color:var(--ink)}

/* article ------------------------------------------------------------------ */
.post{padding:150px 0 0}
.post__meta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:14px;color:var(--mute);margin:26px 0 0}
.post__meta span{display:inline-flex;align-items:center;gap:8px}
.post__body{margin-top:48px;max-width:75ch}
.post__body h2{margin:44px 0 14px;font-size:clamp(24px,2.6vw,34px);line-height:1.15;letter-spacing:-.04em;max-width:26ch}
.post__body h3{margin:32px 0 10px;font-size:20px;font-weight:600;letter-spacing:-.03em}
.post__body p{margin:0 0 18px;font-size:17px;line-height:1.66}
.post__body ul,.post__body ol{margin:0 0 18px;padding-left:22px}
.post__body li{margin:0 0 9px;font-size:17px;line-height:1.6}
.post__body a{color:var(--red);text-underline-offset:3px}
.post__toc{margin:34px 0 0;padding:22px 24px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);max-width:75ch}
.post__toc b{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--mute);margin-bottom:10px}
.post__toc ol{margin:0;padding-left:18px}
.post__toc li{margin:0 0 7px;font-size:15.5px}
.post__toc a{text-decoration:none}
.post__toc a:hover{color:var(--red)}
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}

/* footer ------------------------------------------------------------------- */
.ft{background:var(--ink);color:#fff;margin-top:90px;padding:72px 0 34px}
.ft__top{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:30px}
.ft h3{margin:0 0 14px;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.5);font-weight:500}
.ft__brand b{font-size:19px;font-weight:600;letter-spacing:-.04em;display:block;margin-bottom:12px}
.ft__brand p{margin:0;max-width:44ch;color:rgba(255,255,255,.66);font-size:15px}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ft a{color:rgba(255,255,255,.78);text-decoration:none;font-size:15px;transition:color .2s ease}
.ft a:hover{color:#fff}
.ft__bottom{margin-top:52px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;gap:12px;
  justify-content:space-between;font-size:13.5px;color:rgba(255,255,255,.5)}

/* whatsapp + reveal -------------------------------------------------------- */
.wa{position:fixed;right:18px;bottom:18px;z-index:60;display:inline-flex;align-items:center;gap:10px;padding:13px;border-radius:999px;
  background:#25d366;color:#fff;text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.25);transition:transform .3s cubic-bezier(.16,1,.3,1),padding .3s ease}
.wa:hover{transform:translateY(-2px);padding:13px 18px 13px 14px}
.wa__l{max-width:0;overflow:hidden;white-space:nowrap;font-size:15px;font-weight:600;transition:max-width .35s cubic-bezier(.16,1,.3,1)}
.wa:hover .wa__l{max-width:140px}
.rv{opacity:0;transform:translateY(26px);filter:blur(6px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1),filter .7s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none;filter:none}
/* Whatever is already on screen at load is shown at once, with no fade. The fade is for things you scroll
   to. Animating the first screen in delayed the largest contentful paint by about a second (18 Sep 2026). */
.rv.in.now{transition:none}

@media (max-width:1199.98px){
  .demos{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .ft__top{grid-template-columns:1fr 1fr}
  .related{grid-template-columns:1fr 1fr}
}
@media (max-width:809.98px){
  .wrap{padding:0 16px}
  .hero{padding:132px 0 56px}
  .sec{padding:60px 0}
  .hero__stats{grid-template-columns:1fr 1fr;gap:18px}
  .cards,.demos,.related{grid-template-columns:1fr}
  .band{padding:36px 24px;border-radius:20px;margin-top:56px}
  .ft__top{grid-template-columns:1fr;gap:28px}
  .step{padding:20px}
  .post__body p,.post__body li{font-size:16.5px}
}
/* pictures inside an article */
.fig{margin:34px 0;display:block}
.fig img{display:block;width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--line);background:#fff}
.fig figcaption{margin-top:10px;font-size:14px;line-height:1.5;color:var(--mute)}
.post__body .fig:first-child{margin-top:22px}
@media (max-width:700px){
  .fig{margin:26px 0}
  .fig figcaption{font-size:13px}
}
/* the free website audit tool (cs-audit-tool.js) */
#cs-audit-tool{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:26px;align-items:start;margin:8px 0 0}
.csa__form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;gap:14px}
.csa__field{display:flex;flex-direction:column;gap:6px}
.csa__field span{font-size:13.5px;font-weight:500;color:var(--mute)}
.csa__field input{font:inherit;font-size:16px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);width:100%}
.csa__field input:focus{outline:2px solid var(--red);outline-offset:1px;border-color:transparent}
.csa__two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.csa__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.csa__btn{font:inherit;font-size:16px;font-weight:600;padding:14px 20px;border:0;border-radius:10px;background:var(--red);color:#fff;cursor:pointer;transition:background .2s ease,transform .2s ease}
.csa__btn:hover:not(:disabled){background:var(--ink);transform:translateY(-1px)}
.csa__btn:disabled{opacity:.6;cursor:default}
.csa__small{margin:0;font-size:13px;line-height:1.5;color:var(--mute)}

.csa__panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;min-height:300px}
.csa__idletxt{margin:0 0 14px;font-size:15px;color:var(--mute)}
.csa__preview{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.csa__preview li{position:relative;padding-left:20px;font-size:14.5px;color:var(--mute)}
.csa__preview li:before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;background:var(--line)}
.csa__err p{margin:0;font-size:15px;color:var(--red)}

.csa__run{display:flex;flex-direction:column;gap:14px;padding:18px 0}
.csa__bar{display:block;height:6px;border-radius:3px;background:#ececec;overflow:hidden}
.csa__bar i{display:block;height:100%;width:38%;border-radius:3px;background:var(--red);animation:csaSlide 1.5s ease-in-out infinite}
@keyframes csaSlide{0%{transform:translateX(-100%)}100%{transform:translateX(320%)}}
.csa__step{margin:0;font-size:15px;color:var(--mute)}

.csa__top{display:flex;gap:22px;align-items:center;padding-bottom:20px;border-bottom:1px solid var(--line)}
.csa__gauge{position:relative;flex:none;width:104px;height:104px;display:grid;place-items:center}
.csa__ring{position:absolute;inset:0;width:104px;height:104px;transform:rotate(-90deg)}
.csa__ringtrack{fill:none;stroke:#ececec;stroke-width:11}
.csa__ringval{fill:none;stroke-width:11;stroke-linecap:round;transition:stroke-dasharray .8s cubic-bezier(.16,1,.3,1)}
.csa__ring--good .csa__ringval{stroke:#22873f}
.csa__ring--ok .csa__ringval{stroke:#b8820f}
.csa__ring--bad .csa__ringval{stroke:var(--red)}
.csa__gnum{position:relative;font-size:31px;font-weight:600;letter-spacing:-.03em;line-height:1}
.csa__gauge--good .csa__gnum{color:#22873f}
.csa__gauge--ok .csa__gnum{color:#b8820f}
.csa__gauge--bad .csa__gnum{color:var(--red)}
.csa__gcap{position:absolute;bottom:26px;font-size:10px;letter-spacing:.04em;color:var(--mute)}
.csa__site{margin:0 0 6px;font-size:18px;font-weight:600;letter-spacing:-.02em;word-break:break-word}
.csa__verdict{margin:0;font-size:15px;line-height:1.5;color:#4a4a4a}

.csa__glance{margin:18px 0 0}
.csa__stack{display:flex;height:16px;border-radius:8px;overflow:hidden;background:#ececec}
.csa__seg{font-style:normal;display:grid;place-items:center;font-size:10.5px;font-weight:600;color:#fff;min-width:0}
.csa__seg--pass{background:#22873f}
.csa__seg--warn{background:#b8820f}
.csa__seg--fail{background:var(--red)}
.csa__legend{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;margin:9px 0 0;font-size:12.5px;color:var(--mute)}
.csa__dot{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:5px}
.csa__dot--pass{background:#22873f}
.csa__dot--warn{background:#b8820f}
.csa__dot--fail{background:var(--red)}

.csa__areas{margin:18px 0 0;display:flex;flex-direction:column;gap:9px}
.csa__area{display:grid;grid-template-columns:66px 1fr 54px;gap:10px;align-items:center}
.csa__aname{font-size:13px;font-weight:600}
.csa__atrack{height:8px;border-radius:4px;background:#ececec;overflow:hidden}
.csa__abar{display:block;height:100%;border-radius:4px}
.csa__abar--pass{background:#22873f}
.csa__abar--warn{background:#b8820f}
.csa__abar--fail{background:var(--red)}
.csa__acount{font-size:12.5px;color:var(--mute);text-align:right;font-variant-numeric:tabular-nums}

.csa__first{margin:22px 0 0;padding:18px 20px;border-radius:12px;background:#fff6f6;border:1px solid rgba(252,64,64,.28)}
.csa__first--clean{background:#f1f8f3;border-color:rgba(34,135,63,.28)}
.csa__first h3{margin:0 0 10px;font-size:16px;font-weight:600;letter-spacing:-.02em}
.csa__first p{margin:0;font-size:14px;line-height:1.55;color:#4a4a4a}
.csa__first ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:9px}
.csa__first li{font-size:14px;line-height:1.5}
.csa__first li strong{display:block;font-weight:600}
.csa__first li span{color:#4a4a4a}

.csa__full{margin:24px 0 0}
.csa__full h3{margin:0 0 12px;font-size:16px;font-weight:600;letter-spacing:-.02em}
.csa__group{margin-bottom:16px}
.csa__ghead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:8px 12px;border-radius:9px;background:#f4f4f4;margin-bottom:11px}
.csa__ghead span{font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.csa__gtally{font-size:12px;font-weight:600}
.csa__gtally--pass{color:#22873f}
.csa__gtally--warn{color:#b8820f}
.csa__gtally--fail{color:var(--red)}

.csa__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.csa__item{display:flex;gap:11px;align-items:flex-start}
.csa__ico{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-content:center;color:#fff;margin-top:1px}
.csa__ico svg{width:14px;height:14px;display:block}
.csa__item--pass .csa__ico{background:#22873f}
.csa__item--warn .csa__ico{background:#b8820f}
.csa__item--fail .csa__ico{background:var(--red)}
.csa__body{display:flex;flex-direction:column;gap:2px;min-width:0}
.csa__body strong{font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.csa__body span{font-size:13.5px;line-height:1.5;color:var(--mute);word-break:break-word}
.csa__foot{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.55;color:var(--mute)}
.csa__acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}

@media (max-width:900px){
  #cs-audit-tool{grid-template-columns:1fr}
}
@media (max-width:560px){
  .csa__two{grid-template-columns:1fr}
  .csa__form,.csa__panel{padding:20px}
  .csa__gauge,.csa__ring{width:84px;height:84px}
  .csa__gnum{font-size:26px}
  .csa__gcap{bottom:20px}
  .csa__top{gap:16px}
  .csa__area{grid-template-columns:58px 1fr 48px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{transition:none}
  .btn,.demo,.wa,.hd__cta{transition:none}
}

/* published price plans (the maintenance pages) ----------------------------
   Three tiers side by side. The middle one is marked because a three-column
   price table with nothing recommended makes the reader do the choosing, and
   most of them will choose nothing. Prices are real and per month. */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px;align-items:stretch}
.plan{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px 26px;
  display:flex;flex-direction:column;gap:14px}
.sec--dark .plan{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.plan--pick{border-color:var(--red);box-shadow:0 14px 34px rgba(252,64,64,.12)}
/* on a white section the default white card would sit on its own colour, so the tones invert: the ordinary
   cards take the page tint and the chosen one stays white, which keeps it the thing that stands out. */
.sec--white .plan{background:var(--bg);border-color:transparent}
.sec--white .plan--pick{background:#fff;border-color:var(--red)}
.plan__tag{position:absolute;top:-11px;left:26px;background:var(--red);color:#fff;font-size:11.5px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;padding:5px 11px;border-radius:999px;line-height:1}
/* every rule below is written .plans .plan__x on purpose: .sec__body p is (0,1,1) and would otherwise win
   over a single class, which silently put 16px under each paragraph and stopped margin-top:auto from
   lining the three buttons up along the bottom of the cards. */
.plans .plan__name{margin:0;font-size:18px;font-weight:600;letter-spacing:-.03em}
.plans .plan__for{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--mute);max-width:none}
.plans .plan__price{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin:4px 0 0;
  padding-top:16px;border-top:1px solid var(--line);font-variant-numeric:tabular-nums;max-width:none}
.sec--dark .plans .plan__price{border-top-color:rgba(255,255,255,.12)}
.plan__amt{font-size:38px;font-weight:600;letter-spacing:-.05em;line-height:1}
.plan__per{font-size:14.5px;color:var(--mute)}
.plans .plan__list{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px}
.plans .plan__list li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.5}
.plans .plan__list li:before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;background:var(--red)}
.plans .plan__list li b{font-weight:600}
.plans .plan__cta{margin:auto 0 0;padding-top:22px}
.plans .plan__cta .btn{width:100%;justify-content:center}
.sec__body .plans__foot{margin:22px 0 0;font-size:14.5px;line-height:1.6;color:var(--mute);max-width:80ch}
.plans__foot b{font-weight:600;color:var(--ink)}
.sec--dark .plans__foot b{color:#fff}
@media (max-width:1099.98px){
  .plans{grid-template-columns:1fr}
  .plan--pick{order:-1}
}