/* weLaunch – Design C "Product Playground"
   Tokens and components translated from the Claude Design prototype.
   Motion: transform/opacity only, disabled under prefers-reduced-motion. */

/* hidden always wins over component display rules (shop/portfolio/FAQ filters set the attribute) */
[hidden] { display: none !important; }

:root {
  --ink: #101828; --ink-2: #1F2A44; --body: #344054; --muted: #475467; --line: rgba(16,24,40,.06);
  --bg: #F6F8FF; --white: #fff;
  --blue: #3171EE; --blue-d: #2560D6; --blue-dd: #1D4FB8; --blue-sh: #1A47A6; --blue-ink: #1D3F8F;
  --t-blue: #CFE0FF; --t-blue-2: #EEF3FF; --t-blue-3: #E1EAFF;
  --t-green: #D9F5E8; --t-green-2: #E3F7EE; --green: #0F7A4E; --green-ink: #0F5C3B;
  --t-yellow: #FFF1C2; --t-yellow-2: #FFF3D1; --yellow: #FFD25A; --yellow-sh: #C99A1A; --yellow-ink: #6B4500; --amber: #9A6200;
  --t-violet: #ECE6FF; --t-violet-2: #EFEAFF; --violet: #5B3FD6; --violet-ink: #3F2A9E;
  --mint: #8FE3BD; --lilac: #CBBEFF; --star: #E2A300;
  --spring: cubic-bezier(.34,1.56,.64,1);
  --shadow-1: 0 1px 2px rgba(16,24,40,.06);
  --shadow-card: 0 1px 2px rgba(16,24,40,.06), 0 20px 40px -24px rgba(16,24,40,.25);
  --shadow-pop: 0 30px 70px -20px rgba(16,24,40,.35);
  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --text: 'Figtree', system-ui, sans-serif;
  --gutter: clamp(16px, 3vw, 32px);
  --max: 1320px;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 110px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.55 var(--text); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video { max-width: 100%; height: auto; }
a { color: var(--blue-d); text-underline-offset: 3px; }
a:hover { color: var(--blue-dd); }
::selection { background: var(--yellow); color: var(--ink); }
:focus-visible { outline: 3px solid var(--blue-d); outline-offset: 3px; border-radius: 12px; }
input, select, textarea, button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 12px; text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; color: #fff; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: 980px; margin: 0 auto; padding: 0 var(--gutter); }
.center { text-align: center; }
main { outline: none; }

/* ------------------------------------------------------------------ keyframes */
@keyframes wlSpring { 0% { opacity: 0; transform: translateY(-10px) scale(.94); } 60% { opacity: 1; transform: translateY(2px) scale(1.01); } 100% { opacity: 1; transform: none; } }
@keyframes wlFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wlPop { 0% { opacity: 0; transform: translateY(16px) scale(.96); } 70% { opacity: 1; transform: translateY(-2px) scale(1.01); } 100% { opacity: 1; transform: none; } }
@keyframes wlMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes wlMarqueeR { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes wlFloatA { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-14px) rotate(-4deg); } }
@keyframes wlFloatB { 0%, 100% { transform: translateY(0) rotate(5deg); } 50% { transform: translateY(-18px) rotate(7deg); } }
@keyframes wlFloatC { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(1deg); } }
@keyframes wlWiggle { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(-2deg); } }
@keyframes wlVtOut { to { opacity: 0; transform: scale(.97); } }
@keyframes wlVtIn { 0% { opacity: 0; transform: translateY(24px) scale(.98); } 100% { opacity: 1; transform: none; } }
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: wlVtOut .2s ease both; }
::view-transition-new(root) { animation: wlVtIn .5s var(--spring) both; }

/* ------------------------------------------------------------------ buttons & chips */
.b { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 22px; border: 0; border-radius: 999px; font-weight: 700; font-size: 16px; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .3s var(--spring), box-shadow .15s, background .2s; }
.b-lg { height: 58px; padding: 0 26px; font-size: 17px; }
.b-sm { height: 44px; padding: 0 18px; font-size: 15px; }
.b-primary { background: var(--blue-d); color: #fff; box-shadow: 0 5px 0 var(--blue-sh); }
.b-primary:hover { color: #fff; } .b-primary:active { box-shadow: 0 1px 0 var(--blue-sh); transform: translateY(3px); }
.b-ghost { background: #fff; color: var(--ink); box-shadow: 0 5px 0 #D0D8EA, 0 0 0 1.5px #D0D8EA; }
.b-ghost:hover { color: var(--ink); } .b-ghost:active { box-shadow: 0 1px 0 #D0D8EA, 0 0 0 1.5px #D0D8EA; transform: translateY(3px); }
.b-dark { background: var(--ink); color: #fff; box-shadow: 0 4px 0 #000; }
.b-dark:hover { color: #fff; } .b-dark:active { box-shadow: 0 1px 0 #000; transform: translateY(3px); }
.b-yellow { background: var(--yellow); color: var(--ink); font-weight: 800; box-shadow: 0 5px 0 var(--yellow-sh); }
.b-yellow:hover { color: var(--ink); } .b-yellow:active { box-shadow: 0 1px 0 var(--yellow-sh); transform: translateY(3px); }
.b-soft { background: var(--t-blue-2); color: var(--ink); }
.b-soft:hover { background: var(--t-blue-3); color: var(--ink); }
.b-line { color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); background: transparent; }
.b-line:hover { color: #fff; box-shadow: inset 0 0 0 2px #fff; }
.b .arrow { width: 28px; height: 28px; border-radius: 50%; background: #fff; color: var(--blue-d); display: grid; place-items: center; font-size: 15px; }
.b .tag { padding: 3px 9px; border-radius: 999px; background: var(--t-green-2); font-size: 13px; color: var(--green-ink); }
.link-arrow { font-weight: 700; font-size: 16px; text-decoration: none; }
.link-arrow:hover { text-decoration: underline; }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1.3; }
.chip-blue { background: var(--t-blue); color: var(--blue-ink); }
.chip-green { background: var(--t-green); color: var(--green-ink); }
.chip-yellow { background: var(--t-yellow); color: var(--yellow-ink); }
.chip-violet { background: var(--t-violet); color: var(--violet-ink); }
.chip-white { background: #fff; color: var(--ink); box-shadow: var(--shadow-1); }
.chip-dark { background: var(--ink); color: #fff; }
.trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.trust li { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; background: #fff; font-size: 14px; font-weight: 600; box-shadow: var(--shadow-1); }
.trust .star { color: var(--star); }

/* ------------------------------------------------------------------ header */
.hdr { position: sticky; top: 12px; z-index: 60; padding: 0 12px; margin-top: 12px; }
.hdr-bar { position: relative; max-width: var(--max); margin: 0 auto; height: 64px; display: flex; align-items: center; gap: clamp(8px, 1.4vw, 18px); padding: 0 10px 0 18px; border-radius: 999px; background: rgba(255,255,255,.88); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 10px 30px -12px rgba(49,113,238,.35); border: 1px solid var(--line); }
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); flex-shrink: 0; }
.logo:hover { color: var(--ink); }
.logo-mark { width: 30px; height: 30px; border-radius: 50%; background: var(--blue); display: grid; place-items: center; box-shadow: inset 0 -3px 0 rgba(16,24,40,.25); }
.logo-word { font-family: var(--display); font-weight: 800; font-size: 21px; letter-spacing: -.03em; }
.nav { display: flex; align-items: center; gap: 2px; margin-left: 6px; }
.nav-item { display: flex; align-items: center; gap: 4px; height: 42px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; cursor: pointer; transition: background .2s; }
.nav-item:hover, .nav-item[aria-expanded="true"] { background: var(--t-blue-2); color: var(--ink); }
.nav-item svg { transition: transform .3s var(--spring); }
.nav-item[aria-expanded="true"] svg { transform: rotate(180deg); }
.hdr-fill { flex: 1; min-width: 0; }
.search-btn { display: flex; align-items: center; gap: 9px; height: 44px; min-width: 0; width: clamp(44px, 18vw, 240px); padding: 0 8px 0 14px; border-radius: 999px; border: 0; background: var(--t-blue-2); cursor: pointer; font-size: 14.5px; color: var(--muted); text-align: left; transition: transform .3s var(--spring); }
.search-btn:hover { transform: scale(1.03); }
.search-btn span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lang { position: relative; flex-shrink: 0; }
.lang-btn { height: 44px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; font-weight: 700; font-size: 13.5px; text-transform: uppercase; }
.lang-btn:hover, .lang-btn[aria-expanded="true"] { background: var(--t-blue-2); }
.lang-menu { position: absolute; right: 0; top: 54px; margin: 0; padding: 6px; list-style: none; min-width: 170px; background: #fff; border-radius: 20px; box-shadow: 0 20px 50px -12px rgba(16,24,40,.3); animation: wlSpring .4s var(--spring) both; transform-origin: top right; }
.lang-menu a { display: flex; justify-content: space-between; padding: 10px 12px; border-radius: 14px; color: var(--ink); text-decoration: none; font-size: 14.5px; font-weight: 600; }
.lang-menu a:hover, .lang-menu a[aria-current="true"] { background: var(--t-blue-2); color: var(--ink); }
.lang-menu a span:last-child { color: var(--muted); font-weight: 500; }
.icon-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink); flex-shrink: 0; }
.icon-btn:hover { background: var(--t-blue-2); color: var(--ink); }
.hdr-cta { display: inline-flex; align-items: center; height: 46px; padding: 0 20px; border-radius: 999px; background: var(--blue-d); color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; flex-shrink: 0; box-shadow: 0 4px 0 var(--blue-sh); transition: transform .3s var(--spring), box-shadow .15s; }
.hdr-cta:hover { color: #fff; } .hdr-cta:active { box-shadow: 0 1px 0 var(--blue-sh); }
.burger { display: none; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--ink); color: #fff; cursor: pointer; flex-shrink: 0; }
@media (max-width: 1023px) {
  .nav, .lang, .hdr-acct, .hdr-cta { display: none; }
  .burger { display: grid; }
  .hdr-fill { display: none; }
  .search-btn { flex: 1; width: auto; }
}

/* mega menus */
.mega { position: absolute; left: 0; right: 0; top: calc(100% + 10px); display: flex; justify-content: center; animation: wlSpring .45s var(--spring) both; transform-origin: top center; }
.mega[hidden] { display: none; }
.mega-panel { width: 100%; display: grid; gap: 10px; padding: 10px; background: #fff; border-radius: 30px; box-shadow: var(--shadow-pop); }
.mega-svc { max-width: 1060px; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.mega-plg { max-width: 1120px; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr) minmax(0, 1fr); }
.mega-res { max-width: 1040px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); list-style: none; margin: 0; }
.mega ul { list-style: none; margin: 0; padding: 0; }
.mega ul.mega-panel { padding: 10px; }  /* panels that are lists keep their inner spacing */
.mega-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mega-tile { display: flex; gap: 14px; height: 100%; padding: 16px; border-radius: 22px; text-decoration: none; color: var(--ink); transition: transform .35s var(--spring); }
.mega-tile:hover { transform: translateY(-3px) rotate(-.6deg); color: var(--ink); }
.mega-tile:nth-child(even):hover { transform: translateY(-3px) rotate(.6deg); }
.mega-ico { flex-shrink: 0; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: #fff; }
.mega-tile b { display: block; font-size: 16px; }
.mega-tile small { display: block; margin-top: 3px; font-size: 14px; color: var(--muted); line-height: 1.45; }
.mega-feature { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 230px; padding: 20px; border-radius: 22px; background: linear-gradient(150deg, var(--blue), #2253C2); color: #fff; text-decoration: none; }
.mega-feature:hover { color: #fff; }
.mega-feature .shot { position: absolute; right: -20px; top: -16px; width: 150px; height: 110px; border-radius: 18px; background: #fff; opacity: .95; transform: rotate(8deg); box-shadow: 0 20px 40px -10px rgba(0,0,0,.35); }
.mega-feature strong { margin-top: 10px; font-family: var(--display); font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
.mega-col { padding: 14px; }
.mega-label { margin: 0 0 10px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.mega-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.mega-cats a { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 13px; border-radius: 999px; background: var(--t-blue-2); color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; transition: transform .3s var(--spring); }
.mega-cats a:hover { transform: scale(1.06); color: var(--ink); }
.mega-cats small { font-size: 12px; color: var(--muted); }
.mini-plugin { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 16px; text-decoration: none; color: var(--ink); }
.mini-plugin:hover { background: var(--bg); color: var(--ink); }
.mini-plugin .info { flex: 1; min-width: 0; }
.mini-plugin .name { display: block; font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-plugin .meta { display: flex; gap: 8px; font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.mini-plugin .meta b { color: var(--ink); }
.thumb { flex-shrink: 0; display: grid; place-items: center; font-family: var(--display); font-weight: 800; color: var(--ink); }
.thumb-sm { width: 40px; height: 40px; border-radius: 12px; font-size: 14px; }
.mega-bundle { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 22px; border-radius: 22px; background: var(--yellow); color: var(--ink); text-decoration: none; transition: transform .35s var(--spring); }
.mega-bundle:hover { transform: rotate(-1deg) scale(1.02); color: var(--ink); }
.mega-bundle strong { display: block; font-family: var(--display); font-size: 30px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.mega-res a { display: block; height: 100%; padding: 18px; border-radius: 22px; text-decoration: none; color: var(--ink); transition: transform .35s var(--spring); }
.mega-res a:hover { transform: translateY(-3px); color: var(--ink); }
.mega-res b { display: block; font-family: var(--display); font-weight: 800; font-size: 19px; }
.mega-res small { display: block; margin-top: 4px; font-size: 13.5px; color: var(--muted); }
.bg-blue { background: var(--t-blue-2); } .bg-green { background: var(--t-green-2); } .bg-yellow { background: var(--t-yellow-2); } .bg-violet { background: var(--t-violet-2); }

/* mobile menu */
.mob { position: fixed; inset: 0; z-index: 90; background: var(--bg); overflow-y: auto; animation: wlFade .2s ease both; }
.mob[hidden] { display: none; }
.mob-top { display: flex; align-items: center; justify-content: space-between; height: 76px; padding: 0 16px; }
.mob-nav { display: grid; gap: 8px; padding: 4px 16px 32px; }
.mob-card { border-radius: 24px; background: #fff; animation: wlPop .5s var(--spring) both; }
.mob-card > a, .mob-card > button { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 64px; padding: 0 20px; border: 0; background: transparent; cursor: pointer; font-family: var(--display); font-size: 24px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); text-decoration: none; text-align: left; }
.mob-card .plus { width: 32px; height: 32px; border-radius: 50%; background: var(--t-blue-2); display: grid; place-items: center; font-size: 20px; transition: transform .4s var(--spring); }
.mob-card button[aria-expanded="true"] .plus { transform: rotate(45deg); }
.mob-card ul { list-style: none; margin: 0; padding: 0 20px 14px; }
.mob-card ul a { display: flex; justify-content: space-between; padding: 11px 0; font-size: 17px; color: var(--ink); text-decoration: none; }
.mob-langs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mob-langs a { display: grid; place-items: center; min-width: 56px; height: 44px; padding: 0 16px; border-radius: 999px; background: #fff; font-weight: 700; font-size: 14px; color: var(--ink); text-decoration: none; }
.mob-langs a[aria-current="true"] { background: var(--t-blue); }

/* search palette */
.pal { position: fixed; inset: 0; z-index: 100; background: rgba(16,24,40,.35); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: flex; justify-content: center; align-items: flex-start; padding: clamp(12px, 9vh, 100px) 12px 12px; animation: wlFade .16s ease both; }
.pal[hidden] { display: none; }
.pal-box { width: 100%; max-width: 720px; max-height: min(680px, 84vh); display: flex; flex-direction: column; background: #fff; border-radius: 32px; box-shadow: 0 40px 100px -20px rgba(16,24,40,.45); overflow: hidden; animation: wlSpring .45s var(--spring) both; }
.pal-field { display: flex; align-items: center; gap: 12px; margin: 10px; padding: 0 16px; border-radius: 24px; background: var(--t-blue-2); }
.pal-field input { flex: 1; min-width: 0; height: 60px; border: 0; background: transparent; font-size: 18px; font-weight: 600; outline: none; }
.pal-field kbd { font-family: inherit; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 8px; background: #fff; box-shadow: 0 1px 0 rgba(16,24,40,.15); }
.pal-body { overflow-y: auto; padding: 4px 10px 10px; }
.pal-head { margin: 14px 10px 6px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.pal-plugins { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 6px; }
.pal-plugins a, .pal-docs a { outline: none; }
.pal-plugins a:focus, .pal-docs a:focus { background: var(--t-blue-2); box-shadow: inset 0 0 0 2px var(--blue-d); }
.pal-docs { list-style: none; margin: 0; padding: 0; }
.pal-docs a { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 16px; text-decoration: none; color: var(--ink); font-size: 14.5px; }
.pal-docs a:hover { background: var(--bg); color: var(--ink); }
.pal-docs .ico { flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; background: var(--t-green-2); display: grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--green); }
.pal-docs .ico.pg { background: var(--t-blue-2); color: var(--blue-d); }
.pal-none { margin: 6px 4px 10px; padding: 14px 16px; border-radius: 20px; background: var(--t-yellow-2); }
.pal-none p { margin: 0; } .pal-none p + p { margin-top: 2px; font-size: 14px; color: var(--muted); }
.pal-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 4px 4px; padding: 16px 18px; border-radius: 22px; background: var(--blue-d); color: #fff; text-decoration: none; }
.pal-cta:hover, .pal-cta:focus { color: #fff; box-shadow: 0 0 0 3px var(--yellow); outline: none; }
.pal-cta b { display: block; font-family: var(--display); font-weight: 800; font-size: 18px; }
.pal-cta small { display: block; margin-top: 2px; font-size: 13.5px; }
.pal-cta i { font-style: normal; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--blue-d); display: grid; place-items: center; font-weight: 800; }

/* ------------------------------------------------------------------ page heads */
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; font-weight: 600; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--blue-d); }
.crumbs [aria-current] { color: var(--ink); }
.page-top { padding-top: 28px; }
.h-hero { margin: 0; font-size: clamp(40px, 5.6vw, 80px); line-height: .98; letter-spacing: -.045em; font-weight: 800; text-wrap: balance; }
.h-hero .w { display: inline-block; }
.h-hero .hl { color: var(--blue-d); }
.h-sec { margin: 0; font-size: clamp(32px, 4.4vw, 60px); line-height: 1; letter-spacing: -.04em; font-weight: 800; text-wrap: balance; }
.h-sub { margin: 0; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.05; letter-spacing: -.04em; font-weight: 800; }
.h-sm { margin: 0; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.03em; font-weight: 800; }
.lead { margin: 16px 0 0; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--body); text-wrap: pretty; max-width: 700px; }
.page-head { margin-top: 20px; padding: clamp(28px, 5vw, 64px); border-radius: 44px; background: var(--t-blue); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 32px; align-items: end; }
.page-head .lead { margin: 0; color: var(--ink-2); }
.page-head.center-head { display: block; text-align: center; }
.page-head.center-head .lead { margin: 16px auto 0; }
.page-head.tint-green { background: var(--t-green); } .page-head.tint-yellow { background: var(--t-yellow); } .page-head.tint-violet { background: var(--t-violet); } .page-head.tint-white { background: #fff; }
.sec { padding-top: clamp(72px, 9vw, 120px); }
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.sec-head p { margin: 10px 0 0; font-size: 17px; color: var(--muted); }
.sec-head-c { text-align: center; max-width: 760px; margin: 0 auto; }
.sec-head-c .h-sec { margin-top: 14px; }

/* ------------------------------------------------------------------ home hero */
.hero { padding-top: clamp(40px, 6vw, 80px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: clamp(24px, 4vw, 56px); align-items: center; }
.hero-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 14px 6px 6px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-1); font-size: 13.5px; font-weight: 600; }
.hero-kicker span { padding: 3px 9px; border-radius: 999px; background: var(--yellow); font-size: 12px; font-weight: 800; }
.hero .h-hero { margin-top: 20px; font-size: clamp(42px, 6.2vw, 88px); }
.hero .h-hero .mark { position: relative; padding: 0 .12em; margin: 0 -.04em; }
.hero .h-hero .mark::before { content: ""; position: absolute; inset: .12em 0 .02em; border-radius: .2em; background: var(--yellow); transform: rotate(-2deg); z-index: -1; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-note { margin: 12px 0 0; font-size: 13.5px; color: var(--muted); }
.hero .trust { margin-top: 26px; }
.hero-art { position: relative; height: clamp(380px, 42vw, 540px); transition: transform .6s var(--spring); transform-style: preserve-3d; }
.hero-art .glow { position: absolute; inset: 8% 6%; border-radius: 48px; background: radial-gradient(60% 60% at 50% 50%, var(--t-blue), transparent 70%); }
.float { position: absolute; }
.float-a { left: 4%; top: 8%; width: 58%; animation: wlFloatA 7s ease-in-out infinite; }
.float-b { right: 2%; top: 30%; width: 44%; animation: wlFloatB 8s ease-in-out infinite .6s; }
.float-c { left: 14%; bottom: 4%; width: 48%; animation: wlFloatC 6.5s ease-in-out infinite 1.2s; }
.float-card { padding: 18px; border-radius: 26px; background: #fff; box-shadow: 0 30px 60px -20px rgba(16,24,40,.35); font-size: 13.5px; }
.float-card .row { margin-top: 6px; padding: 11px 12px; border-radius: 14px; background: var(--bg); display: flex; justify-content: space-between; gap: 8px; }
.float-card .row.on { background: var(--t-blue-2); box-shadow: inset 0 0 0 2px var(--blue); font-weight: 600; }
.float-card .row span:last-child { color: var(--muted); }
.float-card .ttl { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.float-card .ttl b { font-family: var(--display); font-weight: 800; font-size: 16px; }
.float-card .ttl i { font-style: normal; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--t-blue-2); color: var(--blue-d); }
.float-inv { padding: 16px; border-radius: 24px; background: var(--t-violet-2); box-shadow: 0 30px 60px -20px rgba(16,24,40,.35); }
.float-inv .bar { height: 8px; margin-top: 6px; border-radius: 4px; background: #fff; }
.float-inv .tot { display: flex; justify-content: space-between; margin-top: 16px; padding-top: 10px; border-top: 1.5px dashed #B8A8F5; font-family: var(--display); font-weight: 800; font-size: 18px; }
.float-pts { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 22px; background: var(--t-green); box-shadow: 0 30px 60px -20px rgba(16,24,40,.35); font-size: 13.5px; line-height: 1.35; }
.float-pts .n { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-family: var(--display); font-weight: 800; color: var(--green); }
.sticker { position: absolute; right: 8%; top: 4%; width: 92px; height: 92px; border-radius: 50%; background: var(--yellow); display: grid; place-items: center; text-align: center; font-family: var(--display); font-weight: 800; font-size: 14px; line-height: 1.05; box-shadow: 0 14px 30px -10px rgba(16,24,40,.35); animation: wlWiggle 3s ease-in-out infinite; }
.sticker big { font-size: 22px; }
.rating-pill { position: absolute; right: 4%; bottom: 12%; padding: 10px 14px; border-radius: 18px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 14px 30px -10px rgba(16,24,40,.5); animation: wlFloatA 9s ease-in-out infinite 2s; }

/* marquee */
.marquee { margin-top: clamp(40px, 6vw, 72px); display: grid; gap: 10px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-row { display: flex; gap: 10px; width: max-content; animation: wlMarquee 60s linear infinite; }
.marquee-row.rev { animation: wlMarqueeR 70s linear infinite; }
.marquee:hover .marquee-row { animation-play-state: paused; }
.mq { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px 0 6px; border-radius: 999px; background: #fff; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14.5px; white-space: nowrap; box-shadow: var(--shadow-1); }
a.mq:hover { color: var(--blue-d); }
.mq .thumb { width: 36px; height: 36px; border-radius: 50%; font-size: 12px; }

/* ------------------------------------------------------------------ cards & grids */
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid-fill { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.pcard-list { list-style: none; margin: 0; padding: 0; }
.pcard { flex: 1; display: flex; flex-direction: column; height: 100%; padding: 10px; border-radius: 30px; background: #fff; color: var(--ink); text-decoration: none; box-shadow: var(--shadow-card); transition: transform .5s var(--spring); }
.pcard:hover { color: var(--ink); }
.pcard-img { position: relative; display: grid; place-items: center; aspect-ratio: 16/10; border-radius: 22px; overflow: hidden; }
.pcard-img img { width: 100%; height: 100%; object-fit: cover; }
.pcard-img .ini { font-family: var(--display); font-size: 40px; font-weight: 800; letter-spacing: -.05em; padding: 8px 18px; border-radius: 20px; background: rgba(255,255,255,.7); transform: rotate(-4deg); }
.badge-new { position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; }
.badge-sale { position: absolute; top: 10px; right: 10px; width: 62px; height: 62px; border-radius: 50%; background: var(--yellow); display: grid; place-items: center; text-align: center; font-size: 12.5px; font-weight: 800; transform: rotate(12deg); line-height: 1.1; }
.pcard-body { display: flex; flex-direction: column; flex: 1; padding: 14px 10px 8px; }
.pcard-cat { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.pcard-name { margin-top: 4px; font-family: var(--display); font-size: 18.5px; font-weight: 800; letter-spacing: -.025em; line-height: 1.15; }
.pcard-desc { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pcard-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; padding-top: 14px; }
.pcard-rate { font-size: 13.5px; font-weight: 600; color: var(--muted); }
.price-pill { padding: 5px 12px; border-radius: 999px; background: var(--t-blue-2); font-size: 14px; font-weight: 700; white-space: nowrap; }
.bundle-band { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-top: 16px; padding: clamp(26px, 4vw, 44px); border-radius: 36px; background: var(--blue-d); color: #fff; text-decoration: none; transition: transform .45s var(--spring); }
.bundle-band:hover { transform: scale(1.01); color: #fff; }
.bundle-band::after { content: ""; position: absolute; right: -30px; top: -40px; width: 220px; height: 220px; border-radius: 50%; background: var(--blue); }
.bundle-band > * { position: relative; z-index: 1; }
.bundle-band strong { display: block; margin-top: 14px; font-family: var(--display); font-size: clamp(32px, 4.6vw, 64px); font-weight: 800; letter-spacing: -.045em; line-height: .98; }
.bundle-band .disc { display: grid; place-items: center; width: 110px; height: 110px; border-radius: 50%; background: var(--yellow); color: var(--ink); text-align: center; font-family: var(--display); font-weight: 800; line-height: 1.05; animation: wlWiggle 3.4s ease-in-out infinite; }
.bundle-band .disc big { font-size: 24px; }
.bundle-band .go { display: inline-flex; align-items: center; height: 54px; padding: 0 22px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 700; box-shadow: 0 4px 0 #A9C3F7; }
.bundle-side { display: flex; align-items: center; gap: 16px; }
.ycard { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 26px 28px; border-radius: 32px; background: var(--yellow); color: var(--ink); text-decoration: none; transition: transform .45s var(--spring); }
.ycard:hover { transform: rotate(-1deg) scale(1.02); color: var(--ink); }
.ycard strong { display: block; margin-top: 10px; font-family: var(--display); font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.ycard .go { flex-shrink: 0; width: 54px; height: 54px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-weight: 800; font-size: 20px; }

.tile { display: block; padding: 24px; border-radius: 28px; background: #fff; color: var(--ink); text-decoration: none; box-shadow: var(--shadow-1); transition: transform .45s var(--spring); }
a.tile:hover { transform: translateY(-5px); color: var(--ink); }
.tile h3 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.025em; line-height: 1.2; }
.tile p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.tile .meta { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 12px; font-size: 13px; font-weight: 600; color: var(--muted); }

/* stats */
.stats { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 14px; }
.stat { padding: 26px; border-radius: 30px; background: #fff; text-align: center; box-shadow: var(--shadow-1); }
.stat dd, .stat .n { margin: 0; font-family: var(--display); font-size: clamp(40px, 4.4vw, 60px); font-weight: 800; letter-spacing: -.04em; line-height: 1.1; }
.stat dt, .stat .l { margin-top: 4px; font-size: 14.5px; font-weight: 600; color: var(--ink-2); }

/* testimonials */
.quote { margin: 0; height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 28px; border-radius: 30px; transition: transform .45s var(--spring); }
.quote:hover { transform: rotate(0) scale(1.02) !important; }
.quote blockquote { margin: 0; font-family: var(--display); font-size: 21px; font-weight: 700; line-height: 1.3; letter-spacing: -.02em; text-wrap: pretty; }
.quote figcaption { display: flex; align-items: center; gap: 12px; }
.quote figcaption img, .quote .av { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px; }

/* CTA band */
.cta-band { position: relative; overflow: hidden; padding: clamp(40px, 7vw, 96px) clamp(24px, 5vw, 64px); border-radius: 44px; background: var(--ink); color: #fff; text-align: center; }
.cta-band .shape { position: absolute; }
.cta-band .s1 { left: 6%; top: 14%; width: 70px; height: 70px; border-radius: 22px; background: var(--yellow); animation: wlFloatA 7s ease-in-out infinite; }
.cta-band .s2 { right: 8%; top: 18%; width: 54px; height: 54px; border-radius: 50%; background: var(--mint); animation: wlFloatB 8s ease-in-out infinite; }
.cta-band .s3 { right: 16%; bottom: 12%; width: 80px; height: 80px; border-radius: 26px; background: var(--lilac); animation: wlFloatC 6s ease-in-out infinite; }
.cta-band .s4 { left: 14%; bottom: 14%; width: 44px; height: 44px; border-radius: 50%; background: var(--blue); animation: wlFloatB 9s ease-in-out infinite; }
.cta-band h2 { position: relative; margin: 0 auto; max-width: 820px; font-size: clamp(36px, 5.6vw, 80px); line-height: .98; letter-spacing: -.045em; font-weight: 800; text-wrap: balance; }
.cta-band p { position: relative; margin: 18px auto 0; max-width: 520px; font-size: 17px; line-height: 1.55; color: #D0D5DD; }
.cta-band .acts { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.cta-band .fine { margin-top: 22px; font-size: 13.5px; }
.cta-yellow { padding: clamp(32px, 5vw, 64px); border-radius: 44px; background: var(--yellow); text-align: center; }
.cta-yellow h2 { margin: 0; font-size: clamp(32px, 4.6vw, 64px); letter-spacing: -.045em; line-height: 1; font-weight: 800; }
.cta-yellow p { margin: 12px auto 0; max-width: 480px; font-size: 17px; color: var(--ink-2); }
.cta-green { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 24px; align-items: center; padding: clamp(28px, 4vw, 52px); border-radius: 40px; background: var(--t-green); }
.cta-green h2 { margin: 0; font-size: clamp(30px, 3.8vw, 52px); line-height: 1; letter-spacing: -.04em; font-weight: 800; }
.cta-green p { margin: 12px 0 0; font-size: 17px; line-height: 1.55; color: var(--ink-2); max-width: 540px; }
.cta-green .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.cta-green .acts span { font-size: 14px; font-weight: 600; color: var(--ink-2); }

/* ------------------------------------------------------------------ prose: live WordPress content */
.prose { font-size: 16.5px; line-height: 1.65; color: var(--body); }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin: 1.6em 0 .4em; color: var(--ink); font-size: clamp(28px, 3.2vw, 42px); line-height: 1.05; letter-spacing: -.04em; font-weight: 800; }
.prose h3 { margin: 1.4em 0 .3em; color: var(--ink); font-size: clamp(21px, 2vw, 26px); line-height: 1.15; letter-spacing: -.03em; font-weight: 800; }
.prose h4, .prose h5, .prose h6 { margin: 1.2em 0 .3em; color: var(--ink); font-family: var(--display); font-size: 19px; line-height: 1.2; font-weight: 800; }
.prose p { margin: .8em 0 0; }
.prose ul, .prose ol { margin: .8em 0 0; padding-left: 1.3em; }
.prose li + li { margin-top: .35em; }
.prose li::marker { color: var(--blue-d); font-weight: 700; }
.prose img { display: block; margin: 1em auto 0; border-radius: 20px; }
.prose a img { margin-top: 0; }
.prose pre { margin: 1em 0 0; padding: 18px 20px; border-radius: 20px; background: var(--ink); color: #E4E7EC; font-size: 14px; line-height: 1.55; overflow-x: auto; white-space: pre; }
.prose code { font-size: .92em; padding: .1em .35em; border-radius: 6px; background: var(--t-blue-2); color: var(--ink); }
.prose pre code { padding: 0; background: none; color: inherit; }
.prose blockquote { margin: 1em 0 0; padding: 16px 20px; border-radius: 20px; background: var(--t-yellow); color: var(--ink-2); }
.prose table { width: 100%; margin: 1em 0 0; border-collapse: separate; border-spacing: 0; font-size: 15px; background: #fff; border-radius: 18px; overflow: hidden; display: block; overflow-x: auto; }
.prose th, .prose td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #EEF1F6; vertical-align: top; }
.prose th { background: var(--t-blue-2); color: var(--ink); }
.prose hr { margin: 2em 0; border: 0; border-top: 1.5px dashed rgba(16,24,40,.15); }
.prose details { margin: 8px 0 0; border-radius: 24px; background: #fff; }
.prose summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 62px; padding: 14px 18px 14px 22px; font-weight: 700; color: var(--ink); cursor: pointer; }
.prose summary::-webkit-details-marker { display: none; }
.prose summary::after { content: "+"; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--t-blue-2); display: grid; place-items: center; font-size: 20px; transition: transform .4s var(--spring); }
.prose details[open] summary::after { transform: rotate(45deg); }
.prose details > :not(summary) { margin-left: 22px; margin-right: 22px; }
.prose details > :last-child { padding-bottom: 20px; }
.prose .btn { display: inline-flex; align-items: center; height: 48px; margin: 16px 8px 0 0; padding: 0 20px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 700; font-size: 15px; text-decoration: none; box-shadow: 0 4px 0 #D0D8EA, 0 0 0 1.5px #D0D8EA; transition: transform .3s var(--spring), box-shadow .15s; }
.prose .btn:hover { color: var(--ink); transform: translateY(-2px); }
.prose .btn:active { box-shadow: 0 1px 0 #D0D8EA, 0 0 0 1.5px #D0D8EA; transform: translateY(3px); }
.prose .btn-primary { background: var(--blue-d); color: #fff; box-shadow: 0 4px 0 var(--blue-sh); }
.prose .btn-primary:hover { color: #fff; }
/* Flatsome sections become rounded blocks */
.prose .blk { margin-top: 16px; padding: clamp(22px, 3vw, 40px); border-radius: 36px; background: #fff; }
.prose .blk:nth-of-type(4n+2).blk-tint { background: var(--t-blue); }
.prose .blk-tint { background: var(--t-blue-2); }
.prose .blk:nth-of-type(4n+3).blk-tint { background: var(--t-green); }
.prose .blk:nth-of-type(4n).blk-tint { background: var(--t-violet); }
.prose .blk > :first-child, .prose .col > :first-child, .prose .feature > :first-child, .prose .card > :first-child { margin-top: 0; }
.prose .blk h2:first-child { margin-top: 0; }
.prose .cols { display: grid; gap: clamp(16px, 3vw, 32px); align-items: center; margin-top: 1em; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.prose .cols[data-n="4"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); align-items: stretch; }
.prose .cols[data-n="3"] { align-items: stretch; }
.prose .blk > .cols:first-child { margin-top: 0; }
.prose .feature, .prose .card { height: 100%; padding: 20px; border-radius: 26px; background: rgba(255,255,255,.75); }
.prose .blk:not(.blk-tint) .feature, .prose .blk:not(.blk-tint) .card { background: var(--bg); }
.prose .cols > .col:nth-child(4n+1) > .feature { background: var(--t-blue); }
.prose .cols > .col:nth-child(4n+2) > .feature { background: var(--t-green); }
.prose .cols > .col:nth-child(4n+3) > .feature { background: var(--t-yellow); }
.prose .cols > .col:nth-child(4n+4) > .feature { background: var(--t-violet); }
.prose .feature img { width: 56px; height: 56px; margin: 0 0 12px; object-fit: contain; border-radius: 14px; }
.prose .feature h3, .prose .feature h4, .prose .feature h5 { margin: 0; font-size: 19px; }
.prose .feature p { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.prose .card img { margin: 0 0 12px; width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 20px; }
.prose .card h5, .prose .card h6 { margin: 0; font-size: 18px; }
.prose .card p { margin-top: 4px; font-size: 14px; }
.prose .stat-col { text-align: center; }
.prose .stat-col h2, .prose .stat-col h3 { margin: 0; font-size: clamp(40px, 4.4vw, 60px); }
.prose .stat-col p { margin-top: 4px; font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.prose .quote-col { padding: 26px; border-radius: 30px; background: var(--t-yellow); }
.prose .quote-col img { width: 56px; height: 56px; margin: 0 0 14px; border-radius: 50%; object-fit: cover; }
.prose .quote-col p { font-family: var(--display); font-size: 19px; font-weight: 700; line-height: 1.35; color: var(--ink); }
.prose .cols > .col:nth-child(3n+2) > .quote-col { background: var(--t-green); }
.prose .cols > .col:nth-child(3n) > .quote-col { background: var(--t-violet); }

/* YouTube facade */
.yt { position: relative; margin: 1em 0 0; aspect-ratio: 16/9; border-radius: 28px; overflow: hidden; background: var(--ink); box-shadow: 0 30px 60px -30px rgba(16,24,40,.45); }
.yt button { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: var(--ink); }
.yt img { width: 100%; height: 100%; object-fit: cover; opacity: .8; margin: 0; border-radius: 0; }
.yt .play { position: absolute; inset: 0; display: grid; place-items: center; }
.yt .play span { display: flex; align-items: center; gap: 12px; height: 68px; padding: 0 26px 0 10px; border-radius: 999px; background: var(--yellow); color: var(--ink); font-weight: 800; font-size: 17px; box-shadow: 0 6px 0 var(--yellow-sh); transition: transform .3s var(--spring); }
.yt button:hover .play span { transform: scale(1.06); }
.yt .play i { width: 50px; height: 50px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; }
.yt .hint { position: absolute; left: 16px; bottom: 14px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.9); color: var(--ink); font-size: 12px; font-weight: 700; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ------------------------------------------------------------------ product page */
.pd { display: flex; flex-direction: row-reverse; flex-wrap: wrap; gap: clamp(24px, 4vw, 48px); margin-top: 24px; align-items: flex-start; }
.pd-main { flex: 999 1 560px; min-width: 0; }
.pd-aside { flex: 1 1 320px; max-width: 400px; position: sticky; top: 96px; }
@media (max-width: 900px) { .pd-aside { position: static; max-width: none; order: 2; } }
.buy { padding: 12px; border-radius: 34px; background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 30px 60px -30px rgba(49,113,238,.5); }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 5px; border-radius: 999px; background: var(--t-blue-2); }
.seg button { display: flex; align-items: center; justify-content: center; gap: 6px; height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font-weight: 700; font-size: 14.5px; cursor: pointer; transition: background .25s, color .25s, transform .3s var(--spring); }
.seg button[aria-checked="true"] { background: var(--ink); color: #fff; }
.seg button:active { transform: scale(.95); }
.seg .save { padding: 2px 7px; border-radius: 999px; background: var(--mint); color: #0B3D27; font-size: 11.5px; font-weight: 800; }
.buy-body { padding: 18px 12px 8px; }
.buy-price { margin: 0; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.buy-price .amt { font-family: var(--display); font-size: 56px; font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.buy-price .per { font-size: 15px; font-weight: 600; color: var(--muted); }
.buy-note { margin: 6px 0 0; font-size: 14px; color: var(--body); }
.buy .b { width: 100%; }
.buy .b-primary { margin-top: 18px; height: 58px; font-weight: 800; font-size: 17px; }
.buy .b-soft { margin-top: 10px; height: 50px; }
.buy .trust-mini { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.buy .trust-mini li { display: flex; align-items: center; gap: 5px; }
.buy .trust-mini li::before { content: "✓"; font-weight: 800; color: var(--green); }
.buy .trust-mini li.r::before { content: none; }
.buy .trust-mini li.r span { color: var(--star); }
.buy-bundle { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; padding: 14px 18px; border-radius: 999px; background: var(--yellow); color: var(--ink); text-decoration: none; font-size: 14.5px; transition: transform .3s var(--spring); }
.buy-bundle:hover { transform: scale(1.03); color: var(--ink); }
.pd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-chips a { text-decoration: none; }
.pd .h-hero { margin-top: 14px; font-size: clamp(36px, 5vw, 68px); line-height: 1; }
.pd-short { margin: 16px 0 0; font-size: 18px; line-height: 1.55; color: var(--body); max-width: 700px; }
.pd-short p { margin: 0; }
.pd-nav { position: sticky; top: 86px; z-index: 15; display: flex; gap: 4px; overflow-x: auto; margin-top: 26px; padding: 6px; border-radius: 999px; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--shadow-1); scrollbar-width: none; }
.pd-nav a { flex-shrink: 0; display: flex; align-items: center; height: 40px; padding: 0 15px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--ink); text-decoration: none; white-space: nowrap; }
.pd-nav a:hover { background: var(--t-blue-2); color: var(--ink); }
.pd-sec { padding-top: 72px; }
.pd-desc { margin-top: 24px; }
.reviews { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.reviews li { padding: 20px; border-radius: 26px; background: #fff; }
.reviews .top { margin: 0; display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--muted); }
.reviews .top strong { color: var(--ink); }
.reviews .stars { margin: 4px 0 0; font-size: 13px; color: var(--amber); }
.reviews .stars span { color: var(--muted); }
.reviews .txt { margin-top: 10px; font-size: 15px; line-height: 1.55; }
.reviews .txt p { margin: 0; }
.score { margin: 0; display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; background: var(--t-yellow); }
.score b { font-family: var(--display); font-size: 30px; font-weight: 800; }
.score span { color: var(--amber); letter-spacing: 2px; }
.doc-search { position: relative; display: block; margin-top: 18px; max-width: 520px; }
.doc-search input { width: 100%; height: 50px; padding: 0 18px; border: 0; border-radius: 999px; background: #fff; font-size: 16px; font-weight: 600; }
.doc-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 8px; }
.doc-list a { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: 100%; padding: 14px 18px; border-radius: 20px; background: #fff; color: var(--ink); text-decoration: none; font-size: 14.5px; font-weight: 600; transition: transform .3s var(--spring); }
.doc-list a:hover { transform: translateX(4px); color: var(--blue-d); }
.doc-list small { display: block; margin-top: 3px; font-weight: 500; font-size: 13.5px; color: var(--muted); }
.support-box { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; align-items: center; padding: 28px; border-radius: 32px; background: var(--t-violet); }
.support-box h2 { margin: 0; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.04em; font-weight: 800; }
.support-box p { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.support-box .acts { display: flex; flex-wrap: wrap; gap: 10px; }
.mobbar { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 70; display: none; align-items: center; gap: 12px; padding: 8px 8px 8px 18px; border-radius: 999px; background: var(--ink); color: #fff; box-shadow: 0 20px 40px -12px rgba(16,24,40,.5); }
.mobbar.show { display: flex; animation: wlPop .5s var(--spring) both; }
.mobbar .info { flex: 1; min-width: 0; }
.mobbar .info small { display: block; font-size: 12px; color: #D0D5DD; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mobbar .info b { font-family: var(--display); font-weight: 800; font-size: 20px; }
.mobbar a { display: grid; place-items: center; height: 50px; padding: 0 24px; border-radius: 999px; background: var(--yellow); color: var(--ink); font-weight: 800; text-decoration: none; }
@media (min-width: 901px) { .mobbar.show { display: none; } }
.na-box { margin-top: 18px; padding: 16px 12px; border-radius: 22px; background: var(--t-yellow); font-size: 14.5px; }

/* ------------------------------------------------------------------ shop */
.shop-tools { position: sticky; top: 86px; z-index: 20; margin-top: 28px; padding: 10px; border-radius: 30px; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 16px 30px -20px rgba(16,24,40,.3); }
.shop-tools .row1 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.shop-search { position: relative; flex: 1 1 240px; display: block; }
.shop-search svg { position: absolute; left: 16px; top: 15px; }
.shop-search input { width: 100%; height: 48px; padding: 0 16px 0 44px; border: 0; border-radius: 999px; background: var(--t-blue-2); font-size: 16px; font-weight: 600; }
.shop-sort { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.shop-sort select { height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--t-blue-2); font-size: 14px; font-weight: 600; color: var(--ink); }
.cat-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cat-chips a, .cat-chips button { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 15px; border-radius: 999px; border: 1.5px solid #D0D8EA; background: #fff; color: var(--ink); font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .3s var(--spring), background .2s, color .2s; }
.cat-chips a:hover, .cat-chips button:hover { transform: scale(1.05); color: var(--ink); }
.cat-chips [aria-current="page"], .cat-chips [aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.cat-chips [aria-current="page"]:hover, .cat-chips [aria-pressed="true"]:hover { color: #fff; }
.cat-chips small { font-size: 12px; opacity: .7; }
.result-count { margin: 16px 4px; font-size: 14px; font-weight: 600; color: var(--muted); }
.empty { padding: 40px 24px; border-radius: 32px; background: var(--t-yellow); text-align: center; }
.empty[hidden] { display: none; }
.empty p { margin: 0; }
.empty .big { font-family: var(--display); font-size: 26px; font-weight: 800; }

/* ------------------------------------------------------------------ knowledge base / faq */
.kb-search { position: relative; display: block; margin: 28px auto 0; max-width: 720px; }
.kb-search svg { position: absolute; left: 22px; top: 20px; }
.kb-search input { width: 100%; height: 60px; padding: 0 20px 0 54px; border: 0; border-radius: 999px; background: #fff; font-size: 17px; font-weight: 600; box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 16px 30px -20px rgba(49,113,238,.5); }
.kb-results { list-style: none; margin: 10px auto 0; padding: 0; max-width: 720px; display: grid; gap: 6px; }
.kb-results a { display: block; padding: 12px 18px; border-radius: 18px; background: #fff; color: var(--ink); text-decoration: none; font-weight: 600; }
.kb-results a:hover { color: var(--blue-d); }
.topic-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.topic { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; height: 100%; min-height: 150px; padding: 22px; border-radius: 28px; color: var(--ink); text-decoration: none; transition: transform .45s var(--spring); }
.topic:hover { transform: translateY(-5px) rotate(-.8deg); color: var(--ink); }
.topic-grid li:nth-child(4n+1) .topic { background: var(--t-blue); }
.topic-grid li:nth-child(4n+2) .topic { background: var(--t-green); }
.topic-grid li:nth-child(4n+3) .topic { background: var(--t-yellow); }
.topic-grid li:nth-child(4n+4) .topic { background: var(--t-violet); }
.topic b { font-family: var(--display); font-size: 20px; font-weight: 800; letter-spacing: -.025em; line-height: 1.15; }
.topic small { font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.art-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.art-list a { display: block; padding: 16px 20px; border-radius: 22px; background: #fff; color: var(--ink); text-decoration: none; transition: transform .3s var(--spring); }
.art-list a:hover { transform: translateX(4px); color: var(--ink); }
.art-list b { display: block; font-size: 16px; }
.art-list a:hover b { color: var(--blue-d); }
.art-list small { display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.doc-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 24px; }
@media (min-width: 1024px) { .doc-layout { grid-template-columns: minmax(0, 1fr) 320px; } }
.doc-card { padding: clamp(22px, 4vw, 48px); border-radius: 36px; background: #fff; }
.doc-side { display: grid; gap: 14px; align-content: start; }
.side-box { padding: 20px; border-radius: 28px; background: #fff; }
.side-box h2 { margin: 0 0 10px; font-family: var(--text); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.side-box ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.side-box a { display: block; padding: 8px 10px; border-radius: 12px; color: var(--ink); text-decoration: none; font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.side-box a:hover, .side-box a[aria-current="page"] { background: var(--t-blue-2); color: var(--blue-d); }
.side-box.dark { background: var(--ink); color: #fff; }
.side-box.dark p { margin: 0; font-size: 14.5px; color: #D0D5DD; }
.side-box.dark b { display: block; margin-bottom: 6px; font-family: var(--display); font-size: 20px; color: #fff; }
.side-box.dark .b { margin-top: 14px; width: 100%; }
.doc-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.doc-meta a { text-decoration: none; }
.comments { margin-top: 40px; }
.comments h2 { margin: 0 0 14px; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -.03em; font-weight: 800; }
.comments ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.comments li { padding: 16px 18px; border-radius: 22px; background: var(--bg); font-size: 15px; }
.comments li.reply { margin-left: clamp(16px, 4vw, 48px); background: var(--t-blue-2); }
.comments .who { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--muted); }
.comments .who strong { color: var(--ink); }
.comments .txt p { margin: 6px 0 0; }

/* ------------------------------------------------------------------ blog */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.post-card { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 28px; background: #fff; color: var(--ink); text-decoration: none; box-shadow: var(--shadow-1); transition: transform .45s var(--spring); }
.post-card:hover { transform: translateY(-5px); color: var(--ink); }
.post-card .meta { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 600; color: var(--muted); }
.post-card .meta span:first-child { padding: 3px 10px; border-radius: 999px; background: var(--t-blue-2); color: var(--blue-ink); }
.post-card b { font-family: var(--display); font-size: 21px; font-weight: 800; letter-spacing: -.025em; line-height: 1.2; }
.post-card small { font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.article { max-width: 860px; margin: 0 auto; }
.article .doc-card { margin-top: 24px; }

/* ------------------------------------------------------------------ portfolio */
.proj-grid { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.proj-grid li[hidden] { display: none; }
.proj { display: block; height: 100%; padding: 8px; border-radius: 26px; background: #fff; color: var(--ink); text-decoration: none; transition: transform .4s var(--spring); }
.proj:hover { transform: translateY(-4px) rotate(-1deg); color: var(--ink); }
.proj .img { display: grid; place-items: center; aspect-ratio: 4/3; border-radius: 20px; overflow: hidden; font-family: var(--display); font-size: 30px; font-weight: 800; }
.proj .img img { width: 100%; height: 100%; object-fit: cover; }
.proj b { display: block; padding: 10px 8px 4px; font-weight: 700; font-size: 15.5px; }
.proj small { display: block; padding: 0 8px 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.count-badge { display: inline-grid; place-items: center; min-width: 44px; height: 36px; padding: 0 10px; border-radius: 999px; background: var(--yellow); font-size: 16px; vertical-align: middle; font-family: var(--text); letter-spacing: 0; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.feat-proj { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; list-style: none; margin: 32px 0 0; padding: 6px max(16px, calc((100vw - 1320px)/2 + 32px)) 20px; scroll-padding: 0 max(16px, calc((100vw - 1320px)/2 + 32px)); scrollbar-width: thin; }
.feat-proj li { flex: 0 0 min(82vw, 380px); scroll-snap-align: start; }
.feat-proj .proj { padding: 10px; border-radius: 30px; box-shadow: var(--shadow-1); }
.feat-proj .proj b { font-family: var(--display); font-size: 21px; font-weight: 800; letter-spacing: -.03em; padding: 14px 10px 2px; }
.feat-proj .proj small { padding: 0 10px 8px; }

/* ------------------------------------------------------------------ contact & forms */
.paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; max-width: 960px; margin: 32px auto 0; }
.path { display: flex; gap: 16px; align-items: center; text-align: left; padding: 20px; border-radius: 30px; border: 3px solid transparent; background: #fff; color: var(--ink); text-decoration: none; cursor: pointer; transition: transform .35s var(--spring), border-color .2s; }
.path:hover { transform: translateY(-3px); color: var(--ink); }
.path[aria-current="true"], .path[aria-selected="true"] { border-color: var(--blue-d); }
.path .ico { flex-shrink: 0; width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; }
.path b { display: block; font-family: var(--display); font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
.path small { display: block; margin-top: 2px; font-size: 14.5px; color: var(--muted); }
.form-card { padding: clamp(20px, 3vw, 32px); border-radius: 36px; background: #fff; }
.form { display: grid; gap: 14px; margin-top: 18px; }
.form .two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.form label { display: grid; gap: 6px; font-size: 14px; font-weight: 700; }
.form label .opt { font-weight: 500; color: var(--muted); }
.form input:not([type=checkbox]), .form select, .form textarea { width: 100%; height: 52px; padding: 0 16px; border: 0; border-radius: 16px; background: var(--bg); font-size: 15px; font-weight: 500; }
.form textarea { height: auto; padding: 14px 16px; resize: vertical; }
.form .check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; font-weight: 500; color: var(--muted); line-height: 1.5; }
.form .check input { margin-top: 2px; width: 20px; height: 20px; accent-color: var(--blue-d); flex-shrink: 0; }
.form .submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.form .submit-row span { font-size: 13.5px; font-weight: 600; color: var(--muted); }
.form .hp { position: absolute; left: -9999px; }
.form-status { margin-top: 16px; padding: 22px; border-radius: 26px; background: var(--t-green); }
.form-status[hidden] { display: none; }
.form-status.err { background: #FDE2E1; }
.company { padding: 26px; border-radius: 36px; background: var(--ink); color: #fff; font-size: 15px; line-height: 1.6; }
.company .prose { color: #D0D5DD; font-size: 15px; }
.company .prose a { color: #fff; }
.company .prose h2, .company .prose h3, .company .prose h4 { color: #fff; font-size: 20px; }
.contact-cols { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 28px; align-items: flex-start; }
.contact-cols > :first-child { flex: 999 1 520px; min-width: 0; }
.contact-cols > aside { flex: 1 1 280px; }
.step { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.03em; }
.step span { padding: 4px 12px; border-radius: 999px; font-family: var(--text); font-size: 13px; letter-spacing: 0; }

/* ------------------------------------------------------------------ footer */
.ftr { padding: 0 12px 12px; margin-top: clamp(72px, 9vw, 120px); }
.ftr-box { max-width: 1400px; margin: 0 auto; padding: clamp(28px, 4vw, 56px) clamp(16px, 3vw, 40px) 24px; border-radius: 44px; background: #fff; }
.ftr-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.prod-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px; border-radius: 30px; color: var(--ink); text-decoration: none; transition: transform .45s var(--spring); }
.prod-card:hover { transform: rotate(-1deg) scale(1.02); color: var(--ink); }
.prod-card:nth-child(2):hover { transform: rotate(1deg) scale(1.02); }
.prod-card .lbl { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #fff; font-size: 12px; font-weight: 700; }
.prod-card b { display: block; margin-top: 10px; font-family: var(--display); font-size: 30px; font-weight: 800; letter-spacing: -.04em; }
.prod-card small { display: block; margin-top: 2px; font-size: 15px; color: var(--ink-2); }
.prod-card i { font-style: normal; flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-weight: 800; }
.nl { padding: 24px; border-radius: 30px; background: var(--t-blue); }
.nl b { display: block; font-family: var(--display); font-size: 21px; font-weight: 800; letter-spacing: -.03em; }
.nl p { margin: 4px 0 12px; font-size: 14px; color: var(--ink-2); }
.nl .field { display: flex; gap: 6px; padding: 5px; border-radius: 999px; background: #fff; }
.nl input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 0; background: transparent; font-size: 15px; }
.nl button { height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--blue-d); color: #fff; font-weight: 700; cursor: pointer; }
.nl small { display: block; margin-top: 8px; font-size: 12.5px; color: var(--ink-2); }
.ftr-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 32px; margin-top: 44px; }
.ftr-cols p.h { margin: 0 0 12px; font-weight: 800; font-size: 15px; }
.ftr-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 15px; }
.ftr-cols ul a { color: var(--body); text-decoration: none; }
.ftr-cols ul a:hover { color: var(--blue-d); }
.ftr-about { margin: 10px 0 0; font-size: 14.5px; color: var(--muted); line-height: 1.55; }
.social { display: flex; gap: 6px; margin-top: 14px; }
.social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--t-blue-2); color: var(--ink); transition: transform .3s var(--spring); }
.social a:hover { transform: scale(1.12) rotate(-8deg); color: var(--blue-d); }
.badges { list-style: none; margin: 36px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.badges li { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--t-green-2); font-size: 13px; font-weight: 700; }
.badges li i { width: 8px; height: 8px; border-radius: 50%; background: #82B541; }
.badges li.de { background: var(--t-yellow); }
.ftr-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 24px; margin-top: 28px; padding-top: 20px; border-top: 1.5px dashed rgba(16,24,40,.15); font-size: 14px; color: var(--muted); }
.ftr-bottom nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.ftr-bottom nav a { color: var(--body); }
.ftr-langs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--t-blue-2); }
.ftr-langs a { display: grid; place-items: center; min-width: 44px; height: 36px; border-radius: 999px; font-size: 13px; font-weight: 800; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.ftr-langs a[aria-current="true"] { background: #fff; }
body.has-mobbar .ftr-box { padding-bottom: 96px; }

/* ------------------------------------------------------------------ helpers for motion */
[data-tilt] { will-change: transform; }
.mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-40 { margin-top: 40px; }
.pb-48 { padding-bottom: 48px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* ------------------------------------------------------------------ consent banner (slim, never covers content for long) */
.consent { position: fixed; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 80; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 20px); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 12px; padding: 6px 6px 6px 18px; border-radius: 30px; background: #fff; box-shadow: 0 14px 40px -12px rgba(16,24,40,.35); font-size: 13.5px; animation: wlPop .5s var(--spring) both; }
.consent[hidden] { display: none; }
.consent-btns { display: flex; gap: 4px; }
.consent button { height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--t-blue-2); cursor: pointer; font-weight: 700; font-size: 13.5px; }
.consent button.yes { background: var(--blue-d); color: #fff; }
body.has-mobbar .consent { bottom: calc(80px + env(safe-area-inset-bottom)); }
.linklike { padding: 0; border: 0; background: none; color: var(--body); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.linklike:hover { color: var(--blue-d); }

/* ------------------------------------------------------------------ design sections (home, services) */
.stat { display: flex; flex-direction: column; } .stat dd { order: -1; }
.svc-card { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 280px; padding: 26px; border-radius: 30px; color: var(--ink); text-decoration: none; transition: transform .45s var(--spring); }
.svc-card:hover { transform: translateY(-6px) rotate(-1.2deg); color: var(--ink); }
.grid > :nth-child(even).svc-card:hover { transform: translateY(-6px) rotate(1.2deg); }
.svc-ico { width: 52px; height: 52px; border-radius: 18px; background: #fff; display: grid; place-items: center; }
.svc-card b { display: block; font-family: var(--display); font-size: 24px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.svc-card small { display: block; margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.center-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 20px; }
.center-row span { font-size: 14.5px; color: var(--muted); }
.proj-line { display: block; padding: 0 10px 8px; font-size: 14.5px; line-height: 1.5; color: var(--body); }
.do-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; margin-top: 36px; }
.do-card { padding: 26px; border-radius: 30px; background: #fff; transition: transform .45s var(--spring); }
.do-card:hover { transform: translateY(-5px) rotate(-.8deg); }
.do-card .num { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; font-family: var(--display); font-weight: 800; }
.do-card h3 { margin: 16px 0 0; font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
.do-card p { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.do-card.dark { background: var(--ink); color: #fff; }
.do-card.dark p { color: #D0D5DD; }
.do-card.dark a { display: inline-block; margin-top: 14px; font-weight: 700; color: var(--yellow); }
@media (min-width: 980px) { .do-card.span2 { grid-column: span 2; } }
.steps { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; }
.steps li { padding: 26px; border-radius: 30px; }
.steps .n { font-family: var(--display); font-size: 56px; font-weight: 800; line-height: 1; letter-spacing: -.05em; }
.steps h3 { margin: 12px 0 0; font-size: 20px; font-weight: 800; }
.steps p { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.why { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 32px; margin-top: clamp(64px, 8vw, 104px); padding: clamp(28px, 4vw, 52px); border-radius: 44px; background: #fff; }
.why h2 { margin: 0; font-size: clamp(30px, 3.8vw, 50px); line-height: 1; letter-spacing: -.04em; font-weight: 800; }
.why > div > p { margin: 14px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--body); }
.why ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.why li { padding: 18px; border-radius: 24px; background: var(--bg); }
.why h3 { margin: 0; font-size: 18px; font-weight: 800; }
.why li p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.faq-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 32px; align-items: start; }
.faq-split h2 { margin: 0; font-size: clamp(30px, 3.8vw, 50px); line-height: 1; letter-spacing: -.04em; font-weight: 800; }
.acc { display: grid; gap: 8px; }
.acc details { border-radius: 24px; background: #fff; }
.acc summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 62px; padding: 14px 18px 14px 22px; font-size: 16.5px; font-weight: 700; cursor: pointer; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--t-blue-2); display: grid; place-items: center; font-size: 20px; transition: transform .4s var(--spring); }
.acc details[open] summary::after { transform: rotate(45deg); }
.acc details p { margin: 0; padding: 0 22px 20px; font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.acc details[open] p { animation: wlPop .4s var(--spring) both; }
.inquiry { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 32px; margin: clamp(64px, 8vw, 104px) 0 0; padding: clamp(28px, 4vw, 56px); border-radius: 44px; background: var(--blue-d); color: #fff; }
.inquiry h2 { margin: 0; font-size: clamp(30px, 4vw, 52px); line-height: 1; letter-spacing: -.04em; font-weight: 800; }
.inquiry > div > p { margin: 12px 0 0; font-size: 17px; line-height: 1.55; }
.inquiry .chips { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 13.5px; font-weight: 700; }
.inquiry .chips li { padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.18); }
.inquiry .form-card { color: var(--ink); padding: 18px; border-radius: 30px; }
.inquiry .form { margin-top: 0; }
.faq-groups section { margin-top: 40px; }
.faq-groups section[hidden] { display: none; }
.faq-groups .acc details[hidden] { display: none; }
.faq-groups h2 { margin: 0 0 12px; display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--t-blue); font-family: var(--text); font-size: 14px; font-weight: 800; color: var(--blue-ink); }
.dark-strip { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: 56px; padding: 26px; border-radius: 32px; background: var(--ink); color: #fff; }
.dark-strip p { margin: 0; font-family: var(--display); font-size: 22px; font-weight: 800; }
.dark-strip div { display: flex; flex-wrap: wrap; gap: 10px; }
.next-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.next-steps li { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 22px; }
.next-steps .n { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-weight: 800; }
.next-steps small { display: block; font-size: 14.5px; color: var(--ink-2); }
.company dl { margin: 18px 0 0; display: grid; gap: 8px; font-size: 14.5px; }
.company dl div { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 16px; background: rgba(255,255,255,.08); }
.company dt { color: #D0D5DD; } .company dd { margin: 0; text-align: right; }
.company dd a { color: #fff; }
.company address { font-style: normal; margin-top: 8px; color: #D0D5DD; }
.legal-doc { max-width: 860px; margin: 24px auto 0; }
.legal-doc .prose h2 { font-size: clamp(22px, 2.4vw, 28px); margin-top: 1.4em; }
.client-strip { margin-top: 56px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.client-strip .row { display: flex; gap: 12px; width: max-content; animation: wlMarquee 45s linear infinite; }
.client-strip span { display: inline-flex; align-items: center; height: 56px; padding: 0 24px; border-radius: 999px; background: #fff; font-family: var(--display); font-size: 19px; font-weight: 800; white-space: nowrap; }
.feat-grid { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 16px; }
.feat-grid .proj { padding: 10px; border-radius: 32px; box-shadow: var(--shadow-1); }
.feat-grid .proj b { font-family: var(--display); font-size: 22px; font-weight: 800; letter-spacing: -.03em; padding: 4px 10px 2px; }
.feat-grid .proj small { padding: 10px 10px 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.hero .h-hero { hyphens: manual; -webkit-hyphens: manual; }

/* ------------------------------------------------------------------ designed plugin visuals (replace screenshots) */
.mock { display: grid; place-items: center; gap: 12px; min-height: 280px; aspect-ratio: 4/3; padding: 18px; border-radius: 28px; background: var(--bg); transition: transform .5s var(--spring); }
.mock-grad { background: linear-gradient(150deg, var(--t-blue), var(--t-violet)); }
.mock-grad-green { background: linear-gradient(150deg, var(--t-green), var(--t-blue)); }
.mock-card { padding: 18px; border-radius: 22px; background: #fff; box-shadow: 0 24px 50px -20px rgba(16,24,40,.4); font-size: 13.5px; }
.mock-ttl { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.mock-ttl b { font-family: var(--display); font-weight: 800; font-size: 16px; }
.mock-ttl i { font-style: normal; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--t-blue-2); color: var(--blue-d); }
.mock-row { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; padding: 10px 12px; border-radius: 14px; background: var(--bg); }
.mock-row.on { background: var(--t-blue-2); box-shadow: inset 0 0 0 2px var(--blue); font-weight: 600; }
.mock-row span:last-child { color: var(--muted); }
.mock-list { display: grid; gap: 6px; }
.mock-list span { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--bg); }
.mock-list small { color: var(--muted); font-size: 12px; }
.mock-styles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.mock-styles > div { display: grid; gap: 12px; align-content: space-between; min-height: 150px; padding: 16px; border-radius: 22px; background: var(--t-blue-2); }
.mock-styles b { font-family: var(--display); font-size: 17px; font-weight: 800; }
.mock-styles .pill { justify-self: start; padding: 7px 12px; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 700; }
.mock-styles .sel { display: flex; justify-content: space-between; padding: 9px 12px; border-radius: 12px; background: #fff; font-size: 13px; font-weight: 600; }
.mock-styles .sel i { font-style: normal; }
.mock-styles .radio { font-size: 13px; font-weight: 600; line-height: 1.7; }
.mock-table { display: block; aspect-ratio: auto; min-height: 0; padding: 12px; background: var(--t-blue-2); font-size: 13.5px; }
.mock-table .tr { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 6px; margin-top: 4px; padding: 10px 12px; border-radius: 14px; background: #fff; }
.mock-table .th { margin-top: 0; background: transparent; font-weight: 700; color: var(--muted); }
.mock-route { display: grid; justify-items: center; gap: 0; width: 80%; }
.mock-route .node { display: grid; gap: 2px; width: 100%; padding: 14px 16px; border-radius: 18px; background: #fff; font-weight: 700; text-align: center; box-shadow: 0 20px 40px -18px rgba(16,24,40,.35); }
.mock-route .node.on { box-shadow: inset 0 0 0 2px var(--blue), 0 20px 40px -18px rgba(16,24,40,.35); }
.mock-route small { font-weight: 500; font-size: 12.5px; color: var(--muted); }
.mock-route .line { width: 3px; height: 34px; background: repeating-linear-gradient(var(--blue) 0 6px, transparent 6px 11px); }
.mock-xlsx { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 20px; background: var(--t-green); font-weight: 700; animation: wlFloatC 6s ease-in-out infinite; }
.mock-xlsx span { padding: 4px 8px; border-radius: 8px; background: var(--green); color: #fff; font-size: 12px; }
.mock-done { font-size: 13.5px; font-weight: 700; color: var(--green-ink); }

.cat-text { margin-top: 64px; max-width: 980px; }
.cat-text .doc-card { padding: clamp(22px, 4vw, 44px); }

/* ------------------------------------------------------------------ services menu (4 pillars) */
.mega-svc2 { max-width: 1180px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mega-pillar { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 22px; }
.mega-ptitle { display: flex; gap: 12px; padding: 8px; border-radius: 16px; color: var(--ink); text-decoration: none; transition: transform .35s var(--spring); }
.mega-ptitle:hover { transform: translateY(-2px); color: var(--ink); }
.mega-ptitle b { display: block; font-family: var(--display); font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.mega-ptitle small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.mega-pillar ul { display: grid; gap: 2px; }
.mega-pillar ul a { display: block; padding: 7px 10px; border-radius: 12px; font-size: 14.5px; font-weight: 600; color: var(--ink); text-decoration: none; }
.mega-pillar ul a:hover { background: rgba(255,255,255,.75); color: var(--blue-d); }
.mega-strip { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 12px 16px; border-radius: 18px; background: var(--bg); font-size: 14px; }
.mega-strip a { color: var(--body); font-weight: 600; text-decoration: none; }
.mega-strip a:hover { color: var(--blue-d); }
.mega-strip a.hub { color: var(--ink); font-weight: 800; }
.mega-strip .sep { flex: 1; }
.mega-strip .lbl { font-weight: 700; color: var(--muted); }
.ftr-regions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 32px; font-size: 14px; }
.ftr-regions p { margin: 0; font-weight: 800; }
.ftr-regions a { color: var(--body); }

/* ------------------------------------------------------------------ service, city, industry and guide pages */
.land-h1 { margin-top: 14px; font-size: clamp(38px, 5vw, 72px); hyphens: manual; }
.land-meta { margin: 16px 0 0; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.land-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 14px; margin-top: 40px; }
.land-pillar { display: flex; flex-direction: column; padding: 24px; border-radius: 30px; }
.land-pillar h2 { margin: 16px 0 0; font-size: 28px; letter-spacing: -.03em; font-weight: 800; }
.land-pillar h2 a { color: var(--ink); text-decoration: none; }
.land-pillar h2 a:hover { color: var(--blue-d); }
.land-pillar > p { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.land-pillar ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 4px; }
.land-pillar ul a { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.7); color: var(--ink); font-weight: 600; font-size: 15px; text-decoration: none; transition: transform .3s var(--spring); }
.land-pillar ul a:hover { transform: translateX(4px); color: var(--blue-d); }
.land-pillar .b { align-self: flex-start; }
.land-cards { margin-top: 40px; }
.svc-card.land-card { min-height: 0; flex-direction: row; align-items: flex-end; gap: 18px; }
.land-card .arr { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-weight: 800; }
.land-regions { margin-top: 16px; padding: 22px; border-radius: 30px; background: #fff; }
.land-regions p { margin: 0 0 12px; font-family: var(--display); font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.land-regions ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.land-regions a { display: inline-flex; align-items: center; height: 42px; padding: 0 16px; border-radius: 999px; background: var(--t-yellow); color: var(--ink); font-weight: 700; font-size: 14.5px; text-decoration: none; transition: transform .3s var(--spring); }
.land-regions a:hover { transform: scale(1.05); color: var(--ink); }
.land-layout { margin-top: clamp(40px, 6vw, 72px); }
.land-prose h2 { font-size: clamp(26px, 2.8vw, 36px); }
.land-prose h2:first-child { margin-top: 0; }
.land-prose .note { margin-top: 1em; padding: 16px 20px; border-radius: 20px; background: var(--t-blue-2); color: var(--ink-2); }
@media (min-width: 1024px) { .land-side { position: sticky; top: 96px; } }
.mega-strip .sep { flex-basis: 100%; height: 0; }

/* popular plugins in the plugin menu: 2 columns */
.mega-pop { display: grid; gap: 2px 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* old WordPress column rows inside articles and docs: stacked, they don't fit the narrow text column */
.article .prose .cols, .doc-layout .prose .cols { grid-template-columns: minmax(0, 1fr) !important; }
.article .prose .col h2, .doc-layout .prose .col h2 { font-size: clamp(26px, 2.6vw, 34px); hyphens: none; }

/* city pages: region map */
.land-local { align-items: center; }
.region-map { margin: 0; padding: 14px; border-radius: 30px; background: #fff; box-shadow: var(--shadow-1); }
.region-map svg { display: block; width: 100%; height: auto; }
.region-map figcaption { margin: 4px 6px 4px; font-weight: 700; font-size: 14.5px; text-align: center; color: var(--ink-2); }
.rm-river { fill: none; stroke: var(--t-blue); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.rm-river-l { font: italic 600 11px var(--text); fill: var(--blue-d); opacity: .6; }
.rm-route { stroke: var(--blue-d); stroke-width: 2.5; stroke-dasharray: 6 6; stroke-linecap: round; opacity: .75; animation: rmDash 1.6s linear infinite, rmIn .8s ease-out both; }
.rm-dot { fill: #fff; stroke: var(--ink-2); stroke-width: 2; }
.rm-dot.hot { fill: var(--yellow); stroke: var(--ink); stroke-width: 2.5; animation: rmPop .6s var(--spring) .5s both; transform-box: fill-box; transform-origin: center; }
.rm-label { font: 600 11.5px var(--text); fill: var(--ink-2); }
.rm-label.hot { font: 800 15px var(--display); fill: var(--ink); }
.rm-label.home { font: 800 13px var(--display); fill: var(--blue-d); }
.rm-home { fill: var(--blue-d); stroke: #fff; stroke-width: 3; }
.rm-pulse { fill: var(--blue); opacity: .5; transform-box: fill-box; transform-origin: center; animation: rmPulse 2.2s ease-out infinite; }
@keyframes rmDash { to { stroke-dashoffset: -24; } }
@keyframes rmIn { from { opacity: 0; } }
@keyframes rmPop { from { transform: scale(0); } }
@keyframes rmPulse { from { transform: scale(1); opacity: .55; } to { transform: scale(3.2); opacity: 0; } }

/* project images below the page head */
.land-shots { position: relative; display: flex; justify-content: center; gap: 0; margin: -34px auto 0; padding: 0 12px; pointer-events: none; }
.land-shots .shot { pointer-events: auto; position: relative; width: min(30%, 340px); margin: 0 -14px; padding: 8px 8px 10px; border-radius: 22px; background: #fff; box-shadow: 0 26px 50px -22px rgba(16,24,40,.45); text-decoration: none; color: var(--ink); transition: transform .45s var(--spring); }
.land-shots .shot img { display: block; width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 15px; }
.land-shots .shot span { display: block; padding: 8px 4px 0; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.land-shots .s1 { transform: rotate(-5deg) translateY(14px); animation: wlFloatA 7s ease-in-out infinite; z-index: 1; }
.land-shots .s2 { transform: rotate(2deg); animation: wlFloatB 8s ease-in-out infinite; z-index: 2; }
.land-shots .s3 { transform: rotate(6deg) translateY(18px); animation: wlFloatC 6.5s ease-in-out infinite; z-index: 1; }
.land-shots .shot:hover { transform: rotate(0) scale(1.04); z-index: 3; }
.land-stats { margin-top: clamp(40px, 5vw, 64px); }

/* references: 3 per row with bigger images */
.proj-grid.land-refs { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.land-refs .proj { padding: 10px; border-radius: 30px; }
.land-refs .proj .img { aspect-ratio: 16/10; }
.land-refs .proj b { font-size: 18px; padding: 12px 8px 4px; }
@media (max-width: 700px) { .land-shots .shot { width: 46%; } .land-shots .s3 { display: none; } }
.rm-label { paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }

/* table of contents in knowledge base articles (rebuilt from the old TOC plugin markup) */
.prose .toc { margin: 1.4em 0 0; padding: 18px 22px 20px; background: var(--t-blue-2); border-radius: 18px; }
.prose .toc-h { margin: 0; font: 700 12px/1.2 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--blue-ink); }
.prose .toc ol { margin-top: .6em; }
.prose .toc li + li { margin-top: .25em; }
.prose .toc a { text-decoration: none; font-weight: 600; }
.prose .toc a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ website price calculator */
.calc-head { grid-template-columns: 1.3fr 1fr; align-items: center; }
.calc-incl { background: rgba(255,255,255,.75); border-radius: 22px; padding: 22px 24px; }
.calc-incl b { font-family: var(--display); font-size: 18px; }
.calc-incl ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; font-weight: 600; font-size: 15px; }
.calc-incl li span { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 10px; border-radius: 50%; background: var(--t-green); color: var(--green); font-size: 13px; }
.calc { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; margin-top: 32px; align-items: start; scroll-margin-top: 110px; }
.calc-card { background: #fff; border-radius: 28px; box-shadow: var(--shadow-card); padding: 26px clamp(18px, 3vw, 36px) 22px; min-height: 520px; display: flex; flex-direction: column; }
.calc-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.calc-prog { flex: 1 1 200px; height: 8px; border-radius: 99px; background: var(--t-blue-2); overflow: hidden; }
.calc-prog i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--violet)); transition: width .5s var(--spring); }
.calc-count { font-size: 13px; font-weight: 700; color: var(--muted); }
.calc-price { margin-left: auto; padding: 8px 16px; border-radius: 99px; background: var(--ink); color: #fff; font-family: var(--display); font-size: 20px; font-weight: 800; white-space: nowrap; }
.calc-price small { font: 600 13px var(--text); opacity: .7; }
.calc-price b, .calc-live-total b, .calc-done h2 span { display: inline-block; }
.bump { animation: calcBump .45s var(--spring); }
@keyframes calcBump { 40% { transform: scale(1.12); } }
.calc-form { flex: 1; margin-top: 26px; }
.calc-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.calc.js .calc-step[data-q] { display: none; }
.calc.js .calc-step[data-q].on { display: block; animation: calcIn .45s cubic-bezier(.2,.8,.2,1); }
.calc.js .calc-step.on.from-l { animation-name: calcInL; }
@keyframes calcIn { from { opacity: 0; transform: translateX(28px); } }
@keyframes calcInL { from { opacity: 0; transform: translateX(-28px); } }
.calc:not(.js) .calc-step[data-q] { margin-bottom: 34px; }
.calc-step legend { display: flex; align-items: center; gap: 14px; padding: 0; font-family: var(--display); font-weight: 800; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.12; letter-spacing: -.02em; color: var(--ink); }
.calc-ico { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; color: var(--ink); }
.calc-desc { margin: 12px 0 0; color: var(--muted); max-width: 62ch; }
.calc-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 22px; }
.calc-opts.many { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.calc-opt { position: relative; cursor: pointer; }
.calc-opt input { position: absolute; opacity: 0; inset: 0; pointer-events: none; }
.calc-box { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 18px 18px 16px; border-radius: 20px; background: var(--bg); border: 2px solid transparent; transition: transform .2s var(--spring), border-color .2s, background .2s, box-shadow .2s; }
.calc-box b { font-size: 16.5px; padding-right: 28px; }
.calc-box small { color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.calc-box em { margin-top: auto; padding-top: 6px; font-style: normal; font-weight: 800; font-size: 13.5px; color: var(--blue-d); }
.calc-tick { position: absolute; top: 16px; right: 16px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(16,24,40,.18); background: #fff; transition: all .2s var(--spring); }
.calc-opt input[type=checkbox] ~ .calc-box .calc-tick { border-radius: 7px; }
.calc-opt:hover .calc-box { transform: translateY(-2px); box-shadow: var(--shadow-1); background: #fff; border-color: var(--t-blue); }
.calc-opt input:checked ~ .calc-box { background: var(--t-blue-2); border-color: var(--blue); }
.calc-opt input:checked ~ .calc-box .calc-tick { border-color: var(--blue); background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/14px no-repeat; transform: scale(1.1); }
.calc-opt input:focus-visible ~ .calc-box { outline: 3px solid var(--blue-d); outline-offset: 3px; }
.calc-range { margin-top: 26px; padding: 26px 24px 18px; border-radius: 22px; background: var(--bg); }
.calc-range output { font-family: var(--display); font-weight: 800; font-size: 64px; line-height: 1; letter-spacing: -.04em; color: var(--blue-d); }
.calc-range > span { margin-left: 10px; font-weight: 700; font-size: 18px; }
.calc-range input { --p: 0%; width: 100%; margin: 22px 0 6px; height: 10px; border-radius: 99px; appearance: none; -webkit-appearance: none; background: linear-gradient(90deg, var(--blue) var(--p), var(--t-blue) var(--p)); cursor: pointer; }
.calc-range input::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 4px solid var(--blue); box-shadow: 0 6px 16px -6px rgba(37,96,214,.7); transition: transform .2s var(--spring); }
.calc-range input::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 4px solid var(--blue); }
.calc-range input:active::-webkit-slider-thumb { transform: scale(1.18); }
.calc-range-scale { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.calc-text { width: 100%; margin-top: 22px; padding: 16px 18px; border-radius: 16px; border: 2px solid var(--t-blue); background: var(--bg); font-size: 17px; }
.calc-text:focus { outline: none; border-color: var(--blue); background: #fff; }
.calc-err { margin: 14px 0 0; color: #B42318; font-weight: 700; font-size: 14px; }
.calc-nav { display: flex; align-items: center; gap: 12px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.calc-nav-r { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.calc-nav [hidden] { display: none !important; }
.calc-nav button:disabled { opacity: .35; cursor: default; }
.calc-skip { border: 0; background: none; font-weight: 700; font-size: 14.5px; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.calc.is-done .calc-nav { justify-content: space-between; }
.calc-done-head h2 { margin: 0; font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -.03em; line-height: 1.1; }
.calc-done-head h2 span { color: var(--blue-d); }
.calc-done-head p { margin: 10px 0 0; color: var(--muted); max-width: 64ch; }
.calc-sum { list-style: none; margin: 22px 0 0; padding: 0; border-radius: 20px; background: var(--bg); overflow: hidden; }
.calc-sum li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 18px; font-size: 15px; border-bottom: 1px solid rgba(16,24,40,.06); animation: calcIn .4s backwards; }
.calc-sum li:nth-child(2) { animation-delay: .04s; } .calc-sum li:nth-child(3) { animation-delay: .08s; } .calc-sum li:nth-child(4) { animation-delay: .12s; } .calc-sum li:nth-child(n+5) { animation-delay: .16s; }
.calc-sum li.tot { background: var(--ink); color: #fff; font-size: 17px; border: 0; }
.calc-note { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.calc-send { margin-top: 26px; padding: 22px; border-radius: 22px; background: var(--t-yellow-2); }
.calc-send h3 { margin: 0 0 14px; font-size: 22px; }
.calc-send .form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.calc-side { position: sticky; top: 104px; padding: 22px; border-radius: 26px; background: var(--ink); color: #fff; }
.calc-side > b { font-family: var(--display); font-size: 20px; }
.calc-live { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; max-height: 340px; overflow: auto; }
.calc-live li { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: rgba(255,255,255,.82); animation: calcIn .35s; }
.calc-live li span:last-child { font-weight: 700; color: #fff; white-space: nowrap; }
.calc-live-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.18); }
.calc-live-total b { font-family: var(--display); font-size: 30px; color: var(--yellow); }
.calc-side p { margin: 10px 0 0; font-size: 12.5px; color: rgba(255,255,255,.6); }
.calc-text-block { margin-top: 40px; }
.calc-made { margin: 22px 0 0; font-size: 14px; color: var(--muted); text-align: center; }
@media (max-width: 960px) {
  .calc-head { grid-template-columns: 1fr; }
  .calc { grid-template-columns: 1fr; }
  .calc-side { position: static; }
}
@media (max-width: 560px) {
  .calc-card { min-height: 0; border-radius: 22px; }
  .calc-price { margin-left: 0; font-size: 18px; }
  .calc-opts, .calc-opts.many { grid-template-columns: 1fr; }
  .calc-send .form .two { grid-template-columns: 1fr; }
  .calc-range output { font-size: 52px; }
}
@media (prefers-reduced-motion: reduce) { .calc .calc-step.on, .calc-sum li, .calc-live li, .bump { animation: none !important; } }
.calc-send .form input:not([type=checkbox]), .calc-send .form textarea { background: #fff; }
.calc-box b { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.calc-box em:empty { display: none; }
.calc.is-done { grid-template-columns: minmax(0, 1fr); }
.calc.is-done .calc-side { display: none; }

/* ================================================================== service pages 2.0 (landing.html + land_visuals.html) */
.lhero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; }
.lhero .lead { max-width: 54ch; }
.lhero-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0 0; padding: 0; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.lhero-trust li::before { content: "✓"; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 8px; border-radius: 50%; background: #fff; color: var(--green); font-size: 12px; }
.lhero-vis { position: relative; min-width: 0; }
.lpills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 22px 0 0; font-size: 14px; }
.lpills span { font-weight: 700; color: var(--muted); margin-right: 4px; }
.lpills a { padding: 8px 14px; border-radius: 99px; background: #fff; color: var(--ink); font-weight: 700; text-decoration: none; box-shadow: var(--shadow-1); transition: transform .25s var(--spring), background .2s; }
.lpills a:hover { transform: translateY(-2px); background: var(--t-blue-2); }
.lpills a[aria-current] { background: var(--ink); color: #fff; }
.lpoints { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; margin-top: 40px; }
.lpoint { position: relative; overflow: hidden; padding: 26px 24px 24px; border-radius: 28px; background: var(--c); transition: transform .35s var(--spring); }
.lpoint:hover { transform: translateY(-4px) rotate(-.4deg); }
.lpoint .num { display: block; font-family: var(--display); font-weight: 800; font-size: 54px; line-height: 1; letter-spacing: -.05em; color: rgba(16,24,40,.14); }
.lpoint h3 { margin: 14px 0 0; font-size: 20px; }
.lpoint p { margin: 8px 0 0; color: var(--ink-2); font-size: 15px; }
.lintro { max-width: 860px; margin: 56px auto 0; font-size: 19px; }
.lintro p:first-child { margin-top: 0; }
/* split sections: text left / right with a visual */
.lsplit { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 64px); align-items: center; margin-top: 28px; padding: clamp(26px, 4.5vw, 64px); border-radius: 44px; background: var(--tint); }
.lsplit:first-of-type { margin-top: 56px; }
.lsplit.rev .lsplit-text { order: 2; }
.lsplit-text { min-width: 0; }
.lsplit-text h2 { margin-top: 0; }
.lsplit-text > :last-child { margin-bottom: 0; }
.lsplit-side { min-width: 0; display: grid; place-items: center; }
.lcheck { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; width: 100%; }
.lcheck li { position: relative; padding: 14px 16px 14px 52px; border-radius: 18px; background: #fff; box-shadow: var(--shadow-1); font-weight: 600; font-size: 15px; line-height: 1.45; transition: transform .3s var(--spring); }
.lcheck li:hover { transform: translateX(4px); }
.lcheck li::before { content: ""; position: absolute; left: 14px; top: 13px; width: 26px; height: 26px; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/13px no-repeat; }
.lillu { position: relative; width: min(100%, 320px); aspect-ratio: 1; display: grid; place-items: center; }
.lillu .core { position: relative; z-index: 1; display: grid; place-items: center; width: 46%; aspect-ratio: 1; border-radius: 34%; background: #fff; color: var(--blue-d); box-shadow: var(--shadow-card); animation: lvFloat 6s ease-in-out infinite; }
.lillu i { position: absolute; border-radius: 50%; animation: lvFloat 7s ease-in-out infinite; }
.lillu .b1 { width: 62%; aspect-ratio: 1; left: 2%; top: 4%; background: var(--t-blue); animation-delay: -2s; }
.lillu .b2 { width: 38%; aspect-ratio: 1; right: 4%; top: 18%; background: var(--t-yellow); border-radius: 30%; animation-delay: -4s; }
.lillu .b3 { width: 44%; aspect-ratio: 1; right: 14%; bottom: 2%; background: var(--t-violet); animation-delay: -1s; }
.il-shield .core, .il-alert .core { color: var(--green); } .il-coin .core, .il-star .core { color: var(--amber); } .il-pin .core, .il-target .core { color: #D92D20; } .il-chart .core, .il-bolt .core { color: var(--violet); }
@keyframes lvFloat { 50% { transform: translateY(-10px) rotate(2deg); } }
/* steps: dark interactive process */
.lsteps, .lcards { margin-top: 28px; }
.lsteps { padding: clamp(26px, 4.5vw, 64px); border-radius: 44px; background: var(--ink); color: #fff; }
.lsteps .lsteps-head h2, .lsteps .prose, .lsteps .prose p { color: #fff; }
.lsteps .prose a { color: var(--yellow); }
.lsteps-head h2 { margin: 0; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.05; letter-spacing: -.04em; }
.lsteps-head .prose { margin-top: 12px; max-width: 70ch; }
.lsteps-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px; margin-top: 30px; align-items: start; }
.lsteps-nav { display: grid; gap: 10px; }
.lsteps-nav button { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 0; border-radius: 20px; background: rgba(255,255,255,.07); color: rgba(255,255,255,.75); text-align: left; font-weight: 700; font-size: 16px; cursor: pointer; transition: background .25s, color .25s, transform .3s var(--spring); }
.lsteps-nav button:hover { background: rgba(255,255,255,.12); transform: translateX(4px); }
.lsteps-nav button[aria-selected=true] { background: #fff; color: var(--ink); }
.lsteps-nav .n { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: rgba(255,255,255,.12); font-family: var(--display); font-weight: 800; }
.lsteps-nav button[aria-selected=true] .n { background: var(--yellow); }
.lsteps-nav .bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--blue); }
.lsteps.run .lsteps-nav button[aria-selected=true] .bar { animation: lvBar 7s linear forwards; }
.lsteps.paused .lsteps-nav .bar { animation-play-state: paused !important; }
@keyframes lvBar { to { width: 100%; } }
.lsteps-panels { position: relative; min-height: 100%; }
.lsteps-panel { position: relative; overflow: hidden; padding: clamp(22px, 3vw, 36px); border-radius: 28px; background: linear-gradient(135deg, var(--blue-d), var(--violet)); animation: calcIn .5s cubic-bezier(.2,.8,.2,1); }
.lsteps.js .lsteps-panel[data-off] { display: none; }
.lsteps:not(.js) .lsteps-panel + .lsteps-panel { margin-top: 12px; }
.lsteps-panel .big { position: absolute; right: 18px; top: -10px; font-family: var(--display); font-weight: 800; font-size: 140px; line-height: 1; letter-spacing: -.06em; color: rgba(255,255,255,.12); }
.lsteps-panel h3 { position: relative; margin: 0; font-size: 24px; color: #fff; }
.lsteps-panel .prose { position: relative; margin-top: 10px; font-size: 16.5px; }
.lcards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; margin-top: 24px; }
.lcard { padding: 26px; border-radius: 28px; background: var(--c); }
.lcard h3 { margin: 0; font-size: 21px; }
.lcard .prose { margin-top: 8px; font-size: 15.5px; }
.lcards .lsteps-head { padding: 0 6px; }
/* contact person */
.lperson { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; margin-top: 28px; padding: clamp(26px, 4vw, 52px); border-radius: 44px; background: var(--t-yellow); }
.lp-ava { position: relative; display: inline-grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, var(--blue), var(--violet)); color: #fff; font-family: var(--display); font-weight: 800; font-size: 20px; }
.lp-ava img { width: 100%; height: 100%; object-fit: cover; }
.lp-ava.big { width: clamp(120px, 16vw, 190px); height: clamp(120px, 16vw, 190px); font-size: clamp(38px, 5vw, 60px); box-shadow: 0 0 0 8px #fff, var(--shadow-card); }
.lperson-text small { font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--yellow-ink); }
.lperson-text b { display: block; margin-top: 6px; font-family: var(--display); font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -.03em; line-height: 1.05; }
.lperson-text > span { display: block; margin-top: 4px; font-weight: 700; color: var(--ink-2); }
.lperson-text p { margin: 14px 0 0; max-width: 60ch; font-size: 18px; color: var(--ink); }
.lperson .hero-ctas { margin-top: 18px; align-items: center; }
.lperson-mail { font-weight: 700; }
.inq-person { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.inq-person .lp-ava { box-shadow: 0 0 0 3px rgba(255,255,255,.5); }
.inq-person b { display: block; color: #fff; } .inq-person small { color: rgba(255,255,255,.75); font-size: 13.5px; }
.lauthor { display: flex; align-items: center; gap: 14px; margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--line); }
.lauthor b { display: block; } .lauthor span { font-size: 14px; color: var(--muted); }
.ltoc ol { margin: 0; padding: 0 10px 0 28px; display: grid; gap: 6px; font-size: 14.5px; }
.ltoc a { font-weight: 600; text-decoration: none; }
.ltoc a.on { color: var(--ink); font-weight: 800; }
/* fit check */
.lfit { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 4vw, 56px); align-items: center; margin-top: 28px; padding: clamp(26px, 4.5vw, 64px); border-radius: 44px; background: linear-gradient(135deg, var(--t-yellow), var(--t-violet)); }
.lfit-head h2 { margin: 0; font-size: clamp(30px, 3.6vw, 48px); letter-spacing: -.04em; line-height: 1.02; }
.lfit-head p { margin: 12px 0 0; color: var(--ink-2); font-weight: 600; }
.lfit-box { padding: 18px; border-radius: 28px; background: #fff; box-shadow: var(--shadow-card); display: grid; gap: 8px; }
.lfit-item { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 13px 14px; border-radius: 16px; cursor: pointer; font-weight: 600; transition: background .2s; }
.lfit-item:hover { background: var(--bg); }
.lfit-item input { position: absolute; opacity: 0; pointer-events: none; }
.lfit-item .tick { flex: none; width: 26px; height: 26px; border-radius: 8px; border: 2px solid rgba(16,24,40,.2); transition: all .25s var(--spring); }
.lfit-item input:checked + .tick { background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/14px no-repeat; border-color: var(--violet); transform: scale(1.12) rotate(-6deg); }
.lfit-item input:focus-visible + .tick { outline: 3px solid var(--blue-d); outline-offset: 2px; }
.lfit-res { margin-top: 8px; padding: 16px; border-radius: 18px; background: var(--bg); display: grid; gap: 10px; }
.lfit-res i { display: block; height: 10px; border-radius: 99px; background: #fff; overflow: hidden; }
.lfit-res i b { display: block; height: 100%; width: 6%; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--blue)); transition: width .6s var(--spring); }
.lfit-res p { margin: 0; font-weight: 700; }
.lfit-res .b { justify-self: start; }
@media (max-width: 960px) {
  .lhero { grid-template-columns: 1fr; }
  .lhero-vis .lv { margin: 8px auto 0; }
  .lsplit, .lsplit.rev, .lfit, .lsteps-grid { grid-template-columns: 1fr; }
  .lsplit.rev .lsplit-text { order: 0; }
  .lillu { width: min(70%, 240px); }
}
@media (max-width: 600px) {
  .lperson { grid-template-columns: 1fr; text-align: left; }
  .lsplit, .lsteps, .lfit, .lperson { border-radius: 30px; }
  .lpoint .num { font-size: 42px; }
}

/* ------------------------------------------------------------------ hero graphics (.lv) */
.lv { position: relative; width: 100%; max-width: 520px; margin-left: auto; font-size: 14px; color: var(--ink); }
.lv button { font: inherit; cursor: pointer; }
.lv-card, .lv-serp, .lv-post, .lv-prod, .lv-win, .lv-chat { background: #fff; border-radius: 24px; box-shadow: var(--shadow-card); }
.lv-toggle, .lv-dev, .lv-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 99px; background: #fff; box-shadow: var(--shadow-1); }
.lv-toggle button, .lv-dev button, .lv-tabs button { border: 0; padding: 7px 14px; border-radius: 99px; background: none; font-weight: 700; font-size: 13px; color: var(--muted); transition: background .2s, color .2s; }
.lv-toggle button.on, .lv-dev button.on, .lv-tabs button.on { background: var(--ink); color: #fff; }
.lv-toggle { margin-top: 14px; }
.ln { display: block; height: 7px; border-radius: 9px; background: rgba(16,24,40,.08); }
/* search results */
.lv-serp { padding: 16px; }
.lv-search { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px; border-radius: 99px; background: var(--bg); font-weight: 600; font-size: 15px; }
.lv-g { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: conic-gradient(#4285F4 0 25%, #EA4335 0 50%, #FBBC05 0 75%, #34A853 0); color: #fff; font-weight: 800; font-size: 13px; }
.lv-caret { width: 2px; height: 18px; background: var(--blue-d); animation: lvBlink 1s steps(1) infinite; }
@keyframes lvBlink { 50% { opacity: 0; } }
.lv-rows { position: relative; margin-top: 12px; height: calc(3 * 58px); }
.lv-rows.tall { height: calc(4 * 66px); overflow: hidden; -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
.lv-row { position: absolute; left: 0; right: 0; top: calc(var(--pos, 0) * 66px); height: 58px; padding: 9px 14px; border-radius: 14px; border: 2px solid transparent; display: grid; align-content: center; gap: 3px; transition: top .8s var(--spring), opacity .4s, transform .4s, border-color .3s, background .3s; }
.lv-pack .lv-row { top: calc(var(--pos, 0) * 58px); height: 52px; }
.lv-row small { color: var(--green); font-size: 12px; }
.lv-row .lk { color: #1a0dab; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-row .ln { width: 80%; height: 6px; }
.lv-row.me { background: var(--t-blue-2); border-color: var(--blue); z-index: 2; }
.lv-row.far { opacity: .45; transform: scale(.97); }
.lv-row.ad small b { color: var(--ink); }
.lv-row .sl { display: flex; gap: 10px; font-size: 12px; } .lv-row .sl i { font-style: normal; color: #1a0dab; }
.lv-pack { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.lv-mapmini { position: relative; border-radius: 16px; background: linear-gradient(135deg, #E3F7EE, #EEF3FF); overflow: hidden; }
.lv-mapmini::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(35deg, transparent 0 18px, rgba(255,255,255,.7) 18px 21px), repeating-linear-gradient(-55deg, transparent 0 26px, rgba(255,255,255,.6) 26px 29px); }
.lv-mapmini i { position: absolute; width: 14px; height: 14px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #98A2B3; }
.lv-mapmini i.me { background: #D92D20; width: 18px; height: 18px; animation: lvBounce 1.6s ease-in-out infinite; }
@keyframes lvBounce { 50% { transform: rotate(-45deg) translate(3px, -3px); } }
.lv-pack .lv-rows { height: calc(3 * 58px); margin-top: 0; }
.lv-pack .lv-row b { font-size: 14px; } .lv-pack .lv-row span { font-size: 12px; color: var(--amber); }
/* social ad */
.lv-social { padding-bottom: 70px; }
.lv-post { width: 84%; padding: 14px; transition: transform .3s; }
.lv-ph { display: flex; align-items: center; gap: 10px; }
.lv-av { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--ink); color: #fff; font-weight: 800; font-size: 13px; }
.lv-ph b { display: block; font-size: 14px; } .lv-ph small { color: var(--muted); font-size: 12px; }
.lv-ph i { margin-left: auto; font-style: normal; font-weight: 800; color: #0A66C2; font-size: 13px; }
.net-meta .lv-ph i { color: var(--muted); } .net-meta .lv-av { border-radius: 50%; background: linear-gradient(135deg, #F58529, #DD2A7B, #8134AF); }
.lv-lines { display: grid; gap: 6px; margin: 12px 0; } .lv-lines span { display: block; height: 7px; border-radius: 9px; background: rgba(16,24,40,.08); }
.lv-creative { position: relative; overflow: hidden; display: flex; align-items: flex-end; height: 150px; padding: 16px; border-radius: 16px; background: linear-gradient(135deg, #0A66C2, #5B3FD6); color: #fff; }
.net-meta .lv-creative { background: linear-gradient(135deg, #F58529, #DD2A7B 55%, #8134AF); }
.lv-creative b { position: relative; z-index: 1; font-family: var(--display); font-size: 21px; line-height: 1.1; max-width: 85%; }
.lv-blob { position: absolute; right: -30px; top: -30px; width: 150px; height: 150px; border-radius: 42% 58% 60% 40%; background: rgba(255,255,255,.18); animation: lvSpin 12s linear infinite; }
@keyframes lvSpin { to { transform: rotate(360deg); } }
.lv-cta { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.lv-cta em { font-style: normal; font-weight: 800; padding: 7px 12px; border-radius: 99px; border: 2px solid #0A66C2; color: #0A66C2; }
.net-meta .lv-cta em { border: 0; background: var(--bg); color: var(--ink); }
.lv-target { position: absolute; right: 0; bottom: 0; width: 66%; padding: 14px; border-radius: 20px; background: #fff; box-shadow: var(--shadow-pop); }
.lv-target small, .lv-checks small { font-weight: 800; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lv-chips button { border: 0; padding: 6px 10px; border-radius: 99px; background: var(--bg); font-weight: 700; font-size: 12px; color: var(--muted); transition: all .25s var(--spring); }
.lv-chips button.on { background: var(--blue-d); color: #fff; transform: scale(1.04); }
.lv-meter { display: grid; gap: 4px; margin-top: 10px; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.lv-meter i { display: block; height: 8px; border-radius: 9px; background: var(--bg); overflow: hidden; }
.lv-meter b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--yellow), var(--green)); transition: width .6s var(--spring); }
/* marketplace */
.lv-market { padding-bottom: 40px; }
.lv-prod { width: 58%; padding: 14px; }
.lv-pimg { position: relative; display: grid; place-items: center; height: 150px; border-radius: 16px; background: linear-gradient(135deg, var(--t-yellow), var(--t-green)); }
.lv-pimg em { position: absolute; left: 10px; top: 10px; font-style: normal; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 6px; background: #fff; color: var(--muted); }
.lv-bag { width: 70px; height: 86px; border-radius: 12px 12px 16px 16px; background: #6B4500; box-shadow: inset 0 -16px 0 rgba(0,0,0,.15); position: relative; animation: lvFloat 5s ease-in-out infinite; }
.lv-bag::after { content: ""; position: absolute; left: 14px; right: 14px; top: 26px; height: 22px; border-radius: 6px; background: #FFF3D1; }
.lv-prod > b { display: block; margin-top: 10px; font-size: 14px; } .lv-stars { display: block; color: var(--star); font-size: 13px; } .lv-stars small { color: var(--muted); }
.lv-prod strong { display: block; margin-top: 4px; font-family: var(--display); font-size: 20px; }
.lv-checks { position: absolute; right: 0; top: 30px; width: 52%; padding: 14px; border-radius: 20px; background: #fff; box-shadow: var(--shadow-pop); display: grid; gap: 4px; }
.lv-checks button { display: flex; align-items: center; gap: 8px; border: 0; padding: 6px 4px; background: none; text-align: left; font-weight: 600; font-size: 13px; color: var(--muted); }
.lv-checks button i { flex: none; width: 18px; height: 18px; border-radius: 6px; border: 2px solid rgba(16,24,40,.2); transition: all .25s var(--spring); }
.lv-checks button.on { color: var(--ink); }
.lv-checks button.on i { border-color: var(--green); background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/11px no-repeat; }
/* browser + devices */
.lv-browser { display: grid; justify-items: center; gap: 12px; }
.lv-win { width: 100%; max-width: 520px; overflow: hidden; transition: max-width .7s var(--spring); }
[data-lv-device=tablet] .lv-win { max-width: 340px; }
[data-lv-device=mobile] .lv-win { max-width: 210px; }
.lv-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: var(--bg); }
.lv-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(16,24,40,.15); }
.lv-bar span { margin-left: 8px; padding: 3px 10px; border-radius: 99px; background: #fff; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-bar.dark { background: #1E293B; } .lv-bar.dark span { background: #0F172A; color: #94A3B8; }
.lv-page { padding: 12px; }
.lv-nav { display: flex; align-items: center; gap: 12px; font-size: 11.5px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; }
.lv-nav b { color: var(--blue-d); } .lv-nav em { margin-left: auto; font-style: normal; padding: 5px 10px; border-radius: 99px; background: var(--blue-d); color: #fff; }
[data-lv-device=mobile] .lv-nav span, [data-lv-device=tablet] .lv-nav span:nth-child(n+4) { display: none; }
.lv-hero { margin-top: 12px; padding: 22px 18px; border-radius: 16px; background: linear-gradient(135deg, var(--t-blue), var(--t-violet)); display: grid; gap: 10px; justify-items: start; }
.lv-hero b { font-family: var(--display); font-size: 20px; line-height: 1.1; }
.lv-hero .ln { width: 70%; background: rgba(16,24,40,.12); }
.lv-hero em { font-style: normal; font-weight: 800; font-size: 12px; padding: 7px 12px; border-radius: 99px; background: var(--ink); color: #fff; }
.lv-hero.img { min-height: 110px; align-content: end; background: linear-gradient(160deg, #FFD25A, #DD2A7B); color: #fff; }
.v-hotel .lv-hero.img { background: linear-gradient(160deg, #8FE3BD, #1D4FB8); }
.v-fitness .lv-hero.img { background: linear-gradient(160deg, #FFD25A, #0F7A4E); }
.lv-hero.calm { background: linear-gradient(135deg, #EEF0F3, #E1E6EC); } .v-funeral .lv-hero b { font-family: Georgia, serif; font-weight: 400; }
.lv-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.lv-cards span { display: grid; gap: 6px; padding: 10px; border-radius: 12px; background: var(--bg); font-size: 11.5px; font-weight: 700; }
.lv-cards i { height: 34px; border-radius: 8px; background: var(--t-yellow); } .lv-cards span:nth-child(2) i { background: var(--t-green); } .lv-cards span:nth-child(3) i { background: var(--t-violet); }
[data-lv-device=mobile] .lv-cards, [data-lv-device=mobile] .lv-shop, [data-lv-device=mobile] .lv-book { grid-template-columns: 1fr; }
.lv-book { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 6px; margin-top: 10px; align-items: stretch; }
.lv-book span { padding: 8px; border-radius: 10px; background: var(--bg); } .lv-book small { display: block; font-size: 10.5px; color: var(--muted); } .lv-book b { font-size: 13px; }
.lv-book em { display: grid; place-items: center; padding: 0 10px; border-radius: 10px; background: var(--blue-d); color: #fff; font-style: normal; font-weight: 800; font-size: 11px; text-align: center; }
.lv-plan { display: grid; gap: 6px; margin-top: 10px; }
.lv-plan span { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--bg); font-size: 12.5px; }
.lv-plan small { color: var(--muted); } .lv-plan em { margin-left: auto; font-style: normal; font-weight: 800; font-size: 11px; color: var(--blue-d); }
.lv-shop { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.lv-shop span { display: grid; gap: 5px; padding: 8px; border-radius: 12px; background: var(--bg); } .lv-shop i { height: 56px; border-radius: 9px; } .lv-shop b { height: 6px; border-radius: 9px; background: rgba(16,24,40,.12); } .lv-shop small { font-weight: 800; font-size: 11.5px; }
.lv-cart { position: absolute; right: -4px; top: -40px; font-style: normal; font-weight: 800; padding: 6px 10px; border-radius: 99px; background: var(--yellow); box-shadow: var(--shadow-1); animation: lvBounce2 2.4s ease-in-out infinite; }
@keyframes lvBounce2 { 50% { transform: translateY(-4px); } }
.lv-old { display: none; margin-top: 12px; padding: 18px; background: #C0C0C0; border: 3px outset #eee; font-family: "Times New Roman", serif; color: #00007f; }
.lv-old span { font-size: 18px; text-decoration: underline; } .lv-old marquee { display: block; color: #800000; }
.lv-browser[data-state=before] .lv-new { display: none; } .lv-browser[data-state=before] .lv-old { display: block; }
.lv-browser[data-state=before] .lv-nav { font-family: "Times New Roman", serif; color: #00007f; }
.lv-a11y { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.lv-a11y button { border: 2px solid var(--blue-d); padding: 6px 10px; border-radius: 99px; background: #fff; font-weight: 800; font-size: 12px; color: var(--blue-d); }
.lv-a11y button.on { background: var(--blue-d); color: #fff; }
.lv-page.hc { background: #000; } .lv-page.hc .lv-hero { background: #000; border: 2px solid #FFD25A; color: #FFD25A; } .lv-page.hc .lv-nav, .lv-page.hc .lv-nav b { color: #fff; } .lv-page.hc .lv-hero em { background: #FFD25A; color: #000; }
.lv-page.bt .lv-hero b { font-size: 26px; } .lv-page.bt .lv-nav { font-size: 14px; }
.lv-page.kb .lv-hero em, .lv-page.kb .lv-nav em { outline: 3px solid #D92D20; outline-offset: 3px; }
/* phone */
.lv-phone { display: grid; justify-items: center; }
.lv-dev-phone { position: relative; width: 250px; height: 480px; padding: 12px; border-radius: 44px; background: var(--ink); box-shadow: var(--shadow-pop); }
.lv-notch { position: absolute; z-index: 2; left: 50%; top: 18px; width: 86px; height: 22px; margin-left: -43px; border-radius: 99px; background: var(--ink); }
.os-android .lv-notch { width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; }
.lv-screens { position: relative; height: calc(100% - 52px); border-radius: 32px 32px 10px 10px; overflow: hidden; background: var(--bg); }
.lv-scr { position: absolute; inset: 0; padding: 50px 16px 16px; display: grid; align-content: start; gap: 10px; opacity: 0; transform: translateX(30px); transition: opacity .4s, transform .5s var(--spring); }
.lv-scr.on { opacity: 1; transform: none; }
.lv-scr > b { font-family: var(--display); font-size: 22px; }
.lv-tile { padding: 14px; border-radius: 18px; background: linear-gradient(135deg, var(--blue), var(--violet)); color: #fff; } .lv-tile small { opacity: .8; } .lv-tile b { display: block; margin-top: 4px; font-size: 16px; }
.lv-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .lv-tiles i { height: 70px; border-radius: 16px; background: var(--t-yellow); } .lv-tiles i:nth-child(2) { background: var(--t-green); } .lv-tiles i:nth-child(3) { background: var(--t-violet); } .lv-tiles i:nth-child(4) { background: var(--t-blue); }
.lv-slot { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #fff; font-weight: 700; } .lv-slot i { flex: 1; height: 8px; border-radius: 9px; background: var(--bg); } .lv-slot.on { background: var(--blue-d); color: #fff; } .lv-slot.on i { background: rgba(255,255,255,.3); }
.lv-av.big { width: 76px; height: 76px; border-radius: 50%; justify-self: center; font-size: 28px; background: linear-gradient(135deg, var(--yellow), #DD2A7B); }
.lv-scr .lv-av.big + b { text-align: center; font-size: 18px; }
.lv-tabbar { display: flex; justify-content: space-around; padding-top: 8px; }
.lv-tabbar button { border: 0; background: none; color: rgba(255,255,255,.55); font-weight: 700; font-size: 12px; padding: 6px 8px; border-radius: 99px; }
.lv-tabbar button.on { color: var(--ink); background: var(--yellow); }
/* code */
.lv-code { overflow: hidden; border-radius: 22px; background: #0F172A; box-shadow: var(--shadow-pop); }
.lv-pre { margin: 0; padding: 18px 20px; font: 500 13.5px/1.75 ui-monospace, SFMono-Regular, Menlo, monospace; color: #CBD5E1; white-space: pre; overflow: hidden; }
.lv-pre span { display: block; }
.lv.in .lv-pre span { animation: lvLine .5s backwards; } .lv-pre span:nth-child(2) { animation-delay: .15s !important; } .lv-pre span:nth-child(3) { animation-delay: .3s !important; } .lv-pre span:nth-child(4) { animation-delay: .45s !important; } .lv-pre span:nth-child(5) { animation-delay: .6s !important; } .lv-pre span:nth-child(6) { animation-delay: .75s !important; } .lv-pre span:nth-child(7) { animation-delay: .9s !important; } .lv-pre span:nth-child(8) { animation-delay: 1.05s !important; }
@keyframes lvLine { from { opacity: 0; transform: translateX(-12px); } }
.lv-pre .k { color: #C4B5FD; font-weight: 600; } .lv-pre .c { color: #FDE68A; font-weight: 600; } .lv-pre .f { color: #93C5FD; font-weight: 600; } .lv-pre .s { color: #86EFAC; font-weight: 600; }
.lv-status { display: flex; justify-content: space-between; padding: 10px 20px; background: #1E293B; color: #94A3B8; font-size: 12px; font-weight: 700; }
.lv-status .ok { color: #86EFAC; }
/* speed */
.lv-gauges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 16px; border-radius: 24px; background: #fff; box-shadow: var(--shadow-card); }
.lv-gauge { text-align: center; } .lv-gauge svg { width: 100%; }
.lv-gauge path { fill: none; stroke-width: 12; stroke-linecap: round; } .lv-gauge .tr { stroke: var(--bg); }
.lv-gauge .val { stroke: var(--green); stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.2s var(--spring), stroke .4s; }
.lv.in .lv-gauge .val, .lv-speed:not(.js) .lv-gauge .val { stroke-dashoffset: calc(100 - var(--v)); }
.lv-speed[data-state=before] .lv-gauge .val { stroke: #D92D20; stroke-dashoffset: calc(100 - var(--b)); }
.lv-gauge b { display: block; font-size: 12px; } .lv-gauge small { font-weight: 800; font-size: 12px; color: var(--green); }
.lv-gauge .p, .lv-speed[data-state=before] .lv-gauge .g { display: none; } .lv-speed[data-state=before] .lv-gauge .p { display: inline; color: #D92D20; }
/* maintenance */
.lv-upd .lv-card { padding: 10px; display: grid; gap: 4px; }
.lv-step { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 14px; font-weight: 700; }
.lv-step i { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(16,24,40,.15); }
.lv-step small { margin-left: auto; color: var(--muted); font-size: 12px; }
.lv-upd.run .lv-step { animation: lvStepBg .6s calc(var(--i) * .55s) both; }
.lv-upd.run .lv-step i { animation: lvTick .5s calc(var(--i) * .55s + .2s) both; }
@keyframes lvStepBg { 0% { background: var(--t-blue-2); } 100% { background: transparent; } }
@keyframes lvTick { to { border-color: var(--green); background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/12px no-repeat; } }
.lv-replay { margin-top: 10px; border: 0; padding: 8px 14px; border-radius: 99px; background: #fff; font-weight: 800; font-size: 13px; box-shadow: var(--shadow-1); }
/* ai */
.lv-chat { padding: 16px; display: grid; gap: 10px; }
.lv-msg { max-width: 88%; padding: 12px 14px; border-radius: 18px; font-size: 14px; line-height: 1.45; }
.lv-msg.me { justify-self: end; background: var(--ink); color: #fff; border-bottom-right-radius: 6px; }
.lv-msg.bot { background: var(--bg); border-bottom-left-radius: 6px; }
.lv-spark { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 6px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--violet)); color: #fff; font-style: normal; font-size: 12px; }
.lv-msg mark { padding: 1px 6px; border-radius: 6px; background: var(--yellow); }
.lv-src { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; } .lv-src small { font-weight: 800; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.lv-src span { padding: 4px 9px; border-radius: 99px; background: #fff; font-size: 12px; font-weight: 700; color: var(--muted); } .lv-src span.on { background: var(--blue-d); color: #fff; }
.lv.in .lv-msg.bot { animation: calcIn .6s .5s backwards; }
/* chart */
.lv-chart .lv-card { padding: 16px; }
.lv-bars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; align-items: end; height: 200px; margin-top: 14px; }
.lv-bars span { display: grid; grid-template-rows: 1fr auto; height: 100%; text-align: center; gap: 6px; }
.lv-bars i { align-self: end; height: var(--h0); border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, var(--blue), var(--blue-dd)); transition: height .7s var(--spring); }
.lv-bars span:last-child i { background: linear-gradient(180deg, var(--yellow), var(--amber)); }
[data-metric="1"] .lv-bars i { height: var(--h1); } [data-metric="2"] .lv-bars i { height: var(--h2); }
.lv-chart:not(.in) .lv-bars i { height: 4%; }
.lv-bars small { font-size: 11.5px; color: var(--muted); font-weight: 700; }
/* orbit */
.lv-orbit { aspect-ratio: 1; max-width: 420px; display: grid; place-items: center; }
.lv-core { position: relative; z-index: 2; display: grid; place-items: center; width: 34%; aspect-ratio: 1; border-radius: 50%; background: var(--ink); color: #fff; font-family: var(--display); font-weight: 800; font-size: 20px; box-shadow: var(--shadow-pop); }
.lv-core b { color: var(--yellow); }
.lv-ring { position: absolute; inset: 8%; border-radius: 50%; border: 2px dashed rgba(16,24,40,.12); } .lv-ring.r2 { inset: 24%; }
.lv-sat { position: absolute; z-index: 1; left: 50%; top: 50%; padding: 10px 16px; border-radius: 99px; font-weight: 800; box-shadow: var(--shadow-1); white-space: nowrap; animation: lvOrbit 24s linear infinite; }
.lv-sat.s1 { animation-delay: -6s; } .lv-sat.s2 { animation-delay: -12s; } .lv-sat.s3 { animation-delay: -18s; }
@keyframes lvOrbit { from { transform: translate(-50%, -50%) rotate(0deg) translateX(min(42vw, 175px)) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg) translateX(min(42vw, 175px)) rotate(-360deg); } }
/* guides */
.lv-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lv-vs .lv-card { padding: 18px; display: grid; gap: 10px; align-content: start; } .lv-vs .lv-card.on { background: var(--ink); color: #fff; transform: translateY(-10px); }
.lv-vs .lv-card > b { font-family: var(--display); font-size: 20px; } .lv-vs span { display: flex; gap: 8px; align-items: center; font-size: 13.5px; font-weight: 600; }
.lv-vs i { flex: none; width: 20px; height: 20px; border-radius: 50%; } .lv-vs i.y { background: var(--green); } .lv-vs i.p { background: conic-gradient(var(--yellow) 0 50%, var(--bg) 0); border: 2px solid var(--yellow); }
.lv-move { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.lv-box { display: grid; place-items: center; gap: 4px; width: 120px; height: 140px; border-radius: 22px; background: #fff; box-shadow: var(--shadow-card); font-family: var(--display); font-size: 16px; text-align: center; }
.lv-box.a { background: var(--t-green); } .lv-box.b { background: var(--t-violet); } .lv-box small { font: 700 12px var(--text); color: var(--green); }
.lv-flow { position: relative; height: 200px; overflow: hidden; }
.lv-flow span { position: absolute; left: 0; top: calc(var(--i) * 38px + 6px); padding: 6px 10px; border-radius: 99px; background: #fff; box-shadow: var(--shadow-1); font-weight: 700; font-size: 12px; white-space: nowrap; animation: lvMove 5s calc(var(--i) * .7s) ease-in-out infinite; }
@keyframes lvMove { 0% { transform: translateX(-10%); opacity: 0; } 15% { opacity: 1; } 70% { opacity: 1; } 100% { transform: translateX(calc(var(--w, 120px))); opacity: 0; } }
.lv-inv { padding-bottom: 50px; }
.lv-doc { width: 70%; padding: 20px; border-radius: 18px; background: #fff; box-shadow: var(--shadow-card); } .lv-doc > b { font-family: var(--display); font-size: 20px; display: block; } .lv-doc small { color: var(--muted); }
.lv-tbl { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; margin-top: 14px; font-size: 13.5px; } .lv-tbl span:nth-child(-n+2) { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.lv-xml { position: absolute; right: 0; bottom: 0; width: 64%; padding: 14px; border-radius: 18px; background: #0F172A; color: #CBD5E1; box-shadow: var(--shadow-pop); display: grid; gap: 4px; }
.lv-xml small { color: #94A3B8; font-weight: 800; font-size: 11px; } .lv-xml code { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lv-xml code b { color: #86EFAC; } .lv-xml .ok { color: #86EFAC; font-weight: 800; font-size: 12px; }
.lv-mcalc .lv-card { padding: 24px; display: grid; gap: 14px; }
.lv-mcalc label { display: grid; gap: 10px; font-weight: 700; } .lv-mcalc output { font-family: var(--display); font-size: 40px; color: var(--blue-d); }
.lv-mcalc input { width: 100%; accent-color: var(--blue-d); }
.lv-mcalc .lv-card > b { font-family: var(--display); font-size: 34px; } .lv-mcalc .lv-card > b small { font: 700 14px var(--text); color: var(--muted); }
.lv-mcalc .b { justify-self: start; }
.lv-docs .lv-card { padding: 20px; display: grid; gap: 8px; } .lv-docs small { font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lv-docs span { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--bg); font-weight: 700; }
.lv.in .lv-docs span, .lv-docs.in span { animation: calcIn .5s calc(var(--i) * .1s) backwards; }
.lv-docs i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--yellow); font-style: normal; font-weight: 800; font-size: 13px; }
@media (max-width: 600px) {
  .lv-post { width: 100%; } .lv-target { position: relative; width: 100%; margin-top: -30px; } .lv-social { padding-bottom: 0; }
  .lv-prod { width: 100%; } .lv-checks { position: relative; top: auto; width: 100%; margin-top: -20px; } .lv-market { padding-bottom: 0; }
  .lv-doc, .lv-xml { width: 100%; position: relative; } .lv-xml { margin-top: -20px; } .lv-inv { padding-bottom: 0; }
  .lv-box { width: 84px; height: 110px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .lv *, .lillu * { animation: none !important; transition: none !important; } .lv-chart .lv-bars i { height: var(--h0) !important; } }
/* search rows: fixed slots, content never squeezed */
.lv-rows.tall { height: calc(4 * 70px); }
.lv-row { display: flex; flex-direction: column; justify-content: center; gap: 2px; height: 64px; padding: 6px 14px; top: calc(var(--pos, 0) * 70px); }
.lv-row > * { flex-shrink: 0; }
.lv-row small { line-height: 1.2; }
.lv-row .lk { line-height: 1.25; }
.lv-row.ad .ln { display: none; }
.lv-row .sl { font-size: 11.5px; line-height: 1.2; }
.lv-pack .lv-row { height: 54px; top: calc(var(--pos, 0) * 60px); }
.lv-pack .lv-rows { height: calc(3 * 60px); }
/* e-invoice: keep the totals visible */
.lv-inv { padding-bottom: 92px; } .lv-doc { width: 76%; } .lv-xml { width: 60%; bottom: 0; }
.h-hero .w.long { display: inline; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }

/* ------------------------------------------------------------------ generic plugin mockups (.mk, templates/visuals.html) */
.mk { aspect-ratio: auto; min-height: 300px; grid-template-columns: minmax(0, 1fr); font-size: 13.5px; color: var(--ink); container-type: inline-size; }
.mk button { font: inherit; cursor: pointer; border: 0; }
.mk-img { position: relative; display: block; aspect-ratio: 4/3; border-radius: 14px; overflow: hidden; transition: background .35s; }
.mk-img i { position: absolute; left: 50%; top: 52%; width: 42%; aspect-ratio: 1; border-radius: 30% 30% 22% 22%; background: rgba(255,255,255,.75); transform: translate(-50%, -50%); box-shadow: 0 14px 24px -12px rgba(16,24,40,.35); }
.mk-img.big { aspect-ratio: 1; }
.mk-mini { display: inline-block; flex: none; width: 26px; height: 26px; border-radius: 8px; vertical-align: middle; }
.mk-name { display: block; margin-top: 8px; font-size: 13.5px; }
.mk-price { display: block; font-weight: 800; } .mk-price.big { font-family: var(--display); font-size: 24px; } .mk-price small { font: 600 11.5px var(--text); color: var(--muted); }
.mk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; padding: 9px 14px; border-radius: 99px; background: var(--blue-d); color: #fff; font-weight: 800; font-size: 12.5px; white-space: nowrap; }
.mk-btn.alt { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.mk-btn.alt.on { background: #FDE2E1; box-shadow: inset 0 0 0 2px #D92D20; color: #B42318; }
.mk-btn.sm { margin-top: 0; padding: 7px 12px; font-size: 12px; } .mk-btn.wide { display: flex; width: 100%; }
.mk-btn.paypal { background: #FFC439; color: #003087; } .mk-btn.stripe { background: #635BFF; }
.mk-lbl { display: block; margin-top: 10px; font-weight: 800; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mk-muted { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; }
.mk-h { display: block; font-family: var(--display); font-size: 18px; font-weight: 800; }
.mk-stars { display: block; color: var(--star); font-size: 12px; }
.mk-lines { display: grid; gap: 6px; margin: 10px 0; } .mk-lines i { display: block; height: 7px; border-radius: 9px; background: rgba(16,24,40,.08); }
.mk-note { display: block; margin-top: 10px; padding: 8px 12px; border-radius: 12px; background: var(--bg); font-weight: 600; font-size: 12.5px; }
.mk-note.pts { background: var(--t-yellow); } .mk-note.hot { background: #FDE2E1; color: #B42318; }
.mk-bar { display: block; height: 8px; margin-top: 8px; border-radius: 9px; background: var(--bg); overflow: hidden; } .mk-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #D92D20, #F79009); }
.mk-acct .mk-bar i, .mk-pts + .mk-bar i { background: linear-gradient(90deg, var(--yellow), var(--green)); }
.mk-win { width: min(100%, 420px); padding: 16px; border-radius: 22px; background: #fff; box-shadow: var(--shadow-pop); }
.mk-ttl { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .mk-ttl b { font-family: var(--display); font-size: 16px; } .mk-ttl i { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.mk-row2 { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.mk-tocrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.mk-tocrow i { font-style: normal; font-weight: 800; } .mk-tocrow.tot { border: 0; font-weight: 800; font-size: 14px; } .mk-tocrow.add { color: var(--green-ink); }
/* product grid */
.mk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; background: linear-gradient(150deg, var(--t-blue-2), var(--t-violet-2)); }
.mk-card { position: relative; display: flex; flex-direction: column; padding: 10px; border-radius: 18px; background: #fff; box-shadow: 0 18px 34px -22px rgba(16,24,40,.45); transition: transform .3s var(--spring); }
.mk-card:hover { transform: translateY(-4px); }
.mk-card .mk-btn { margin-top: auto; padding: 8px 10px; font-size: 11.5px; } .mk-card .mk-price { margin: 4px 0 10px; }
.mk-badge { position: absolute; z-index: 2; left: 14px; top: 14px; padding: 3px 8px; border-radius: 7px; background: #D92D20; color: #fff; font-style: normal; font-weight: 800; font-size: 11px; }
.mk-heart { position: absolute; z-index: 2; right: 14px; top: 14px; width: 30px; height: 30px; border-radius: 50%; background: #fff !important; color: #D0D5DD; font-size: 15px; box-shadow: var(--shadow-1); transition: transform .25s var(--spring), color .2s; }
.mk-heart.on { color: #D92D20; transform: scale(1.12); }
.mk-quick { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 5px 10px; border-radius: 99px; background: rgba(16,24,40,.85); color: #fff; font-size: 11px; white-space: nowrap; opacity: 0; transition: opacity .2s; }
.mk-card:hover .mk-quick, .mk-card:first-child .mk-quick { opacity: 1; }
.mk-sw { display: flex; gap: 6px; margin-top: 6px; } .mk-sw button { width: 18px; height: 18px; padding: 0; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(16,24,40,.12); transition: transform .2s var(--spring); }
.mk-sw button.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c); transform: scale(1.1); } .mk-sw.big button { width: 26px; height: 26px; }
.mk-trig { display: block; margin-top: 4px; color: #B42318; font-weight: 800; font-size: 11px; } .mk-pts { display: block; margin-top: 4px; color: var(--amber); font-weight: 800; font-size: 11px; }
.mk-cmp { display: flex; align-items: center; gap: 6px; margin-bottom: -2px; font-size: 11.5px; font-weight: 700; }
.mk-cmp i, .mk-acc i { display: inline-block; flex: none; width: 18px; height: 18px; border-radius: 6px; border: 2px solid rgba(16,24,40,.2); cursor: pointer; transition: all .2s var(--spring); }
.mk-cmp i.on, .mk-acc i.on { background: var(--blue-d) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/11px no-repeat; border-color: var(--blue-d); }
/* product page */
.mk-pdp { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.mk-gal { display: grid; gap: 8px; } .mk-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .mk-thumbs button { aspect-ratio: 1; border-radius: 10px; box-shadow: inset 0 0 0 2px transparent; } .mk-thumbs button.on { box-shadow: inset 0 0 0 2px var(--blue-d); }
.mk-info { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.mk-chips, .mk-days { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.mk-chips button, .mk-days button { padding: 6px 11px; border-radius: 10px; background: var(--bg); font-weight: 700; font-size: 12px; transition: all .2s; }
.mk-chips button.on, .mk-days button.on { background: var(--ink); color: #fff; }
.mk-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; padding: 4px; border-radius: 12px; background: var(--bg); } .mk-tabs button { padding: 6px 10px; border-radius: 9px; background: none; font-weight: 700; font-size: 11.5px; color: var(--muted); } .mk-tabs button.on { background: #fff; color: var(--ink); box-shadow: var(--shadow-1); }
.mk-acc { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 6px; padding: 8px 10px; border-radius: 12px; background: var(--bg); font-size: 12.5px; font-weight: 600; } .mk-acc span { flex: 1; } .mk-acc small { color: var(--muted); font-weight: 500; } .mk-acc b { font-size: 12px; }
.mk-retail { display: grid; gap: 4px; width: 100%; margin-top: 8px; } .mk-retail span { display: flex; justify-content: space-between; padding: 7px 10px; border-radius: 10px; background: var(--bg); font-size: 12px; }
.mk-tier { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; margin-top: 10px; } .mk-tier span { display: grid; gap: 2px; padding: 8px; border-radius: 12px; background: var(--bg); text-align: center; } .mk-tier span.on { background: var(--t-green); box-shadow: inset 0 0 0 2px var(--green); } .mk-tier small { font-size: 11px; color: var(--muted); }
.mk-role { margin-top: 8px; font-weight: 800; font-size: 12px; color: var(--green-ink); }
.mk-kv { display: grid; width: 100%; } .mk-kv span { display: flex; justify-content: space-between; padding: 6px 2px; border-bottom: 1px solid var(--line); font-size: 12.5px; } .mk-kv i { font-style: normal; color: var(--muted); }
.mk-pdfbtns { display: flex; gap: 6px; margin-top: 8px; } .mk-pdfbtns span { padding: 6px 10px; border-radius: 10px; background: #FDE2E1; color: #B42318; font-weight: 800; font-size: 11.5px; } .mk-pdfbtns span:nth-child(2) { background: var(--t-blue); color: var(--blue-dd); } .mk-pdfbtns span:nth-child(3) { background: var(--bg); }
.mk-form { display: grid; gap: 6px; width: 100%; margin-top: 8px; } .mk-form i { display: block; padding: 8px 10px; border-radius: 10px; background: var(--bg); font-style: normal; font-size: 12px; color: var(--muted); }
.mk-fbt { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: var(--t-yellow-2); font-weight: 700; font-size: 12.5px; } .mk-fbt > span { display: flex; align-items: center; gap: 6px; } .mk-fbt em { margin-left: auto; font-style: normal; color: var(--blue-d); font-weight: 800; }
/* modal, table, pdf */
.mk-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: center; }
.mk-logo { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 800; }
.mk-flags { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .mk-flags button { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--bg); font-weight: 600; font-size: 12.5px; text-align: left; } .mk-flags button.on { background: var(--t-blue-2); box-shadow: inset 0 0 0 2px var(--blue); } .mk-flags span { font-size: 18px; }
.mk-cmpt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .mk-cmpt > span { display: grid; gap: 4px; justify-items: center; padding: 10px; border-radius: 14px; background: var(--bg); text-align: center; font-size: 12px; } .mk-cmpt small { color: var(--muted); }
.mk-q { margin: 6px 0 10px; font-family: var(--display); font-weight: 800; font-size: 16px; }
.mk-choices { display: grid; gap: 6px; } .mk-choices button { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--bg); font-weight: 700; text-align: left; transition: all .2s; } .mk-choices button.on { background: var(--t-blue-2); box-shadow: inset 0 0 0 2px var(--blue); }
.mk-choices.img { grid-template-columns: repeat(3, 1fr); } .mk-choices.img button { flex-direction: column; align-items: stretch; text-align: center; }
.mk-table { display: block; padding: 14px; background: var(--t-blue-2); }
.mk-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 8px; } .mk-search { flex: 1; min-width: 120px; padding: 8px 12px; border-radius: 99px; background: #fff; color: var(--muted); font-size: 12px; } .mk-search.on { color: var(--ink); font-weight: 700; box-shadow: inset 0 0 0 2px var(--blue); }
.mk-xls { padding: 6px 10px; border-radius: 9px; background: var(--green); color: #fff; font-weight: 800; font-size: 11px; } .mk-xls.pdf { background: #D92D20; }
.mk-tr { display: grid; grid-template-columns: 1.4fr .8fr 1fr 1.2fr; gap: 6px; align-items: center; margin-top: 4px; padding: 9px 12px; border-radius: 12px; background: #fff; font-size: 12.5px; }
.mk-tr.th { margin-top: 0; background: transparent; font-weight: 800; color: var(--muted); font-size: 11.5px; } .mk-tr.c3 { grid-template-columns: 1.6fr 1fr auto; } .mk-tr.c4 { grid-template-columns: 1fr 1fr 1fr 1fr; text-align: center; } .mk-tr.c4 span:first-child { text-align: left; font-weight: 700; }
.mk-tr.c4 span { display: flex; flex-direction: column; align-items: center; gap: 4px; } .mk-tr.c4 span:first-child { align-items: flex-start; }
.mk-dot { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; }
.mk-qty { display: inline-flex; align-items: center; gap: 6px; } .mk-qty button { width: 22px; height: 22px; border-radius: 7px; background: var(--bg); font-weight: 800; } .mk-qty b { min-width: 14px; text-align: center; }
.mk-st { justify-self: end; padding: 3px 9px; border-radius: 99px; font-style: normal; font-weight: 800; font-size: 11px; background: var(--t-blue); color: var(--blue-dd); } .mk-st.s1 { background: var(--t-green); color: var(--green-ink); } .mk-st.s2 { background: var(--t-yellow); color: var(--yellow-ink); }
.mk-pdfs { grid-template-columns: 1fr 1fr; align-items: center; gap: 14px; }
.mk-page { position: relative; display: flex; flex-direction: column; gap: 6px; aspect-ratio: 1 / 1.41; padding: 16px 14px; border-radius: 10px; background: #fff; box-shadow: 0 24px 40px -20px rgba(16,24,40,.45); overflow: hidden; }
.mk-page.cover { justify-content: flex-end; background: linear-gradient(160deg, var(--ink), var(--blue-dd)); color: #fff; } .mk-page.cover b { position: relative; z-index: 1; font-family: var(--display); font-size: 20px; line-height: 1.05; } .mk-page.cover small { position: relative; z-index: 1; opacity: .7; }
.mk-page.doc { grid-column: 1; } .mk-blob { position: absolute; right: -30px; top: -20px; width: 140px; height: 140px; border-radius: 42% 58% 60% 40%; background: rgba(255,210,90,.85); animation: lvSpin 14s linear infinite; }
.mk-pdf { position: absolute; z-index: 2; right: 10px; top: 10px; padding: 3px 7px; border-radius: 6px; background: #D92D20; color: #fff; font-weight: 800; font-size: 10.5px; }
.mk-ph { font-family: var(--display); font-size: 15px; } .mk-pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .mk-pgrid > span { display: grid; gap: 3px; font-size: 11px; } .mk-pgrid .mk-mini { width: 100%; height: auto; aspect-ratio: 4/3; }
.mk-pgrid small { color: var(--muted); }
.mk-dl { justify-self: start; padding: 10px 16px; border-radius: 99px; background: #fff; font-weight: 800; box-shadow: var(--shadow-card); animation: lvBounce2 2.6s ease-in-out infinite; }
/* admin settings */
.mk-admin { background: linear-gradient(150deg, var(--bg), var(--t-blue-2)); }
.mk-adm { display: grid; grid-template-columns: 140px minmax(0, 1fr); width: min(100%, 470px); border-radius: 18px; overflow: hidden; background: #fff; box-shadow: var(--shadow-pop); }
.mk-side { display: grid; align-content: start; gap: 2px; padding: 12px 8px; background: #1D2327; color: #C3C4C7; font-size: 12px; } .mk-side b { padding: 4px 8px 8px; color: #fff; font-size: 12.5px; } .mk-side span { padding: 7px 8px; border-radius: 8px; } .mk-side span.on { background: #2271B1; color: #fff; }
.mk-side em { margin-top: 10px; padding: 8px; border-radius: 8px; background: rgba(255,255,255,.08); font-style: normal; font-size: 11px; }
.mk-main { display: flex; flex-direction: column; gap: 4px; padding: 14px; min-width: 0; } .mk-main .mk-btn { align-self: flex-start; margin-top: 10px; }
.mk-sw-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 12.5px; cursor: pointer; }
.mk-switch { position: relative; flex: none; width: 36px; height: 20px; border-radius: 99px; background: #D0D5DD; transition: background .25s; } .mk-switch::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .3s var(--spring); }
.mk-switch.on { background: var(--green); } .mk-switch.on::after { transform: translateX(16px); } .mk-switch.lock { opacity: .6; }
.mk-field { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-weight: 600; font-size: 12.5px; } .mk-field i { font-style: normal; } .mk-col { display: flex; gap: 4px; } .mk-col i { width: 18px; height: 18px; border-radius: 5px; }
/* map */
.mk-map { grid-template-columns: 1.1fr .9fr; align-items: stretch; gap: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.mk-mapbox { position: relative; min-height: 240px; border-radius: 18px; overflow: hidden; background: linear-gradient(135deg, #E3F7EE, #EEF3FF); }
.mk-mapbox::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(30deg, transparent 0 24px, rgba(255,255,255,.75) 24px 28px), repeating-linear-gradient(-60deg, transparent 0 34px, rgba(255,255,255,.6) 34px 38px); }
.mk-pin { position: absolute; width: 18px; height: 18px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #98A2B3; box-shadow: 0 6px 10px -4px rgba(16,24,40,.4); } .mk-pin.on { background: #D92D20; width: 24px; height: 24px; animation: lvBounce 1.6s ease-in-out infinite; }
.mk-pin.p1 { left: 22%; top: 30%; } .mk-pin.p2 { left: 48%; top: 52%; } .mk-pin.p3 { left: 72%; top: 24%; }
.mk-radius { position: absolute; left: 50%; top: 55%; width: 62%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: rgba(49,113,238,.12); box-shadow: inset 0 0 0 2px rgba(49,113,238,.5); animation: mkPulse 3s ease-in-out infinite; }
@keyframes mkPulse { 50% { transform: translate(-50%, -50%) scale(1.06); } }
.mk-mapcard { display: flex; flex-direction: column; gap: 4px; padding: 6px; } .mk-mapcard b { font-family: var(--display); font-size: 16px; } .mk-mapcard small { color: var(--muted); } .mk-mapcard .mock-row { cursor: pointer; font-size: 12.5px; }
.mk-open { color: var(--green) !important; font-weight: 800; margin-top: 6px; }
/* wizard */
.mk-prog { display: block; height: 6px; border-radius: 9px; background: var(--bg); overflow: hidden; } .mk-prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--violet)); }
.mk-range { position: relative; display: block; height: 10px; margin: 18px 0; border-radius: 9px; background: var(--t-blue); } .mk-range i { display: block; height: 100%; border-radius: inherit; background: var(--blue); } .mk-range b { position: absolute; left: 55%; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px var(--blue); }
.mk-est { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 12px; border-radius: 14px; background: var(--ink); color: #fff; } .mk-est b { font-family: var(--display); font-size: 22px; color: var(--yellow); }
.mk-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-weight: 700; font-size: 12.5px; color: var(--muted); }
/* consent, push, chat, mail, stats */
.mk-consent { background: linear-gradient(150deg, var(--t-yellow-2), var(--t-green-2)); } .mk-p { margin: 6px 0 4px; color: var(--muted); font-size: 12.5px; }
.mk-push { align-content: center; gap: 14px; }
.mk-ask { width: min(100%, 380px); padding: 14px; border-radius: 16px; background: #fff; box-shadow: var(--shadow-card); font-size: 13px; }
.mk-toast { display: flex; gap: 12px; align-items: center; width: min(100%, 340px); justify-self: end; padding: 12px 14px; border-radius: 16px; background: rgba(16,24,40,.92); color: #fff; box-shadow: var(--shadow-pop); animation: mkToast 4s var(--spring) infinite; }
.mk-toast b { display: block; } .mk-toast small { color: rgba(255,255,255,.75); }
@keyframes mkToast { 0% { transform: translateX(30px); opacity: 0; } 12%, 80% { transform: none; opacity: 1; } 100% { transform: translateX(30px); opacity: 0; } }
.mk-chat { background: linear-gradient(150deg, var(--t-violet-2), var(--t-blue-2)); }
.mk-msg { display: block; max-width: 85%; margin-top: 8px; padding: 9px 12px; border-radius: 14px; font-size: 12.5px; } .mk-msg.bot { background: var(--bg); border-bottom-left-radius: 4px; } .mk-msg.me { margin-left: auto; background: var(--blue-d); color: #fff; border-bottom-right-radius: 4px; }
.mk-win .mk-msg:nth-of-type(n+2) { animation: calcIn .5s backwards; } .mk-win .mk-msg:nth-of-type(2) { animation-delay: .3s; } .mk-win .mk-msg:nth-of-type(3) { animation-delay: .9s; }
.mk-input { display: flex; justify-content: space-between; margin-top: 12px; padding: 9px 12px; border-radius: 99px; background: var(--bg); color: var(--muted); } .mk-input b { color: var(--blue-d); }
.mk-mail .mk-from { display: flex; gap: 10px; align-items: center; } .mk-from b { display: block; } .mk-from small { color: var(--muted); }
.mk-att { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 10px 12px; border-radius: 12px; background: var(--bg); font-weight: 700; } .mk-att .mk-pdf { position: static; }
.mk-stats { background: linear-gradient(150deg, var(--t-green-2), var(--t-blue-2)); }
.mk-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .mk-kpis span { display: grid; padding: 10px; border-radius: 12px; background: var(--bg); } .mk-kpis small { color: var(--muted); font-size: 11px; } .mk-kpis b { font-family: var(--display); font-size: 18px; }
.mk-bars { display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; gap: 6px; height: 110px; margin-top: 12px; } .mk-bars i { height: var(--h); border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, var(--blue), var(--blue-dd)); animation: mkGrow 1s var(--spring) backwards; } .mk-bars i:last-child { background: linear-gradient(180deg, var(--yellow), var(--amber)); }
@keyframes mkGrow { from { height: 4%; } }
.mk-hbar { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; font-weight: 600; } .mk-hbar i { height: 10px; border-radius: 9px; background: var(--violet); }
/* account */
.mk-acct { background: linear-gradient(150deg, var(--t-blue-2), var(--t-green-2)); } .mk-acct .mk-side { background: var(--bg); color: var(--ink-2); } .mk-acct .mk-side b { color: var(--ink); } .mk-acct .mk-side span.on { background: var(--ink); color: #fff; }
.mk-levels { display: flex; gap: 6px; margin-top: 6px; } .mk-levels span { padding: 4px 10px; border-radius: 99px; background: var(--bg); font-weight: 800; font-size: 11.5px; color: var(--muted); } .mk-levels span.on { background: var(--t-yellow); color: var(--yellow-ink); }
/* network, menu, rules, pay, look, cats, cart, search */
.mk-net { position: relative; min-height: 320px; background: linear-gradient(150deg, var(--t-violet-2), var(--t-blue-2)); }
.mk-hub { position: relative; z-index: 2; display: grid; place-items: center; width: 120px; height: 120px; border-radius: 50%; background: var(--ink); color: #fff; text-align: center; box-shadow: var(--shadow-pop); } .mk-hub small { color: rgba(255,255,255,.7); }
.mk-site { position: absolute; z-index: 2; display: grid; gap: 1px; padding: 10px 14px; border-radius: 16px; background: #fff; box-shadow: var(--shadow-card); font-size: 12px; } .mk-site b { font-family: var(--display); font-size: 18px; } .mk-site em { font-style: normal; font-weight: 800; font-size: 10.5px; color: var(--green); }
.mk-site.s0 { left: 6%; top: 8%; } .mk-site.s1 { right: 6%; top: 8%; } .mk-site.s2 { left: 6%; bottom: 8%; } .mk-site.s3 { right: 6%; bottom: 8%; }
.mk-site { animation: lvFloat 7s ease-in-out infinite; } .mk-site.s1 { animation-delay: -2s; } .mk-site.s2 { animation-delay: -4s; } .mk-site.s3 { animation-delay: -6s; }
.mk-links { position: absolute; inset: 0; width: 100%; height: 100%; } .mk-links path { fill: none; stroke: var(--blue); stroke-width: .6; stroke-dasharray: 2 2; animation: rmDash 2s linear infinite; }
@keyframes rmDash { to { stroke-dashoffset: -8; } }
.mk-menu { background: linear-gradient(150deg, var(--t-yellow-2), #FDE2E1); } .mk-dish { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; font-size: 13px; } .mk-dish i { flex: 1; border-bottom: 2px dotted rgba(16,24,40,.2); } .mk-dish span { font-weight: 800; }
.mk-pay { background: linear-gradient(150deg, var(--t-blue-2), var(--t-yellow-2)); }
.mk-look { grid-template-columns: 1.2fr .8fr; align-items: center; gap: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.mk-room { position: relative; aspect-ratio: 4/3; border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, #F2EDE4 62%, #D9C8AE 62%); }
.mk-sofa { position: absolute; left: 10%; bottom: 22%; width: 50%; height: 26%; border-radius: 16px 16px 8px 8px; background: #5B3FD6; box-shadow: inset 0 -14px 0 rgba(0,0,0,.15); }
.mk-lamp { position: absolute; right: 18%; bottom: 30%; width: 4px; height: 44%; background: #344054; } .mk-lamp::before { content: ""; position: absolute; left: -18px; top: -14px; width: 40px; height: 24px; border-radius: 20px 20px 4px 4px; background: #FFD25A; }
.mk-sidetable { position: absolute; right: 28%; bottom: 20%; width: 16%; height: 14%; border-radius: 6px 6px 2px 2px; background: #9A6200; }
.mk-hot { position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: #fff; color: var(--ink); font-weight: 800; box-shadow: 0 0 0 6px rgba(255,255,255,.4), var(--shadow-card); transition: transform .25s var(--spring); } .mk-hot.on { background: var(--ink); color: #fff; transform: scale(1.15); }
.mk-looklist { display: flex; flex-direction: column; gap: 4px; } .mk-looklist b { font-family: var(--display); font-size: 16px; }
.mk-cats { background: linear-gradient(150deg, var(--t-green-2), var(--t-yellow-2)); }
.mk-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; } .mk-tiles span { display: grid; align-content: end; gap: 2px; min-height: 96px; padding: 12px; border-radius: 16px; transition: transform .3s var(--spring); } .mk-tiles span:hover { transform: scale(1.03); } .mk-tiles b { font-family: var(--display); font-size: 16px; } .mk-tiles small { color: var(--ink-2); font-size: 11.5px; }
.mk-win.cat { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; } .mk-win.cat .mk-side { background: var(--ink); }
.mk-cart { background: linear-gradient(150deg, var(--t-blue-2), var(--t-yellow-2)); } .mk-cart .mk-fbt { margin-top: 8px; }
.mk-srch .mock-row { font-size: 12.5px; } .mk-caret { display: inline-block; width: 2px; height: 14px; margin-left: 2px; vertical-align: middle; background: var(--blue-d); animation: lvBlink 1s steps(1) infinite; }
.mk-gal2 { grid-template-columns: repeat(3, minmax(0, 1fr)); background: linear-gradient(150deg, var(--t-violet-2), var(--t-blue-2)); }
.mk-dots { display: flex; justify-content: center; gap: 6px; margin-top: 8px; } .mk-dots button { width: 9px; height: 9px; padding: 0; border-radius: 50%; background: #D0D5DD; } .mk-dots button.on { background: var(--ink); width: 20px; border-radius: 9px; }
@media (max-width: 640px) {
  .mk-grid, .mk-gal2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mk-grid .mk-card:nth-child(3), .mk-gal2 .mk-card:nth-child(3) { display: none; }
  .mk-pdp, .mk-map, .mk-look { grid-template-columns: 1fr; } .mk-adm { grid-template-columns: 1fr; } .mk-adm .mk-side { grid-auto-flow: column; overflow: hidden; }
  .mk-pdfs { grid-template-columns: 1fr 1fr; } .mk-tr { grid-template-columns: 1.2fr .6fr .9fr 1.2fr; padding: 8px; font-size: 11.5px; }
  .mk-site { padding: 8px 10px; } .mk-hub { width: 92px; height: 92px; }
}
@media (prefers-reduced-motion: reduce) { .mk *, .mk { animation: none !important; } }
/* mockup layout fixes: children fill their cells, narrow columns stack */
.mk-pdp, .mk-map, .mk-look { place-items: stretch; }
.mk-gal { width: 100%; align-self: start; }
.mk-mapbox, .mk-room { width: 100%; }
.mk-page.doc { aspect-ratio: auto; min-height: 240px; }
.mk-adm { grid-template-columns: minmax(96px, 30%) minmax(0, 1fr); }
@container (max-width: 380px) {
  .mk-adm, .mk-pdp, .mk-map, .mk-look, .mk-win.cat { grid-template-columns: minmax(0, 1fr); }
  .mk-adm .mk-side, .mk-win.cat .mk-side { grid-auto-flow: column; grid-auto-columns: max-content; overflow: hidden; }
  .mk-grid, .mk-gal2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mk-grid .mk-card:nth-child(3), .mk-gal2 .mk-card:nth-child(3) { display: none; }
  .mk-split, .mk-cmpt, .mk-choices.img { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 280px) { .mk-pdfs { grid-template-columns: minmax(0, 1fr); } .mk-pdfs .mk-page.cover { display: none; } }

/* ------------------------------------------------------------------ more plugin mockups (templates/visuals.html, 2026-10-25) */
.mk-x { place-items: center; }
.mk-x .mk-win { position: relative; }
.mk-win.mini { width: min(100%, 230px); padding: 12px 14px; } .mk-win.wide { width: min(100%, 480px); }
.mk-adminbg { background: linear-gradient(150deg, var(--bg), var(--t-blue-2)); }
.mk-price.muted { color: var(--muted); font-size: 12px; font-weight: 700; }
.mk-note.ok { background: var(--t-green); color: var(--green-ink); } .mk-note.center { text-align: center; }
.mk-btn.red { background: #D92D20; } .mk-btn.done { background: var(--green); }
.mk-row2.l { justify-content: flex-start; flex-wrap: wrap; }
.mk-save { margin-left: 6px; padding: 2px 7px; border-radius: 99px; background: var(--t-green); color: var(--green-ink); font-style: normal; font-weight: 800; font-size: 11px; }
.mk-cbx { display: inline-block; width: 18px; height: 18px; border-radius: 6px; border: 2px solid rgba(16,24,40,.2); cursor: pointer; transition: all .2s var(--spring); }
.mk-cbx.on { border-color: var(--blue-d); background: var(--blue-d) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 12px no-repeat; }
.mk-arrow { display: block; text-align: center; font-weight: 800; font-size: 20px; color: var(--blue-d); animation: lvBounce2 2.2s ease-in-out infinite; }
.mk-tagrow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .mk-tagrow em { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 99px; background: var(--t-blue); font-style: normal; font-weight: 700; font-size: 11px; } .mk-tagrow em.g { background: var(--t-yellow); }
.mk-tick { display: block; padding: 5px 0; font-weight: 700; font-size: 12.5px; color: var(--green-ink); }
/* attribute images */
.mk-swimg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 4px; } .mk-swimg button { display: grid; gap: 4px; justify-items: center; padding: 6px; border-radius: 12px; background: var(--bg); font-weight: 700; font-size: 11px; box-shadow: inset 0 0 0 2px transparent; transition: all .2s; }
.mk-swimg button.on { box-shadow: inset 0 0 0 2px var(--ink); background: #fff; }
.mk-swimg i { display: block; width: 100%; height: 26px; border-radius: 8px; background: var(--c, #CFE0FF); }
.mk-swimg .p0 i { background: repeating-linear-gradient(90deg, #3171EE 0 6px, #CFE0FF 6px 12px); } .mk-swimg .p1 i { background: radial-gradient(circle, #D92D20 3px, #FDE2E1 3.5px) 0 0 / 10px 10px; } .mk-swimg .p2 i { background: repeating-conic-gradient(#101828 0 25%, #E4E7EC 0 50%) 0 0 / 12px 12px; }
.mk-swimg.sm { grid-template-columns: repeat(3, 30px); justify-content: start; } .mk-swimg.sm button { padding: 3px; } .mk-swimg.sm i { width: 22px; height: 22px; }
/* shortcode */
.mk-short { gap: 6px; }
.mk-code { display: grid; gap: 4px; width: min(100%, 420px); padding: 12px 14px; border-radius: 16px; background: var(--ink); color: #fff; box-shadow: var(--shadow-pop); } .mk-code small { color: rgba(255,255,255,.6); font-weight: 700; font-size: 11px; } .mk-code code { font-size: 12px; color: #FFD25A; word-break: break-all; }
/* checklists */
.mk-acc .mk-mini { width: 22px; height: 22px; } .mk-acc b { font-weight: 800; }
.mk-res { display: grid; gap: 6px; margin-top: 4px; } .mk-res > span { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 12px; background: var(--bg); font-weight: 700; font-size: 12.5px; animation: calcIn .5s backwards; } .mk-res > span:nth-child(2) { animation-delay: .15s; } .mk-res > span:nth-child(3) { animation-delay: .3s; }
.mk-tr.c5 { grid-template-columns: auto minmax(0, 1.4fr) .8fr auto; background: var(--bg); } .mk-tr.c5 > span:nth-child(2) { display: flex; align-items: center; gap: 6px; }
.mk-tr.c5 .mk-mini { width: 22px; height: 22px; }
/* layouts */
.mk-laygrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .mk-laygrid.n4 { grid-template-columns: repeat(4, 1fr); } .mk-laygrid.n2 { grid-template-columns: repeat(2, 1fr); }
.mk-laygrid button { display: grid; gap: 6px; padding: 8px; border-radius: 14px; background: var(--bg); font-weight: 700; font-size: 11.5px; box-shadow: inset 0 0 0 2px transparent; transition: all .2s var(--spring); }
.mk-laygrid button.on { background: #fff; box-shadow: inset 0 0 0 2px var(--blue-d), var(--shadow-card); transform: translateY(-3px); }
.mk-wire { position: relative; display: grid; gap: 4px; height: 74px; padding: 6px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.mk-wire i { display: block; border-radius: 4px; background: var(--t-blue); } .mk-laygrid button.on .mk-wire i { background: var(--t-blue-2); } .mk-laygrid button.on .mk-wire i:first-child { background: var(--blue); }
.mk-wire.w0 { grid-template-columns: 1fr 1fr; } .mk-wire.w0 i:first-child { grid-row: span 2; }
.mk-wire.w1 { grid-template-rows: 1.4fr 1fr; grid-template-columns: 1fr 1fr 1fr; } .mk-wire.w1 i:first-child { grid-column: span 3; }
.mk-wire.w2 { grid-template-rows: repeat(4, 1fr); } .mk-wire.w3 { grid-template-columns: repeat(4, 1fr); }
.mk-wire.questions.w0 i, .mk-wire.questions.w1 i { border-radius: 50%; } .mk-wire.questions.w2 { grid-template-rows: 1fr; align-items: center; } .mk-wire.questions.w2 i { height: 6px; }
/* schedule */
.mk-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 10px; } .mk-week > span { display: grid; align-content: start; gap: 4px; padding: 6px 3px; border-radius: 10px; background: var(--bg); text-align: center; font-size: 10.5px; }
.mk-week b { font-size: 11px; } .mk-week i { padding: 3px 0; border-radius: 6px; background: #fff; font-style: normal; font-weight: 700; } .mk-week i.on { background: var(--t-green); color: var(--green-ink); }
.mk-week span.off { opacity: .55; } .mk-week em { font-style: normal; color: var(--muted); }
.mk-sw-row .mk-off { margin-left: auto; padding: 2px 8px; border-radius: 99px; background: #FDE2E1; color: #B42318; font-size: 11px; }
/* filters */
.mk-filt { background: linear-gradient(150deg, var(--t-yellow-2), var(--t-blue-2)); }
[data-mk-k] { transition: opacity .25s, transform .25s, filter .25s; } [data-mk-k].off { opacity: .25; filter: grayscale(1); transform: scale(.97); }
.mk-pgrid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; } .mk-pgrid3 > span { display: grid; gap: 4px; font-size: 11px; font-weight: 700; } .mk-pgrid3 .mk-img { aspect-ratio: 1; }
.mk-chips button .mk-dot { width: 8px; height: 8px; margin-right: 5px; }
/* store page */
.mk-url { display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 99px; background: var(--bg); color: var(--muted); font-size: 11.5px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mk-url b { color: var(--ink); } .mk-url s { color: var(--muted); }
.mk-url.copy { justify-content: space-between; margin-top: 10px; } .mk-url.copy b { padding: 4px 10px; border-radius: 99px; background: var(--ink); color: #fff; font-size: 11px; }
.mk-split.top { grid-template-columns: 110px 1fr; align-items: start; margin-top: 10px; } .mk-mapbox.sm { min-height: 92px; border-radius: 14px; }
.mk-store { background: linear-gradient(150deg, var(--t-green-2), var(--t-blue-2)); }
.mk-form i.tall { min-height: 46px; }
/* share / options / icon tiles */
.mk-thumbrow { display: flex; gap: 6px; } .mk-thumbrow .mk-mini { width: 54px; height: 54px; border-radius: 12px; }
.mk-shares { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 4px; } .mk-shares span { padding: 8px 4px; border-radius: 12px; background: var(--c); color: #fff; text-align: center; font-weight: 800; font-size: 11px; }
.mk-opts { display: grid; gap: 8px; } .mk-opts button { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--bg); text-align: left; box-shadow: inset 0 0 0 2px transparent; transition: all .2s var(--spring); }
.mk-opts .ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #fff; font-size: 16px; } .mk-opts b { display: block; font-size: 13px; } .mk-opts small { color: var(--muted); font-size: 11.5px; }
.mk-opts button.on { background: #fff; box-shadow: inset 0 0 0 2px var(--blue-d), var(--shadow-card); }
.mk-radio { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(16,24,40,.25); } .mk-opts button.on .mk-radio { box-shadow: inset 0 0 0 5px var(--blue-d); }
.mk-icons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .mk-icons.n4, .mk-icons.n8 { grid-template-columns: repeat(4, 1fr); }
.mk-icons button { display: grid; justify-items: center; gap: 6px; padding: 10px 6px; border-radius: 14px; background: var(--bg); font-weight: 700; font-size: 11px; line-height: 1.25; text-align: center; transition: all .2s var(--spring); }
.mk-icons .ic { display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 6px; border-radius: 10px; background: #fff; font-weight: 800; font-size: 13px; box-shadow: var(--shadow-1); }
.mk-icons button.on { background: var(--ink); color: #fff; transform: translateY(-2px); } .mk-icons button.on .ic { background: var(--yellow); color: var(--ink); }
/* flow */
.mk-flow { display: grid; gap: 0; margin: 4px 0 0; padding: 0; list-style: none; }
.mk-flow li { position: relative; display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 12px; padding: 8px 0; animation: calcIn .5s var(--d, 0s) backwards; }
.mk-flow li + li::before { content: ""; position: absolute; left: 18px; top: -10px; width: 2px; height: 20px; background: var(--line); }
.mk-flow .ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--bg); font-weight: 800; }
.mk-flow li.done .ic { background: var(--t-green); } .mk-flow li.now .ic { background: var(--blue-d); color: #fff; box-shadow: 0 0 0 5px var(--t-blue); animation: lvBounce2 1.8s ease-in-out infinite; }
.mk-flow b { display: block; font-size: 13px; } .mk-flow small { color: var(--muted); font-size: 11.5px; }
/* preview / pdf docs */
.mk-prev, .mk-x.mk-pdfs { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 12px; align-items: center; }
.mk-x.mk-pdfs .mk-win.mini { order: -1; }
.mk-page.live { box-shadow: 0 0 0 3px var(--t-green), 0 24px 40px -20px rgba(16,24,40,.45); } .mk-live { position: absolute; right: 10px; top: 10px; font-style: normal; font-weight: 800; font-size: 10px; color: var(--green-ink); animation: lvBlink 1.6s infinite; }
.mk-pagehd { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-bottom: 6px; border-bottom: 3px solid var(--accent, var(--blue)); } .mk-pagehd b { font-size: 12.5px; }
.mk-page.hf { padding: 0; } .mk-page.hf > :not(.mk-band) { margin: 0 14px; }
.mk-band { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--t-blue); font-size: 11px; } .mk-band.top { background: var(--ink); color: #fff; } .mk-band.bottom { justify-content: space-between; margin-top: auto; color: var(--muted); }
.mk-band small:last-child { padding: 1px 6px; border-radius: 6px; background: var(--yellow); color: var(--ink); font-weight: 800; } .mk-band.top small { margin-left: auto; }
.mk-kv.acf span { padding: 7px 8px; border-radius: 8px; background: var(--t-yellow-2); margin-top: 4px; border: 0; }
/* notifications / devices */
.mk-stack { display: grid; gap: 10px; width: min(100%, 360px); } .mk-toast.still { animation: calcIn .6s var(--d, 0s) backwards; justify-self: stretch; width: auto; }
.mk-devs { grid-template-columns: 1.5fr 1fr; align-items: end; gap: 14px; }
.mk-laptop, .mk-phone { display: grid; justify-items: center; gap: 6px; } .mk-laptop > small, .mk-phone > small { font-weight: 800; font-size: 11px; color: var(--ink); opacity: .7; }
.mk-laptop .scr { display: grid; align-items: start; justify-items: end; width: 100%; aspect-ratio: 16/10; padding: 10px; border: 8px solid var(--ink); border-radius: 12px 12px 4px 4px; background: linear-gradient(160deg, #fff, var(--t-blue-2)); }
.mk-laptop > i { display: block; width: 116%; height: 10px; margin-top: -6px; border-radius: 0 0 12px 12px; background: #344054; }
.mk-phone .scr { display: grid; align-content: start; gap: 8px; width: 100%; max-width: 150px; aspect-ratio: 9/18; padding: 12px 8px; border: 7px solid var(--ink); border-radius: 26px; background: linear-gradient(170deg, #1D2939, #344054); }
.mk-phone .clock { color: #fff; text-align: center; font-family: var(--display); font-size: 26px; }
.mk-phone .mk-toast, .mk-laptop .mk-toast { gap: 8px; padding: 8px 10px; border-radius: 12px; font-size: 11px; } .mk-phone .mk-toast .mk-mini, .mk-laptop .mk-toast .mk-mini { width: 22px; height: 22px; }
.mk-phone.big .scr { max-width: 170px; background: #fff; } .mk-phone .nm { font-size: 12.5px; } .mk-phone .pr { color: var(--muted); font-weight: 700; font-size: 11px; } .mk-phone .mk-btn { margin-top: 2px; }
/* translations */
.mk-tr.c5t { grid-template-columns: 1.6fr repeat(4, .6fr); background: var(--bg); text-align: center; } .mk-tr.c5t span:first-child { text-align: left; } .mk-tr.th.c5t { background: transparent; }
.mk-trst { justify-self: center; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; font-weight: 800; } .mk-trst.s1 { background: var(--t-green); color: var(--green-ink); } .mk-trst.s2 { background: var(--t-yellow); color: var(--yellow-ink); } .mk-trst.s0 { background: #fff; color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--line); }
/* countries / redirect */
.mk-flaggrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .mk-flaggrid button { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border-radius: 12px; background: var(--bg); font-weight: 800; font-size: 11px; } .mk-flaggrid button span { font-size: 20px; } .mk-flaggrid button.on { background: var(--ink); color: #fff; }
.mk-flags button.on { background: var(--ink); color: #fff; }
.mk-select { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 2px var(--blue-d); font-weight: 700; font-size: 12.5px; } .mk-select i { font-style: normal; color: var(--muted); }
.mk-dd { display: grid; margin-top: 4px; padding: 4px; border-radius: 12px; background: #fff; box-shadow: var(--shadow-card); } .mk-dd button { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 9px; background: none; text-align: left; font-weight: 600; font-size: 12.5px; } .mk-dd button.on { background: var(--t-blue); }
/* WordPress editor boxes */
.mk-win.wpbox { padding: 0; overflow: hidden; border-radius: 14px; } .mk-win.wpbox > :not(.mk-boxhd) { margin-left: 14px; margin-right: 14px; } .mk-win.wpbox > :last-child { margin-bottom: 14px; }
.mk-boxhd { display: block; margin-bottom: 10px; padding: 10px 14px; background: #F6F7F7; border-bottom: 1px solid #DCDCDE; font-weight: 800; font-size: 12.5px; }
.mk-loadrow { display: flex; gap: 8px; } .mk-loadrow .mk-select { flex: 1; }
.mk-tocrow.add { animation: calcIn .5s var(--d, 0s) backwards; }
.mk-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .mk-grp { display: grid; align-content: start; gap: 5px; padding: 10px; border-radius: 12px; background: var(--t-blue-2); font-size: 12px; } .mk-grp em { padding: 6px 8px; border-radius: 8px; background: #fff; font-style: normal; font-weight: 600; box-shadow: var(--shadow-1); }
.mk-deprow { display: grid; gap: 4px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.mk-grphd { display: flex; align-items: center; gap: 8px; margin: 10px 0 2px; font-weight: 800; } .mk-grphd .ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #fff; box-shadow: var(--shadow-1); }
.mk-tr.c2 { grid-template-columns: 1fr 1fr; } .mk-tr.c3.hi { box-shadow: inset 0 0 0 2px var(--blue-d); } .mk-tr.c4q { grid-template-columns: .8fr 1fr 1.2fr auto; } .mk-tr.c3b { grid-template-columns: 1.6fr 1fr auto; }
/* dependencies, lookbook, thumbs, steps */
.mk-deps { gap: 6px; } .mk-deps .mk-win { padding: 12px 14px; } .mk-deps .mk-q { margin: 0 0 8px; font-size: 14px; } .mk-deps .mk-choices { grid-template-columns: repeat(3, 1fr); } .mk-deps .mk-choices button { justify-content: center; padding: 7px; font-size: 12px; }
.mk-cond { padding: 5px 12px; border-radius: 99px; background: var(--ink); color: #fff; font-weight: 800; font-size: 11.5px; }
.mk-lookb { grid-template-columns: 1fr 1fr; gap: 12px; background: linear-gradient(150deg, var(--t-yellow-2), var(--t-violet-2)); }
.mk-lk { display: grid; gap: 2px; padding: 8px; border-radius: 18px; background: #fff; box-shadow: var(--shadow-card); } .mk-lk .scene { position: relative; display: block; aspect-ratio: 4/5; margin-bottom: 6px; border-radius: 12px; }
.mk-lk.l0 .scene { background: linear-gradient(#F4EDE4 62%, #D7C3A8 62%); } .mk-lk.l0 .scene::before { content: ""; position: absolute; left: 18%; right: 18%; top: 54%; height: 12%; border-radius: 6px; background: #8B5E3C; } .mk-lk.l0 .scene::after { content: ""; position: absolute; left: 44%; top: 18%; width: 12%; height: 22%; border-radius: 50% 50% 8px 8px; background: #FFD25A; }
.mk-lk.l1 .scene { background: linear-gradient(#E8EEF7 64%, #C9D3E0 64%); } .mk-lk.l1 .scene::before { content: ""; position: absolute; left: 14%; right: 30%; top: 50%; height: 8%; border-radius: 4px; background: #344054; } .mk-lk.l1 .scene::after { content: ""; position: absolute; left: 30%; top: 30%; width: 26%; height: 18%; border-radius: 6px; background: #101828; box-shadow: 0 0 0 4px #D0D5DD; }
.mk-lk b { font-size: 13px; } .mk-lk small { color: var(--muted); font-size: 11.5px; }
.mk-keep { margin-left: 6px; padding: 1px 7px; border-radius: 99px; background: var(--t-green); color: var(--green-ink); font-style: normal; letter-spacing: 0; text-transform: none; }
.mk-thumbs.six { grid-template-columns: repeat(3, 1fr); }
.mk-cartic { position: relative; padding: 6px 10px; border-radius: 99px; background: #fff; } .mk-cartic b { position: absolute; right: -4px; top: -6px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #D92D20; color: #fff; font-size: 10px; animation: calcBump 1.8s infinite; }
.mk-table .mk-toast { margin-top: 10px; }
.mk-auto { margin-left: 4px; padding: 2px 7px; border-radius: 99px; background: var(--t-yellow); color: var(--yellow-ink); font-style: normal; font-weight: 800; font-size: 10.5px; }
.mk-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; } .mk-steps span { display: grid; justify-items: center; gap: 4px; font-weight: 700; font-size: 10.5px; color: var(--muted); }
.mk-steps i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--bg); font-style: normal; font-weight: 800; } .mk-steps .done i { background: var(--green); color: #fff; } .mk-steps .now { color: var(--ink); } .mk-steps .now i { background: var(--blue-d); color: #fff; box-shadow: 0 0 0 4px var(--t-blue); }
.mk-rank { padding: 2px 8px; border-radius: 99px; font-weight: 800; font-size: 11px; } .mk-rank.r0 { background: var(--t-green); color: var(--green-ink) !important; } .mk-rank.r1 { background: var(--t-yellow); color: var(--yellow-ink) !important; } .mk-rank.r2 { background: var(--bg); }
.mk-pgrid.four { grid-template-columns: repeat(4, 1fr); margin-top: 8px; }
.mk-foot { display: grid; gap: 2px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--t-yellow-2); box-shadow: inset 0 0 0 2px var(--yellow); } .mk-foot small { color: var(--muted); font-weight: 700; font-size: 11px; }
.mk-rethd { display: flex; align-items: center; gap: 10px; } .mk-logo.big { width: 40px; height: 40px; border-radius: 12px; font-size: 18px; background: #FF9900; }
.mk-gauge { position: relative; display: grid; justify-items: center; margin: 4px auto 8px; } .mk-gauge svg { width: 180px; } .mk-gauge path { fill: none; stroke-width: 12; stroke-linecap: round; } .mk-gauge .bg { stroke: var(--bg); } .mk-gauge .fg { stroke: var(--green); stroke-dasharray: 157; stroke-dashoffset: 40; animation: mkGauge 1.4s var(--spring) backwards; }
.mk-gauge b { margin-top: -38px; font-family: var(--display); font-size: 22px; } .mk-gauge small { color: var(--muted); font-weight: 700; font-size: 11px; }
@keyframes mkGauge { from { stroke-dashoffset: 157; } }
@container (max-width: 380px) {
  .mk-prev, .mk-x.mk-pdfs, .mk-devs { grid-template-columns: minmax(0, 1fr); } .mk-x.mk-pdfs .mk-win.mini, .mk-prev .mk-win.mini { order: 2; width: 100%; }
  .mk-laygrid.n4, .mk-icons.n4, .mk-icons.n8 { grid-template-columns: repeat(2, 1fr); } .mk-week { grid-template-columns: repeat(4, 1fr); } .mk-lookb { grid-template-columns: 1fr; }
  .mk-tr.c5t { grid-template-columns: 1.4fr repeat(4, .7fr); } .mk-pgrid.four { grid-template-columns: repeat(2, 1fr); }
}
/* fixes after review */
.mk-code code { padding: 0; border-radius: 0; background: none; font-size: 12px; color: #FFD25A; }
.mk-choices.img button .mk-img { aspect-ratio: 4/3; }
.mk-info .mk-thumbs { width: 100%; }
.mk-page.doc .mk-ph { padding-right: 38px; }
.mk-range.sm { width: 84px; height: 6px; margin: 0; } .mk-range.sm b { left: 45%; width: 16px; height: 16px; margin: -8px 0 0 -8px; box-shadow: 0 0 0 3px var(--blue); }
.mk-field .mk-sw { margin-top: 0; } .mk-field .mk-sw button { width: 16px; height: 16px; }
.mk-lookb { place-items: stretch; align-items: center; } .mk-lk { width: 100%; }
.mk-phone .mk-toast small { display: none; } .mk-phone .mk-toast b { font-size: 10.5px; }
.mk-kv span { gap: 10px; } .mk-kv b { min-width: 0; text-align: right; overflow-wrap: anywhere; }
.mk-file { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: var(--bg); } .mk-file b { display: block; font-size: 13px; } .mk-file small { color: var(--green-ink); font-weight: 800; font-size: 11.5px; }
.mk-ext { display: grid; place-items: center; width: 42px; height: 50px; border-radius: 8px; background: var(--green); color: #fff; font-weight: 800; font-size: 11px; } .mk-ext.pdf { background: #D92D20; }
.mk-bar.ok i { background: linear-gradient(90deg, var(--green), #34D399); animation: lvBar 1.6s var(--spring) backwards; }
@container (max-width: 380px) { .mk-choices.img { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mk-choices.img button { padding: 6px; font-size: 11px; } }
.mk-table { justify-items: stretch; place-items: stretch; }

/* feature cards on plugin pages: icon above the heading (feature_icons() in build.py) */
.prose .feature .f-ico { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 0 14px; border-radius: 14px; background: var(--white); color: var(--blue); box-shadow: 0 6px 16px -8px rgba(16,24,40,.25); }
.prose .feature .f-ico svg { display: block; }

/* product reviews: "newest N" note and "translated from" label */
.rev-note { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.reviews .rev-tr { margin: 10px 0 0; font-size: 12px; color: var(--muted); }

/* guides overview: 3-column grids (5+ guides would leave a single card in a 4-column row) */
@media (min-width: 900px) {
  .land-guides .land-pillars, .land-guides .lcards-grid { grid-template-columns: repeat(3, 1fr); }
}
.land-pillar .b { max-width: 100%; white-space: normal; text-align: left; height: auto; min-height: 40px; }

.cur-note { margin: 8px 0 0; font-size: 12px; color: var(--muted); text-align: center; }

/* plugin cards: one link stretched over the card; the image area shows the plugin's designed element,
   scaled to fit (--vs from site.js) and gently floating; bundles: tiles of their plugins */
.pcard { position: relative; }
.pcard-link { display: block; color: inherit; text-decoration: none; }
.pcard-link::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: 30px; }
.pcard-link:focus-visible { outline: none; }
.pcard:has(.pcard-link:focus-visible) { outline: 3px solid var(--blue-d); outline-offset: 3px; }
.pcard-img .badge-new, .pcard-img .badge-sale { z-index: 2; }
.pcard-vis { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.pcard-vis .vis-in { position: absolute; left: 50%; top: 50%; width: 440px; transform: translate(-50%, -50%) scale(var(--vs, .5)); animation: visFloat 7s ease-in-out infinite; }
.pcard-vis .mock { width: 100%; background: transparent; box-shadow: none; }
@keyframes visFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.mk-bundle { display: grid; grid-template-columns: repeat(3, 96px); gap: 16px; place-content: center; }
.mk-btile { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 24px; font-family: var(--display); font-size: 30px; font-weight: 800; letter-spacing: -.05em; color: var(--ink); box-shadow: var(--shadow-card); animation: bTile 5s var(--spring) infinite backwards; animation-delay: calc(var(--i) * .14s); }
@keyframes bTile { 0% { opacity: 0; transform: scale(.5) rotate(-8deg); } 14%, 84% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.85); } }
@media (prefers-reduced-motion: reduce) { .pcard-vis .vis-in, .mk-btile { animation: none !important; } }

/* landing page visual: pulsing call to action, A/B test bars (variant B wins) */
.lv-pulse { animation: lvPulse 2.2s ease-in-out infinite; }
@keyframes lvPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(37,96,214,.45); } 50% { box-shadow: 0 0 0 9px rgba(37,96,214,0); } }
.lv-ab { display: grid; gap: 7px; margin-top: 10px; padding: 12px; border-radius: 14px; background: var(--bg); }
.lv-ab small { font-size: 11px; font-weight: 700; color: var(--muted); }
.lv-ab span { display: grid; grid-template-columns: 70px 1fr 44px; align-items: center; gap: 8px; font-size: 11.5px; }
.lv-ab i { display: block; height: 10px; border-radius: 99px; background: linear-gradient(90deg, var(--t-violet) var(--w), rgba(16,24,40,.06) var(--w)); animation: lvGrow 3.6s var(--spring) infinite; }
.lv-ab .win i { background: linear-gradient(90deg, var(--blue) var(--w), rgba(16,24,40,.06) var(--w)); }
.lv-ab em { font-style: normal; font-weight: 800; text-align: right; } .lv-ab .win em { color: var(--blue-d); }
@keyframes lvGrow { 0% { clip-path: inset(0 100% 0 0 round 99px); } 35%, 100% { clip-path: inset(0 0 0 0 round 99px); } }

/* PIM visual: product record with completeness filling up, channels lighting up one after another */
.lv-pim { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: center; }
.lv-pim-card { border-radius: 20px; background: #fff; box-shadow: var(--shadow-pop); overflow: hidden; }
.lv-pim-body { display: grid; gap: 8px; padding: 14px; }
.lv-pim-img { height: 64px; border-radius: 12px; background: linear-gradient(135deg, var(--t-blue), var(--t-green)); }
.lv-pim-name { font-family: var(--display); font-size: 16px; line-height: 1.15; }
.lv-pim-loc { display: flex; gap: 5px; } .lv-pim-loc i { font-style: normal; font-size: 10.5px; font-weight: 800; padding: 3px 7px; border-radius: 99px; background: var(--bg); color: var(--muted); } .lv-pim-loc i.on { background: var(--ink); color: #fff; }
.lv-pim-row { display: flex; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 9px; background: var(--bg); font-size: 11.5px; animation: lvRow 6s ease infinite; animation-delay: calc(var(--i) * .35s); }
.lv-pim-row small { color: var(--muted); font-weight: 600; } .lv-pim-row b { text-align: right; }
@keyframes lvRow { 0% { opacity: .25; } 12%, 100% { opacity: 1; } }
.lv-pim-comp { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; font-size: 11px; } .lv-pim-comp small { color: var(--muted); font-weight: 700; }
.lv-pim-bar { height: 8px; border-radius: 99px; background: rgba(16,24,40,.07); overflow: hidden; }
.lv-pim-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--t-yellow), #2E9E6A); animation: lvFill 6s var(--spring) infinite; }
@keyframes lvFill { 0% { width: 18%; } 45%, 100% { width: 100%; } }
.lv-pim-ch { display: grid; gap: 9px; }
.lv-pim-ch span { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: var(--shadow-card); font-size: 12.5px; font-weight: 700; animation: lvCh 6s ease infinite; animation-delay: calc(2.6s + var(--i) * .3s); }
.lv-pim-ch i { width: 26px; height: 26px; border-radius: 8px; background: var(--c); }
.lv-pim-ch em { font-style: normal; color: #2E9E6A; opacity: 0; animation: lvTick 6s ease infinite; animation-delay: calc(2.6s + var(--i) * .3s); }
@keyframes lvCh { 0%, 100% { transform: none; } 6% { transform: translateX(6px); } 12% { transform: none; } }
@keyframes lvTick { 0%, 4% { opacity: 0; } 10%, 90% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 560px) { .lv-pim { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .lv-pulse, .lv-ab i, .lv-pim-row, .lv-pim-bar i, .lv-pim-ch span, .lv-pim-ch em { animation: none !important; } .lv-pim-ch em { opacity: 1; } }


/* keyword line under a product name in the page heading */
.h-hero .h1-sub { display: block; margin-top: .5em; font-family: var(--text); font-size: clamp(17px, 1.6vw, 21px); line-height: 1.35; font-weight: 600; letter-spacing: 0; color: var(--muted); }

/* Feature/column rows: count columns by the space of the text column (not the viewport), so a row of 3
   never breaks into 2 + 1 and a row of 4 never into 3 + 1. */
.prose, .prose .blk { container-type: inline-size; }
.prose .cols[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.prose .cols[data-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@container (max-width: 900px) { .prose .cols[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 640px) { .prose .cols[data-n="3"] { grid-template-columns: minmax(0, 1fr); } }
@container (max-width: 440px) { .prose .cols[data-n="4"] { grid-template-columns: minmax(0, 1fr); } }

/* Featured projects slider: arrows + mouse drag; touch and trackpads scroll natively */
.slide-nav { display: flex; align-items: center; gap: 10px; }
.slide-nav .link-arrow { margin-right: 8px; }
.slide-btn { display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--white); color: var(--ink); font-size: 20px; font-weight: 700; box-shadow: var(--shadow-1); cursor: pointer; transition: transform .2s, background .2s, opacity .2s; }
.slide-btn:hover:not(:disabled) { transform: translateY(-2px); background: var(--yellow); }
.slide-btn:disabled { opacity: .35; cursor: default; }
.feat-proj { scrollbar-width: none; cursor: grab; overscroll-behavior-x: contain; }
.feat-proj::-webkit-scrollbar { display: none; }
.feat-proj.drag { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.feat-proj.drag a { pointer-events: none; }
@media (hover: none) { .slide-btn { display: none; } }

/* ---------------------------------------------------------------- home hero: service morph
   One device morphs between website, phone app, search results, ad, AI answer and plugin settings.
   Every animation starts FROM a hidden/initial frame and ends in the base style, so with reduced
   motion (all animations off) each scene simply shows its finished state. */
.morph { --mo-ease: cubic-bezier(.5,1.3,.45,1); --mo-a: #BCD3FF; height: auto; }
.morph[data-state="app"] { --mo-a: #D9CEFF; }
.morph[data-state="seo"] { --mo-a: #BFEBD5; }
.morph[data-state="sea"] { --mo-a: #FFE08A; }
.morph[data-state="ai"] { --mo-a: #D4C8FF; }
.morph[data-state="plug"] { --mo-a: #B5D0FF; }
.mo-stage { position: relative; height: clamp(340px, 36vw, 470px); }
.mo-blob { position: absolute; left: 50%; top: 50%; width: min(92%, 480px); aspect-ratio: 1; translate: -50% -50%; border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; background-color: var(--mo-a); background-image: radial-gradient(circle at 30% 28%, rgba(255,255,255,.75), transparent 58%); transition: background-color .9s ease; animation: moBlob 11s ease-in-out infinite alternate; }
@keyframes moBlob {
  0% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; transform: rotate(0deg) scale(1); }
  50% { border-radius: 60% 40% 36% 64% / 56% 36% 64% 44%; transform: rotate(10deg) scale(1.05); }
  100% { border-radius: 35% 65% 52% 48% / 63% 52% 48% 37%; transform: rotate(-8deg) scale(.97); }
}
.mo-dev { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 86%; height: 70%; border-radius: 22px; background: #fff; overflow: hidden; box-shadow: 0 44px 80px -30px rgba(16,24,40,.45), 0 0 0 1px rgba(16,24,40,.05); transition: width .8s var(--mo-ease), height .8s var(--mo-ease), border-radius .8s var(--mo-ease); }
.morph[data-state="app"] .mo-dev { width: clamp(186px, 40%, 232px); height: 94%; border-radius: 38px; box-shadow: 0 44px 80px -30px rgba(16,24,40,.5), 0 0 0 6px var(--ink); }
.morph[data-state="seo"] .mo-dev { width: 80%; height: 68%; }
.morph[data-state="sea"] .mo-dev { width: 80%; height: 76%; border-radius: 20px; }
.morph[data-state="ai"] .mo-dev { width: 68%; height: 80%; border-radius: 30px; }
.morph[data-state="plug"] .mo-dev { width: 90%; height: 66%; border-radius: 18px; }
.mo-bar { position: absolute; inset: 0 0 auto; height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: var(--bg); border-bottom: 1px solid var(--line); transition: transform .5s ease, opacity .4s ease; }
.mo-bar > i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #FF7A7A; }
.mo-bar > i:nth-child(2) { background: var(--yellow); }
.mo-bar > i:nth-child(3) { background: #4CC38A; }
.mo-url { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; height: 22px; margin-left: 8px; padding: 0 10px; border-radius: 999px; background: #fff; color: var(--muted); font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.mo-url svg { flex: none; color: var(--green); }
.mo-url > span { display: none; overflow: hidden; text-overflow: ellipsis; }
.morph[data-state="web"] .u-web, .morph[data-state="app"] .u-app, .morph[data-state="plug"] .u-plug,
.morph[data-state="seo"] .u-seo, .morph[data-state="sea"] .u-sea, .morph[data-state="ai"] .u-ai { display: inline; }
.morph[data-state="app"] .mo-bar { transform: translateY(-100%); opacity: 0; }
.mo-notch { position: absolute; left: 50%; top: 9px; width: 62px; height: 18px; translate: -50% 0; border-radius: 12px; background: var(--ink); opacity: 0; transform: scale(.3); transition: opacity .3s ease, transform .5s var(--mo-ease); }
.morph[data-state="app"] .mo-notch { opacity: 1; transform: none; transition-delay: .3s; }
.mo-scr { position: absolute; inset: 34px 0 0; transition: top .6s var(--mo-ease); }
.morph[data-state="app"] .mo-scr { top: 32px; }
.mo-scene { position: absolute; inset: 0; padding: 14px; opacity: 0; visibility: hidden; transform: translateY(12px) scale(.97); transition: opacity .4s ease, transform .6s var(--mo-ease), visibility 0s linear .6s; }
.morph[data-state="web"] .s-web, .morph[data-state="app"] .s-app, .morph[data-state="seo"] .s-seo,
.morph[data-state="sea"] .s-sea, .morph[data-state="ai"] .s-ai, .morph[data-state="plug"] .s-plug { opacity: 1; visibility: visible; transform: none; transition: opacity .5s ease .3s, transform .7s var(--mo-ease) .3s, visibility 0s; }
@keyframes moIn { from { opacity: 0; transform: translateY(10px); } }
@keyframes moPop { from { opacity: 0; transform: scale(.6); } }
/* website */
.s-web { display: flex; flex-direction: column; gap: 12px; }
.w-nav { display: flex; align-items: center; gap: 8px; }
.w-nav b { width: 46px; height: 12px; border-radius: 6px; background: var(--ink); }
.w-nav i { width: 26px; height: 7px; border-radius: 4px; background: #E4E8F2; }
.w-nav span { margin-left: auto; width: 54px; height: 20px; border-radius: 999px; background: var(--blue); }
.w-hero { flex: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; align-items: center; }
.w-txt b { display: block; height: 14px; width: 92%; margin-bottom: 7px; border-radius: 7px; background: var(--ink); }
.w-txt b.s { width: 66%; }
.w-txt p { height: 7px; width: 96%; margin: 10px 0 0; border-radius: 4px; background: #E4E8F2; }
.w-txt p.s { width: 70%; }
.w-cta { display: inline-block; width: 74px; height: 24px; margin-top: 14px; border-radius: 999px; background: var(--yellow); }
.w-img { position: relative; height: 100%; min-height: 96px; border-radius: 14px; background: linear-gradient(160deg, #C5D8FF, #ECE3FF); overflow: hidden; }
.w-img .sun { position: absolute; right: 18%; top: 16%; width: 22px; height: 22px; border-radius: 50%; background: var(--yellow); }
.w-img .hill { position: absolute; bottom: -34%; border-radius: 50%; }
.w-img .hill.a { left: -12%; width: 82%; height: 72%; background: #8EB0F6; }
.w-img .hill.b { right: -22%; width: 92%; height: 62%; background: var(--blue); }
.w-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.w-cards span { height: 40px; border-radius: 10px; background: var(--bg); }
.morph[data-state="web"] .w-txt > * { animation: moIn .5s ease both; }
.morph[data-state="web"] .w-txt > :nth-child(2) { animation-delay: .45s; }
.morph[data-state="web"] .w-txt > :nth-child(1) { animation-delay: .38s; }
.morph[data-state="web"] .w-txt > :nth-child(n+3) { animation-delay: .55s; }
.morph[data-state="web"] .w-img { animation: moPop .7s var(--mo-ease) .45s both; }
.morph[data-state="web"] .w-cards span { animation: moIn .45s ease both; }
.morph[data-state="web"] .w-cards span:nth-child(1) { animation-delay: .7s; }
.morph[data-state="web"] .w-cards span:nth-child(2) { animation-delay: .78s; }
.morph[data-state="web"] .w-cards span:nth-child(3) { animation-delay: .86s; }
/* phone app */
.s-app { display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 8px; }
.a-head { display: flex; align-items: center; gap: 8px; }
.a-av { flex: none; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--violet), #A291F2); }
.a-l b { display: block; width: 62px; height: 8px; border-radius: 4px; background: var(--ink); }
.a-l i { display: block; width: 42px; height: 6px; margin-top: 4px; border-radius: 3px; background: #E4E8F2; }
.a-dot { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); }
.a-card { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 18px; background: var(--violet); }
.a-card .a-l b { background: #fff; }
.a-card .a-l i { background: rgba(255,255,255,.5); }
.a-card .a-l i.s { width: 28px; }
.a-ring { flex: none; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 5px rgba(255,255,255,.22); }
.a-ring svg { display: block; width: 44px; height: 44px; transform: rotate(-90deg); }
.a-ring circle { fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 28; }
.a-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.a-tiles span { height: 58px; border-radius: 16px; background: var(--t-yellow); }
.a-tiles span + span { background: var(--t-green); }
.a-list span { display: block; height: 28px; margin-top: 6px; border-radius: 11px; background: var(--bg); }
.a-tab { margin-top: auto; display: flex; justify-content: space-around; padding: 8px 4px 2px; border-top: 1px solid var(--line); }
.a-tab i { width: 16px; height: 16px; border-radius: 6px; background: #E4E8F2; }
.a-tab i.on { background: var(--violet); }
@keyframes moRing { from { stroke-dashoffset: 100; } }
.morph[data-state="app"] .a-ring circle { animation: moRing 1.2s ease-out .6s both; }
.morph[data-state="app"] .a-card { animation: moPop .6s var(--mo-ease) .45s both; }
.morph[data-state="app"] .a-tiles span, .morph[data-state="app"] .a-list span { animation: moIn .45s ease both; }
.morph[data-state="app"] .a-tiles span:nth-child(1) { animation-delay: .65s; }
.morph[data-state="app"] .a-tiles span:nth-child(2) { animation-delay: .72s; }
.morph[data-state="app"] .a-list span:nth-child(1) { animation-delay: .8s; }
.morph[data-state="app"] .a-list span:nth-child(2) { animation-delay: .88s; }
/* search results */
.s-seo { display: flex; flex-direction: column; gap: 10px; }
.s-seo .q { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; box-shadow: 0 0 0 1px #E4E8F2, 0 6px 14px -8px rgba(16,24,40,.25); color: var(--ink); font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.s-seo .q svg { flex: none; color: var(--blue); }
.serp { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.serp li { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; background: var(--bg); }
.serp li.me { z-index: 1; background: var(--t-green); box-shadow: inset 0 0 0 2px var(--green), 0 10px 20px -12px rgba(15,122,78,.6); }
.serp .pos { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: #fff; font-family: var(--display); font-size: 13px; font-weight: 800; }
.serp .r { flex: 1; min-width: 0; }
.serp .r small { display: block; color: var(--green-ink); font-size: 10.5px; font-weight: 700; line-height: 1.2; }
.serp li:not(.me) .r small { width: 40%; height: 6px; margin: 2px 0 4px; border-radius: 3px; background: #D9DEEA; }
.serp .r b { display: block; width: 86%; height: 9px; margin-top: 5px; border-radius: 5px; background: var(--blue-d); }
.serp li:not(.me) .r b { background: #BACAEE; }
.serp .r i { display: block; width: 64%; height: 6px; margin-top: 6px; border-radius: 3px; background: #D9DEEA; }
.s-seo .spark { display: block; width: 100%; height: 42px; margin-top: auto; overflow: visible; }
.s-seo .spark path { fill: none; stroke: var(--green); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
@keyframes moRise { from { transform: translateY(calc(200% + 16px)); } }
@keyframes moDrop { from { transform: translateY(calc(-100% - 8px)); } }
@keyframes moDraw { from { stroke-dashoffset: 100; } }
.morph[data-state="seo"] .serp li.me { animation: moRise 1s var(--mo-ease) .7s both; }
.morph[data-state="seo"] .serp li:not(.me) { animation: moDrop 1s var(--mo-ease) .7s both; }
.morph[data-state="seo"] .spark path { animation: moDraw 1.4s ease-out .8s both; }
/* ads */
.s-sea { display: flex; flex-direction: column; gap: 12px; }
.ad { position: relative; padding: 12px; border-radius: 14px; background: var(--bg); }
.ad-l { display: inline-block; margin-right: 6px; padding: 2px 7px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 10px; font-weight: 800; }
.ad small { color: var(--muted); font-size: 10.5px; font-weight: 600; }
.ad b { display: block; width: 80%; height: 10px; margin-top: 8px; border-radius: 5px; background: var(--blue-d); }
.ad i { display: block; width: 92%; height: 6px; margin-top: 7px; border-radius: 3px; background: #D9DEEA; }
.ad-cta { display: inline-block; width: 72px; height: 22px; margin-top: 10px; border-radius: 999px; background: var(--yellow); }
.ad .cursor { position: absolute; left: 64px; top: 66px; width: 16px; height: 20px; background: var(--ink); clip-path: polygon(0 0, 100% 62%, 56% 64%, 78% 100%, 62% 100%, 42% 68%, 0 90%); filter: drop-shadow(0 2px 2px rgba(0,0,0,.2)); }
.chart { flex: 1; display: flex; flex-direction: column; padding: 12px; border-radius: 14px; background: var(--t-yellow); }
.ch-h { display: flex; justify-content: space-between; color: var(--yellow-ink); font-size: 11.5px; font-weight: 800; }
.bars { flex: 1; display: flex; align-items: flex-end; gap: 6px; min-height: 56px; margin-top: 8px; }
.bars i { flex: 1; height: var(--h); border-radius: 6px 6px 3px 3px; background: #E2B23A; transform-origin: bottom; }
.bars i:last-child { background: var(--blue); }
@keyframes moGrow { from { transform: scaleY(.06); } }
@keyframes moCursor { 0% { opacity: 0; transform: translate(110px, 30px); } 60% { opacity: 1; transform: none; } 75% { transform: scale(.8); } 100% { transform: none; } }
.morph[data-state="sea"] .bars i { animation: moGrow .8s cubic-bezier(.3,1.4,.5,1) both; }
.morph[data-state="sea"] .bars i:nth-child(1) { animation-delay: .5s; }
.morph[data-state="sea"] .bars i:nth-child(2) { animation-delay: .58s; }
.morph[data-state="sea"] .bars i:nth-child(3) { animation-delay: .66s; }
.morph[data-state="sea"] .bars i:nth-child(4) { animation-delay: .74s; }
.morph[data-state="sea"] .bars i:nth-child(5) { animation-delay: .82s; }
.morph[data-state="sea"] .bars i:nth-child(6) { animation-delay: .9s; }
.morph[data-state="sea"] .bars i:nth-child(7) { animation-delay: .98s; }
.morph[data-state="sea"] .ad .cursor { animation: moCursor 1.2s ease .4s both; }
/* AI answer */
.s-ai { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding-bottom: 16px; }
.msg.u { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-left: 28%; padding: 10px 12px; border-radius: 16px 16px 4px 16px; background: var(--blue); }
.msg.u span { display: block; width: 100%; height: 7px; border-radius: 4px; background: rgba(255,255,255,.85); }
.msg.u span.s { width: 58%; }
.msg.ai { display: flex; align-items: flex-end; gap: 8px; }
.ai-av { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--violet), var(--blue)); color: #fff; font-size: 13px; }
.msg.ai > div { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 16px 16px 16px 4px; background: var(--t-violet-2); }
.msg.ai > div > span { height: 7px; border-radius: 4px; background: #CDC2F6; }
.msg.ai > div > span.s { width: 56%; }
.msg.ai .src { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; padding: 3px 9px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--violet); color: var(--violet-ink); font-size: 10.5px; font-style: normal; font-weight: 700; white-space: nowrap; }
.msg.typing > .dots { flex: 0 0 auto; flex-direction: row; gap: 4px; padding: 11px 12px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--violet); animation: moDot 1s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: .15s; }
.dots i:nth-child(3) { animation-delay: .3s; }
@keyframes moDot { 50% { opacity: .3; transform: translateY(-3px); } }
.morph[data-state="ai"] .msg.u { animation: moIn .45s ease .4s both; }
.morph[data-state="ai"] .msg.ai:not(.typing) { animation: moIn .5s ease .9s both; }
.morph[data-state="ai"] .msg.ai .src { animation: moPop .5s var(--mo-ease) 1.5s both; }
.morph[data-state="ai"] .msg.typing { animation: moIn .4s ease 1.9s both; }
/* plugin settings */
.s-plug { display: flex; padding: 0; }
.p-side { flex: none; display: flex; flex-direction: column; gap: 10px; width: 46px; padding: 12px 10px; background: var(--ink-2); }
.p-side i { height: 8px; border-radius: 4px; background: rgba(255,255,255,.25); }
.p-side i.on { background: var(--blue); }
.p-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; }
.p-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.p-ico { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--violet); color: #fff; font-family: var(--display); font-size: 14px; font-weight: 800; }
.p-t b { display: block; color: var(--ink); font-family: var(--display); font-size: 12px; font-weight: 800; }
.p-t i { display: block; width: 50px; height: 6px; margin-top: 3px; border-radius: 3px; background: #E4E8F2; }
.p-v { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: var(--t-green); color: var(--green-ink); font-size: 10px; font-weight: 800; }
.p-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 10px; background: var(--bg); }
.p-row span { width: 58%; height: 7px; border-radius: 4px; background: #D3D9E6; }
.p-row span.s { width: 40%; }
.tg { position: relative; flex: none; width: 30px; height: 17px; border-radius: 999px; background: #22A06B; }
.tg::after { content: ""; position: absolute; left: 2px; top: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; transform: translateX(13px); }
.p-save { align-self: flex-end; width: 74px; height: 22px; margin-top: auto; border-radius: 999px; background: var(--blue); }
@keyframes moTg { from { background: #CBD2E0; } }
@keyframes moKnob { from { transform: none; } }
.morph[data-state="plug"] .tg, .morph[data-state="plug"] .tg::after { animation-duration: .35s; animation-fill-mode: both; animation-timing-function: var(--mo-ease); }
.morph[data-state="plug"] .tg { animation-name: moTg; }
.morph[data-state="plug"] .tg::after { animation-name: moKnob; }
.morph[data-state="plug"] .p-row:nth-of-type(2) .tg, .morph[data-state="plug"] .p-row:nth-of-type(2) .tg::after { animation-delay: .6s; }
.morph[data-state="plug"] .p-row:nth-of-type(3) .tg, .morph[data-state="plug"] .p-row:nth-of-type(3) .tg::after { animation-delay: .9s; }
.morph[data-state="plug"] .p-row:nth-of-type(4) .tg, .morph[data-state="plug"] .p-row:nth-of-type(4) .tg::after { animation-delay: 1.2s; }
.morph[data-state="plug"] .p-row:nth-of-type(5) .tg, .morph[data-state="plug"] .p-row:nth-of-type(5) .tg::after { animation-delay: 1.5s; }
.morph .rating-pill { right: 0; bottom: 6%; z-index: 2; }
/* service chips (links) */
.mo-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.mo-tabs a { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 15px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-1), 0 0 0 1px rgba(16,24,40,.08); color: var(--ink); font-size: 14px; font-weight: 700; text-decoration: none; transition: background .3s, color .3s, transform .2s; }
.mo-tabs a:hover { transform: translateY(-2px); }
.mo-tabs a.on { background: var(--ink); color: #fff; }
.mo-ico { display: grid; }
.mo-prog { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--yellow); transform: scaleX(0); transform-origin: left; }
@keyframes moProg { to { transform: scaleX(1); } }
.morph.auto .mo-tabs a.on .mo-prog { animation: moProg var(--mo-dur, 3.8s) linear both; }
.morph.paused .mo-tabs a.on .mo-prog { animation-play-state: paused; }
@media (max-width: 560px) { .mo-tabs a { height: 36px; padding: 0 12px; font-size: 13px; } .mo-stage { height: 330px; } }
.s-seo .q, .serp li { flex: none; }
@media (max-width: 560px) {
  .mo-stage { height: 370px; }
  .morph .rating-pill { display: none; }
  .mo-dev { width: 94%; height: 74%; }
  .morph[data-state="seo"] .mo-dev, .morph[data-state="sea"] .mo-dev { width: 94%; height: 86%; }
  .morph[data-state="ai"] .mo-dev { width: 86%; height: 86%; }
  .morph[data-state="plug"] .mo-dev { width: 96%; height: 78%; }
  .morph[data-state="app"] .mo-dev { height: 96%; }
}
.prose .feature h3, .prose .feature h4, .prose .feature h5 { hyphens: auto; overflow-wrap: break-word; }

/* Product page on phones: the buy box comes right after the title and intro (not after the whole
   description); the existing .mobbar then appears as soon as the box has scrolled away. */
@media (max-width: 900px) {
  .pd { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; }
  .pd-main { display: contents; }
  .pd-main > * { order: 5; min-width: 0; }
  .pd-main > .pd-chips { order: 1; }
  .pd-main > .h-hero { order: 2; }
  .pd-main > .pd-short { order: 3; }
  .pd-aside { order: 4; position: static; max-width: none; margin-top: 22px; }
}

/* Shop on phones: the filter panel scrolls away with the page (sticky it covered half the screen),
   and the category chips sit in one swipeable row instead of five lines. */
@media (max-width: 700px) {
  .shop-tools { position: static; }
  .shop-tools .cat-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .shop-tools .cat-chips::-webkit-scrollbar { display: none; }
  .shop-tools .cat-chips a { flex: none; }
}