/* ==========================================================================
   Transfer to WordPress: shared design system
   Direction: clean minimalism, soft colour, subtle glass surfaces, bento grids.
   One stylesheet for every public page (home, service pages, contact, blog).
   ========================================================================== */

@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600 800; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/manrope-latin.woff2") format("woff2"); }

:root {
  --surface: #ffffff; --surface-rgb: 255,255,255;
  --bar-wix-a: #e4e1f1; --bar-wix-b: #cfcae4; --code-bg: #1c2238;
  --mesh-a: #e9e3fb; --mesh-b: #ffe6d9; --mesh-c: #dff4ea;
  --brand-filter: none;
  --ink-rgb: 28,34,56;
  --band: rgba(255,255,255,.42); --band-top: rgba(236,232,251,.55); --feature-wash: rgba(236,232,251,.7);
  /* Soft neutrals */
  --bg: #f6f5fa;
  --bg-2: #eeecf6;
  --ink: #1c2238;
  --ink-2: #2a3150;
  --body: #4a5270;
  --muted: #7a8198;
  --line: rgba(28,34,56,.08);
  --line-strong: rgba(28,34,56,.14);

  /* Glass */
  --glass: rgba(255,255,255,.55);
  --glass-strong: rgba(255,255,255,.78);
  --glass-edge: rgba(255,255,255,.9);
  --glass-blur: blur(18px) saturate(160%);

  /* Soft accents */
  --orange: #ff6a3d;
  --orange-2: #ff9a76;
  --orange-dark: #e0532a;
  --orange-soft: #fff0ea;
  --lavender: #ece8fb;
  --lavender-ink: #5b43c7;
  --mint: #e3f6ee;
  --mint-ink: #0e8a5d;
  --peach: #ffe9de;
  --sky: #e3effd;
  --sky-ink: #2f63c4;
  --butter: #fff5d6;
  --green: #12a05c;
  --green-soft: #e3f6ec;
  --red: #d6453d;
  --red-soft: #fdecea;

  /* Shape, depth, motion */
  --radius: 24px;
  --radius-sm: 14px;
  --radius-lg: 32px;
  --shadow-soft: 0 10px 30px rgba(70,60,140,.07);
  --shadow-lift: 0 22px 50px rgba(70,60,140,.13);
  --shadow-lg: var(--shadow-lift);
  --ease: cubic-bezier(.22,.8,.24,1);

  /* Type */
  --head: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Dark theme: same tokens, dark values (set on <html data-theme="dark">) ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0f1d; --bg-2: #121829;
  --ink: #eef0f8; --ink-2: #d9ddeb; --body: #c9cfe2; --muted: #a4acc6;
  --band: rgba(255,255,255,.035); --band-top: rgba(255,255,255,0); --feature-wash: rgba(30,37,62,.92);
  --line: rgba(255,255,255,.08); --line-strong: rgba(255,255,255,.15);
  --surface: #161c2e; --surface-rgb: 22,28,46;
  --glass: rgba(22,28,46,.55); --glass-strong: rgba(22,28,46,.78); --glass-edge: rgba(255,255,255,.1);
  --orange: #ff7a4d; --orange-2: #ffa07c; --orange-dark: #ff9068; --orange-soft: #3a2219;
  --lavender: #2a2654; --lavender-ink: #c3b6ff;
  --mint: #143a2e; --mint-ink: #7ee0b3;
  --peach: #3a2a24; --sky: #1b2e4c; --sky-ink: #a6c8ff; --butter: #3a3216;
  --green: #5fe0a4; --green-soft: #15372a; --red: #ff8a82; --red-soft: #3a1f23;
  --bar-wix-a: #2c2a4a; --bar-wix-b: #3a3862; --code-bg: #05070f;
  --mesh-a: #1d1a40; --mesh-b: #3a2118; --mesh-c: #112a22;
  --shadow-soft: 0 12px 32px rgba(0,0,0,.35); --shadow-lift: 0 24px 56px rgba(0,0,0,.5);
  --brand-filter: brightness(0) invert(1);
  --ink-rgb: 238,240,248;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; color: var(--body); background: transparent;
  font: 400 17.5px/1.7 var(--text);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden; -webkit-tap-highlight-color: transparent;
}
/* Soft colour field behind every page (fixed, so it stays put while scrolling) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 620px at -8% -12%, var(--mesh-a) 0%, transparent 62%),
    radial-gradient(820px 560px at 108% 4%, var(--peach) 0%, transparent 58%),
    radial-gradient(900px 640px at 50% 112%, var(--mesh-c) 0%, transparent 60%),
    var(--bg);
}
@supports (overflow: clip) { html, body { overflow-x: clip; } }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input { font: inherit; }
h1, h2, h3, h4, .display { font-family: var(--head); color: var(--ink); line-height: 1.2; letter-spacing: -.015em; margin: 0 0 14px; }
h2 { font-size: clamp(30px, 4vw, 46px); font-weight: 800; line-height: 1.14; letter-spacing: -.025em; }
h3 { font-size: 20px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; margin-bottom: 8px; }
.display { font-size: clamp(38px, 4.8vw, 60px); font-weight: 800; line-height: 1.06; letter-spacing: -.03em; }
p { margin: 0 0 14px; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 8px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 300; background: var(--ink); color: var(--surface); padding: 12px 18px; border-radius: 12px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.hl { color: var(--orange); }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }

/* Reading progress bar (filled by site.js) */
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--orange), var(--orange-2)); z-index: 100; pointer-events: none; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
section { padding: 104px 0; position: relative; }
section[id] { scroll-margin-top: 96px; }
.soft { background: linear-gradient(180deg, rgba(var(--surface-rgb), 0) 0%, var(--band) 18%, var(--band) 82%, rgba(var(--surface-rgb), 0) 100%); }
.section-head { margin-bottom: 56px; }
.lead { font-size: 19.5px; line-height: 1.7; color: var(--muted); max-width: 640px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 18px;
  font: 700 12.5px/1.4 var(--head); letter-spacing: 1.4px; text-transform: uppercase; color: var(--orange-dark);
  background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-soft);
  padding: 7px 14px 7px 11px; border-radius: 999px;
}
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(255,106,61,.16); }

/* Glass surface (shared by cards, panels and floating UI) */
.card, .price, .tcard, .project, .stat, .calc, .cmp, .trial, .side-card, .bill, .chip, .lead-form, .dd-m, .promise li, .guides, .featured, .portrait-tag, .pager .pg, .post-card, .post-head, .cta-band .wrap > div:first-child {
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}

/* ---------- Buttons and links ---------- */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px;
  font: 700 15.5px/1.2 var(--head); letter-spacing: .1px; text-align: center; text-decoration: none; cursor: pointer;
  padding: 14px 26px; border-radius: 999px; border: 1px solid transparent;
  transition: transform .25s var(--ease), background .2s, box-shadow .25s var(--ease), border-color .2s, color .2s;
}
.btn svg { width: 18px; height: 18px; flex: none; transition: transform .25s var(--ease); }
.btn-primary {
  color: #fff; background: linear-gradient(135deg, #ff8256 0%, #ff5f2c 100%);
  box-shadow: 0 10px 24px rgba(255,106,61,.26), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%); animation: shine 5s ease-in-out infinite;
}
@keyframes shine { 0%, 60% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.btn-outline { color: var(--ink); background: var(--glass-strong); border-color: var(--line-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.btn[disabled] { opacity: .7; cursor: progress; }
@media (hover: hover) {
  .btn:hover svg.arrow { transform: translateX(4px); }
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(255,106,61,.34), inset 0 1px 0 rgba(255,255,255,.35); }
  .btn-outline:hover { border-color: var(--ink); transform: translateY(-2px); }
}
button.link, a.link { font: 600 15px/1.2 var(--head); color: var(--body); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; }
a.link:hover { color: var(--ink); }
.link-more { display: inline-flex; align-items: center; gap: 8px; font: 700 15px/1.2 var(--head); color: var(--ink); text-decoration: none; }
.link-more .arrow { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.link-more:hover { color: var(--orange-dark); }
.link-more:hover .arrow { transform: translateX(4px); }
.microcopy { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 16px 0 0; font-size: 14.5px; color: var(--muted); }
.microcopy span { display: inline-flex; align-items: center; gap: 6px; }
.microcopy svg { width: 16px; height: 16px; color: var(--green); flex: none; }

/* ---------- Header: floating glass bar ---------- */
.site-header { position: sticky; top: 0; z-index: 50; padding: 14px 0 0; background: none; }
.site-header .wrap {
  height: 68px; padding: 0 14px 0 22px; max-width: 1180px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge); border-radius: 22px; box-shadow: var(--shadow-soft);
  transition: height .3s var(--ease), box-shadow .3s;
}
.site-header.scrolled .wrap { height: 60px; box-shadow: var(--shadow-lift); }
.site-header .brand { display: inline-flex; align-items: center; min-height: 44px; }
.site-header .brand img { height: 34px; width: auto; filter: var(--brand-filter); }
.site-header nav { display: flex; align-items: center; gap: 26px; font: 600 15px var(--head); }
.site-header nav a.link { color: var(--body); text-decoration: none; position: relative; padding: 6px 0; }
.site-header nav a.link:hover { color: var(--ink); }
.site-header nav a.link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.site-header nav a.link:hover::after { transform: scaleX(1); }
.site-header nav .btn { min-height: 44px; padding: 10px 18px; font-size: 14.5px; }
/* Light / dark switch in the header */
.theme-toggle { flex: none; display: inline-grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 14px; cursor: pointer; color: var(--ink); background: var(--glass-strong); border: 1px solid var(--glass-edge); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-soft); transition: border-color .2s, transform .2s var(--ease); }
.theme-toggle:hover { border-color: var(--ink); transform: translateY(-1px); }
.theme-toggle svg { grid-area: 1 / 1; width: 20px; height: 20px; transition: transform .45s var(--ease), opacity .3s; }
.theme-toggle .i-sun { opacity: 0; transform: rotate(-90deg) scale(.6); }
:root[data-theme="dark"] .theme-toggle .i-sun { opacity: 1; transform: none; }
:root[data-theme="dark"] .theme-toggle .i-moon { opacity: 0; transform: rotate(90deg) scale(.6); }
body { transition: background-color .4s var(--ease), color .4s var(--ease); }


/* Services menu: works with a <button class="dd-t"> (marketing pages) or a <details> (blog) */
.dd { position: relative; display: inline-flex; }
.dd-t, .dd > summary {
  list-style: none; cursor: pointer; background: none; border: 0; color: var(--body);
  font: 600 15px/1.2 var(--head); display: inline-flex; align-items: center; gap: 6px; padding: 6px 0;
}
.dd > summary::-webkit-details-marker { display: none; }
.dd-t:hover, .dd > summary:hover { color: var(--ink); }
.dd-t .caret, .dd > summary .caret { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.dd-t[aria-expanded="true"] .caret, .dd[open] > summary .caret { transform: rotate(180deg); }
.dd-m {
  position: absolute; top: calc(100% + 12px); left: -14px; min-width: 250px; z-index: 55; padding: 8px; display: grid; gap: 2px;
  background: var(--glass-strong); border: 1px solid var(--glass-edge); border-radius: 18px; box-shadow: var(--shadow-lift);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.dd.open .dd-m, .dd[open] .dd-m { opacity: 1; visibility: visible; transform: none; }
.dd[open] .dd-m { opacity: 1; visibility: visible; transform: none; }
.dd-m a { text-decoration: none; color: var(--ink); padding: 11px 14px; border-radius: 12px; font: 600 15px var(--head); white-space: nowrap; }
.dd-m a.dd-all { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; color: var(--orange-dark); font-weight: 700; }
.dd-m a:hover, .dd-m a.cur { background: var(--orange-soft); color: var(--orange-dark); }
@media (hover: hover) { .dd:hover .dd-m, .dd:focus-within .dd-m { opacity: 1; visibility: visible; transform: none; } }

/* ---------- Hero ---------- */
.hero { background: transparent; color: var(--body); padding: 72px 0 104px; overflow: visible; }
.hero::before, .hero .blob, .hero .grid-bg, .swoosh { display: none !important; }
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; }
.hero .display { color: var(--ink); }
.hero .lead { color: var(--body); }
.hero .lead b { color: var(--ink); }
.hero .eyebrow { color: var(--orange-dark); }
.rotator { display: inline-grid; vertical-align: bottom; position: relative; }
.rotator > span { grid-area: 1 / 1; color: var(--orange); opacity: 0; transform: translateY(40%); transition: opacity .5s var(--ease), transform .5s var(--ease); white-space: nowrap; }
.rotator > span.on { opacity: 1; transform: none; }
.rotator > span.off { opacity: 0; transform: translateY(-40%); }
.hero .lead-form { margin: 30px 0 18px; }
.hero .microcopy { color: var(--muted); }
.hero-alt { margin: 14px 0 0; font-size: 15.5px; color: var(--muted); }
.hero-alt a { color: var(--ink); font-weight: 700; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 48px; }
.trust { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 15.5px; }
.trust b { color: var(--ink); font-family: var(--head); }
.stars { color: #f5a524; letter-spacing: 2px; }
.faces { display: flex; }
.faces span { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--surface); margin-left: -10px; display: grid; place-items: center; font: 700 12px var(--head); color: #fff; }
.faces span:first-child { margin-left: 0; }

/* Hero visual: glass bill card with soft chips */
.bill-stage { position: relative; }
.bill { position: relative; padding: 28px; border-radius: var(--radius-lg); background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-lift); animation: bob 7s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.bill-title { display: flex; justify-content: space-between; align-items: center; gap: 10px; font: 700 12.5px var(--head); color: var(--muted); text-transform: uppercase; letter-spacing: 1.3px; margin-bottom: 18px; }
.live { display: inline-flex; align-items: center; gap: 7px; color: var(--mint-ink); letter-spacing: .4px; white-space: nowrap; }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); position: relative; }
.live i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--green); animation: ping 1.8s infinite; }
@keyframes ping { to { transform: scale(2.6); opacity: 0; } }
.bill-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 20px; border-radius: 18px; margin-bottom: 12px; }
.bill-row.wix { background: var(--red-soft); }
.bill-row.wp { background: var(--mint); }
.bill-row .who { font: 700 16px/1.35 var(--head); color: var(--ink); }
.bill-row .who small { display: block; font: 500 13.5px/1.4 var(--text); color: var(--muted); margin-top: 2px; }
.bill-row .amt { font: 800 clamp(44px, 5vw, 58px)/1 var(--head); letter-spacing: -.03em; position: relative; white-space: nowrap; }
.bill-row.wix .amt { color: var(--red); }
.bill-row.wix .amt::after { content: ""; position: absolute; left: -4px; right: -4px; top: 52%; height: 3px; background: var(--red); border-radius: 2px; transform: scaleX(0); transform-origin: left; animation: strike .6s 1.4s var(--ease) forwards; }
@keyframes strike { to { transform: scaleX(1); } }
.bill-row.wp .amt { color: var(--mint-ink); }
.bill-row small.per { font-size: 18px; font-weight: 700; color: var(--muted); letter-spacing: 0; margin-left: 2px; }
.bill-save { margin-top: 16px; text-align: center; background: linear-gradient(135deg, var(--peach) 0%, var(--orange-soft) 100%); color: var(--ink); border-radius: 18px; padding: 20px; font-weight: 600; line-height: 1.5; }
.bill-save b { color: var(--orange-dark); font: 800 28px var(--head); }
.bill-save .sub { font-weight: 500; color: var(--muted); font-size: 14.5px; }
.bill-note { font-size: 12.5px; color: var(--muted); margin: 14px 0 0; text-align: center; line-height: 1.5; }
.chip { position: absolute; display: flex; align-items: center; gap: 10px; white-space: nowrap; padding: 12px 16px; border-radius: 18px; background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-lift); font: 700 14px/1.3 var(--head); color: var(--ink); }
.chip small { display: block; font: 500 12.5px var(--text); color: var(--muted); }
.chip.c1 { top: -46px; left: -40px; animation: bob 6s .6s ease-in-out infinite; }
.chip.c2 { bottom: -22px; right: -22px; animation: bob 6.5s 1.2s ease-in-out infinite; }

/* ---------- Lead form (two steps) ---------- */
.lead-form { position: relative; width: 100%; max-width: 600px; text-align: left; color: var(--ink); padding: 8px; border-radius: 28px; background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-lift); transition: border-radius .35s var(--ease), padding .35s var(--ease); }
.lead-form.open { border-radius: 22px; padding: 14px; }
.lf-row { display: flex; gap: 8px; align-items: center; }
.lf-row input { flex: 1; min-width: 0; height: 52px; border: 0; outline: 0; padding: 0 18px; font: 500 16.5px var(--text); color: var(--ink); background: transparent; border-radius: 16px; }
.lf-row input:focus-visible { box-shadow: inset 0 0 0 2px var(--orange); }
.lead-form.open .lf-row input { background: rgba(var(--surface-rgb), .7); }
.lf-row input::placeholder { color: #8a90a6; }
.lf-row .btn { padding: 14px 24px; white-space: nowrap; }
.js .lead-form.open .lf-next { display: none; }
html:not(.js) .lf-next { display: none; }
.lf-more { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .45s var(--ease); }
.js .lf-more { grid-template-rows: 0fr; }
.js .lead-form.open .lf-more { grid-template-rows: 1fr; }
.lf-more > div { overflow: hidden; min-height: 0; }
.lf-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px 4px 4px; }
.lf-fields .full { grid-column: 1 / -1; }
.lf-fields label, .lead-form label { display: block; font: 700 13.5px/1.3 var(--head); color: var(--ink); margin-bottom: 6px; }
.lf-fields label span { font-weight: 500; color: var(--muted); }
.lf-fields input { width: 100%; height: 50px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 14px; font: 500 16px var(--text); color: var(--ink); background: rgba(var(--surface-rgb), .92); transition: border-color .2s, box-shadow .2s; }
.lf-fields input:focus { outline: 0; border-color: var(--orange); box-shadow: 0 0 0 4px rgba(255,106,61,.14); }
.lead-form [aria-invalid="true"] { border-color: var(--red) !important; box-shadow: 0 0 0 4px rgba(214,69,61,.12) !important; }
.lf-submit { width: 100%; }
.lf-note { font-size: 13.5px; color: var(--muted); margin: 0; text-align: center; line-height: 1.5; }
.lf-status { margin: 0; font-size: 15px; line-height: 1.5; color: var(--red); font-weight: 600; }
.lf-status:not(:empty) { padding: 10px 8px 2px; }
.lf-status a { color: var(--ink); }
.lf-done { text-align: center; padding: 22px 18px; animation: rise .6s var(--ease) both; }
.lf-done .ok { width: 58px; height: 58px; margin: 0 auto 12px; border-radius: 50%; background: var(--green-soft); color: var(--green); display: grid; place-items: center; animation: pop .6s .1s var(--ease) both; }
.lf-done .ok svg { width: 28px; height: 28px; }
.lf-done b { display: block; font: 800 20px var(--head); color: var(--ink); margin-bottom: 4px; }
.lf-done p { color: var(--muted); font-size: 16px; margin: 0; }
.lf-done a { color: var(--orange-dark); font-weight: 700; }
.lead-form.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* ---------- Logo strip ---------- */
.logos { padding: 44px 0; }
.logos h2 { text-align: center; font: 600 14.5px/1.5 var(--head); color: var(--muted); letter-spacing: .3px; margin-bottom: 24px; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.track { display: flex; gap: 64px; width: max-content; animation: scroll 38s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
@keyframes scroll { to { transform: translateX(-50%); } }
.track img { height: 42px; width: auto; filter: grayscale(1); opacity: .55; transition: filter .3s, opacity .3s; mix-blend-mode: multiply; }
.track img:hover { filter: none; opacity: 1; }

/* ---------- Bento grids and cards ---------- */
.grid { display: grid; gap: 20px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Six-item card groups become a bento: one large tile, five supporting tiles */
.g3 > .card:first-child:nth-last-child(6) { grid-column: span 2; grid-row: span 2; padding: 40px; background: linear-gradient(150deg, rgba(var(--surface-rgb), .9), var(--feature-wash)); }
.g3 > .card:first-child:nth-last-child(6) h3 { font-size: 26px; }
.g3 > .card:first-child:nth-last-child(6) p { font-size: 18px; }
.card {
  position: relative; background: var(--glass-strong); border: 1px solid var(--glass-edge);
  border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-soft);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.card p { color: var(--muted); margin: 0; font-size: 16px; line-height: 1.7; }
/* Each tile in a group gets a different soft accent, so the bento reads as a set */
@media (hover: hover) {
  .card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); border-color: var(--glass-edge); }
}

/* ---------- Stats (soft tiles) ---------- */
.stats { padding: 88px 0; }
.stats .grid { gap: 18px; }
.stat {
  position: relative; overflow: hidden; padding: 28px 26px 24px; border-radius: var(--radius);
  background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-soft);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.stat:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.stat b { display: flex; align-items: baseline; gap: 1px; font: 800 clamp(38px, 4.6vw, 54px)/1 var(--head); color: var(--ink); letter-spacing: -.03em; }
.stat b em { font-style: normal; font-size: .42em; font-weight: 700; color: var(--orange-dark); }
.stat .stat-label { display: block; margin-top: 8px; color: var(--muted); font-size: 15px; font-weight: 600; line-height: 1.4; }

/* ---------- Calculator ---------- */
.calc { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--radius-lg); overflow: hidden; background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-lift); }
.calc-in { padding: 44px; }
.calc-out { padding: 44px; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(160deg, var(--lavender) 0%, var(--orange-soft) 100%); color: var(--ink); }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0 28px; }
.plan-opt { border: 1px solid var(--line-strong); border-radius: 16px; padding: 15px 18px; min-height: 66px; cursor: pointer; text-align: left; background: rgba(var(--surface-rgb), .8); color: inherit; transition: border-color .2s, background .2s, transform .2s var(--ease), box-shadow .2s; }
.plan-opt[aria-pressed="true"] { border-color: var(--orange); background: var(--orange-soft); box-shadow: 0 0 0 3px rgba(255,106,61,.12); }
.plan-opt b { display: block; font: 700 16px var(--head); color: var(--ink); }
.plan-opt span { font-size: 14.5px; color: var(--muted); }
@media (hover: hover) { .plan-opt:hover { border-color: var(--line-strong); transform: translateY(-2px); } }
.lbl { font: 700 16px var(--head); color: var(--ink); display: block; }
.seg { display: flex; gap: 6px; margin-top: 14px; background: rgba(var(--ink-rgb),.05); padding: 6px; border-radius: 16px; position: relative; }
.seg button { flex: 1; min-height: 46px; padding: 10px; border-radius: 12px; border: 0; background: transparent; font: 700 15px var(--head); cursor: pointer; color: var(--muted); position: relative; z-index: 1; transition: color .25s; }
.seg button[aria-pressed="true"] { color: var(--ink); }
.seg .pill { position: absolute; top: 6px; bottom: 6px; left: 6px; border-radius: 12px; background: var(--surface); box-shadow: 0 2px 10px rgba(70,60,140,.12); transition: transform .35s var(--ease), width .35s var(--ease); }
.out-label { font: 600 16px var(--head); color: var(--muted); }
.out-big { font: 800 clamp(52px, 6.5vw, 80px)/1 var(--head); color: var(--orange-dark); margin: 10px 0 16px; letter-spacing: -.03em; }
.out-lines { border-top: 1px solid var(--line-strong); margin-top: 22px; padding-top: 20px; font-size: 15.5px; color: var(--muted); }
.out-lines div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; }
.out-lines b { color: var(--ink); font-family: var(--head); }
.calc-out .btn { margin-top: 26px; align-self: flex-start; }
.fine { font-size: 14px; color: var(--muted); margin-top: 18px; line-height: 1.6; }

/* ---------- Comparison table ---------- */
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--glass-strong); border: 1px solid var(--glass-edge); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); }
.cmp th, .cmp td { padding: 20px 24px; text-align: left; border-bottom: 1px solid var(--line); font-size: 16px; vertical-align: top; line-height: 1.55; }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 0; }
.cmp thead th { font: 700 15.5px var(--head); background: rgba(var(--ink-rgb),.03); color: var(--ink); }
.cmp thead th.us { background: linear-gradient(135deg, var(--peach), var(--orange-soft)); color: var(--ink); }
.cmp tbody th { font: 700 15.5px var(--head); color: var(--ink); }
.cmp td.us { background: var(--orange-soft); font-weight: 600; color: var(--ink); }
.tick, .cross { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; margin-right: 8px; font-size: 13px; font-weight: 800; vertical-align: -4px; }
.tick { background: var(--green-soft); color: var(--green); }
.cross { background: var(--red-soft); color: var(--red); }
.reveal.in .tick { animation: pop .5s var(--ease) both; }
@keyframes pop { 0% { transform: scale(0); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* ---------- Portfolio ---------- */
.work { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.project { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius); background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-soft); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.shot { position: relative; overflow: hidden; aspect-ratio: 768 / 488; background: var(--bg-2); margin: 0; }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.shot .badge-ov { position: absolute; left: 14px; top: 14px; background: rgba(var(--surface-rgb), .85); color: var(--ink); font: 700 12.5px var(--head); padding: 7px 12px; border-radius: 999px; letter-spacing: .2px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@media (hover: hover) {
  .project:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
  .project:hover .shot img { transform: scale(1.05); }
}
.p-body { padding: 24px 26px 26px; }
.p-body h3 { margin-bottom: 4px; }
.p-meta { font-size: 14.5px; color: var(--muted); margin-bottom: 14px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.tags li { font: 600 12.5px var(--head); padding: 6px 12px; border-radius: 999px; background: rgba(var(--ink-rgb),.05); color: var(--body); }
.tags li.g { background: var(--mint); color: var(--mint-ink); }
.work-cta { text-align: center; margin-top: 48px; }

/* ---------- Process (soft band) ---------- */
.dark { background: linear-gradient(180deg, var(--band-top) 0%, rgba(var(--surface-rgb), 0) 100%); color: var(--body); }
.dark h2, .dark h3 { color: var(--ink); }
.dark .lead { color: var(--muted); }
.steps { position: relative; list-style: none; padding: 0; margin: 0; }
.steps .line { position: absolute; top: 27px; left: 28px; right: 12%; height: 2px; background: var(--line-strong); border-radius: 2px; }
.steps .line i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--orange), var(--orange-2)); transform: scaleX(0); transform-origin: left; transition: transform 1.6s .3s var(--ease); border-radius: 2px; }
.steps.in .line i { transform: scaleX(1); }
.step { position: relative; }
.step .num { width: 56px; height: 56px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink); display: grid; place-items: center; font: 800 20px var(--head); margin-bottom: 22px; position: relative; z-index: 1; box-shadow: var(--shadow-soft); transition: background .4s, border-color .4s, color .4s; }
.steps.in .step .num { background: linear-gradient(135deg, #ff8256, #ff5f2c); border-color: transparent; color: #fff; }
.steps.in .step:nth-child(3) .num { transition-delay: .4s; }
.steps.in .step:nth-child(4) .num { transition-delay: .8s; }
.steps.in .step:nth-child(5) .num { transition-delay: 1.2s; }
.step p { font-size: 16px; color: var(--muted); }
.step .when { display: inline-block; font: 700 12px var(--head); color: var(--orange-dark); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }

/* ---------- Trial / risk reversal ---------- */
.trial { display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: center; position: relative; overflow: hidden; padding: 56px; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--peach) 0%, rgba(var(--surface-rgb), .7) 60%); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-soft); }
.trial::before { content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%; background: var(--orange); opacity: .08; right: -100px; top: -100px; }
.promise { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; position: relative; }
.promise li { display: flex; gap: 14px; align-items: flex-start; background: var(--glass-strong); padding: 16px 18px; border-radius: 18px; border: 1px solid var(--glass-edge); font-size: 15.5px; line-height: 1.5; }
.promise li b { color: var(--ink); font-family: var(--head); display: block; }
.promise svg { width: 22px; height: 22px; color: var(--green); flex: none; margin-top: 2px; }

/* ---------- Pricing ---------- */
#pricing .grid { align-items: stretch; }
.price { display: flex; flex-direction: column; position: relative; padding: 34px; background: var(--glass-strong); border: 1px solid var(--glass-edge); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
.price.pop { background: linear-gradient(170deg, var(--surface) 0%, var(--orange-soft) 100%); border: 1.5px solid rgba(255,106,61,.5); box-shadow: 0 26px 56px rgba(255,106,61,.16); }
@media (min-width: 1021px) { .price.pop { transform: translateY(-10px); } }
.badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #ff8256, #ff5f2c); color: #fff; font: 700 12px var(--head); text-transform: uppercase; letter-spacing: 1px; padding: 7px 16px; border-radius: 999px; white-space: nowrap; box-shadow: 0 8px 20px rgba(255,106,61,.3); }
.price h3 { font-size: 22px; }
.price .sub { color: var(--muted); font-size: 15px; }
.amount { font: 800 50px/1 var(--head); color: var(--ink); margin: 22px 0 6px; letter-spacing: -.03em; }
.amount small { font-size: 16px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.vs { font-size: 14.5px; color: var(--mint-ink); font-weight: 700; }
.price ul { list-style: none; padding: 0; margin: 22px 0 30px; flex: 1; }
.price li { padding: 7px 0 7px 32px; position: relative; font-size: 15.5px; color: var(--body); line-height: 1.5; }
.price li::before { content: ""; position: absolute; left: 0; top: 9px; width: 20px; height: 20px; border-radius: 50%; background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e8a5d' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/12px no-repeat; }
.price .btn { width: 100%; }

/* ---------- Testimonials ---------- */
.featured { display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center; position: relative; overflow: hidden; margin: 0 0 40px; padding: 52px 56px; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--lavender), rgba(var(--surface-rgb), .75)); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-soft); }
.featured::before { content: "\201C"; position: absolute; right: 40px; top: -40px; font: 800 240px/1 var(--head); color: rgba(91,67,199,.06); }
.featured .avatar { width: 108px; height: 108px; font-size: 32px; }
.featured blockquote { margin: 0; font: 600 clamp(19px, 2.2vw, 24px)/1.55 var(--head); color: var(--ink); letter-spacing: -.01em; }
.featured figcaption { margin-top: 18px; color: var(--muted); font-size: 15.5px; }
.featured figcaption b { color: var(--ink); }
.avatar { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font: 800 17px var(--head); color: #fff; flex: none; background: linear-gradient(135deg, #ff8256, #ff5f2c); }
.avatar.a2 { background: linear-gradient(135deg, #7f9cf0, #5b7de0); }
.avatar.a3 { background: linear-gradient(135deg, #58c4a0, #2fa57c); }
.avatar.a4 { background: linear-gradient(135deg, #a58af0, #7d5fe0); }
.avatar.a5 { background: linear-gradient(135deg, #5fbfd0, #3a9fb6); }
.t-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); padding: 10px 0; }
.t-track { display: flex; gap: 22px; width: max-content; animation: scroll 60s linear infinite; }
.t-marquee:hover .t-track, .t-marquee:focus-within .t-track { animation-play-state: paused; }
.tcard { width: 390px; display: flex; flex-direction: column; margin: 0; padding: 28px; border-radius: var(--radius); background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-soft); }
.tcard blockquote { font-size: 16px; line-height: 1.7; color: var(--body); flex: 1; margin: 12px 0 20px; }
.tcard figcaption, .tcard .figc { display: flex; align-items: center; gap: 14px; }
.tcard figcaption b, .tcard .figc b { display: block; font: 700 15.5px var(--head); color: var(--ink); line-height: 1.3; }
.tcard figcaption small, .tcard .figc small { color: var(--muted); font-size: 13.5px; }

/* ---------- Founder ---------- */
.founder { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: center; }
.portrait { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; background: radial-gradient(120% 80% at 50% 100%, var(--peach) 0%, var(--peach) 45%, var(--bg-2) 100%); box-shadow: var(--shadow-lift); display: flex; align-items: flex-end; justify-content: center; border: 1px solid var(--glass-edge); }
.portrait::before { content: ""; position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; background: var(--orange); opacity: .12; top: 12%; left: 50%; transform: translateX(-50%); }
.portrait::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(var(--ink-rgb),.1) 1.2px, transparent 1.2px); background-size: 18px 18px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 60%); mask-image: linear-gradient(180deg, #000, transparent 60%); }
.portrait img { position: relative; z-index: 1; width: 94%; height: auto; }
.portrait-tag { position: absolute; z-index: 2; left: 18px; bottom: 18px; padding: 10px 14px; border-radius: 16px; background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-lift); font: 700 14px/1.3 var(--head); color: var(--ink); animation: bob 6s ease-in-out infinite; }
.portrait-tag small { display: block; font: 500 12.5px var(--text); color: var(--muted); }
.signature { font: 700 22px var(--head); color: var(--ink); margin-top: 22px; }
.signature small { display: block; font: 500 15px var(--text); color: var(--muted); }

/* ---------- FAQ ---------- */
.faq { max-width: 840px; margin: 0 auto; }
.qa { border-bottom: 1px solid var(--line); }
.qa h3 { margin: 0; font-size: 18px; }
.qa button { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 22px 52px 22px 0; min-height: 56px; font: 700 18px/1.4 var(--head); color: var(--ink); position: relative; }
.qa button::after { content: ""; position: absolute; right: 4px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; background: var(--glass-strong) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0532a' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/15px no-repeat; box-shadow: var(--shadow-soft); transition: transform .35s var(--ease); }
@media (hover: hover) { .qa button:hover { color: var(--orange-dark); } }
.qa.open button::after { transform: rotate(135deg); }
.qa .ans { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.qa .ans > div { overflow: hidden; min-height: 0; }
.qa .ans p { color: var(--muted); padding-right: 52px; margin: 0 0 24px; font-size: 16.5px; }
.qa.open .ans, html:not(.js) .qa .ans { grid-template-rows: 1fr; }
.guides { max-width: 840px; margin: 44px auto 0; background: var(--glass-strong); border: 1px solid var(--glass-edge); border-radius: var(--radius); padding: 28px 30px; box-shadow: var(--shadow-soft); }
.guides h3 { font-size: 17px; }
.guides ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.guides a { color: var(--ink); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; padding: 8px 0; min-height: 44px; line-height: 1.45; }
.guides a::before { content: "→"; color: var(--orange-dark); }
.guides a:hover { color: var(--orange-dark); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Final CTA ---------- */
.final { text-align: center; background: linear-gradient(180deg, rgba(var(--surface-rgb), 0) 0%, var(--peach) 100%); }
.final h2 { font-size: clamp(34px, 5vw, 56px); }
.final .lead { color: var(--muted); margin-left: auto; margin-right: auto; }
.final .lead-form { margin: 36px auto 18px; }
.final .microcopy { justify-content: center; }
.final .microcopy a { color: var(--ink); font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Footer ---------- */
footer { background: rgba(var(--surface-rgb), .5); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-top: 1px solid var(--line); color: var(--muted); padding: 60px 0 calc(32px + env(safe-area-inset-bottom)); font-size: 15px; }
.foot { display: grid; grid-template-columns: 1.3fr 1.1fr 1fr 1fr; gap: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.foot .ft { display: block; color: var(--ink); font: 700 16px var(--head); margin: 0 0 12px; }
.foot p { margin: 0; line-height: 1.65; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot a { color: var(--body); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.foot a:hover { color: var(--ink); }
.copy { padding-top: 24px; font-size: 14px; margin: 0; }
.social { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; }
.social a { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--glass-strong); border: 1px solid var(--glass-edge); color: var(--ink); box-shadow: var(--shadow-soft); transition: transform .2s var(--ease), color .2s, border-color .2s; }
.social a:hover { color: var(--orange-dark); border-color: var(--orange); transform: translateY(-2px); }
.social a:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.social svg { width: 20px; height: 20px; }

.mcta { display: none; }

/* ---------- Blog: archive ---------- */
.page-head { padding: 80px 0 40px; }
.page-head h1, .page-head .display { font: 800 clamp(38px, 5.2vw, 58px)/1.06 var(--head); color: var(--ink); letter-spacing: -.03em; margin: 0 0 16px; max-width: 18ch; }
.page-head .lead { max-width: 56ch; }
.archive-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 56px; align-items: start; padding-bottom: 88px; }
.archive-layout > div:first-child { min-width: 0; }
.list-title { font: 700 22px/1.3 var(--head); color: var(--ink); margin: 8px 0 0; letter-spacing: -.01em; }
/* Bento: the newest post is a large tile, the rest sit in a two-column grid */
.posts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 28px 0 8px; }
.post-card { display: flex; flex-direction: column; min-width: 0; padding: 14px; border-radius: var(--radius); background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-soft); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.posts-grid > .post-card:first-child:nth-last-child(n+2) { grid-column: 1 / -1; padding: 14px; }
.posts-grid > .post-card:first-child:nth-last-child(n+2) .post-thumb { aspect-ratio: 21 / 8; }
.posts-grid > .post-card:first-child:nth-last-child(n+2) h3 { font-size: 30px; max-width: 30ch; }
.posts-grid > .post-card:first-child:nth-last-child(n+2) > p:not(.p-meta):not(:last-child) { font-size: 17px; max-width: 62ch; }
.post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.post-card .post-thumb { position: relative; margin: 0 0 18px; overflow: hidden; border-radius: 18px; aspect-ratio: 16 / 9; background: var(--bg-2); }
.post-card .post-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.post-card:hover .post-thumb img { transform: scale(1.04); }
.post-card .post-thumb figcaption { position: absolute; left: 12px; top: 12px; margin: 0; padding: 6px 11px; border-radius: 999px; background: rgba(var(--surface-rgb), .85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 700 12px/1.2 var(--head); color: var(--ink); }
.post-card .p-meta { margin: 0 6px 8px; font-size: 13.5px; color: var(--muted); }
.post-card h3 { font: 700 20px/1.3 var(--head); color: var(--ink); margin: 0 6px 10px; letter-spacing: -.01em; }
.post-card h3 a { text-decoration: none; }
.post-card h3 a:hover { color: var(--orange-dark); }
.post-card > p:not(.p-meta) { font-size: 15.5px; line-height: 1.65; color: var(--muted); margin: 0 6px 16px; }
.post-card .link-more { margin: auto 6px 6px; }
.posts-grid .post-empty { grid-column: 1 / -1; }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 28px 0 0; }
.pg { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 42px; height: 42px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--glass-strong); color: var(--ink); font: 600 15px/1 var(--head); text-decoration: none; }
.pg:hover { border-color: var(--ink); }
.pg.cur { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.pg .arrow { width: 16px; height: 16px; }

/* ---------- Blog: side cards (bento tiles) ---------- */
.blog-side { position: sticky; top: 100px; display: grid; gap: 16px; }
.side-card { padding: 22px; border-radius: var(--radius); background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-soft); }
.side-card h3 { font: 700 15px/1.3 var(--head); color: var(--ink); margin: 0 0 14px; }
.side-card p { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0 0 16px; }
.side-card.soft { background: linear-gradient(160deg, var(--lavender) 0%, var(--orange-soft) 100%); border-color: transparent; }
.side-card .btn { width: 100%; }
.toc { list-style: none; margin: 0; padding: 0; counter-reset: toc; display: grid; gap: 2px; }
.toc li { counter-increment: toc; }
.toc a { display: flex; gap: 10px; padding: 7px 0; font-size: 14.5px; line-height: 1.45; color: var(--body); text-decoration: none; }
.toc a::before { content: counter(toc, decimal-leading-zero); font: 700 12px/1.9 var(--head); color: var(--orange-dark); flex: none; }
.toc a:hover { color: var(--ink); }
.recent-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.recent-list li { border-top: 1px solid var(--line); padding-top: 14px; }
.recent-list li:first-child { border-top: 0; padding-top: 0; }
.recent-list a { display: block; font: 600 14.5px/1.45 var(--head); color: var(--ink); text-decoration: none; }
.recent-list a:hover { color: var(--orange-dark); }
.recent-list small { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }
.cat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cat-list a { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; margin: 0 -12px; border-radius: 12px; font-size: 15px; color: var(--body); text-decoration: none; }
.cat-list a:hover { background: rgba(var(--surface-rgb), .7); color: var(--ink); }
.cat-list a[aria-current="page"] { background: var(--orange-soft); color: var(--orange-dark); font-weight: 700; }
.cat-list span { font-size: 13px; color: var(--muted); }

/* ---------- Blog: article ---------- */
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 56px; align-items: start; padding: 40px 0 24px; }
.post-main { max-width: 740px; min-width: 0; }
.post-head { padding: 40px 42px; margin-bottom: 28px; border-radius: var(--radius-lg); background: linear-gradient(150deg, rgba(var(--surface-rgb), .9), var(--lavender)); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-soft); }
.post-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; font: 700 12.5px/1.2 var(--head); letter-spacing: 1.2px; text-transform: uppercase; color: var(--orange-dark); text-decoration: none; }
.post-title { font: 800 clamp(30px, 4.4vw, 44px)/1.12 var(--head); color: var(--ink); letter-spacing: -.025em; margin: 0 0 16px; text-wrap: balance; }
.post-deck { font-size: 19px; line-height: 1.6; color: var(--body); margin: 0 0 22px; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: 14.5px; color: var(--muted); }
.post-meta a { color: var(--ink); font-weight: 600; text-decoration: none; }
.post-meta a:hover { color: var(--orange-dark); }
.post-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--muted); opacity: .6; }
.post-hero { margin: 0 0 40px; }
.post-hero img { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: var(--radius-lg); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-soft); }
.post-body { font-size: 18.5px; line-height: 1.85; color: var(--body); }
.post-body > :first-child { margin-top: 0; }
.post-body p { margin: 0 0 1.25em; }
.post-body h2 { font-size: clamp(24px, 3vw, 30px); line-height: 1.25; margin: 2.2em 0 .6em; scroll-margin-top: 100px; }
.post-body h3 { font-size: clamp(20px, 2.4vw, 23px); line-height: 1.3; margin: 2em 0 .5em; scroll-margin-top: 100px; }
.post-body h4 { font-size: 18px; margin: 1.8em 0 .4em; scroll-margin-top: 100px; }
.post-body a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.post-body a:hover { color: var(--orange-dark); }
.post-body strong { color: var(--ink); font-weight: 700; }
.post-body ul, .post-body ol { padding-left: 1.3em; margin: 0 0 1.4em; }
.post-body li { margin: .4em 0; padding-left: .2em; }
.post-body li::marker { color: var(--orange); }
.post-body blockquote { margin: 2em 0; padding: 22px 26px; background: linear-gradient(135deg, var(--lavender) 0%, var(--orange-soft) 100%); border-radius: var(--radius); color: var(--ink); font: 600 19px/1.6 var(--head); }
.post-body blockquote p:last-child { margin: 0; }
.post-body figure { margin: 2.2em 0; }
.post-body figure img, .post-body img { border-radius: 20px; height: auto; margin: 1.5em auto; border: 1px solid var(--glass-edge); box-shadow: var(--shadow-soft); }
.post-body figcaption { font-size: 14px; color: var(--muted); margin-top: 10px; text-align: center; }
.post-body .infographic { margin: 2.4em 0; padding: 18px; border-radius: var(--radius-lg); background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-soft); }
.post-body .infographic img { margin: 0 auto; border: 0; box-shadow: none; border-radius: 16px; }
.post-body .infographic figcaption { margin-top: 12px; }
.post-body code { font: 500 .9em/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; background: rgba(var(--ink-rgb),.06); color: var(--ink); padding: 2px 6px; border-radius: 6px; }
.post-body pre { background: var(--code-bg); color: var(--bg-2); padding: 18px 20px; border-radius: var(--radius-sm); overflow-x: auto; font-size: 15px; line-height: 1.65; }
.post-body pre code { background: none; padding: 0; color: inherit; }
.post-body table { width: 100%; border-collapse: collapse; margin: 0 0 1.6em; font-size: 16px; display: block; overflow-x: auto; }
.post-body th, .post-body td { border: 1px solid var(--line-strong); padding: 11px 14px; text-align: left; vertical-align: top; }
.post-body th { background: rgba(var(--ink-rgb),.04); color: var(--ink); font-family: var(--head); font-weight: 700; }
.post-body hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
.post-empty { padding: 28px; border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--muted); }
.post-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); }

/* Closing CTA band (under posts and the blog list) */
.cta-band { padding: 88px 0; }
.cta-band .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 48px 52px; border-radius: var(--radius-lg); background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-lift); max-width: 1180px; }
.cta-band h2 { font-size: clamp(26px, 3.4vw, 34px); margin: 0 0 12px; }
.cta-band p { margin: 0; font-size: 17px; color: var(--muted); }

/* ---------- Generated service pages (page-hero, page-body, block cards) ---------- */
.page-hero { padding: 84px 0 44px; }
.page-hero .eyebrow { margin-bottom: 18px; }
.page-hero .display { font-size: clamp(36px, 5vw, 58px); max-width: 22ch; margin-bottom: 18px; }
.page-hero .lead { max-width: 60ch; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.page-body { padding: 8px 0 96px; }
.page-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.block-card { grid-column: span 1; padding: 30px; border-radius: var(--radius); background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-soft); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.page-stack > .block-card:first-child:not(:only-child) { grid-column: 1 / -1; }
.block-card h2 { font-size: clamp(22px, 2.6vw, 28px); margin-bottom: 14px; }
.block-card h3 { font-size: 18px; margin: 18px 0 8px; }
.block-card p, .block-card li { font-size: 16px; line-height: 1.7; color: var(--body); }
.block-card ul { padding-left: 20px; margin: 0 0 14px; }
.block-card li { margin: 6px 0; }
.block-card li::marker { color: var(--orange); }
@media (max-width: 760px) {
  .page-stack { grid-template-columns: 1fr; }
  .page-hero { padding: 52px 0 28px; }
  .block-card { padding: 22px; }
}

/* ---------- Infographics (minimal, same glass and soft palette) ---------- */
.ig { margin: 56px 0 0; padding: 34px; border-radius: var(--radius-lg); background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-soft); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.ig-head { display: block; margin: 0 0 28px; }
.ig-head h3 { font-size: clamp(20px, 2.4vw, 24px); margin: 0 0 6px; }
.ig-head p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 62ch; }
.ig-note { margin: 18px 0 0; font-size: 13.5px; color: var(--muted); }
.out-note { color: var(--muted); }

/* Cost chart: paired bars per period */
.ig-chart { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; height: 260px; padding: 0 8px; border-bottom: 1px solid var(--line-strong); }
.ig-group { display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; min-height: 0; }
.ig-bars { display: flex; align-items: flex-end; justify-content: center; gap: 12px; height: 100%; width: 100%; min-height: 0; }
.ig-bar { position: relative; width: 44px; height: var(--h); min-height: 6px; border-radius: 14px 14px 6px 6px; transition: height .8s var(--ease); }
.ig-bar.wix { background: linear-gradient(180deg, var(--bar-wix-a), var(--bar-wix-b)); }
.ig-bar.us { background: linear-gradient(180deg, #ffa27c, #ff6a3d); }
.ig-bar b { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); font: 700 14px var(--head); color: var(--ink); white-space: nowrap; }
.ig-year { margin-top: 12px; font: 600 14px var(--head); color: var(--muted); }
.ig-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; font: 600 14px var(--head); color: var(--body); }
.ig-legend span { display: inline-flex; align-items: center; gap: 8px; }
.ig-legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.ig-legend i.wix { background: var(--bar-wix-b); }
.ig-legend i.us { background: #ff6a3d; }

/* Rankings flow: old page, 301, new page */
.ig-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: center; }
.ig-node { position: relative; padding: 24px; border-radius: 20px; background: rgba(var(--surface-rgb), .9); border: 1px solid var(--line); }
.ig-node.us { background: linear-gradient(160deg, var(--mint), var(--surface)); border-color: transparent; }
.ig-chip { display: inline-block; font: 700 11.5px var(--head); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.ig-node.us .ig-chip { color: var(--mint-ink); }
.ig-node b { display: block; margin: 10px 0 4px; font: 700 18px var(--head); color: var(--ink); }
.ig-node code { font: 500 14px var(--mono); color: var(--muted); }
.ig-check { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font: 700 13.5px var(--head); color: var(--mint-ink); }
.ig-check svg { width: 16px; height: 16px; }
.ig-link { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--lavender-ink); }
.ig-pill { font: 700 12.5px var(--head); background: var(--lavender); color: var(--lavender-ink); padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.ig-link svg { width: 110px; height: 16px; }
.ig-points { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ig-points li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--body); }

/* What moves over: icon tiles */
.ig-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ig-move { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border-radius: 18px; background: rgba(var(--surface-rgb), .9); border: 1px solid var(--line); }
.ig-move span { font-size: 15px; line-height: 1.5; color: var(--muted); }
.ig-move b { display: block; font: 700 16px var(--head); color: var(--ink); margin-bottom: 2px; }
.ig-moves .ig-head { color: var(--ink); }

@media (max-width: 1020px) {
  .ig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ig { padding: 24px 18px; margin-top: 44px; }
  .ig-chart { height: 230px; gap: 10px; }
  .ig-bar { width: 30px; }
  .ig-bar b { font-size: 12px; }
  .ig-flow { grid-template-columns: 1fr; }
  .ig-link { flex-direction: row; justify-content: center; }
  .ig-link svg { transform: rotate(90deg); width: 16px; height: 110px; margin: 0; }
  .ig-points, .ig-grid { grid-template-columns: 1fr; }
}

/* ---------- Icon system: one set, one tile style ---------- */
.icon, .stat-ico, .chip i, .ig-points i, .ig-move i {
  --tint: var(--lavender); --tone: var(--lavender-ink);
  position: relative; flex: none; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--tint) 0%, var(--surface) 135%);
  color: var(--tone);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.95), 0 10px 22px -8px rgba(70,60,140,.28);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.icon { width: 56px; height: 56px; border-radius: 18px; margin-bottom: 22px; }
.stat-ico { width: 48px; height: 48px; border-radius: 16px; margin-bottom: 18px; }
.chip i { width: 36px; height: 36px; border-radius: 12px; }
.ig-points i { width: 38px; height: 38px; border-radius: 13px; --tint: var(--mint); --tone: var(--mint-ink); }
.ig-move i { width: 44px; height: 44px; border-radius: 15px; }
.icon svg, .stat-ico svg, .chip i svg, .ig-points i svg, .ig-move i svg { width: 28px; height: 28px; }
.g3 > .card:first-child:nth-last-child(6) .icon { width: 72px; height: 72px; border-radius: 24px; }
.g3 > .card:first-child:nth-last-child(6) .icon svg { width: 36px; height: 36px; }
.stat-ico svg { width: 24px; height: 24px; }
.chip i svg, .ig-points i svg { width: 18px; height: 18px; }
.ig-move i svg { width: 22px; height: 22px; }
.grid > .card:nth-child(4n+1) .icon, .stat:nth-child(4n+1) .stat-ico, .ig-move:nth-child(4n+1) i { --tint: var(--lavender); --tone: var(--lavender-ink); }
.grid > .card:nth-child(4n+2) .icon, .stat:nth-child(4n+2) .stat-ico, .ig-move:nth-child(4n+2) i { --tint: var(--mint); --tone: var(--mint-ink); }
.grid > .card:nth-child(4n+3) .icon, .stat:nth-child(4n+3) .stat-ico, .ig-move:nth-child(4n+3) i { --tint: var(--peach); --tone: var(--orange-dark); }
.grid > .card:nth-child(4n+4) .icon, .stat:nth-child(4n+4) .stat-ico, .ig-move:nth-child(4n+4) i { --tint: var(--sky); --tone: var(--sky-ink); }
.chip.c1 i { --tint: var(--mint); --tone: var(--mint-ink); }
.chip.c2 i { --tint: var(--peach); --tone: var(--orange-dark); }
.tick svg, .cross svg { width: 13px; height: 13px; stroke-width: 2.6; }
@media (hover: hover) {
  .card:hover .icon, .stat:hover .stat-ico, .ig-move:hover i { transform: translateY(-2px) scale(1.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.95), 0 16px 28px -10px rgba(70,60,140,.36); }
}

/* ---------- Service and general page layouts ---------- */
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.page-hero-copy .display { max-width: 20ch; }
.hero-visual { margin: 0; border-radius: var(--radius-lg); background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-lift); padding: 14px; overflow: hidden; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.hero-visual svg, .hero-visual img { display: block; width: 100%; height: auto; border-radius: 22px; }
.hero-visual img { aspect-ratio: 4 / 3; object-fit: cover; }
.process { padding: 96px 0; background: linear-gradient(180deg, rgba(var(--surface-rgb), 0) 0%, rgba(var(--surface-rgb), .5) 50%, rgba(var(--surface-rgb), 0) 100%); }
.moves { padding: 0 0 96px; }
.moves .ig { margin-top: 0; }
.page-gallery { padding: 88px 0; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.gallery-item { margin: 0; border-radius: 22px; overflow: hidden; background: var(--bg-2); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-soft); aspect-ratio: 4 / 3; }
.gallery-item img { width: 100%; height: 100%; object-fit: contain; padding: 22px; background: var(--surface); transition: transform .6s var(--ease); }
@media (hover: hover) { .gallery-item:hover img { transform: scale(1.04); } }
.service-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.service-card { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.service-card h3 { font-size: 20px; margin-bottom: 10px; }
.service-card p { margin-bottom: 18px; }
.service-card .link-more { margin-top: auto; }
.service-card:hover .link-more .arrow { transform: translateX(4px); }
@media (max-width: 1020px) { .page-hero-grid { grid-template-columns: 1fr; gap: 36px; } .gallery-grid, .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .gallery-grid, .service-grid { grid-template-columns: 1fr; } .process, .page-gallery { padding: 64px 0; } }

/* ---------- Reveal animations ---------- */
.js .reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js .reveal.left { transform: translateX(-36px); }
.js .reveal.right { transform: translateX(36px); }
.js .reveal.zoom { transform: scale(.95); }
.js .reveal.in { opacity: 1; transform: none; }
.js .hero .intro > * { opacity: 0; transform: translateY(22px); animation: rise .8s var(--ease) forwards; }
.js .hero .intro > .display { opacity: 1; }
.js .hero .intro > *:nth-child(2) { animation-delay: .1s; }
.js .hero .intro > *:nth-child(3) { animation-delay: .2s; }
.js .hero .intro > *:nth-child(4) { animation-delay: .3s; }
.js .hero .intro > *:nth-child(5) { animation-delay: .4s; }
.js .hero .intro > *:nth-child(6) { animation-delay: .45s; }
.js .hero .intro > *:nth-child(7) { animation-delay: .5s; }
.js .bill-stage { opacity: 0; animation: rise 1s .3s var(--ease) forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- Responsive: tablet ---------- */
@media (max-width: 1020px) {
  .js .reveal.left, .js .reveal.right { transform: translateY(30px); }
  .js .reveal.left.in, .js .reveal.right.in { transform: none; }
  .hero .wrap, .calc, .trial, .founder, .post-layout, .archive-layout { grid-template-columns: 1fr; }
  .bill-stage { max-width: 520px; margin: 40px auto 0; width: 100%; }
  .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3 > .card:first-child:nth-last-child(6) { grid-column: 1 / -1; grid-row: auto; }
  .site-header nav a.link:not(.dd-t) { display: none; }
  .steps .line { display: none; }
  .featured { grid-template-columns: 1fr; padding: 40px 32px; gap: 24px; }
  .portrait { max-width: 420px; width: 100%; margin: 0 auto; }
  .founder { gap: 44px; }
  .foot { grid-template-columns: 1fr 1fr; }
  .foot > div:first-child { grid-column: 1 / -1; }
  .cta-band .wrap { grid-template-columns: 1fr; gap: 28px; padding: 40px 32px; }
  .blog-side { position: static; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .posts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .posts-grid > .post-card:first-child:nth-last-child(n+2) { grid-template-columns: 1fr; }
}

/* ---------- Responsive: phone ---------- */
@media (max-width: 760px) {
  body { font-size: 17px; padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  section { padding: 72px 0; }
  .wrap { padding: 0 16px; }
  .lead { font-size: 18px; }
  .section-head { margin-bottom: 40px; }
  .g2, .g3, .g4, .plans, .work, .lf-fields, .posts-grid { grid-template-columns: 1fr; }
  .stats .grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .stat { padding: 22px 18px 18px; }
  .stat .stat-ico { width: 38px; height: 38px; border-radius: 12px; margin-bottom: 12px; }
  .stat .stat-ico svg { width: 19px; height: 19px; }
  .stat .stat-label { font-size: 14px; }
  .hero { padding: 40px 0 72px; }
  .hero .wrap { gap: 40px; }
  .lead-form { border-radius: 22px; padding: 10px; }
  .lead-form.open { padding: 12px; }
  .lf-row { flex-direction: column; align-items: stretch; }
  .lf-row input { flex: none; width: 100%; height: 52px; padding: 0 14px; background: rgba(var(--surface-rgb), .8); }
  .lf-row .btn { width: 100%; }
  .chip { font-size: 13px; padding: 10px 12px; border-radius: 15px; }
  .chip i { width: 28px; height: 28px; }
  .chip.c1 { left: -4px; top: -34px; }
  .chip.c2 { right: -4px; bottom: -30px; }
  .bill { padding: 20px; border-radius: 24px; }
  .bill-row { padding: 14px 16px; }
  .bill-row .amt { font-size: 44px; }
  .bill-row small.per { font-size: 16px; }
  .calc-in, .calc-out { padding: 28px 20px; }
  .calc-out .btn { align-self: stretch; }
  .trial { padding: 32px 20px; }
  .price { padding: 28px 22px; }
  .price.pop { transform: none; }
  .site-header { padding-top: 10px; }
  .site-header .wrap, .site-header.scrolled .wrap { height: 60px; padding: 0 10px 0 14px; border-radius: 18px; }
  .site-header .brand img { height: 30px; }
  .site-header .btn { padding: 10px 14px; min-height: 42px; font-size: 13.5px; }
  .site-header nav a.link:not(.dd-t), .site-header nav .dd { display: none; }
  .site-header nav .btn { white-space: nowrap; font-size: 13.5px; padding: 10px 16px; }
  /* Comparison table becomes stacked tiles */
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: 100%; }
  .cmp { background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
  .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cmp tr { background: var(--glass-strong); border: 1px solid var(--glass-edge); border-radius: 20px; overflow: hidden; margin-bottom: 14px; box-shadow: var(--shadow-soft); }
  .cmp tbody th { background: rgba(var(--ink-rgb),.03); padding: 14px 18px; border-bottom: 1px solid var(--line) !important; }
  .cmp td { padding: 12px 18px; font-size: 15.5px; }
  .cmp tr td:last-child { border-bottom: 0; }
  .cmp td::before { content: attr(data-label); display: block; font: 700 11.5px/1.4 var(--head); letter-spacing: .8px; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
  .cmp td.us::before { color: var(--orange-dark); }
  .cmp td.us { position: relative; padding-left: 48px; }
  .cmp td.us .tick { position: absolute; left: 16px; top: 37px; margin: 0; }
  .tcard { width: 300px; padding: 22px; }
  .featured { padding: 32px 22px; }
  .featured::before { font-size: 180px; right: 10px; }
  .featured .avatar { width: 72px; height: 72px; font-size: 24px; }
  .guides { padding: 22px 20px; }
  .qa button { font-size: 17px; padding-right: 48px; }
  .qa .ans p { padding-right: 0; }
  .foot { grid-template-columns: 1fr; gap: 26px; }
  .mcta { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-top: 1px solid var(--glass-edge); box-shadow: 0 -8px 24px rgba(70,60,140,.08); transform: translateY(110%); transition: transform .4s var(--ease); }
  .mcta.show { transform: none; }
  .typing .mcta { transform: translateY(110%); }
  .mcta .btn { flex: 1; padding: 12px 10px; min-height: 50px; font-size: 15px; }
  .post-head { padding: 28px 22px; }
  .post-deck { font-size: 17px; }
  .post-body { font-size: 17.5px; }
  .post-foot { margin-top: 40px; }
  .page-head { padding: 52px 0 24px; }
  .cta-band { padding: 56px 0; }
  .cta-band .wrap { padding: 30px 22px; }
}
@media (max-width: 360px) {
  .display { font-size: 34px; }
  .stats .grid { grid-template-columns: 1fr; }
  .stat { display: flex; flex-wrap: wrap; align-items: center; column-gap: 18px; padding: 18px 20px; }
  .stat .stat-ico { margin-bottom: 0; }
  .stat b { font-size: 34px; }
  .stat .stat-label { margin-top: 0; flex: 1; text-align: right; }
  .chip.c1 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .js .reveal, .js .hero .intro > *, .js .bill-stage { opacity: 1; transform: none; }
  .track, .t-track { animation: none !important; }
}

/* ---------- Dark mode: each section gets its own colour, not a grey wash ---------- */
:root[data-theme="dark"] #work {
  background:
    radial-gradient(760px 460px at 6% 0%, rgba(124,92,255,.28), transparent 62%),
    radial-gradient(640px 420px at 100% 100%, rgba(255,106,61,.14), transparent 60%),
    linear-gradient(180deg, #171d40 0%, #0e1328 100%);
}
:root[data-theme="dark"] [aria-labelledby="get-title"] {
  background:
    radial-gradient(900px 520px at 100% 0%, rgba(38,201,160,.24), transparent 62%),
    radial-gradient(700px 480px at 0% 100%, rgba(124,92,255,.22), transparent 60%),
    linear-gradient(180deg, #0f1a33 0%, #0c1227 100%);
}
:root[data-theme="dark"] .dark {
  background:
    radial-gradient(760px 460px at 0% 0%, rgba(38,201,160,.30), transparent 62%),
    radial-gradient(680px 440px at 100% 100%, rgba(255,106,61,.22), transparent 60%),
    linear-gradient(180deg, #0e2638 0%, #161a38 100%);
}
:root[data-theme="dark"] #pricing {
  background:
    radial-gradient(820px 460px at 50% 0%, rgba(255,106,61,.20), transparent 62%),
    linear-gradient(180deg, #221a3c 0%, #0f1427 100%);
}
:root[data-theme="dark"] [aria-labelledby="founder-title"] {
  background:
    radial-gradient(620px 420px at 0% 40%, rgba(255,106,61,.18), transparent 60%),
    linear-gradient(180deg, #1f1b35 0%, #0f1427 100%);
}
/* Dark mode: portfolio screenshots have white margins, so dim them slightly to sit on the dark band */
:root[data-theme="dark"] .shot img { filter: brightness(.86) saturate(1.05); }
:root[data-theme="dark"] .shot { box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }

/* Cost infographic on the Wix page: 30px space below it before the calculator and comparison */
.ig.ig-cost { margin-bottom: 30px; }

/* Footer logo: same brand colours as the header in both themes */
.foot-logo { display: block; height: 40px; width: auto; margin: 0 0 14px; filter: var(--brand-filter); }

/* ---------- Explainer video (2nd hero) ---------- */
.explainer { padding-top: 72px; }
.explainer .section-head { margin-bottom: 40px; }
.xv { margin: 0 auto; max-width: 1040px; position: relative; }
.xv::before { content: ""; position: absolute; inset: 8% 6% -4%; border-radius: 40px; background: radial-gradient(60% 60% at 30% 40%, rgba(255,106,61,.35), transparent 70%), radial-gradient(60% 60% at 75% 60%, rgba(110,80,230,.3), transparent 70%); z-index: -1; }
.xv-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: #faf9f6; border: 1px solid var(--glass-edge); box-shadow: var(--shadow-lift), 0 0 0 6px rgba(var(--surface-rgb), .5); }
.xv-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.xv-sound, .xv-pp { position: absolute; bottom: 18px; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: transform .25s var(--ease), background .25s var(--ease), opacity .25s; }
.xv-sound { left: 18px; gap: 10px; padding: 12px 20px 12px 16px; border-radius: 999px; background: var(--orange); font: 700 15px/1 var(--head); box-shadow: 0 10px 26px rgba(255,79,0,.4); }
.xv-sound svg { width: 20px; height: 20px; }
.xv.sound .xv-sound { background: rgba(11,15,29,.7); box-shadow: none; backdrop-filter: blur(8px); }
.xv-pp { right: 18px; width: 46px; height: 46px; border-radius: 50%; background: rgba(11,15,29,.6); backdrop-filter: blur(8px); }
.xv-pp svg { width: 20px; height: 20px; }
.xv-pp .i-play, .xv.paused .xv-pp .i-pause { display: none; }
.xv.paused .xv-pp .i-play { display: block; }
.xv-sound:hover, .xv-pp:hover, .xv-sound:focus-visible, .xv-pp:focus-visible { transform: scale(1.05); }
.xv-sound:focus-visible, .xv-pp:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.xv figcaption { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 26px; font: 600 15.5px/1.4 var(--head); color: var(--muted); }
.xv figcaption span { display: inline-flex; align-items: center; gap: 7px; }
.xv figcaption svg { width: 16px; height: 16px; color: var(--green); }
.xv figcaption a { color: var(--orange-dark); font-weight: 700; text-decoration: none; }
.xv figcaption a:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .explainer { padding-top: 48px; }
  .xv-frame { border-radius: 18px; }
  .xv-sound, .xv-pp { bottom: 10px; }
  .xv-sound { left: 10px; padding: 9px 14px 9px 12px; font-size: 13px; }
  .xv-pp { right: 10px; width: 38px; height: 38px; }
}

/* Wix page pricing: bold, larger, colourful prices */
.price-bold .price .amount { font: 800 76px/1 var(--head); letter-spacing: -2px; margin: 10px 0 14px; background: linear-gradient(120deg, #ff6a3d 0%, #ff3d7f 45%, #7c5cff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.price-bold .price .amount small { font: 700 18px var(--head); letter-spacing: 0; color: var(--muted); -webkit-text-fill-color: var(--muted); background: none; }
.price-bold .price h3 { font-size: 26px; font-weight: 800; }
.price-bold .price.pop { border: 2px solid transparent; background: linear-gradient(var(--glass-strong), var(--glass-strong)) padding-box, linear-gradient(120deg, #ff6a3d, #7c5cff) border-box; }
.price-bold .price .amount small { white-space: nowrap; }

/* One-time vs monthly comparison (Wix page) */
.once-compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: stretch; max-width: 920px; margin: 0 auto 44px; }
.once-card { position: relative; padding: 30px 28px; border-radius: var(--radius-lg); background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-soft); }
.once-card.us { background: linear-gradient(135deg, #ff6a3d 0%, #ff3d7f 55%, #7c5cff 100%); border-color: transparent; color: #fff; }
.once-card.us .once-note, .once-card.us .once-total, .once-card.us .once-price small { color: rgba(255,255,255,.92); }
.once-tag { display: inline-block; padding: 6px 12px; border-radius: 999px; font: 700 12px var(--head); text-transform: uppercase; letter-spacing: .8px; background: var(--red-soft); color: var(--red); }
.once-card.us .once-tag { background: rgba(255,255,255,.22); color: #fff; }
.once-price { margin: 14px 0 6px; font: 800 60px/1 var(--head); letter-spacing: -1.5px; color: var(--ink); }
.once-price small { font: 700 18px var(--head); letter-spacing: 0; color: var(--muted); }
.once-card.us .once-price { color: #fff; }
.once-card.us .once-price small { color: rgba(255,255,255,.9); }
.once-card.wix .once-price { text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: var(--red); }
.once-total { margin: 6px 0 4px; font: 700 18px var(--head); color: var(--ink); }
.once-total span { color: var(--muted); font-weight: 600; }
.once-total b { font-weight: 800; }
.once-note { margin: 0; font-size: 14.5px; }
.once-vs { align-self: center; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font: 800 15px var(--head); background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); box-shadow: var(--shadow-soft); }
@media (max-width: 720px) { .once-compare { grid-template-columns: 1fr; } .once-vs { justify-self: center; } .once-price { font-size: 48px; } }
.once-card.wix .once-price { text-decoration: none; }

/* Respect reduced motion: stop the logo and review marquees */
@media (prefers-reduced-motion: reduce) { .marquee .track { animation: none; } }

/* Wix page calculator: the saving is the first thing you read */
.calc-out.save-focus .save-badge { display: inline-block; padding: 7px 14px; border-radius: 999px; font: 800 13px var(--head); letter-spacing: .8px; text-transform: uppercase; background: rgba(47,211,154,.18); color: #2fd39a; margin-bottom: 6px; }
.calc-out.save-focus .out-label { font: 700 18px var(--head); color: var(--ink); }
.calc-out.save-focus .out-big { font: 800 84px/1 var(--head); letter-spacing: -2px; background: linear-gradient(120deg, #2fd39a 0%, #22c5b0 55%, #3da5ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 6px 0 8px; }
.calc-out.save-focus .out-note { font-size: 16px; color: var(--body); }
@media (max-width: 720px) { .calc-out.save-focus .out-big { font-size: 60px; } }
.calc-out.save-focus .save-word { margin-right: .12em; }
.calc-out.save-focus .save-word { font-size: 0.5em; vertical-align: middle; }

/* Wix page: pain points as an icon infographic */
.pain-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pain-tile { position: relative; overflow: hidden; padding: 28px 26px 26px; border-radius: var(--radius-lg); background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-soft); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.pain-tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.pain-tile::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--pt, #ff6a3d); }
.pain-tile .pt-num { position: absolute; right: 22px; top: 14px; font: 800 44px/1 var(--head); color: var(--pt, #ff6a3d); opacity: .14; }
.pain-tile .pt-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: color-mix(in srgb, var(--pt, #ff6a3d) 14%, transparent); color: var(--pt, #ff6a3d); margin-bottom: 18px; }
.pain-tile .pt-icon svg { width: 32px; height: 32px; }
.pain-tile h3 { font: 800 20px/1.2 var(--head); color: var(--ink); margin: 0 0 6px; }
.pain-tile p { margin: 0; font-size: 16px; color: var(--body); }
.t-orange { --pt: #ff6a3d; } .t-violet { --pt: #7c5cff; } .t-teal { --pt: #13b8a6; }
.t-pink { --pt: #ff3d7f; } .t-blue { --pt: #3d7bff; } .t-red { --pt: #e0453d; }
@media (max-width: 1020px) { .pain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pain-grid { grid-template-columns: 1fr; } }

/* Wix hero: visual Wix vs WordPress infographic */
.bill.hig { padding: 24px 24px 18px; }
.hig-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 16px; }
.hig-title { font: 800 15px var(--head); color: var(--ink); letter-spacing: .3px; }
.hig-legend { display: inline-flex; align-items: center; gap: 6px; font: 700 12px var(--head); color: var(--muted); }
.hig-legend b { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-left: 6px; }
.lg-wix { background: #e0453d; } .lg-wp { background: #13b88a; }
.hig-row { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.hig-row:first-of-type { border-top: 0; }
.hig-ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--mint); color: var(--mint-ink); }
.hig-ico svg { width: 22px; height: 22px; }
.hig-label { display: block; font: 700 13.5px var(--head); color: var(--ink); margin-bottom: 6px; }
.hig-bar { position: relative; display: flex; align-items: center; height: 18px; margin: 4px 0; }
.hig-bar i { display: block; height: 10px; border-radius: 999px; width: 0; animation: higgrow 1.1s var(--ease) forwards; animation-delay: calc(.35s + var(--d, 0) * .18s); }
.hig-bar.wix i { background: linear-gradient(90deg, #e0453d, #ff7a6b); max-width: var(--w); flex: 0 0 auto; }
.hig-bar.wp i { background: linear-gradient(90deg, #13b88a, #2fd39a); }
.hig-bar em { font: 700 12px var(--head); font-style: normal; margin-left: 8px; white-space: nowrap; }
.hig-bar.wix em { color: #e0453d; } .hig-bar.wp em { color: #0f9a72; }
:root[data-theme="dark"] .hig-bar.wix em { color: #ff8a82; } :root[data-theme="dark"] .hig-bar.wp em { color: #5fe0a4; }
.hig-bar.wp { justify-content: space-between; }
.hig-bar.wp i { flex: 1 1 auto; }
@keyframes higgrow { from { width: 0; } to { width: var(--w); } }
.hig-own { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; margin-top: 14px; }
.own { display: grid; justify-items: center; gap: 2px; padding: 12px 8px; border-radius: 16px; text-align: center; }
.own span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 12px; }
.own span svg { width: 20px; height: 20px; }
.own b { font: 800 17px var(--head); } .own small { font-size: 12.5px; color: var(--muted); }
.own.wix { background: var(--red-soft); } .own.wix span, .own.wix b { color: var(--red); }
.own.wp { background: var(--mint); } .own.wp span, .own.wp b { color: var(--mint-ink); }
.own-arrow { font: 800 22px var(--head); color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .hig-bar i { animation: none; width: var(--w); } }
/* Hero infographic: every bar shares one track; labels sit in their own column */
.hig-bar { display: grid; grid-template-columns: 1fr 104px; align-items: center; gap: 8px; height: 18px; }
.hig-bar.wp { justify-content: initial; }
.hig-bar i, .hig-bar.wp i, .hig-bar.wix i { flex: none; max-width: none; }
.hig-bar em { margin-left: 0; }
.bill.hig { padding-bottom: 46px; }

/* Wix hero: before-and-after browser */
.bill.ba { padding: 22px 26px 20px; }
.ba-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.ba-title { font: 800 15px var(--head); color: var(--ink); }
.ba-steps { display: inline-flex; align-items: center; gap: 6px; font: 800 11.5px var(--head); text-transform: uppercase; letter-spacing: .8px; }
.ba-steps em { font-style: normal; color: var(--muted); }
.st-bad { color: var(--red); } .st-good { color: #0f9a72; }
:root[data-theme="dark"] .st-good { color: #5fe0a4; }
.ba-win { position: relative; border-radius: 16px; border: 1px solid var(--line-strong); background: var(--surface); box-shadow: var(--shadow-soft); margin: 0 14px; }
.ba-win.wix { filter: saturate(.35); opacity: .92; transform: scale(.96); }
.ba-win.wp { animation: barise .8s .5s var(--ease) both; }
@keyframes barise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ba-bar { display: flex; align-items: center; gap: 5px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.ba-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.ba-bar i:nth-child(1) { background: #ff6159; } .ba-bar i:nth-child(2) { background: #ffbd2e; } .ba-bar i:nth-child(3) { background: #28c941; }
.ba-url { flex: 1; margin-left: 6px; padding: 3px 10px; border-radius: 999px; background: var(--bg-2); font: 600 10.5px var(--text); color: var(--muted); }
.ba-tag { font: 800 10px var(--head); text-transform: uppercase; letter-spacing: .6px; padding: 3px 8px; border-radius: 999px; }
.wix .ba-tag { background: var(--red-soft); color: var(--red); } .wp .ba-tag { background: var(--mint); color: var(--mint-ink); }
.ba-page { padding: 10px; display: grid; gap: 6px; }
.sk { border-radius: 6px; background: var(--line-strong); }
.sk.hero { height: 34px; } .sk.l1 { height: 7px; width: 70%; } .sk.l2 { height: 7px; width: 48%; }
.sk.row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: none; }
.sk.row b { height: 20px; border-radius: 6px; background: var(--line-strong); }
.wp .sk.hero { background: linear-gradient(120deg, #ff6a3d, #ff3d7f 55%, #7c5cff); }
.wp .sk.l1, .wp .sk.l2 { background: color-mix(in srgb, #7c5cff 30%, transparent); }
.wp .sk.row b:nth-child(1) { background: color-mix(in srgb, #13b88a 45%, transparent); }
.wp .sk.row b:nth-child(2) { background: color-mix(in srgb, #3d7bff 40%, transparent); }
.wp .sk.row b:nth-child(3) { background: color-mix(in srgb, #ff6a3d 40%, transparent); }
.pin { position: absolute; display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px 5px 6px; border-radius: 999px; font: 800 11px var(--head); white-space: nowrap; box-shadow: 0 6px 16px rgba(20,24,40,.14); animation: pinpop .5s var(--ease) both; }
.pin svg { width: 15px; height: 15px; }
.pin.bad { background: #fff1f0; color: #c9372f; border: 1px solid #ffd4d0; }
.pin.good { background: #eafaf3; color: #0b8a63; border: 1px solid #bfeedb; }
:root[data-theme="dark"] .pin.bad { background: #3a1f23; color: #ff8a82; border-color: #5a2a2f; }
:root[data-theme="dark"] .pin.good { background: #143a2e; color: #7ee0b3; border-color: #1f5a46; }
.pin.p1 { top: -10px; right: -16px; } .pin.p2 { bottom: 14px; left: -18px; }
.pin.p3 { top: 30px; left: -20px; } .pin.p4 { bottom: -10px; right: -12px; }
.wix .pin { filter: saturate(2.4); }
.ba-win.wix .pin:nth-of-type(1) { animation-delay: .1s; } .ba-win.wix .pin:nth-of-type(2) { animation-delay: .2s; }
.ba-win.wix .pin:nth-of-type(3) { animation-delay: .3s; } .ba-win.wix .pin:nth-of-type(4) { animation-delay: .4s; }
.ba-win.wp .pin { animation-delay: 1.1s; }
.ba-win.wp .pin:nth-of-type(2) { animation-delay: 1.2s; } .ba-win.wp .pin:nth-of-type(3) { animation-delay: 1.3s; } .ba-win.wp .pin:nth-of-type(4) { animation-delay: 1.4s; }
@keyframes pinpop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.ba-move { display: flex; justify-content: center; margin: 16px 0 12px; }
.ba-move span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: linear-gradient(120deg, #ff6a3d, #ff3d7f); color: #fff; font: 800 12px var(--head); box-shadow: 0 8px 20px rgba(255,90,80,.3); }
.ba-move svg { width: 15px; height: 15px; }
.bill.ba .bill-note { margin-top: 18px; }
@media (max-width: 520px) { .pin { font-size: 10px; } .pin.p3 { left: -8px; } .pin.p2 { left: -8px; } .pin.p1 { right: -6px; } .pin.p4 { right: -4px; } }
@media (prefers-reduced-motion: reduce) { .ba-win.wp, .pin { animation: none; } }
/* before-and-after browser: own class for the mock hero block, tags clear of the window labels */
.sk.sk-hero { height: 34px; min-height: 0; padding: 0; }
.wp .sk.sk-hero { background: linear-gradient(120deg, #ff6a3d, #ff3d7f 55%, #7c5cff); }
.pin.p1 { top: -12px; right: auto; left: 46%; }

/* Wix hero: at-a-glance Wix vs WordPress scoreboard */
.bill.sb { padding: 22px 22px 18px; }
.sb-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.sb-cap { caption-side: top; text-align: left; font: 800 17px var(--head); color: var(--ink); padding: 0 0 14px; }
.sb-cap span { font-weight: 600; color: var(--muted); font-size: 14px; margin-left: 4px; }
.sb-table thead th { font: 800 13px var(--head); color: var(--muted); text-transform: uppercase; letter-spacing: .6px; padding: 10px 8px; text-align: center; }
.sb-table thead th.wp { color: #0b8a63; background: var(--mint); border-radius: 14px 14px 0 0; }
:root[data-theme="dark"] .sb-table thead th.wp { color: #7ee0b3; }
.sb-table thead th.wp em { display: block; font: 700 10px var(--head); font-style: normal; letter-spacing: .8px; opacity: .8; }
.sb-table tbody th { text-align: left; font: 700 14.5px/1.25 var(--head); color: var(--ink); padding: 11px 8px 11px 0; white-space: nowrap; }
.sb-table tbody th .sb-ico { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--bg-2); color: var(--ink); margin-right: 10px; vertical-align: middle; }
.sb-table tbody th .sb-ico svg { width: 17px; height: 17px; }
.sb-table td { text-align: center; padding: 8px; border-top: 1px solid var(--line); }
.sb-table tbody tr:first-child td, .sb-table tbody tr:first-child th { border-top: 0; }
.sb-table tbody th { border-top: 1px solid var(--line); }
.sb-table td.wp { background: var(--mint); }
.sb-table tbody tr:last-child td.wp { border-radius: 0 0 14px 14px; }
.mk { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; vertical-align: middle; }
.mk svg { width: 16px; height: 16px; }
.mk.yes { background: #13b88a; color: #fff; }
.mk.no { background: #ffe4e1; color: #d6453d; }
.mk.part { background: #fff1d6; color: #c98a00; }
:root[data-theme="dark"] .mk.no { background: #3a1f23; color: #ff8a82; }
:root[data-theme="dark"] .mk.part { background: #3a3216; color: #f2c14e; }
.sb-legend { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 14px; font: 600 12px var(--text); color: var(--muted); }
.sb-legend .mk { width: 18px; height: 18px; margin-left: 8px; } .sb-legend .mk svg { width: 11px; height: 11px; }
@media (max-width: 420px) { .sb-table tbody th { white-space: normal; font-size: 13.5px; } .sb-table tbody th .sb-ico { display: none; } }

/* Hero cost card, v2: cost bars and a SAVE banner */
.bill-row.has-meter { flex-wrap: wrap; row-gap: 10px; }
.bill-meter { flex: 0 0 100%; height: 7px; border-radius: 999px; background: rgba(var(--ink-rgb), .07); overflow: hidden; }
.bill-meter i { display: block; height: 100%; width: 0; border-radius: inherit; animation: billmeter 1.2s .7s var(--ease) forwards; }
.bill-row.wix .bill-meter i { background: linear-gradient(90deg, #ff7a6b, #e0453d); }
.bill-row.wp .bill-meter i { background: linear-gradient(90deg, #2fd39a, #13b88a); animation-delay: 1.1s; }
@keyframes billmeter { to { width: var(--w); } }
.bill-save.save-v2 { background: linear-gradient(135deg, rgba(47,211,154,.16), rgba(61,165,255,.14)); border: 1px solid rgba(47,211,154,.35); padding: 16px 18px; }
.save-v2 .sv-top { display: inline-flex; align-items: baseline; gap: 8px; }
.save-v2 .save-word { font: 800 18px var(--head); letter-spacing: .5px; color: #13b88a; }
.save-v2 b { font: 800 40px/1 var(--head); letter-spacing: -1px; background: linear-gradient(120deg, #2fd39a, #22c5b0 55%, #3da5ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.save-v2 .sub { display: block; margin-top: 4px; }
:root[data-theme="dark"] .save-v2 .save-word { color: #5fe0a4; }
@media (prefers-reduced-motion: reduce) { .bill-meter i { animation: none; width: var(--w); } }
.bill.bill-v2 { padding-bottom: 48px; }

/* "In this article": half the old heading size, with an AI sparkle */
.toc-title { font-size: clamp(18px, 2.4vw, 27.6px); line-height: 1.25; letter-spacing: -.01em; font-weight: 800; display: flex; align-items: center; gap: 8px; margin: 0 0 14px; }
.toc-ai { width: 1.05em; height: 1.05em; flex: none; fill: url(#toc-ai-grad); }
.toc-ai path { fill: #ff6a3d; }
.toc-ai path + path { fill: #7c5cff; }

/* Post bar (All posts / Get a free quote): it is a <footer>, so undo the site footer panel */
footer.post-foot { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding-bottom: 0; color: inherit; font-size: inherit; }

/* "Trusted by" logos: white in dark mode (light mode is unchanged) */
:root[data-theme="dark"] .track img { filter: brightness(0) invert(1); opacity: .85; mix-blend-mode: normal; }
:root[data-theme="dark"] .track img:hover { filter: brightness(0) invert(1); opacity: 1; }
/* ---- Wix hero and homepage sections. Colours come from the theme tokens, so light and dark both work. ---- */
:root { --hx-blue: #2563eb; --hx-blue-soft: #e4eeff; --hx-green-tile: #22c55e; }
:root[data-theme="dark"] { --hx-blue: #7fb0ff; --hx-blue-soft: #1c2b4a; }

.hx { padding: 56px 0 0; background: transparent; overflow: hidden; }
.hx .hx-wrap { grid-template-columns: 1.04fr .96fr; gap: 40px; align-items: center; padding-bottom: 56px; }
.hx-chips { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
.hx-logo { height: 52px; min-width: 52px; padding: 0 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-soft); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; letter-spacing: .02em; color: var(--ink); }
.hx-logo-wp span { width: 30px; height: 30px; border-radius: 50%; background: #21759b; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 800; }
.hx-arrow { width: 22px; height: 22px; color: var(--hx-blue); }
.hx-pill { background: var(--hx-blue-soft); color: var(--hx-blue); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 10px 16px; border-radius: 999px; }
.hx-title { font-size: clamp(40px, 5.6vw, 66px); line-height: 1.04; letter-spacing: -.03em; color: var(--ink); font-weight: 800; margin: 0 0 20px; }
.hx-blue { color: var(--hx-blue); }
.hx-orange { color: var(--orange-dark); position: relative; white-space: nowrap; }
/* Default underline, used by pages that have no drawn swoosh (e.g. the homepage). */
.hx-orange::after { content: ""; position: absolute; left: 0; right: .15em; bottom: -.1em; height: .13em; background: linear-gradient(90deg, var(--orange), var(--orange-2)); border-radius: 99px; transform: rotate(-1.5deg); }
/* Where a drawn swoosh is present, it takes over from the plain bar. */
.hx-orange:has(.hx-swoosh)::after { content: none; }
/* Hand-drawn underline under "Easy Way." (replaces the old straight bar). */
.hx-swoosh { position: absolute; left: -.04em; width: 102%; bottom: -.24em; height: .30em; fill: var(--orange); overflow: visible; pointer-events: none; }
.hx-swoosh-tail { opacity: .7; }
/* CTA button and the three trust items sit on one row, as in the design. */
.hx-cta-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 0 0 20px; }
.hx-cta { font-size: 16px; padding: 16px 22px; border-radius: 99px; font-weight: 800; white-space: nowrap; box-shadow: 0 14px 30px rgba(233,109,62,.32); }
.hx-cta .arrow { width: 20px; height: 20px; margin-left: 6px; }
.hx-cta-row .hx-features { margin: 0; gap: 12px; flex: 1 1 auto; flex-wrap: nowrap; }
.hx-cta-row .hx-ico { width: 34px; height: 34px; border-radius: 11px; }
.hx-cta-row .hx-features li { font-size: 13px; gap: 7px; }
.hx-lead { font-size: 19px; line-height: 1.6; color: var(--body); max-width: 34em; margin: 0 0 30px; }
.hx-lead b { color: var(--ink); }
.hx .lead-form { margin: 0 0 22px; }
.hx .lf-row { background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-soft); }
.hx .lead-form input { background: var(--surface); color: var(--ink); }
.hx-features { list-style: none; margin: 0 0 18px; padding: 0; display: flex; gap: 24px; flex-wrap: wrap; }
@media (max-width: 720px) { .hx-cta-row { gap: 20px; } .hx-cta { width: 100%; justify-content: center; } }
.hx-features li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.hx-ico { width: 42px; height: 42px; border-radius: 14px; background: var(--hx-blue-soft); color: var(--hx-blue); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.hx-ico svg, .hx-stat-ico svg, .hx-tick svg { width: 19px; height: 19px; }
.hx-bubble svg { width: 20px; height: 20px; }
.hx-visual { position: relative; }
.hx-navbtn { width: 34px; height: 11px; border-radius: 99px; background: var(--hx-blue); margin-left: auto; display: block; }
.hx-lines .is-accent { background: var(--hx-blue); }
.hx-ctablk { display: block; width: 74px; height: 17px; border-radius: 7px; background: var(--hx-blue); margin-top: 12px; }
.hx-link { position: absolute; left: 49%; top: 50%; transform: translate(-50%,-50%); width: 150px; height: 250px; color: var(--hx-blue); opacity: .3; z-index: 1; pointer-events: none; }
.hx-spark { position: absolute; right: -10px; top: -6px; width: 40px; height: 40px; color: var(--hx-blue); opacity: .75; z-index: 4; pointer-events: none; }
.hx-stage { position: relative; height: 342px; margin-bottom: 20px; }
/* Dashed curve linking the two windows. Sits low and behind them, like the reference. */
.hx-dash { position: absolute; left: 0; bottom: 2px; width: 100%; height: 130px; color: var(--hx-blue); opacity: .38; z-index: 0; pointer-events: none; }
.hx-win { position: absolute; background: var(--surface); border-radius: 18px; box-shadow: var(--shadow-lift), 0 0 0 1px var(--line); overflow: hidden; }
.hx-win-wix { left: 0; top: 52px; width: 47%; height: 274px; }
/* The "before" window reads as the old site: greyed out next to the vivid WordPress one. */
.hx-win-wix .hx-ph-img { filter: grayscale(1) contrast(.92) brightness(1.02); }
.hx-win-wix .hx-site-head b { opacity: .55; }
.hx-win-wp { right: 0; top: 0; width: 51%; height: 322px; z-index: 3; }
.hx-bar { height: 28px; background: var(--bg-2); display: flex; align-items: center; gap: 6px; padding: 0 14px; }
.hx-bar i { width: 8px; height: 8px; border-radius: 50%; background: #ff7b7b; }
.hx-bar i:nth-child(2) { background: #ffc857; }
.hx-bar i:nth-child(3) { background: #5ed28a; }
.hx-body { padding: 16px 18px 18px; }
.hx-site-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.hx-site-head b { font-size: 15px; color: var(--ink); }
.hx-site-head > span { height: 6px; width: 36px; border-radius: 4px; background: var(--line-strong); }
.hx-site-head .hx-wp-mini { width: 26px; height: 26px; border-radius: 50%; background: #21759b; color: #fff; font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.hx-ph-grey { height: 120px; border-radius: 12px; background: linear-gradient(135deg, var(--bg-2), var(--line-strong)); }
.hx-lines { display: grid; gap: 8px; margin-top: 14px; }
.hx-lines span { height: 8px; border-radius: 4px; background: var(--line-strong); }
.hx-lines span:nth-child(2) { width: 80%; }
.hx-lines span:nth-child(3) { width: 60%; }
.hx-ph-img { display: block; width: 100%; height: auto; border-radius: 12px; aspect-ratio: 16 / 9; object-fit: cover; }
.hx-bubble { position: absolute; left: 48.5%; top: 50%; transform: translate(-50%, -50%); width: 62px; height: 62px; border-radius: 50%; background: var(--hx-blue); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 7px var(--surface), 0 10px 24px rgba(37,99,235,.35); z-index: 4; }
.hx-check { position: static; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; list-style: none; margin: 0 -14px; padding: 14px 4px; background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-lift); }
.hx-check li { display: flex; align-items: flex-start; gap: 10px; padding: 2px 11px; border-left: 1px solid var(--line); }
.hx-check li:first-child { border-left: 0; }
.hx-txt b { display: block; font-size: 12.5px; font-weight: 800; color: var(--ink); line-height: 1.25; white-space: nowrap; }
.hx-txt small { display: block; margin-top: 2px; font-size: 11px; font-weight: 600; color: var(--muted); line-height: 1.3; }
.hx-ic-design { background: linear-gradient(145deg,#4f8dff,#2563eb); box-shadow: 0 8px 18px rgba(37,99,235,.28); }
.hx-ic-content { background: linear-gradient(145deg,#ffa45c,#ef6c2b); box-shadow: 0 8px 18px rgba(233,109,62,.28); }
.hx-ic-perf { background: linear-gradient(145deg,#49d98b,#17a35d); box-shadow: 0 8px 18px rgba(23,163,93,.28); }
.hx-tick { width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex: none; color: #fff; }
.hx-tick svg { width: 22px; height: 22px; }
.hx-strip { border-top: 1px solid var(--line); background: var(--glass-strong); }
.hx .hx-strip-in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.hx-stat { display: flex; align-items: center; gap: 14px; padding: 22px 24px; border-left: 1px solid var(--line); }
.hx-stat:first-child { border-left: 0; padding-left: 0; }
.hx-stat b { display: block; font-size: 18px; color: var(--ink); line-height: 1.3; }
.hx-stat small { display: block; color: var(--muted); font-size: 14px; }
.hx-stat-ico { width: 48px; height: 48px; border-radius: 50%; background: var(--hx-blue-soft); color: var(--hx-blue); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.hx-stat-ico svg { width: 24px; height: 24px; }
.hx-stars { color: #f5a524; letter-spacing: 2px; font-size: 16px; }
@media (max-width: 960px) {
  .hx .hx-wrap { grid-template-columns: 1fr; gap: 44px; }
  .hx-visual { max-width: 560px; width: 100%; margin: 0 auto; }
  .hx-cta-row .hx-features { flex-wrap: wrap; }
  .hx-stage { height: 300px; }
  .hx-win-wix { top: 46px; height: 240px; }
  .hx-win-wp { top: 0; height: 282px; }
  .hx .hx-strip-in { grid-template-columns: 1fr 1fr; }
  .hx-stat { padding: 18px 16px; }
  .hx-stat:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 560px) {
  .hx { padding-top: 36px; }
  .hx-lead { font-size: 17px; }
  .hx-features { gap: 16px; }
  .hx-stage { height: 240px; }
  .hx-win-wix { width: 54%; height: 176px; top: 46px; }
  .hx-win-wp { width: 58%; height: 208px; top: 0; }
  .hx-bubble { width: 52px; height: 52px; left: 48%; top: 48%; }
  /* Three trust items never fit on one line on a phone: let them wrap. */
  .hx-cta-row { gap: 16px; }
  .hx-cta-row .hx-features { flex-wrap: wrap; gap: 14px 16px; flex: 1 1 100%; }
  .hx-cta-row .hx-features li { font-size: 13px; flex: 0 0 auto; }
  .hx-cta-row .hx-ico { width: 32px; height: 32px; border-radius: 10px; }
  /* Keep the last feature row clear of the floating chat button. */
  .hx-visual { margin-bottom: 26px; }
  .hx-bubble svg { width: 22px; height: 22px; }
  .hx-check { grid-template-columns: 1fr; margin: 0; padding: 8px 6px; }
  .hx-check li { border-left: 0; border-top: 1px solid var(--line); padding: 11px 10px; gap: 12px; }
  .hx-check li:first-child { border-top: 0; }
  /* Decorative marks stay inside the screen on small phones. */
  .hx-spark, .hx-link { display: none; }
  .hx-txt b { white-space: normal; font-size: 13.5px; }
  .hx-txt small { font-size: 12.5px; }
  .hx-tick { width: 36px; height: 36px; border-radius: 11px; }
  .hx .hx-strip-in { grid-template-columns: 1fr; }
  .hx-stat, .hx-stat:nth-child(odd) { border-left: 0; padding: 16px 0; border-top: 1px solid var(--line); }
  .hx-stat:first-child { border-top: 0; }
  .hx .lf-row { flex-direction: column; align-items: stretch; gap: 10px; background: transparent; border: 0; box-shadow: none; padding: 0; }
  .hx .lf-row input { border: 1px solid var(--line-strong); background: var(--surface); height: 52px; }
}

/* Homepage sections */
.hm-section { padding: 88px 0; }
.hm-section.soft { background: var(--bg-2); }
.hm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 36px; }
.hm-card { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 18px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--shadow-soft); text-decoration: none; color: var(--ink); transition: transform .2s, box-shadow .2s; }
.hm-card:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--hx-blue), var(--shadow-lift); }
.hm-card-name { font-weight: 800; font-size: 20px; }
.hm-card-go { display: inline-flex; align-items: center; gap: 8px; color: var(--hx-blue); font-weight: 700; font-size: 14px; }
.hm-card-go svg { width: 18px; height: 18px; }
.hm-more { text-align: center; margin: 30px 0 0; font-weight: 700; }
.hm-more a { color: var(--hx-blue); }
.hm-steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.hm-steps li { background: var(--surface); border-radius: 18px; padding: 26px 22px; box-shadow: 0 0 0 1px var(--line); }
.hm-steps h3 { margin: 16px 0 8px; font-size: 18px; color: var(--ink); }
.hm-steps p { margin: 0; color: var(--body); font-size: 15px; line-height: 1.55; }
.hm-num { width: 40px; height: 40px; border-radius: 50%; background: var(--hx-blue); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }
.hm-projects { padding: 0; }
@media (max-width: 960px) {
  .hm-grid { grid-template-columns: repeat(2, 1fr); }
  .hm-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .hm-section { padding: 64px 0; }
  .hm-steps { grid-template-columns: 1fr; }
}

/* Gentle floating for the hero visual. Uses the translate property so it doesn't fight the bubble's centring transform. */
@keyframes hx-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}
.hx-win-wix { animation: hx-float 8s ease-in-out infinite; }
.hx-win-wp { animation: hx-float 8s ease-in-out -4s infinite; }
.hx-check { animation: hx-float 7s ease-in-out -2s infinite; }
@media (prefers-reduced-motion: reduce) {
  .hx-win-wix, .hx-win-wp, .hx-check { animation: none; }
}

/* Wix hero headline: three lines on desktop, tablet and phone. Each line is kept whole. */
.hx-title { font-size: clamp(34px, 4.4vw, 60px); }
.hx-title .hx-line { white-space: nowrap; }
@media (max-width: 560px) { .hx-title { font-size: clamp(30px, 8.6vw, 38px); } }

/* ---- Glassmorphism pass: translucent, blurred panels for the hero and homepage. Uses theme tokens, so light and dark both work. ---- */
.hx { position: relative; isolation: isolate; }
.hx::before, .hx::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; }
.hx::before { width: 560px; height: 560px; left: -160px; top: -120px; background: radial-gradient(closest-side, var(--mesh-a), transparent); opacity: .95; }
.hx::after { width: 480px; height: 480px; right: -180px; top: 140px; background: radial-gradient(closest-side, var(--mesh-b), transparent); opacity: .9; }
.hm-section { position: relative; isolation: isolate; overflow: hidden; }
.hm-section::before { content: ""; position: absolute; width: 520px; height: 520px; left: -200px; bottom: -180px; border-radius: 50%; background: radial-gradient(closest-side, var(--mesh-c), transparent); opacity: .8; z-index: -1; pointer-events: none; }

.hx-pill, .hx-win, .hx-check, .hx-strip, .hx .lf-row, .hm-side, .hm-card, .hm-steps li, .hm-price {
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
}
.hx-pill { background: var(--glass); }
.hx-win { background: var(--glass-strong); box-shadow: var(--shadow-lift); }
.hx-bar { background: var(--glass); }
.hx-check { background: var(--glass-strong); }
.hx-strip { background: var(--glass); border-top: 1px solid var(--glass-edge); }
.hx .lf-row { background: var(--glass-strong); box-shadow: var(--shadow-soft); }
.hx .lead-form input { background: transparent; }
.hm-card { background: var(--glass-strong); box-shadow: var(--shadow-soft); }
.hm-card:hover { box-shadow: 0 0 0 1px var(--hx-blue), var(--shadow-lift); }
.hm-steps li { background: var(--glass-strong); box-shadow: var(--shadow-soft); }
@media (max-width: 560px) {
  .hx .lf-row { background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hx .lf-row input { background: var(--glass-strong); }
}
/* Platform chips in the homepage side panel need a visible tint on the glass in light mode. */

/* ---- More glassmorphism: stronger blur, light sheen and highlight edges, more colour behind the glass. Both themes. ---- */
.hx, .hm-section { --glass-blur: blur(28px) saturate(190%); }
.hx-win, .hx-check, .hx-strip, .hm-side, .hm-card, .hm-steps li, .hm-price, .hx .lf-row, .hx-pill {
  background-image: linear-gradient(135deg, var(--glass-edge) 0%, transparent 42%);
  box-shadow: var(--shadow-lift), inset 0 1px 0 var(--glass-edge);
}
.hx-win { background-color: var(--glass); }
.hx-check, .hm-side, .hm-card, .hm-steps li, .hm-price { background-color: var(--glass); }
.hx::before { opacity: 1; }
.hx::after { opacity: 1; }
.hx-visual::before, .hx-visual::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; }
.hx-visual::before { width: 340px; height: 340px; left: 10%; top: 0; background: radial-gradient(closest-side, var(--hx-blue), transparent); opacity: .22; }
.hx-visual::after { width: 280px; height: 280px; right: 0; bottom: -30px; background: radial-gradient(closest-side, var(--orange), transparent); opacity: .18; }
.hx-visual { isolation: isolate; }
.hm-section.soft { background: transparent; }
.hm-section.soft::after { content: ""; position: absolute; width: 460px; height: 460px; right: -160px; top: -120px; border-radius: 50%; background: radial-gradient(closest-side, var(--mesh-a), transparent); opacity: .9; z-index: -1; pointer-events: none; }
.hm-section.soft { position: relative; isolation: isolate; overflow: hidden; }
.final { position: relative; isolation: isolate; overflow: hidden; }
.final::before { content: ""; position: absolute; width: 420px; height: 420px; left: -120px; top: -120px; border-radius: 50%; background: radial-gradient(closest-side, var(--mesh-b), transparent); opacity: .85; z-index: -1; pointer-events: none; }

/* ================= Wix page: full glassmorphism redesign (scoped to body.page-glass) ================= */
.page-glass { --glass-blur: blur(26px) saturate(180%); }
.page-glass main > section { background: transparent; position: relative; isolation: isolate; overflow: hidden; }
.page-glass main > section::after { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; opacity: .55; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, var(--mesh-a), transparent); top: -160px; right: -200px; }
.page-glass main > section:nth-of-type(even)::after { background: var(--mesh-b); left: -220px; right: auto; top: auto; bottom: -180px; }
.page-glass main > section:nth-of-type(3n)::after { background: var(--mesh-c); }
.page-glass main > section.hero::after, .page-glass main > section.logos::after { display: none; }
.page-glass main > section.final { background: transparent; }
.page-glass main > section.final::after { background: var(--mesh-b); opacity: .7; }

/* Glass panels: every card-like component on the page */
.page-glass .card, .page-glass .tcard, .page-glass .qa, .page-glass .step, .page-glass .project,
.page-glass .stat, .page-glass .price, .page-glass .plan-opt, .page-glass .once-card, .page-glass .ig,
.page-glass .ig-move, .page-glass .ig-chip, .page-glass .ig-node, .page-glass .xv-frame, .page-glass .lf-row,
.page-glass .bill, .page-glass .faq-item, .page-glass details {
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-soft), inset 0 1px 0 var(--glass-edge);
}
.page-glass .card, .page-glass .tcard, .page-glass .project, .page-glass .once-card, .page-glass .price, .page-glass .ig { border-radius: 24px; }
.page-glass .card:hover, .page-glass .project:hover, .page-glass .tcard:hover { box-shadow: var(--shadow-lift), inset 0 1px 0 var(--glass-edge); transform: translateY(-3px); transition: transform .25s, box-shadow .25s; }

/* Footer and the dark process band become glass panels */
.page-glass footer { background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-top: 1px solid var(--glass-edge); }
.page-glass section.dark { margin: 0 14px; border-radius: 36px; border: 1px solid var(--glass-edge); background: linear-gradient(135deg, var(--glass-strong), var(--glass)); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-lift), inset 0 1px 0 var(--glass-edge); }

/* Inputs inside glass panels */
.page-glass input, .page-glass select, .page-glass textarea { background: var(--glass); border: 1px solid var(--line-strong); }

/* Highlighted plans and marks keep their accent, but sit on glass */
.page-glass .price-bold { background: transparent; }

/* FAQ on the Wix page: one glass panel with inner padding; each question is a divider line, not its own card. */
.page-glass .faq { background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-edge); border-radius: 28px; padding: 10px 32px; box-shadow: var(--shadow-lift), inset 0 1px 0 var(--glass-edge); }
.page-glass .faq .qa { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.page-glass .faq .qa:last-child { border-bottom: 0; }
.page-glass .faq .qa:hover { transform: none; }

/* Services dropdown is solid, not see-through, in both themes. */
.dd-m { background: var(--surface); background-color: var(--surface); }

/* The "one-time" label sits under the price so it never runs past the card edge. */
.price-bold .price .amount small { display: block; margin-top: 8px; }

/* Homepage pricing: two plans side by side, stacked on narrow screens. */
/* Pricing: three plans on one row on every page; two plans (homepage) sit side by side. Stacks only on phones. */
#pricing .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 900px; margin: 36px auto 0; }
#pricing .grid:has(> :nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; gap: 18px; }
@media (max-width: 760px) { #pricing .grid, #pricing .grid:has(> :nth-child(3)) { grid-template-columns: 1fr; max-width: 520px; } }

/* Services dropdown: stays open while the pointer moves from the button into the menu, without flicker.
   1. A transparent bridge covers the gap between the button and the menu, so the gap still counts as "hovering the menu".
   2. Closing waits a moment, so a brief pass off the menu doesn't hide it.
   3. The solid menu drops its backdrop blur, which is a common cause of flicker when it fades in and out. */
.dd-m { -webkit-backdrop-filter: none; backdrop-filter: none; transition: opacity .25s var(--ease) .12s, transform .25s var(--ease) .12s, visibility 0s linear .37s; }
.dd-m::before { content: ""; position: absolute; left: 0; right: 0; top: -24px; height: 24px; }
@media (hover: hover) { .dd:hover .dd-m, .dd:focus-within .dd-m { transition-delay: 0s; } }
.dd.open .dd-m, .dd[open] .dd-m { transition-delay: 0s; }
/* The header and its menu always paint above the page content, including floating hero visuals. */
.site-header { z-index: 200; transform: translateZ(0); }
.dd-m { z-index: 300; }

/* ---- Free consultation page: booking layout with a glass form panel (uses the page's glass theme) ---- */
.book { position: relative; isolation: isolate; overflow: hidden; padding: 96px 0; }
.book::after { content: ""; position: absolute; width: 480px; height: 480px; left: -180px; top: -120px; border-radius: 50%; background: radial-gradient(closest-side, var(--mesh-c), transparent); opacity: .6; z-index: -1; pointer-events: none; }
.book-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
.book-side h2 { font-size: clamp(32px, 4vw, 48px); margin: 14px 0 14px; }
.book-steps { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 22px; }
.book-steps li { display: flex; gap: 16px; align-items: flex-start; }
.book-steps b { display: block; font-size: 17px; color: var(--ink); margin-bottom: 4px; }
.book-steps span:not(.book-num) { color: var(--body); font-size: 15.5px; line-height: 1.55; }
.book-num { flex: none; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-soft); font: 800 16px var(--head); color: var(--orange-dark); }
.book-card { padding: 36px; border-radius: 28px; }
.book-card .ct-form { margin: 0; }
@media (max-width: 900px) { .book-grid { grid-template-columns: 1fr; gap: 36px; } .book { padding: 64px 0; } .book-card { padding: 24px; } }
.book-card .ct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.book-card .ct-grid > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.book-card .ct-grid > .full { grid-column: 1 / -1; }
.book-card label { font: 700 14px var(--head); color: var(--ink); }
.book-card label span { color: var(--muted); font-weight: 600; }
.book-card input, .book-card select, .book-card textarea { width: 100%; min-height: 50px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--glass); color: var(--ink); font: 500 16px var(--text); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); outline: 0; }
.book-card textarea { min-height: 130px; resize: vertical; }
.book-card input:focus, .book-card select:focus, .book-card textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,106,61,.18); }
.book-card input::placeholder, .book-card textarea::placeholder { color: var(--muted); }
.book-card .ct-actions { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.book-card .ct-actions .btn { width: 100%; justify-content: center; }
.book-card .ct-note { margin: 0; color: var(--muted); font-size: 14px; text-align: center; }
.book-card .lf-status { color: var(--red); font-weight: 600; margin: 12px 0 0; }
@media (max-width: 600px) { .book-card .ct-grid { grid-template-columns: 1fr; } }

/* ---- Homepage platform section: monogram cards in a clean grid, and sized icons ---- */
.hm-section .hm-head { text-align: center; max-width: 760px; margin: 0 auto; }
.hm-section .hm-head h2 { font-size: clamp(32px, 4.2vw, 48px); margin: 14px 0 14px; }
.hm-section .hm-head .lead { margin: 0 auto; }
.hm-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 48px; }
.hm-card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: center; padding: 22px; border-radius: 22px; text-decoration: none; color: var(--ink); background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-soft), inset 0 1px 0 var(--glass-edge); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.hm-card:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--hx-blue), var(--shadow-lift); }
.hm-card:focus-visible { outline: 2px solid var(--hx-blue); outline-offset: 3px; }
.hm-mono { grid-row: 1 / span 2; width: 52px; height: 52px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; font: 800 20px var(--head); color: #fff; background: linear-gradient(135deg, var(--hx-blue), #7c5cff); box-shadow: 0 10px 22px rgba(37,99,235,.28); }
.hm-card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hm-card-name { font: 800 18px var(--head); color: var(--ink); }
.hm-card-cat { font-size: 13.5px; color: var(--muted); font-weight: 600; }
.hm-card-go { grid-column: 1 / -1; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 8px; color: var(--hx-blue); font-weight: 700; font-size: 14.5px; }
.hm-card-go svg { width: 18px; height: 18px; flex: none; transition: transform .25s var(--ease); }
.hm-card:hover .hm-card-go svg { transform: translateX(4px); }
.hm-foot { text-align: center; margin-top: 40px; }
.hm-all { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; color: var(--hx-blue); text-decoration: none; padding: 12px 20px; border-radius: 999px; background: var(--glass-strong); border: 1px solid var(--glass-edge); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-soft); }
.hm-all:hover { color: var(--ink); }
.hm-all-ico svg { width: 18px; height: 18px; display: block; }
.hm-more svg, .hm-card-go svg { max-width: 18px; }
@media (max-width: 1080px) { .hm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .hm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .hm-card { padding: 18px; column-gap: 12px; } .hm-mono { width: 44px; height: 44px; font-size: 17px; border-radius: 14px; } .hm-card-name { font-size: 16px; } }
@media (max-width: 420px) { .hm-grid { grid-template-columns: 1fr; } }

/* ---- Platform logos on the homepage cards: monochrome logos take the theme colour ---- */
.hm-logo { position: relative; grid-row: 1 / span 2; width: 60px; height: 60px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-soft), inset 0 1px 0 var(--glass-edge); }
.hm-logo::before { content: ""; width: 30px; height: 30px; background: var(--ink); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.hm-card:hover .hm-logo { box-shadow: 0 0 0 1px var(--hx-blue), var(--shadow-soft); }
.hm-card:hover .hm-logo::before { background: var(--hx-blue); }

/* Homepage: the free one-page trial is the first plan and stands out as the place to start. */
.hm-free { border: 1px solid var(--hx-blue); box-shadow: 0 0 0 4px rgba(37,99,235,.12), var(--shadow-lift); }
.hm-start { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--hx-blue); color: #fff; font: 800 12px var(--head); letter-spacing: .08em; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; white-space: nowrap; box-shadow: 0 8px 18px rgba(37,99,235,.35); }
#pricing .hm-free { margin-top: 14px; }

/* Letter tiles (platforms without a logo file) match the logo tiles: same glass tile, letter in the text colour. */
.hm-letter { font: 800 22px var(--head); color: var(--ink); }
.hm-letter::before { display: none; }

/* ---- Quote form: one frame, clean inputs, no clipped shadows (applies to every page's form) ---- */
.lead-form .lf-row { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; gap: 10px; }
.lead-form .lf-row input { height: 56px; padding: 0 18px; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: none; }
.lead-form .lf-row input:focus { outline: 0; border-color: var(--orange); box-shadow: 0 0 0 4px rgba(255,106,61,.14); }
.lead-form .lf-row .btn { height: 56px; border-radius: 16px; }
.lead-form.open .lf-more > div { overflow: visible; }
.lead-form .lf-fields { padding: 16px 4px 6px; }
.lead-form .lf-fields input { background: var(--surface); }
.lead-form .lf-submit { box-shadow: 0 12px 26px rgba(255,106,61,.22); margin-top: 6px; }
.lead-form .lf-note { margin-top: 10px; }

/* Homepage: the free trial is the only plan shown, centred and prominent. */
.hm-free-wrap { display: flex; justify-content: center; margin-top: 48px; }
.hm-free-wrap .hm-free { width: 100%; max-width: 440px; padding: 40px 36px; }
.hm-free-wrap .hm-free .amount { font-size: 72px; }

/* "Nothing important is left behind": glass cards in a grid, matching the homepage cards. */
.moves { padding: 96px 0; position: relative; isolation: isolate; overflow: hidden; }
.moves .section-head h2 { font-size: clamp(30px, 3.8vw, 44px); margin: 14px 0 12px; }
.hm-moves { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.hm-move { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; row-gap: 4px; align-items: center; padding: 22px; border-radius: 22px; background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-soft), inset 0 1px 0 var(--glass-edge); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.hm-move:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--hx-blue), var(--shadow-lift); }
.hm-move-ico { grid-row: 1 / span 2; width: 52px; height: 52px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-soft); color: var(--hx-blue); }
.hm-move-ico svg { width: 24px; height: 24px; }
.hm-move b { font: 800 17px var(--head); color: var(--ink); align-self: end; }
.hm-move > span:not(.hm-move-ico) { color: var(--muted); font-size: 15px; line-height: 1.5; align-self: start; }
@media (max-width: 900px) { .hm-moves { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .hm-moves { grid-template-columns: 1fr; } .moves { padding: 64px 0; } }

/* "Nothing important is left behind": bordered panel, left-aligned heading, coloured icon tiles (as in the reference design). */
.moves .wrap { background: var(--glass); border: 1px solid var(--line-strong); border-radius: 32px; padding: 44px; box-shadow: var(--shadow-soft); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.moves .moves-head { text-align: left; max-width: none; margin: 0; }
.moves .moves-head .eyebrow { display: none; }
.moves .moves-head h2 { margin: 0 0 8px; font-size: clamp(26px, 3vw, 34px); }
.moves .moves-head .lead { margin: 0; text-align: left; }
.hm-moves { margin-top: 28px; gap: 14px; }
.hm-move { background: var(--glass-strong); border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; box-shadow: none; grid-template-columns: auto 1fr; }
.hm-move:hover { box-shadow: 0 0 0 1px var(--c), var(--shadow-soft); }
.hm-move-ico { width: 56px; height: 56px; border-radius: 16px; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); box-shadow: 0 10px 24px color-mix(in srgb, var(--c) 28%, transparent); }
.hm-move b { font: 800 17px var(--head); }
.hm-moves li:nth-child(1) { --c: #7c5cff; }
.hm-moves li:nth-child(2) { --c: #22c55e; }
.hm-moves li:nth-child(3) { --c: #ff6a3d; }
.hm-moves li:nth-child(4) { --c: #4f7cff; }
.hm-moves li:nth-child(5) { --c: #8b5cf6; }
.hm-moves li:nth-child(6) { --c: #22c55e; }
@media (max-width: 560px) { .moves .wrap { padding: 24px; border-radius: 24px; } }

/* Orange timeline (the 7 designed pages): numbered circles on one line, day labels above each step. */
.tl-steps { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; position: relative; }
.tl-steps::before { content: ""; position: absolute; left: 30px; right: 30px; top: 30px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--orange), var(--orange-2)); opacity: .9; }
.tl-step { position: relative; text-align: left; padding-right: 8px; }
.tl-num { position: relative; z-index: 1; width: 60px; height: 60px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 800 22px var(--head); color: #fff; background: linear-gradient(135deg, var(--orange-2), var(--orange)); box-shadow: 0 12px 28px rgba(255,106,61,.35); }
.tl-when { display: block; margin-top: 22px; font: 800 12.5px var(--head); letter-spacing: .12em; text-transform: uppercase; color: var(--orange-dark); }
.tl-step h3 { margin: 6px 0 8px; font-size: 20px; color: var(--ink); }
.tl-step p { margin: 0; color: var(--body); font-size: 15.5px; line-height: 1.6; }
@media (max-width: 900px) { .tl-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; } .tl-steps::before { display: none; } }
@media (max-width: 560px) { .tl-steps { grid-template-columns: 1fr; } }

/* "How it works" band: transparent, so the page's background gradient shows through. */
.page-glass section.dark, section.dark { background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ================= Premium motion: loading and hover (respects reduced-motion) ================= */
@keyframes tl-pop { 0% { opacity: 0; transform: scale(.4); } 70% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
@keyframes tl-ring { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.55); } }
@keyframes hx-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes shine-sweep { 0% { transform: translateX(-130%) skewX(-18deg); } 100% { transform: translateX(260%) skewX(-18deg); } }

/* Timeline: the line draws in, the numbers pop in one by one, and steps lift on hover. */
.tl-steps::before { transform: scaleX(0); transform-origin: left center; transition: transform 1.4s var(--ease) .25s; }
.tl-steps.in::before { transform: scaleX(1); }
.js .tl-steps.reveal { transform: none; }
.tl-step.in:hover { transform: translateY(-6px); }
.tl-step { transition: transform .5s var(--ease), opacity .8s var(--ease); }
.tl-step.in .tl-num { animation: tl-pop .75s var(--ease) both; animation-delay: calc(var(--i, 0) * 140ms + 350ms); }
.tl-num { transition: box-shadow .4s var(--ease), transform .4s var(--ease); }
.tl-num::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid rgba(255,106,61,.5); opacity: 0; pointer-events: none; }
.tl-step:hover .tl-num { transform: scale(1.08); box-shadow: 0 16px 36px rgba(255,106,61,.5); }
.tl-step:hover .tl-num::after { animation: tl-ring 1.6s var(--ease) infinite; }
.tl-when { transition: letter-spacing .4s var(--ease), color .4s var(--ease); }
.tl-step:hover .tl-when { letter-spacing: .16em; color: var(--orange-2); }
.tl-step h3 { transition: color .4s var(--ease); }
.tl-step:hover h3 { color: var(--orange-2); }

/* Cards: a light sheen crosses on hover. */
.hm-card, .hm-move, .hm-steps li, .price, .card.price { position: relative; overflow: hidden; }
.hm-card::after, .hm-move::after, .hm-steps li::after, .price::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
  transform: translateX(-130%) skewX(-18deg); opacity: 0;
}
.hm-card:hover::after, .hm-move:hover::after, .hm-steps li:hover::after, .price:hover::after { opacity: 1; animation: shine-sweep 1.1s var(--ease); }
.hm-steps li, .hm-move { transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.hm-steps li:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px var(--hx-blue), var(--shadow-lift); }
.hm-steps .hm-num { transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.hm-steps li:hover .hm-num { transform: scale(1.1); box-shadow: 0 12px 28px rgba(37,99,235,.45); }
.price { transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.price:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }

/* Hero: the copy rises in on load. */
@media (prefers-reduced-motion: no-preference) {
  .hx-copy > .hx-chips { animation: hx-in .8s var(--ease) .05s both; }
  .hx-copy > .hx-title { animation: hx-in .9s var(--ease) .15s both; }
  .hx-copy > .hx-lead { animation: hx-in .9s var(--ease) .3s both; }
  .hx-copy > .hx-cta-row, .hx-copy > .hero-alt { animation: hx-in .9s var(--ease) .45s both; }
}
@media (prefers-reduced-motion: reduce) {
  .tl-steps::before { transform: none; transition: none; }
  .tl-step.in .tl-num { animation: none; }
  .tl-step:hover .tl-num::after, .hm-card:hover::after, .hm-move:hover::after, .hm-steps li:hover::after, .price:hover::after { animation: none; }
  .tl-step.in:hover, .hm-steps li:hover, .price:hover { transform: none; }
}
.hm-free { overflow: visible; }
.card.price.hm-free, .price.hm-free { overflow: visible; }
/* The free plan card has no hover sheen, so nothing spills past its edge. */
.card.price.hm-free::after, .price.hm-free::after { display: none; }

/* ---- Hero mockup motion, smoothed. The glass blur (backdrop-filter) on moving panels made every frame
   re-blur the page behind them, which is what caused the jerky motion. The panels are now solid, and only
   the two windows float, on transform alone, and only while the hero is on screen. ---- */
.hx-visual .hx-win,
.hx-visual .hx-check,
.hx-visual .hx-bubble {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.hx-visual .hx-win,
.hx-visual .hx-check { background-image: none; background-color: var(--surface); }
.hx-visual .hx-check { animation: none; }
.hx-visual .hx-win-wix,
.hx-visual .hx-win-wp {
  animation: hx-drift 9s ease-in-out infinite;
  will-change: transform;
  backface-visibility: hidden;
}
.hx-visual .hx-win-wp { animation-delay: -4.5s; }
.hx-visual.is-idle .hx-win { animation-play-state: paused; }
@keyframes hx-drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -6px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hx-visual .hx-win-wix, .hx-visual .hx-win-wp { animation: none; will-change: auto; }
}