/* =====================================================================
   Pharma Desk :: marketing.css
   Light "counter" theme — electric violet + saffron on lilac-white.
   No framework. Vanilla CSS only.
   ===================================================================== */

:root{
  --ink:#1B1533;
  --ink-soft:#3B3260;
  --muted:#6F678F;
  --primary:#5B3DF5;
  --primary-deep:#3A22B8;
  --accent:#FF7A45;
  --mint:#12B886;
  --bg:#FBF9FF;
  --lilac:#EFEAFE;
  --line:#E6DFFB;
  --white:#fff;

  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px;
  --shadow-sm:0 2px 8px rgba(27,21,51,.05);
  --shadow-md:0 12px 32px rgba(27,21,51,.08);
  --shadow-lg:0 28px 70px rgba(58,34,184,.16);

  --font-display:'Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;
  --font-body:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;

  --wrap:1160px;
}

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--bg); color:var(--ink-soft);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{ max-width:100%; display:block }
a{ color:var(--primary); text-decoration:none }
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--ink); margin:0; line-height:1.08; letter-spacing:-.03em; font-weight:800 }
p{ margin:0 }
:focus-visible{ outline:3px solid var(--primary); outline-offset:3px; border-radius:6px }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 22px }
.mono{ font-family:var(--font-mono) }

/* ---------------------------------------------------------- eyebrow / type */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--primary-deep);
  background:var(--lilac); border:1px solid var(--line);
  padding:7px 14px; border-radius:999px;
}
.eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--accent) }
.h-xl{ font-size:clamp(38px,6.2vw,68px) }
.h-lg{ font-size:clamp(28px,4vw,44px) }
.h-md{ font-size:clamp(21px,2.4vw,27px) }
.lead{ font-size:clamp(16px,1.6vw,19px); color:var(--muted); line-height:1.65 }
.section{ padding:88px 0 }
.section--tight{ padding:56px 0 }
.section__head{ max-width:640px; margin:0 auto 52px; text-align:center }
.section__head .lead{ margin-top:14px }

/* ------------------------------------------------------------------ buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-body); font-weight:700; font-size:15px;
  padding:14px 26px; border-radius:14px; border:1.5px solid transparent;
  cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px) }
.btn--primary{ background:var(--primary); color:#fff; box-shadow:0 10px 26px rgba(91,61,245,.30) }
.btn--primary:hover{ background:var(--primary-deep); box-shadow:0 14px 34px rgba(91,61,245,.38); transform:translateY(-2px) }
.btn--ghost{ background:#fff; color:var(--ink); border-color:var(--line); box-shadow:var(--shadow-sm) }
.btn--ghost:hover{ border-color:var(--primary); color:var(--primary); transform:translateY(-2px) }
.btn--light{ background:#fff; color:var(--primary-deep) }
.btn--light:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(0,0,0,.20) }
.btn--sm{ padding:10px 18px; font-size:14px; border-radius:11px }
.btn--block{ width:100% }

/* ---------------------------------------------------------------- top strip */
.ticker{
  background:linear-gradient(90deg,var(--primary-deep),var(--primary) 55%,var(--accent));
  color:#fff; font-size:12.5px; overflow:hidden; white-space:nowrap;
}
.ticker__track{ display:inline-flex; gap:48px; padding:8px 0; animation:slide 34s linear infinite }
.ticker span{ font-family:var(--font-mono); letter-spacing:.04em; opacity:.95 }
@keyframes slide{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* --------------------------------------------------------------------- nav */
.nav{ position:sticky; top:0; z-index:60; background:rgba(251,249,255,.72); backdrop-filter:blur(14px); border-bottom:1px solid transparent; transition:border-color .2s, box-shadow .2s }
.nav.is-stuck{ border-bottom-color:var(--line); box-shadow:0 6px 24px rgba(27,21,51,.06) }
.nav__in{ display:flex; align-items:center; gap:26px; padding:14px 22px; max-width:var(--wrap); margin:0 auto }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800; font-size:20px; color:var(--ink); letter-spacing:-.04em }
.brand img{ width:34px; height:34px }
.brand em{ font-style:normal; color:var(--primary) }
.nav__links{ display:flex; align-items:center; gap:26px; margin-left:auto }
.nav__links a:not(.btn){ color:var(--ink-soft); font-weight:600; font-size:14.5px; position:relative }
.nav__links a:not(.btn)::after{ content:''; position:absolute; left:0; right:100%; bottom:-5px; height:2px; background:var(--accent); transition:right .22s ease }
.nav__links a:not(.btn):hover::after{ right:0 }
.nav__toggle{ display:none; margin-left:auto; background:none; border:1px solid var(--line); border-radius:11px; padding:9px 11px; cursor:pointer }
.nav__toggle span{ display:block; width:20px; height:2px; background:var(--ink); border-radius:2px }
.nav__toggle span+span{ margin-top:4px }

/* -------------------------------------------------------------------- hero */
.hero{ position:relative; padding:56px 0 76px; overflow:hidden }
.hero__blob{ position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; z-index:0 }
.hero__blob--a{ width:420px; height:420px; background:rgba(91,61,245,.22); top:-120px; left:-100px }
.hero__blob--b{ width:360px; height:360px; background:rgba(255,122,69,.18); bottom:-90px; right:-60px }
.hero__blob--c{ width:300px; height:300px; background:rgba(18,184,134,.14); top:180px; right:36% }
.hero__grid{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:56px; align-items:center }
.hero h1{ margin:20px 0 18px }
.hero h1 mark{ background:none; color:var(--primary); position:relative; white-space:nowrap }
.hero h1 mark::after{ content:''; position:absolute; left:0; right:0; bottom:.06em; height:.22em; background:rgba(255,122,69,.28); border-radius:3px; z-index:-1 }
.hero__cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:28px }
.hero__note{ display:flex; gap:18px; flex-wrap:wrap; margin-top:22px; font-size:13px; color:var(--muted) }
.hero__note b{ color:var(--ink) }
.hero__note span{ display:flex; align-items:center; gap:7px }
.hero__note i{ width:16px; height:16px; border-radius:50%; background:var(--mint); display:inline-block; position:relative; flex:none }
.hero__note i::after{ content:''; position:absolute; inset:0; margin:auto; width:7px; height:4px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg) translate(0,-1px) }

/* ------------------------------------------------------------- carousel */
.carousel{ position:relative }
.carousel__stage{
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  background:linear-gradient(150deg,#F4F0FF,#fff 60%);
  border:1px solid var(--line); box-shadow:var(--shadow-lg);
  aspect-ratio:920/600;
}
.carousel__slide{ position:absolute; inset:0; opacity:0; transform:scale(1.03) translateY(8px); transition:opacity .6s ease, transform .6s ease; pointer-events:none }
.carousel__slide.is-active{ opacity:1; transform:none; pointer-events:auto }
.carousel__slide img{ width:100%; height:100%; object-fit:contain; object-position:center }
.carousel__cap{
  position:absolute; left:16px; bottom:16px; z-index:3;
  background:rgba(27,21,51,.86); color:#fff; backdrop-filter:blur(6px);
  padding:9px 16px; border-radius:999px; font-size:12.5px; font-weight:600;
}
.carousel__cap b{ font-family:var(--font-mono); color:#FFC7AE; font-weight:700; margin-right:8px }
.carousel__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line);
  background:rgba(255,255,255,.92); color:var(--ink); cursor:pointer;
  display:grid; place-items:center; box-shadow:var(--shadow-sm); font-size:17px; line-height:1;
}
.carousel__nav:hover{ background:var(--primary); color:#fff; border-color:var(--primary) }
.carousel__nav--prev{ left:12px } .carousel__nav--next{ right:12px }
/* dots shaped like capsules — the blister-pack motif */
.carousel__dots{ display:flex; gap:10px; justify-content:center; margin-top:20px }
.carousel__dot{
  width:34px; height:12px; border-radius:999px; border:1px solid var(--line);
  background:var(--white); cursor:pointer; padding:0; position:relative; overflow:hidden;
}
.carousel__dot::after{ content:''; position:absolute; inset:0; width:0; background:var(--primary) }
.carousel__dot[aria-selected="true"]{ border-color:var(--primary) }
.carousel__dot[aria-selected="true"]::after{ width:100%; animation:fill 6s linear forwards }
.carousel.is-paused .carousel__dot::after{ animation-play-state:paused }
@keyframes fill{ from{ width:0 } to{ width:100% } }

/* floating receipt on the hero art */
.receipt{
  position:absolute; z-index:5; right:-14px; bottom:34px; width:196px;
  background:#fff; border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow-md); padding:14px 16px 16px;
  animation:bob 5.5s ease-in-out infinite;
}
.receipt::before{
  content:''; position:absolute; left:0; right:0; bottom:-7px; height:8px;
  background:radial-gradient(circle at 5px -1px, transparent 5px, #fff 5px) repeat-x;
  background-size:10px 8px;
}
.receipt__row{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:10.5px; color:var(--muted); margin-top:5px }
.receipt__row b{ color:var(--ink) }
.receipt__tot{ margin-top:10px; padding-top:9px; border-top:1px dashed var(--line); display:flex; justify-content:space-between; align-items:baseline }
.receipt__tot span{ font-size:11px; color:var(--muted) }
.receipt__tot b{ font-family:var(--font-display); font-size:19px; color:var(--ink) }
.receipt__stamp{ margin-top:10px; background:rgba(18,184,134,.12); color:#0B8A66; font-family:var(--font-mono); font-size:10px; font-weight:700; text-align:center; padding:6px; border-radius:8px }
@keyframes bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } }

/* ------------------------------------------------------------------ marquee */
.marquee{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff; overflow:hidden; padding:18px 0 }
.marquee__track{ display:flex; gap:44px; width:max-content; animation:slide 32s linear infinite }
.marquee__item{ display:flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:13px; color:var(--muted); white-space:nowrap }
.marquee__item b{ color:var(--ink) }
.marquee__item::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--accent) }

/* -------------------------------------------------------------------- stats */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:18px }
.stat{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 24px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden }
.stat::after{ content:''; position:absolute; right:-30px; top:-30px; width:90px; height:90px; border-radius:50%; background:var(--lilac) }
.stat__v{ font-family:var(--font-display); font-size:38px; font-weight:800; color:var(--primary); letter-spacing:-.04em; position:relative }
.stat__l{ font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-top:6px; position:relative }

/* -------------------------------------------------------------------- bento */
.bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:20px }
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px; box-shadow:var(--shadow-sm);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position:relative; overflow:hidden;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:#D6CBFA }
.card--wide{ grid-column:span 3 } .card--third{ grid-column:span 2 } .card--half{ grid-column:span 3 }
.card__art{ border-radius:var(--r-md); overflow:hidden; margin-bottom:20px; background:var(--lilac) }
.card__art img{ width:100%; height:auto }
.card h3{ font-size:19px; margin-bottom:8px }
.card p{ font-size:14.5px; color:var(--muted) }
.card__tag{ position:absolute; top:18px; right:18px; font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); background:rgba(255,122,69,.12); padding:5px 10px; border-radius:999px }

/* --------------------------------------------------------------------- tabs */
.tabs{ display:grid; grid-template-columns:340px minmax(0,1fr); gap:34px; align-items:start }
.tabs__list{ display:flex; flex-direction:column; gap:10px }
.tab{
  text-align:left; background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  padding:18px 20px; cursor:pointer; font-family:var(--font-body); transition:all .22s ease; position:relative;
}
.tab b{ display:block; font-family:var(--font-display); font-size:16px; color:var(--ink); font-weight:800 }
.tab span{ display:block; font-size:13px; color:var(--muted); margin-top:4px }
.tab:hover{ border-color:#CFC2F8 }
.tab[aria-selected="true"]{ background:var(--ink); border-color:var(--ink) }
.tab[aria-selected="true"] b{ color:#fff } .tab[aria-selected="true"] span{ color:#B9AEE8 }
.tabs__panel{ border:1px solid var(--line); border-radius:var(--r-xl); background:linear-gradient(150deg,#F4F0FF,#fff 60%); padding:22px; box-shadow:var(--shadow-md) }
.tabs__panel img{ border-radius:var(--r-md); width:100%; height:auto }
.tabs__pane{ display:none } .tabs__pane.is-active{ display:block; animation:fade .45s ease }
@keyframes fade{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }

/* --------------------------------------------------------------- testimonial */
.quotes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px }
.quote{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:28px; box-shadow:var(--shadow-sm) }
.quote__stars{ color:var(--accent); font-size:15px; letter-spacing:2px }
.quote p{ margin:14px 0 20px; font-size:15px; color:var(--ink-soft) }
.quote__who{ display:flex; align-items:center; gap:12px }
.quote__who img{ width:44px; height:44px; border-radius:14px }
.quote__who b{ display:block; font-size:14px; color:var(--ink) }
.quote__who span{ font-family:var(--font-mono); font-size:11.5px; color:var(--muted) }

/* ------------------------------------------------------------------ pricing */
.toggle{ display:inline-flex; background:#fff; border:1px solid var(--line); border-radius:999px; padding:5px; gap:4px; margin-top:18px }
.toggle button{ border:0; background:none; font-family:var(--font-body); font-weight:700; font-size:13.5px; color:var(--muted); padding:9px 20px; border-radius:999px; cursor:pointer }
.toggle button[aria-pressed="true"]{ background:var(--ink); color:#fff }
.toggle em{ font-style:normal; font-family:var(--font-mono); font-size:10.5px; color:var(--mint); margin-left:6px }
.plans{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px; align-items:stretch }
.plan{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:28px 24px; display:flex; flex-direction:column; box-shadow:var(--shadow-sm); position:relative }
.plan--pop{ border:2px solid var(--primary); box-shadow:var(--shadow-lg) }
.plan__badge{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--primary); color:#fff; font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.1em; padding:5px 14px; border-radius:999px; text-transform:uppercase }
.plan h3{ font-size:19px } .plan__tag{ font-size:13px; color:var(--muted); min-height:38px; margin-top:6px }
.plan__price{ margin:16px 0 6px; display:flex; align-items:baseline; gap:5px }
.plan__price b{ font-family:var(--font-display); font-size:40px; color:var(--ink); letter-spacing:-.04em }
.plan__price span{ font-family:var(--font-mono); font-size:12.5px; color:var(--muted) }
.plan__was{ font-family:var(--font-mono); font-size:12px; color:var(--muted); text-decoration:line-through }
.plan__list{ list-style:none; padding:0; margin:18px 0 22px; display:grid; gap:9px }
.plan__list li{ font-size:13.5px; color:var(--ink-soft); display:flex; gap:9px; align-items:flex-start }
.plan__list li::before{ content:'✦'; color:var(--mint); font-size:12px; line-height:1.5 }
.plan .btn{ margin-top:auto }

/* ---------------------------------------------------------------------- faq */
.faq{ max-width:760px; margin:0 auto; display:grid; gap:12px }
.faq__item{ background:#fff; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden }
.faq__q{ width:100%; display:flex; gap:16px; align-items:center; justify-content:space-between; background:none; border:0; cursor:pointer; padding:20px 22px; text-align:left; font-family:var(--font-display); font-size:16px; font-weight:800; color:var(--ink) }
.faq__q i{ flex:none; width:26px; height:26px; border-radius:50%; background:var(--lilac); color:var(--primary); display:grid; place-items:center; font-style:normal; font-size:16px; transition:transform .25s ease }
.faq__item.is-open .faq__q i{ transform:rotate(45deg); background:var(--primary); color:#fff }
.faq__a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease }
.faq__item.is-open .faq__a{ grid-template-rows:1fr }
.faq__a > div{ overflow:hidden }
.faq__a p{ padding:0 22px 22px; font-size:14.5px; color:var(--muted) }

/* ---------------------------------------------------------------- final cta */
.cta{ position:relative; overflow:hidden; border-radius:var(--r-xl); background:linear-gradient(130deg,var(--primary-deep),var(--primary) 58%,#7C4DFF); color:#fff; padding:64px 40px; text-align:center }
.cta::before,.cta::after{ content:''; position:absolute; border-radius:50%; filter:blur(50px) }
.cta::before{ width:280px; height:280px; background:rgba(255,122,69,.42); top:-110px; left:-60px }
.cta::after{ width:240px; height:240px; background:rgba(18,184,134,.34); bottom:-100px; right:-40px }
.cta > *{ position:relative; z-index:1 }
.cta h2{ color:#fff }
.cta p{ color:#DCD3FF; margin:14px auto 28px; max-width:520px }

/* ------------------------------------------------------------------- footer */
.foot{ background:var(--ink); color:#B9AEE8; margin-top:90px; padding:60px 0 28px }
.foot a{ color:#B9AEE8; font-size:14px } .foot a:hover{ color:#fff }
.foot__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px }
.foot h4{ color:#fff; font-size:14px; margin-bottom:14px; font-family:var(--font-mono); font-weight:600; letter-spacing:.1em; text-transform:uppercase }
.foot__col{ display:grid; gap:10px; align-content:start }
.foot__brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800; font-size:20px; color:#fff }
.foot__brand em{ font-style:normal; color:#A78BFA }
.foot__bar{ margin-top:40px; padding-top:20px; border-top:1px solid #2E2554; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12.5px; color:#7A6FA8 }

/* ---------------------------------------------------------------- floaties */
.fab{ position:fixed; right:20px; bottom:20px; z-index:70; display:grid; gap:10px }
.fab a,.fab button{
  width:50px; height:50px; border-radius:16px; border:0; cursor:pointer;
  display:grid; place-items:center; box-shadow:var(--shadow-md); color:#fff; font-size:19px;
}
.fab .fab__wa{ background:#25D366 }
.fab .fab__top{ background:var(--ink); opacity:0; pointer-events:none; transition:opacity .25s }
.fab .fab__top.is-on{ opacity:1; pointer-events:auto }

/* --------------------------------------------------------------- flash msgs */
.flash{ position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:200; width:min(92%,430px); display:grid; gap:8px }
.flash__i{ padding:13px 18px; border-radius:14px; font-size:14px; font-weight:600; box-shadow:var(--shadow-md); background:#fff; border:1px solid var(--line); color:var(--ink) }
.flash__i--error{ background:#FFF1EC; border-color:#FFD3C2; color:#B3350F }
.flash__i--success{ background:#EAFBF4; border-color:#B9EEDC; color:#0B7A5C }

/* ------------------------------------------------------------ scroll reveal */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1) }
.reveal.is-in{ opacity:1; transform:none }

/* --------------------------------------------------------------- responsive */
@media (max-width:1000px){
  .hero__grid{ grid-template-columns:1fr; gap:40px }
  .tabs{ grid-template-columns:1fr }
  .tabs__list{ flex-direction:row; overflow-x:auto; padding-bottom:6px; scrollbar-width:none }
  .tabs__list::-webkit-scrollbar{ display:none }
  .tab{ min-width:210px }
  .bento{ grid-template-columns:repeat(4,1fr) }
  .card--wide,.card--half{ grid-column:span 4 } .card--third{ grid-column:span 2 }
  .foot__grid{ grid-template-columns:1fr 1fr }
}
@media (max-width:720px){
  .section{ padding:64px 0 }
  .nav__links{
    display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column;
    align-items:stretch; gap:8px; background:#fff; border-bottom:1px solid var(--line);
    padding:16px 22px 22px; box-shadow:var(--shadow-md);
  }
  .nav__links.is-open{ display:flex }
  .nav__toggle{ display:block }
  .bento{ grid-template-columns:1fr }
  .card--wide,.card--half,.card--third{ grid-column:span 1 }
  .receipt{ display:none }
  .carousel__nav{ width:34px; height:34px }
  .foot__grid{ grid-template-columns:1fr }
  .cta{ padding:48px 22px }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important }
  .reveal{ opacity:1; transform:none }
}

/* ---------------------------------------------------- bento extra spans */
.card--full{ grid-column:span 6; display:grid; grid-template-columns:1.05fr 1fr; gap:30px; align-items:center }
.card--full .card__art{ margin-bottom:0 }
.card--full .card__body h3{ font-size:23px }
@media (max-width:1000px){ .card--full{ grid-column:span 4; grid-template-columns:1fr } }
@media (max-width:720px){ .card--full{ grid-column:span 1 } }

/* --------------------------------------------------------- split feature */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center }
.split__art{ border:1px solid var(--line); border-radius:var(--r-xl); background:linear-gradient(150deg,#F4F0FF,#fff 60%); padding:20px; box-shadow:var(--shadow-md) }
.split ul{ list-style:none; padding:0; margin:24px 0 0; display:grid; gap:13px }
.split li{ display:flex; gap:12px; font-size:15px; color:var(--ink-soft) }
.split li b{ color:var(--ink) }
.split li::before{ content:''; flex:none; width:22px; height:22px; border-radius:8px; background:var(--lilac); border:1px solid var(--line) }
@media (max-width:900px){ .split{ grid-template-columns:1fr; gap:34px } }

/* ------------------------------------------------------------- page hero */
.phero{ position:relative; overflow:hidden; padding:64px 0 44px; background:linear-gradient(160deg,#F2EDFF,var(--bg) 70%); border-bottom:1px solid var(--line) }
.phero .lead{ margin-top:14px; max-width:620px }
.prose{ max-width:760px; margin:0 auto; font-size:16.5px; line-height:1.75; color:var(--ink-soft) }
.prose h2{ font-size:26px; margin:34px 0 12px } .prose h3{ font-size:20px; margin:28px 0 10px }
.prose p{ margin:0 0 16px } .prose ul,.prose ol{ padding-left:22px; margin:0 0 16px } .prose li{ margin:6px 0 }
.prose a{ text-decoration:underline }

/* ---------------------------------------------------------------- forms */
.field{ display:grid; gap:7px }
.field label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }
.input{
  width:100%; font-family:var(--font-body); font-size:15px; color:var(--ink);
  background:#fff; border:1.5px solid var(--line); border-radius:12px; padding:13px 15px; transition:border-color .18s, box-shadow .18s;
}
.input:focus{ outline:0; border-color:var(--primary); box-shadow:0 0 0 4px rgba(91,61,245,.12) }
.input::placeholder{ color:#A79FC4 }
.panel{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:30px; box-shadow:var(--shadow-md) }

/* ------------------------------------------------------- compare table */
.compare{ width:100%; border-collapse:separate; border-spacing:0; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; font-size:14px }
.compare th,.compare td{ padding:14px 16px; text-align:left; border-bottom:1px solid var(--line) }
.compare thead th{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); background:var(--lilac) }
.compare tbody tr:last-child td{ border-bottom:0 }
.compare td:not(:first-child),.compare th:not(:first-child){ text-align:center }
.compare .yes{ color:var(--mint); font-weight:800 } .compare .no{ color:#C9C1E4 }
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch }