/* ==========================================================================
   Impexinfotechindia SEO Suite — site styles
   Palette taken from the plugin's own admin CSS so the marketing site and
   the product a user lands in after install read as one thing.
   ========================================================================== */

:root {
  --ink:        #141126;
  --ink-2:      #1e1b3a;
  --ink-3:      #2a2550;
  --violet:     #5958a6;
  --violet-d:   #464589;
  --violet-l:   #7d7cc4;
  --teal:       #57c6d0;
  --teal-d:     #3ba7b1;
  --paper:      #f7f7fc;
  --white:      #ffffff;
  --line:       #e7e8ef;
  --muted:      #6b7280;
  --muted-l:    #9aa1bd;
  --good:       #16a34a;
  --warn:       #f59e0b;
  --bad:        #dc2626;

  --grad:       linear-gradient(120deg, #5958a6 0%, #6d6cc0 55%, #57c6d0 130%);
  --r:          14px;
  --r-sm:       10px;
  --r-lg:       22px;
  --shadow:     0 6px 22px -12px rgba(45, 43, 94, .28);
  --shadow-lg:  0 24px 60px -28px rgba(20, 17, 38, .38);

  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --display: 'Space Grotesk', var(--sans);
  --mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: #2c3040;
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--violet); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
  color: var(--ink);
}
h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.22rem; }
p  { margin: 0 0 1rem; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }

/* ── Eyebrow: rendered as a meta tag, because that is this product's world ─ */
.eyebrow {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: lowercase;
  color: var(--teal-d);
  margin-bottom: 14px;
  display: inline-block;
}
.eyebrow::before { content: '<meta name="'; opacity: .45; }
.eyebrow::after  { content: '">'; opacity: .45; }
.on-dark .eyebrow { color: var(--teal); }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-weight: 600; font-size: .95rem;
  padding: 13px 26px; border-radius: var(--r-sm);
  border: 1px solid transparent; cursor: pointer;
  text-decoration: none; transition: transform .15s, box-shadow .15s, background .15s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.btn--primary { background: var(--violet); color: #fff; box-shadow: 0 10px 26px -14px rgba(89,88,166,.9); }
.btn--primary:hover { background: var(--violet-d); }
.btn--teal { background: var(--teal); color: #06333a; }
.btn--teal:hover { background: var(--teal-d); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--violet); color: var(--violet); }
.on-dark .btn--ghost { color: #fff; border-color: rgba(255,255,255,.28); }
.on-dark .btn--ghost:hover { border-color: var(--teal); color: var(--teal); }
.btn--sm { padding: 8px 15px; font-size: .84rem; }
.btn--block { width: 100%; justify-content: center; }
.btn[disabled] { opacity: .55; pointer-events: none; }

/* ── Header ──────────────────────────────────────────────────────────── */
.site-head {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-head__in { display: flex; align-items: center; gap: 30px; height: 70px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); font-weight: 700; }
.brand img { height: 30px; width: auto; }
.brand span { font-family: var(--display); font-size: 1.02rem; letter-spacing: -.01em; }
.brand small { display: block; font-family: var(--mono); font-size: .58rem; color: var(--teal-d); letter-spacing: .08em; text-transform: uppercase; line-height: 1; }
.nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.nav a {
  padding: 9px 14px; border-radius: 8px; text-decoration: none;
  color: #3d4356; font-weight: 500; font-size: .93rem;
}
.nav a:hover { background: var(--paper); color: var(--violet); }
.nav a.is-active { color: var(--violet); background: #f0f0fa; }
.nav-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px; cursor: pointer; }

/* The brand is a name, not a sentence — it must never wrap onto two lines and
   push the header taller. Between the mobile breakpoint and roughly 1120px the
   full nav plus "Impex Rank SEO" plus the install button is a tight fit, so the
   links give up some padding before anything is allowed to wrap. */
.brand span { white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1120px) {
  .nav a { padding: 9px 9px; font-size: .89rem; }
  .nav .btn { padding: 8px 12px; }
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute; top: 70px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 12px 24px 20px; display: none; margin-left: 0;
  }
  .nav.is-open { display: flex; }
  .nav .btn { justify-content: center; margin-top: 8px; }
}

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero {
  background:
    radial-gradient(900px 480px at 82% -8%, rgba(87,198,208,.20), transparent 62%),
    radial-gradient(700px 500px at 5% 108%, rgba(89,88,166,.34), transparent 60%),
    linear-gradient(160deg, #171334 0%, #100d22 60%, #0c0a1c 100%);
  color: #fff;
  padding: clamp(64px, 9vw, 118px) 0 clamp(72px, 10vw, 130px);
  position: relative; overflow: hidden;
}
.hero::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 5px;
  background: linear-gradient(90deg, var(--teal) 0 42%, var(--violet) 42% 100%);
}
.hero h1 { color: #fff; max-width: 15ch; }
.hero h1 em { font-style: normal; color: var(--teal); }
.hero__grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 60px; align-items: center; }
.hero__lede { font-size: 1.14rem; color: #b9bfdd; max-width: 46ch; margin-bottom: 30px; }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__trust { margin-top: 32px; display: flex; gap: 26px; flex-wrap: wrap; font-size: .85rem; color: #8f97bd; }
.hero__trust b { color: #fff; font-family: var(--display); font-size: 1.42rem; display: block; line-height: 1.2; }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: 44px; }
}

/* ── Signature: the live SERP snippet ────────────────────────────────── */
.serp {
  background: #fff; border-radius: var(--r-lg); padding: 26px 26px 22px;
  box-shadow: var(--shadow-lg); color: var(--ink); position: relative;
}
.serp__chrome { display: flex; gap: 6px; margin-bottom: 20px; }
.serp__chrome i { width: 10px; height: 10px; border-radius: 50%; background: #e2e4ee; }
.serp__url { font-family: var(--mono); font-size: .78rem; color: #5f6368; margin-bottom: 5px; }
.serp__title {
  font-size: 1.32rem; color: #1a0dab; font-weight: 500; line-height: 1.3;
  font-family: var(--sans); letter-spacing: -.01em; margin-bottom: 6px; min-height: 1.3em;
}
.serp__desc { font-size: .93rem; color: #4d5156; line-height: 1.55; min-height: 3em; }
.serp__caret { display: inline-block; width: 2px; height: 1em; background: var(--violet); vertical-align: -2px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.serp__meter { display: flex; gap: 18px; align-items: center; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.ring { --pct: 0; width: 74px; height: 74px; flex-shrink: 0; position: relative; }
.ring svg { transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 8; stroke-linecap: round; }
.ring .bg { stroke: #edeef5; }
.ring .fg { stroke: var(--teal); stroke-dasharray: 201; stroke-dashoffset: calc(201 - (201 * var(--pct)) / 100); transition: stroke-dashoffset .7s ease; }
.ring b {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--display); font-size: 1.22rem; color: var(--ink);
}
.serp__checks { display: grid; gap: 7px; font-size: .83rem; flex: 1; }
.serp__checks li { list-style: none; display: flex; gap: 8px; align-items: center; color: #4b5563; }
.serp__checks .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dot--good { background: var(--good); } .dot--warn { background: var(--warn); } .dot--bad { background: var(--bad); }
.serp__counts { display: flex; gap: 16px; font-family: var(--mono); font-size: .72rem; color: var(--muted); margin-top: 12px; }
.serp__counts b { color: var(--good); font-weight: 500; }
.serp__counts b.over { color: var(--bad); }

/* ── Sections ────────────────────────────────────────────────────────── */
.sec { padding: clamp(58px, 8vw, 100px) 0; }
.sec--paper { background: var(--paper); }
.sec--ink { background: var(--ink); color: #c3c9e4; }
.sec--ink h2, .sec--ink h3 { color: #fff; }
.sec__head { max-width: 640px; margin-bottom: 48px; }
.sec__head.center { margin-left: auto; margin-right: auto; }
.sec__head p { color: var(--muted); font-size: 1.05rem; }
.sec--ink .sec__head p { color: #9aa1bd; }

/* ── Feature grid ────────────────────────────────────────────────────── */
.grid { display: grid; gap: 20px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 980px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid--3, .grid--4, .grid--2 { grid-template-columns: 1fr; } }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px 24px; transition: border-color .18s, transform .18s, box-shadow .18s;
}
.card:hover { border-color: var(--violet-l); transform: translateY(-3px); box-shadow: var(--shadow); }
.card h3 { margin-bottom: 8px; font-size: 1.06rem; }
.card p { color: var(--muted); font-size: .93rem; margin: 0; }
.card__ico {
  width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  background: #f0f0fa; color: var(--violet); margin-bottom: 16px;
}
.card__ico svg { width: 21px; height: 21px; }
.sec--ink .card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.09); }
.sec--ink .card p { color: #98a0c0; }
.sec--ink .card__ico { background: rgba(87,198,208,.14); color: var(--teal); }

/* ── Free-plugin call-out strip ──────────────────────────────────────── */
.wporg {
  display: grid; grid-template-columns: auto 1fr auto; gap: 26px; align-items: center;
  background: linear-gradient(120deg, #fff, #f4f4fc);
  border: 1px solid var(--line); border-left: 5px solid var(--teal);
  border-radius: var(--r); padding: 26px 30px;
}
.wporg img { width: 58px; border-radius: 12px; }
.wporg h3 { margin-bottom: 4px; }
.wporg p { margin: 0; color: var(--muted); font-size: .93rem; }
@media (max-width: 760px) { .wporg { grid-template-columns: 1fr; text-align: center; justify-items: center; } }

/* ── Pricing ─────────────────────────────────────────────────────────── */
.plans { display: grid; gap: 22px; align-items: start; }
.plans[data-cards="1"] { grid-template-columns: minmax(0, 380px); justify-content: center; }
.plans[data-cards="2"] { grid-template-columns: repeat(2, 1fr); max-width: 780px; margin: 0 auto; }
.plans[data-cards="3"] { grid-template-columns: repeat(3, 1fr); }
.plans[data-cards="4"] { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .plans[data-cards="4"] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px)  { .plans[data-cards="3"] { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } }
@media (max-width: 640px)  { .plans[data-cards="2"], .plans[data-cards="4"] { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } }

.plan {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 30px 26px; display: flex; flex-direction: column; position: relative;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.plan--featured { border-color: var(--violet); border-width: 2px; box-shadow: 0 20px 50px -30px rgba(89,88,166,.75); }
.plan__flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--grad); color: #fff; font-size: .68rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; padding: 6px 15px; border-radius: 20px;
  white-space: nowrap;
}
.plan__name { font-family: var(--display); font-size: 1.16rem; font-weight: 700; color: var(--ink); }
.plan__tag { color: var(--muted); font-size: .86rem; min-height: 2.6em; margin: 6px 0 18px; }
.plan__price { font-family: var(--display); font-size: 2.7rem; font-weight: 700; color: var(--ink); line-height: 1; letter-spacing: -.03em; }
.plan__per { font-family: var(--sans); font-size: .88rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.plan__sites { font-family: var(--mono); font-size: .74rem; color: var(--teal-d); margin: 12px 0 20px; padding: 6px 10px; background: #f0fbfc; border-radius: 7px; display: inline-block; }
.plan ul { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 10px; }
.plan li { display: flex; gap: 10px; font-size: .9rem; color: #43485c; align-items: flex-start; line-height: 1.45; }
.plan li svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--good); margin-top: 3px; }
.plan .btn { margin-top: auto; }

/* ── Pro page ────────────────────────────────────────────────────────── */

/* The hero's right-hand object: the free cap next to no cap. It replaces the
   home page's SERP widget in the same grid slot, so it inherits .hero__grid's
   column sizing and only has to describe itself. */
.pro-swap {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center;
}
.pro-swap__side {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-lg); padding: 26px 20px; text-align: center;
}
.pro-swap__side--pro { background: rgba(87,198,208,.12); border-color: rgba(87,198,208,.4); }
.pro-swap__label {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-l);
}
.pro-swap__side--pro .pro-swap__label { color: var(--teal); }
.pro-swap__n {
  font-family: var(--display); font-weight: 700; font-size: 3.4rem; line-height: 1.1;
  color: #fff; letter-spacing: -.03em;
}
.pro-swap__unit { display: block; font-size: .78rem; color: var(--muted-l); }
.pro-swap__dots {
  list-style: none; padding: 0; margin: 18px auto 0; display: grid;
  grid-template-columns: repeat(3, 1fr); gap: 6px; max-width: 76px;
}
.pro-swap__dots li {
  aspect-ratio: 1; border-radius: 3px; background: rgba(255,255,255,.12);
}
.pro-swap__dots li.is-on { background: rgba(255,255,255,.55); }
.pro-swap__side--pro .pro-swap__dots li.is-on { background: var(--teal); }
.pro-swap__arrow { color: var(--teal); }
.pro-swap__arrow svg { width: 26px; height: 26px; }
@media (max-width: 900px) { .pro-swap { max-width: 420px; margin: 0 auto; } }
@media (max-width: 440px) {
  .pro-swap { grid-template-columns: 1fr; }
  .pro-swap__arrow { transform: rotate(90deg); justify-self: center; }
}

/* The single-plan card. Not .plan: that is a column in a grid of columns, and
   this one stands alone and reads across instead. */
.pro-price {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 30px; align-items: center;
  background: #fff; border: 2px solid var(--violet); border-radius: var(--r-lg);
  padding: 32px 30px; box-shadow: 0 20px 50px -30px rgba(89,88,166,.75);
}
.pro-price__feats { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.pro-price__feats li { display: flex; gap: 10px; font-size: .9rem; color: #43485c; align-items: flex-start; line-height: 1.45; }
.pro-price__feats svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--good); margin-top: 3px; }
.pro-price__act { display: grid; gap: 10px; }
@media (max-width: 900px) {
  .pro-price { grid-template-columns: 1fr; text-align: center; }
  .pro-price__feats { text-align: left; max-width: 340px; margin: 0 auto; }
}

/* ── Comparison / docs tables ────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
table.data { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.data th, table.data td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); }
table.data th { background: var(--paper); font-weight: 600; color: var(--ink); font-size: .82rem; letter-spacing: .02em; text-transform: uppercase; }
table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: #fbfbff; }
table.data code { font-family: var(--mono); font-size: .82rem; background: var(--paper); padding: 2px 6px; border-radius: 5px; }

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); padding: 20px 0; }
.faq summary { cursor: pointer; font-weight: 600; font-family: var(--display); font-size: 1.02rem; color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 20px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--violet); font-size: 1.5rem; line-height: 1; font-weight: 400; }
.faq details[open] summary::after { content: '−'; }
.faq p { margin: 12px 0 0; color: var(--muted); font-size: .95rem; max-width: 70ch; }

/* ── Code block ──────────────────────────────────────────────────────── */
pre.code {
  background: var(--ink); color: #d7dcf5; border-radius: var(--r);
  padding: 20px 22px; overflow-x: auto; font-family: var(--mono);
  font-size: .82rem; line-height: 1.7; margin: 0 0 18px;
}
pre.code .c { color: #7681b5; }
pre.code .s { color: var(--teal); }

/* ── Forms ───────────────────────────────────────────────────────────── */
.form { display: grid; gap: 16px; }
.field label { display: block; font-size: .85rem; font-weight: 600; color: #3d4356; margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm);
  font-family: var(--sans); font-size: .95rem; background: #fff; color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(89,88,166,.14);
}
.field textarea { min-height: 130px; resize: vertical; }
.field .hint { font-size: .78rem; color: var(--muted); margin-top: 5px; }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .field--row { grid-template-columns: 1fr; } }
.hp { position: absolute; left: -9999px; }

.panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 34px; box-shadow: var(--shadow);
}
.panel--narrow { max-width: 470px; margin: 0 auto; }

.alert { padding: 13px 16px; border-radius: var(--r-sm); font-size: .9rem; margin-bottom: 18px; }
.alert--ok   { background: #ecfdf3; color: #166534; border: 1px solid #bbf7d0; }
.alert--warn { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.alert--bad  { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* ── Badges & keys ───────────────────────────────────────────────────── */
.badge {
  display: inline-block; font-size: .72rem; font-weight: 600; padding: 4px 10px;
  border-radius: 20px; letter-spacing: .03em; text-transform: uppercase;
}
.badge--active    { background: #ecfdf3; color: #166534; }
.badge--pending   { background: #fffbeb; color: #92400e; }
.badge--expired   { background: #fef2f2; color: #991b1b; }
.badge--cancelled { background: #f3f4f6; color: #4b5563; }
.badge--paid      { background: #ecfdf3; color: #166534; }
.badge--failed    { background: #fef2f2; color: #991b1b; }
.badge--refunded  { background: #f3f4f6; color: #4b5563; }

.keybox {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 1rem; font-weight: 500;
  background: #f4f4fb; border: 1px dashed #c9c9e4; border-radius: var(--r-sm);
  padding: 13px 16px; color: var(--violet); letter-spacing: .04em; word-break: break-all;
}
.keybox button { margin-left: auto; }

/* ── Footer ──────────────────────────────────────────────────────────── */
.site-foot { background: var(--ink); color: #8e96bc; padding: 62px 0 30px; font-size: .9rem; }
.site-foot h4 { color: #fff; font-family: var(--display); font-size: .93rem; margin: 0 0 14px; }
.site-foot a { color: #b6bcd8; text-decoration: none; display: block; padding: 4px 0; }
.site-foot a:hover { color: var(--teal); }
.foot__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 820px) { .foot__grid { grid-template-columns: 1fr 1fr; gap: 30px; } }
.foot__brand img { height: 32px; filter: brightness(0) invert(1); margin-bottom: 14px; }
.foot__bar {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.09);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .82rem;
}

/* ── Account area ────────────────────────────────────────────────────── */
.acct { padding: 48px 0 80px; background: var(--paper); min-height: 68vh; }
.acct__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.sub-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 24px; margin-bottom: 18px; }
.sub-card__top { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.meta-row { display: flex; gap: 28px; flex-wrap: wrap; font-size: .86rem; color: var(--muted); margin-top: 14px; }
.meta-row b { display: block; color: var(--ink); font-family: var(--display); font-size: 1rem; }

.empty { text-align: center; padding: 54px 24px; color: var(--muted); }
.empty svg { width: 46px; height: 46px; color: var(--muted-l); margin: 0 auto 14px; }

/* ==========================================================================
   Coming Soon — the Pro add-on teaser
   Animation is CSS-only and respects prefers-reduced-motion (see top of file,
   which disables all animation globally under that query).
   ========================================================================== */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.cs-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(165deg, #171334 0%, #100d22 55%, #0a0817 100%);
  color: #fff; padding: clamp(70px, 10vw, 120px) 0 0;
  isolation: isolate;
}
.cs-hero__in { position: relative; z-index: 2; text-align: center; max-width: 760px; }

/* ── Drifting orbs ───────────────────────────────────────────────────── */
.cs-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.cs-orb {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5;
  will-change: transform;
}
.cs-orb--1 { width: 520px; height: 520px; background: #5958a6; top: -160px; left: -120px; animation: drift1 22s ease-in-out infinite; }
.cs-orb--2 { width: 420px; height: 420px; background: #57c6d0; top: 40px;   right: -110px; animation: drift2 26s ease-in-out infinite; }
.cs-orb--3 { width: 360px; height: 360px; background: #7d3fa0; bottom: -140px; left: 42%;  animation: drift3 30s ease-in-out infinite; }

@keyframes drift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(70px,50px) scale(1.12); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-60px,70px) scale(.9); } }
@keyframes drift3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(50px,-60px) scale(1.15); } }

/* Faint moving grid — reads as "under construction" without being literal */
.cs-grid {
  position: absolute; inset: -50%;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 54px 54px;
  animation: gridpan 34s linear infinite;
  mask-image: radial-gradient(ellipse 60% 55% at 50% 42%, #000 35%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 42%, #000 35%, transparent 78%);
}
@keyframes gridpan { to { transform: translate(54px, 54px); } }

/* ── Status pill ─────────────────────────────────────────────────────── */
.cs-pill {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(87,198,208,.12); border: 1px solid rgba(87,198,208,.34);
  color: var(--teal); border-radius: 30px; padding: 7px 17px;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .08em;
  text-transform: uppercase; margin-bottom: 26px;
}
.cs-pill__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--teal);
  box-shadow: 0 0 0 0 rgba(87,198,208,.7); animation: pulse 2s infinite;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 11px rgba(87,198,208,0); }
  100% { box-shadow: 0 0 0 0 rgba(87,198,208,0); }
}

/* ── Title ───────────────────────────────────────────────────────────── */
.cs-title {
  font-size: clamp(3rem, 9vw, 6rem); line-height: .95; margin: 0 0 22px;
  color: #fff; letter-spacing: -.045em;
}
.cs-title__line { display: inline-block; animation: rise .8s cubic-bezier(.2,.7,.3,1) both; }
.cs-title__line--accent {
  background: linear-gradient(96deg, var(--teal) 8%, #9d8bff 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation-delay: .13s;
}
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

.cs-lede {
  font-size: 1.1rem; color: #b3bad9; max-width: 52ch; margin: 0 auto 40px;
  animation: rise .8s .26s cubic-bezier(.2,.7,.3,1) both;
}
.cs-lede strong { color: #fff; }

/* ── Module stack: items tick in one by one ──────────────────────────── */
.cs-stack {
  display: grid; gap: 9px; max-width: 430px; margin: 0 auto 42px; text-align: left;
}
.cs-mod {
  display: flex; align-items: center; gap: 13px;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px; padding: 13px 17px;
  animation: modin .6s cubic-bezier(.2,.7,.3,1) both;
  animation-delay: calc(.5s + var(--d));
}
@keyframes modin { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }

.cs-mod__tick {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: rgba(87,198,208,.16); color: var(--teal);
}
.cs-mod__tick svg { width: 12px; height: 12px; }
.cs-mod__label { font-size: .94rem; font-weight: 500; color: #e6e9f7; }
.cs-mod__tag {
  margin-left: auto; font-family: var(--mono); font-size: .66rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: #8b93bb; background: rgba(255,255,255,.06);
  padding: 3px 9px; border-radius: 5px;
}

/* ── Waitlist form ───────────────────────────────────────────────────── */
.cs-form { animation: rise .8s 1.3s cubic-bezier(.2,.7,.3,1) both; }
.cs-inline {
  display: flex; gap: 9px; max-width: 440px; margin: 0 auto;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px; padding: 7px;
  transition: border-color .2s, box-shadow .2s;
}
.cs-inline:focus-within {
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(87,198,208,.15);
}
.cs-inline input[type=email] {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: none;
  color: #fff; font-family: var(--sans); font-size: .96rem; padding: 11px 14px;
}
.cs-inline input[type=email]::placeholder { color: #7a82ab; }
.cs-inline .btn { flex-shrink: 0; }

.cs-note {
  font-size: .82rem; color: #8b93bb; margin: 15px 0 0;
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; align-items: center;
}
.cs-count {
  font-family: var(--mono); font-size: .76rem; color: var(--teal);
  background: rgba(87,198,208,.1); padding: 4px 11px; border-radius: 20px;
}

.cs-done {
  display: flex; align-items: center; gap: 16px; text-align: left;
  max-width: 440px; margin: 0 auto;
  background: rgba(87,198,208,.1); border: 1px solid rgba(87,198,208,.3);
  border-radius: 14px; padding: 20px 22px;
  animation: rise .5s cubic-bezier(.2,.7,.3,1) both;
}
.cs-done__ring {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; background: var(--teal); color: #06333a;
}
.cs-done__ring svg { width: 20px; height: 20px; }
.cs-done strong { color: #fff; display: block; font-size: 1rem; }
.cs-done p { margin: 3px 0 0; font-size: .87rem; color: #a9b1d3; }

/* ── Meanwhile ───────────────────────────────────────────────────────── */
.cs-meanwhile {
  margin: 56px auto 0; padding-top: 34px; max-width: 520px;
  border-top: 1px solid rgba(255,255,255,.09);
  animation: rise .8s 1.5s cubic-bezier(.2,.7,.3,1) both;
}
.cs-meanwhile p { color: #9aa1c4; font-size: .95rem; margin-bottom: 18px; }

/* ── Marquee ─────────────────────────────────────────────────────────── */
.cs-marquee {
  margin-top: clamp(56px, 8vw, 90px); padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,.08);
  overflow: hidden; position: relative; z-index: 2;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.cs-marquee__track {
  display: flex; gap: 15px; align-items: center; width: max-content;
  animation: scroll 46s linear infinite;
}
.cs-marquee__item {
  font-family: var(--mono); font-size: .8rem; color: #7d85ad; white-space: nowrap;
}
.cs-marquee__sep { color: var(--teal); opacity: .5; }
@keyframes scroll { to { transform: translateX(-50%); } }

@media (max-width: 560px) {
  .cs-inline { flex-direction: column; padding: 10px; }
  .cs-inline .btn { width: 100%; justify-content: center; }
  .cs-stack { max-width: 100%; }
}

/* ── Homepage teaser strip ───────────────────────────────────────────── */
.teaser {
  background: linear-gradient(120deg, #171334, #241d52 60%, #14405a);
  border-radius: var(--r-lg); padding: clamp(34px, 5vw, 54px);
  color: #fff; text-align: center; position: relative; overflow: hidden;
}
.teaser::after {
  content: ''; position: absolute; inset: -50% -10%;
  background: radial-gradient(circle at 30% 30%, rgba(87,198,208,.22), transparent 55%);
  animation: drift2 24s ease-in-out infinite; pointer-events: none;
}
.teaser > * { position: relative; z-index: 1; }
.teaser h2 { color: #fff; margin-bottom: 12px; }
.teaser p { color: #b3bad9; max-width: 52ch; margin: 0 auto 26px; }

.nav-soon {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--teal-d);
  background: #e8f9fb; padding: 2px 6px; border-radius: 5px; margin-left: 4px;
  vertical-align: 1px;
}

/* ── Inner page hero (legal, pricing, about) ─────────────────────────── */
.page-hero {
  background:
    radial-gradient(720px 380px at 88% -20%, rgba(87,198,208,.16), transparent 62%),
    linear-gradient(160deg, #171334 0%, #100d22 70%);
  color: #fff; padding: clamp(56px, 7vw, 84px) 0 clamp(48px, 6vw, 68px);
  position: relative;
}
.page-hero::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 4px;
  background: linear-gradient(90deg, var(--teal) 0 40%, var(--violet) 40% 100%);
}
.page-hero h1 { color: #fff; font-size: clamp(2rem, 4.4vw, 3.1rem); margin-bottom: 12px; }
.page-hero__sub { color: #a9b1d3; font-size: 1.05rem; max-width: 56ch; margin: 0; }
.page-hero .eyebrow { color: var(--teal); }

/* ── Long-form prose (legal pages) ───────────────────────────────────── */
.prose { max-width: 760px; }
.prose h2 {
  font-size: 1.42rem; margin: 44px 0 14px; padding-top: 22px;
  border-top: 1px solid var(--line);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-size: 1.06rem; margin: 26px 0 8px; }
.prose p { color: #454b60; line-height: 1.75; margin-bottom: 15px; }
.prose ul { margin: 0 0 18px; padding-left: 22px; }
.prose li { color: #454b60; line-height: 1.72; margin-bottom: 8px; }
.prose strong { color: var(--ink); }
.prose a { color: var(--violet); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--teal-d); }
.legal-block {
  background: var(--paper); border-left: 3px solid var(--violet);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 15px 18px; margin: 8px 0 18px; font-size: .94rem; line-height: 1.7;
}
.prose__foot {
  margin-top: 52px; padding-top: 22px; border-top: 2px solid var(--line);
  font-size: .9rem; color: var(--muted);
}
.prose__foot p { margin-bottom: 5px; }

/* ── Coming-soon plan variant ────────────────────────────────────────── */
.plan--soon { opacity: .93; }
.plan--soon .plan__price { color: var(--muted); }
.plan__flag--soon { background: linear-gradient(120deg, #6b7280, #9aa1bd); }

/* ── Footer additions ────────────────────────────────────────────────── */
.foot__author {
  display: inline-flex !important; align-items: center; gap: 6px;
  margin-top: 12px; color: var(--teal) !important; font-weight: 500; font-size: .86rem;
}
.foot__author:hover { color: #fff !important; }
.foot__product a { display: inline !important; padding: 0 !important; color: var(--teal); }
.foot__bar--fine {
  margin-top: 12px; padding-top: 12px; border-top: 0; font-size: .76rem; opacity: .7;
}

/* ── Docs layout ─────────────────────────────────────────────────────── */
.docs-layout { display: grid; grid-template-columns: 210px 1fr; gap: 52px; align-items: start; }
@media (max-width: 900px) { .docs-layout { grid-template-columns: 1fr; gap: 26px; } }

.docs-nav { position: sticky; top: 92px; }
@media (max-width: 900px) {
  .docs-nav { position: static; border-bottom: 1px solid var(--line); padding-bottom: 16px; }
  .docs-nav nav { display: flex; flex-wrap: wrap; gap: 6px; }
}
.docs-nav__label {
  display: block; font-family: var(--mono); font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted-l); margin-bottom: 12px;
}
@media (max-width: 900px) { .docs-nav__label { width: 100%; } }
.docs-nav a {
  display: block; padding: 7px 12px; border-radius: 8px; text-decoration: none;
  color: var(--muted); font-size: .89rem; border-left: 2px solid transparent;
}
.docs-nav a:hover { color: var(--violet); background: var(--paper); border-left-color: var(--violet); }
@media (max-width: 900px) {
  .docs-nav a { border-left: 0; border: 1px solid var(--line); }
}
.docs-body { max-width: none; }
.docs-body h2 { scroll-margin-top: 92px; }

/* -- Checkout / receipt ----------------------------------------------------- */
.co-layout { display: grid; grid-template-columns: 1fr 340px; gap: 26px; align-items: start; }
@media (max-width: 880px) { .co-layout { grid-template-columns: 1fr; } }

.co-side { display: grid; gap: 18px; position: sticky; top: 92px; }
@media (max-width: 880px) { .co-side { position: static; } }

.co-line {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 9px 0; font-size: .95rem; border-bottom: 1px solid var(--line);
}
.co-line:last-of-type { border-bottom: 0; }
.co-line--muted { color: var(--muted); font-size: .88rem; }
.co-total {
  margin-top: 8px; padding-top: 14px; border-top: 2px solid var(--line); border-bottom: 0;
  font-size: 1.05rem;
}
.co-total strong { font-family: var(--display); font-size: 1.3rem; color: var(--violet); }

.co-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.co-feats li { display: flex; gap: 9px; align-items: flex-start; font-size: .89rem; color: var(--muted); }
.co-feats svg { width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--teal-d); }

.co-steps { margin: 16px 0 20px; padding-left: 20px; display: grid; gap: 8px; }
.co-steps li { font-size: .92rem; color: var(--muted); }
.co-steps strong, .co-steps em { color: var(--ink); }

/* -- Billing cycle switcher ------------------------------------------------ */
.cycle-switch {
  display: inline-flex; gap: 4px; padding: 4px; margin: 0 auto 30px; border-radius: 30px;
  background: var(--paper); border: 1px solid var(--line);
}
.cycle-switch { display: flex; width: max-content; margin-left: auto; margin-right: auto; }
.cycle-switch__btn {
  border: 0; background: transparent; cursor: pointer; font: inherit;
  padding: 8px 20px; border-radius: 30px; font-size: .88rem; font-weight: 600; color: var(--muted);
  transition: background .18s ease, color .18s ease;
}
.cycle-switch__btn:hover { color: var(--ink); }
.cycle-switch__btn.is-active { background: var(--violet); color: #fff; }
@media (prefers-reduced-motion: reduce) { .cycle-switch__btn { transition: none; } }

/* ==========================================================================
   WPRank — 2026 redesign layer
   --------------------------------------------------------------------------
   Appended rather than merged into the base above on purpose. The base is
   still doing real work for checkout, docs, the account area and the admin,
   and rewriting it wholesale to restyle the marketing pages would have meant
   re-testing every one of those flows to change a landing page.

   Everything here is additive or an override of a marketing-only component.

   Motion policy: every animation is opt-in through [data-reveal] or a named
   class, and every one of them is switched off by the global
   prefers-reduced-motion rule at the top of this file. Nothing here is
   load-bearing — with JavaScript disabled the .is-in state is applied by a
   <noscript> rule so the page is fully readable and fully styled.
   ========================================================================== */

/* Decorative layers (the hero aurora, the conic glow behind the Pro teaser,
   the marquee) are deliberately larger than their containers. Each one is
   clipped by its own overflow:hidden, but sub-pixel rounding still left a
   couple of stray pixels that show up as a horizontal scrollbar on a phone.
   `clip` rather than `hidden`: hidden would turn <body> into a scroll
   container and break position:sticky on the header. */
body { overflow-x: clip; }

:root {
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --violet-2:  #6d6cc0;
  --teal-2:    #7ad8e0;
  --glow-v:    rgba(89, 88, 166, .38);
  --glow-t:    rgba(87, 198, 208, .34);
  --ring-line: rgba(255, 255, 255, .13);
}

/* ── Scroll reveal ─────────────────────────────────────────────────────
   --d is a per-element stagger set inline by the view, so a grid of cards
   arrives in sequence without a class per position. */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-26px); }
[data-reveal="right"] { transform: translateX(26px); }
[data-reveal="zoom"]  { transform: scale(.94); }
[data-reveal].is-in   { opacity: 1; transform: none; }

/* No JS, no problem — show everything immediately. */
.no-js [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════════════ */

.hero.on-dark {
  position: relative;
  overflow: hidden;
  padding: 104px 0 96px;
  background: radial-gradient(120% 130% at 8% 0%, #221e46 0%, #17142f 42%, #110f24 100%);
}

/* Aurora wash. Two large, very soft radial blobs drifting on a long loop —
   slow enough to read as light rather than as an animation. */
.hero.on-dark::before {
  content: '';
  position: absolute;
  inset: -30% -10%;
  background:
    radial-gradient(38% 44% at 22% 28%, var(--glow-v) 0%, transparent 62%),
    radial-gradient(34% 40% at 78% 62%, var(--glow-t) 0%, transparent 60%);
  filter: blur(28px);
  animation: heroDrift 26s var(--ease-soft) infinite alternate;
  pointer-events: none;
}

/* Faint grid, so the dark block has texture instead of being a flat field. */
.hero.on-dark::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.038) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(80% 70% at 50% 30%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(80% 70% at 50% 30%, #000 0%, transparent 78%);
  pointer-events: none;
}

@keyframes heroDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(3%, -2%, 0) scale(1.06); }
  100% { transform: translate3d(-2%, 2%, 0) scale(1.02); }
}

.hero__grid { position: relative; z-index: 2; }

.hero h1 { line-height: 1.03; letter-spacing: -.028em; }

/* Each word rises on its own. The view wraps words in <span class="word">. */
.hero h1 .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(28px) rotate(1.5deg);
  animation: wordUp .82s var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 62ms);
}
@keyframes wordUp { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero h1 .word { opacity: 1; transform: none; animation: none; }
}

/* The gradient has to sit on the .word spans, not on the <em>.
   background-clip:text clips to the text painted by THAT element, and the
   words are in child spans — so styling the em alone produced transparent
   text with nothing behind it, and the word simply disappeared. */
.hero h1 em { font-style: normal; }
.hero h1 em .word {
  background: linear-gradient(96deg, var(--teal) 0%, var(--teal-2) 40%, #b9a8ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lede { max-width: 52ch; }

/* Stat counters */
.hero__trust b {
  font-family: var(--display);
  font-variant-numeric: tabular-nums;
  font-size: 1.9rem;
  display: block;
  line-height: 1;
  background: linear-gradient(180deg, #fff 30%, #b7c2e8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Primary CTA gets a slow sheen so the eye lands on it. */
.btn--teal { position: relative; overflow: hidden; }
.btn--teal::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -140%;
  width: 60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg);
  animation: sheen 4.6s ease-in-out infinite;
  animation-delay: 1.4s;
  pointer-events: none;
}
@keyframes sheen { 0%, 62% { left: -140%; } 88%, 100% { left: 160%; } }
@media (prefers-reduced-motion: reduce) { .btn--teal::after { display: none; } }

.btn { transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), background .2s ease, color .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn--teal:hover  { box-shadow: 0 14px 30px -12px rgba(87, 198, 208, .68); }
.btn--primary:hover { box-shadow: 0 14px 30px -12px rgba(89, 88, 166, .7); }

/* ── SERP card: floats, and tilts toward the cursor ────────────────── */
.serp {
  position: relative;
  z-index: 2;
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--fy, 0px));
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
  animation: floaty 7s ease-in-out infinite;
}
.serp:hover { transition: transform .12s linear; }
@keyframes floaty { 0%, 100% { --fy: 0px; } 50% { --fy: -10px; } }

/* --fy only animates where custom properties are animatable (Chrome/Edge/
   Safari 16+). Firefox simply holds it at 0, which is a still card rather
   than a broken one. */
@property --fy { syntax: '<length>'; inherits: false; initial-value: 0px; }

@media (prefers-reduced-motion: reduce) {
  .serp { animation: none; transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   CAPABILITY MARQUEE
   ══════════════════════════════════════════════════════════════════════ */

.tick {
  position: relative;
  overflow: hidden;
  padding: 20px 0;
  background: var(--ink-2);
  border-top: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.tick__track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: tickScroll 38s linear infinite;
}
.tick:hover .tick__track { animation-play-state: paused; }
.tick__item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 26px;
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: .02em;
  color: #a9b1d6;
  white-space: nowrap;
}
.tick__item::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 12px var(--teal);
  flex: none;
}
/* The track holds the list twice; -50% is exactly one copy, so the loop has
   no visible seam. */
@keyframes tickScroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .tick__track { animation: none; }
  .tick { mask-image: none; -webkit-mask-image: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   SKILLS — animated capability bars
   ══════════════════════════════════════════════════════════════════════ */

/* Two columns on desktop, stacked on narrow screens. This lives in the
   stylesheet rather than an inline style on the section for one reason:
   an inline grid-template-columns cannot be overridden by a media query,
   so the bars and the aside stayed side by side at 420px and pushed the
   whole page into a horizontal scroll. */
.skills-grid {
  display: grid;
  grid-template-columns: 1.55fr .95fr;
  gap: 34px;
  align-items: start;
}
@media (max-width: 980px) {
  .skills-grid { grid-template-columns: 1fr; gap: 24px; }
}

.skills { display: grid; gap: 14px; min-width: 0; }

.skill {
  position: relative;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--white);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s ease;
}
.skill:hover {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: 0 18px 40px -22px rgba(45,43,94,.42);
}

.skill__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.skill__label { font-weight: 650; font-size: .97rem; color: var(--ink); }
.skill__pct {
  font-family: var(--mono);
  font-size: .92rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--violet);
  flex: none;
}

.skill__rail {
  position: relative;
  height: 9px;
  border-radius: 99px;
  background: #eceef7;
  overflow: hidden;
}
.skill__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--violet) 0%, var(--violet-2) 46%, var(--teal) 100%);
  transition: width 1.25s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.skill.is-in .skill__fill { width: var(--pct, 0%); }
.no-js .skill__fill { width: var(--pct, 0%); transition: none; }

/* Moving highlight inside the filled part — reads as "live", and stops at
   the fill's own edge because it is clipped by the rail. */
.skill__fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.5) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: skillSheen 2.8s ease-in-out infinite;
  animation-delay: 1.5s;
}
@keyframes skillSheen { 0%, 55% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

.skill__note {
  margin: 11px 0 0;
  font-size: .87rem;
  line-height: 1.55;
  color: var(--muted);
  /* Collapsed until hover/focus: seven expanded paragraphs would bury the
     bars, which are the point of the section. */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .42s var(--ease-out), opacity .3s ease, margin .42s var(--ease-out);
  margin-top: 0;
}
.skill:hover .skill__note,
.skill:focus-within .skill__note { max-height: 90px; opacity: 1; margin-top: 11px; }

@media (prefers-reduced-motion: reduce) {
  .skill__fill { width: var(--pct, 0%); transition: none; }
  .skill__fill::after { display: none; }
  .skill__note { max-height: none; opacity: 1; margin-top: 11px; overflow: visible; }
}

/* Summary ring beside the bars */
.skills-aside {
  position: sticky;
  top: 96px;
  padding: 26px;
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, var(--ink) 0%, var(--ink-3) 100%);
  color: #fff;
  overflow: hidden;
}
.skills-aside::before {
  content: '';
  position: absolute;
  inset: auto -20% -40% -20%;
  height: 70%;
  background: radial-gradient(50% 60% at 50% 100%, var(--glow-t), transparent 70%);
  pointer-events: none;
}
.skills-aside h3 { color: #fff; margin: 0 0 8px; font-size: 1.18rem; }
.skills-aside p  { color: #aab3d8; font-size: .9rem; margin: 0 0 20px; }
.skills-aside .ring { margin: 0 auto 18px; }
.skills-aside .ring b { color: #fff; }

.skills-aside__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; position: relative; }
.skills-aside__list li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: .87rem; color: #cfd5ee;
}
.skills-aside__list svg { flex: none; margin-top: 3px; color: var(--teal); }

/* ══════════════════════════════════════════════════════════════════════
   FEATURE CARDS
   ══════════════════════════════════════════════════════════════════════ */

.card {
  position: relative;
  transition: transform .34s var(--ease-out), box-shadow .34s var(--ease-out), border-color .3s ease;
}
.sec .card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent; }

/* Gradient hairline on hover, drawn with a mask so it stays a 1px edge
   rather than a filled rectangle. */
.card--grad::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.card--grad:hover::before { opacity: 1; }

.card__ico { transition: transform .34s var(--ease-out), background .3s ease, color .3s ease; }
.card:hover .card__ico { transform: scale(1.09) rotate(-4deg); background: var(--grad); color: #fff; }

/* ══════════════════════════════════════════════════════════════════════
   STEPS — how it works
   ══════════════════════════════════════════════════════════════════════ */

.steps { position: relative; display: grid; gap: 26px; grid-template-columns: repeat(4, 1fr); }

/* The connecting rail sits behind the numbers and is drawn on reveal. */
.steps::before {
  content: '';
  position: absolute;
  top: 25px; left: 8%; right: 8%;
  height: 2px;
  background: linear-gradient(90deg, var(--violet), var(--teal));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.3s var(--ease-out) .2s;
  opacity: .32;
}
.steps.is-in::before { transform: scaleX(1); }

.step { position: relative; text-align: center; }
.step__n {
  position: relative;
  z-index: 1;
  width: 50px; height: 50px;
  margin: 0 auto 16px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--violet);
  color: var(--violet);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.06rem;
  transition: transform .32s var(--ease-out), background .32s ease, color .32s ease, box-shadow .32s ease;
}
.step:hover .step__n {
  transform: translateY(-4px) scale(1.06);
  background: var(--grad);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 14px 28px -14px var(--glow-v);
}
.step h3 { font-size: 1rem; margin: 0 0 7px; }
.step p  { font-size: .89rem; color: var(--muted); margin: 0; line-height: 1.58; }

@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr 1fr; gap: 30px 20px; }
  .steps::before { display: none; }
}
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════════════
   SECTION HEADS
   ══════════════════════════════════════════════════════════════════════ */

.sec { position: relative; }
.sec__head h2 { letter-spacing: -.022em; }

.eyebrow {
  position: relative;
  display: inline-block;
}
/* Small dot that pulses — cheap way to make a static label feel live. */
.sec__head .eyebrow::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal);
  margin-right: 8px;
  vertical-align: middle;
  animation: pulseDot 2.4s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(87,198,208,.6); }
  60%      { box-shadow: 0 0 0 7px rgba(87,198,208,0); }
}

/* ══════════════════════════════════════════════════════════════════════
   WP.ORG CALL-OUT
   ══════════════════════════════════════════════════════════════════════ */

.wporg {
  transition: transform .34s var(--ease-out), box-shadow .34s var(--ease-out);
  position: relative;
  overflow: hidden;
}
.wporg:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.wporg img { transition: transform .4s var(--ease-out); }
.wporg:hover img { transform: rotate(-6deg) scale(1.06); }

/* ══════════════════════════════════════════════════════════════════════
   PRO TEASER
   ══════════════════════════════════════════════════════════════════════ */

.teaser { position: relative; overflow: hidden; }
.teaser::before {
  content: '';
  position: absolute;
  inset: -50%;
  background: conic-gradient(from 0deg, transparent 0deg, var(--glow-t) 60deg, transparent 140deg,
                             transparent 220deg, var(--glow-v) 290deg, transparent 360deg);
  animation: teaserSpin 18s linear infinite;
  opacity: .5;
  pointer-events: none;
}
.teaser > * { position: relative; z-index: 1; }
@keyframes teaserSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .teaser::before { animation: none; } }

/* ══════════════════════════════════════════════════════════════════════
   FAQ
   ══════════════════════════════════════════════════════════════════════ */

.faq details {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--white);
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.faq details[open] { border-color: var(--violet-l); box-shadow: var(--shadow); }
.faq summary {
  cursor: pointer;
  padding: 17px 52px 17px 20px;
  font-weight: 620;
  font-size: .98rem;
  position: relative;
  list-style: none;
  transition: color .2s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--violet); }
.faq summary::after {
  content: '';
  position: absolute;
  right: 22px; top: 50%;
  width: 11px; height: 11px;
  margin-top: -6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .3s var(--ease-out);
  opacity: .55;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details > p {
  margin: 0;
  padding: 0 20px 18px;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.66;
}
.faq details[open] > p { animation: faqIn .34s var(--ease-out); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } }

/* ══════════════════════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════════════════════ */

.site-head {
  position: sticky;
  top: 0;
  z-index: 60;
  transition: background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
.site-head.is-stuck {
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(1.6) blur(12px);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  box-shadow: 0 1px 0 var(--line), 0 8px 24px -20px rgba(20,17,38,.5);
}
.brand img { transition: transform .35s var(--ease-out); }
.brand:hover img { transform: rotate(-8deg) scale(1.07); }

.nav a:not(.btn) { position: relative; }
.nav a:not(.btn)::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -5px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .28s var(--ease-out);
}
.nav a:not(.btn):hover::after,
.nav a:not(.btn).is-active::after { transform: scaleX(1); }

/* Reading-progress bar along the very top of the page. */
.readbar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  background: var(--grad);
  z-index: 100;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .readbar { display: none; } }

/* ══════════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════════ */

.foot__brandmark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 14px;
  text-decoration: none;
}
.foot__brandmark img { width: 38px; height: 38px; border-radius: 10px; }
.foot__brandmark span {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.16rem;
  color: #fff;
  line-height: 1.1;
}
.foot__brandmark small {
  display: block;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 500;
}
.site-foot a { transition: color .2s ease, transform .2s ease; }
.site-foot a:hover { color: var(--teal); }

/* ══════════════════════════════════════════════════════════════════════
   SHARED PAGE HERO (features / pricing / docs / legal)
   ══════════════════════════════════════════════════════════════════════ */

.page-hero {
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: -60% -20% auto -20%;
  height: 220%;
  background:
    radial-gradient(30% 40% at 20% 40%, var(--glow-v) 0%, transparent 60%),
    radial-gradient(28% 36% at 80% 55%, var(--glow-t) 0%, transparent 58%);
  filter: blur(30px);
  animation: heroDrift 30s var(--ease-soft) infinite alternate;
  pointer-events: none;
}
.page-hero > * { position: relative; z-index: 1; }

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 980px) {
  .hero.on-dark { padding: 74px 0 66px; }
  .skills-aside { position: static; }
}
@media (max-width: 640px) {
  .hero h1 { font-size: clamp(2rem, 8.6vw, 2.7rem); }
  .tick__item { padding: 0 18px; font-size: .76rem; }
  .skill { padding: 15px 16px; }
  .skill__top { gap: 10px; }
  .skill__label { font-size: .9rem; }
}

/* ── Payment method shortcuts (checkout) ─────────────────────────────────
   Only rendered when ccavenue.quick_methods lists any; with none configured
   the customer goes straight to CCAvenue's own page, which lists every
   method live on the merchant account. */
.paymethods { display: grid; gap: 10px; }
.paymethod {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: #fff; transition: border-color .15s, box-shadow .15s, background .15s;
}
.paymethod:hover { border-color: var(--violet-l); }
.paymethod input { width: auto; margin: 0; accent-color: var(--violet); flex: 0 0 auto; }
.paymethod:has(input:checked), .paymethod.is-on {
  border-color: var(--violet); background: rgba(89, 88, 166, .05);
  box-shadow: 0 0 0 3px rgba(89, 88, 166, .12);
}
.paymethod__icon { font-size: 1.35rem; line-height: 1; flex: 0 0 auto; }
.paymethod__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.paymethod__label { font-size: .93rem; font-weight: 600; color: var(--ink); }
.paymethod__note { font-size: .78rem; color: var(--muted); }
@media (max-width: 560px) { .paymethod__note { font-size: .74rem; } }