/* ═══════════════════════════════════════════════════════════════════════════
   MW UI Kit v1  (SOLOMLOOK) — vanilla CSS, no framework, no build step.
   Reusable by any brand: a brand is a THEME file (themes/*.css) that sets the
   --k-* tokens below. Components never hard-code a colour, a font or a radius.
   Content is visible without JavaScript; motion is an extra and stops under
   prefers-reduced-motion. Docs: docs/design/UI_KIT.md
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens (neutral defaults; a theme overrides these) ─────────────────── */
:root{
  --k-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --k-font-display:var(--k-font);
  --k-font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --k-bg:#fff; --k-bg-alt:#f6f7f9; --k-surface:#fff; --k-surface-2:#f1f3f6;
  --k-text:#15202b; --k-text-muted:#4a5866; --k-border:#dde2e8;
  --k-accent:#1f5fbf; --k-accent-strong:#174a96; --k-on-accent:#fff; --k-accent-soft:#e6eefb;
  --k-brand:#1f5fbf; --k-brand-2:#174a96; --k-on-brand:#fff;
  --k-dark-bg:#0f1720; --k-dark-surface:#17212c; --k-dark-border:#2a3644;
  --k-on-dark:#eaeef3; --k-on-dark-muted:#a3afbc; --k-accent-on-dark:#6fa8ff;
  --k-success:#2f7d4f; --k-warn:#9a5b00;
  --k-hero-bg:linear-gradient(180deg,var(--k-bg-alt),var(--k-bg));
  /* type */
  --k-fs-0:.875rem; --k-fs-1:1rem; --k-fs-2:1.125rem; --k-fs-3:1.375rem; --k-fs-4:clamp(1.6rem,3.4vw,2.25rem);
  --k-fs-5:clamp(2rem,5.2vw,3.4rem); --k-fs-6:clamp(2.3rem,6vw,4rem);
  /* space */
  --k-s1:.25rem; --k-s2:.5rem; --k-s3:.75rem; --k-s4:1rem; --k-s5:1.5rem; --k-s6:2rem; --k-s7:3rem; --k-s8:5rem;
  --k-band-y:clamp(3rem,7vw,5.5rem);
  --k-container:72rem; --k-gutter:1.25rem; --k-header-h:4rem;
  /* shape + depth */
  --k-radius-s:6px; --k-radius:12px; --k-radius-l:20px; --k-pill:999px;
  --k-shadow-s:0 1px 2px rgba(15,23,32,.08),0 1px 1px rgba(15,23,32,.04);
  --k-shadow:0 8px 24px -12px rgba(15,23,32,.25),0 2px 6px rgba(15,23,32,.06);
  --k-shadow-l:0 30px 60px -28px rgba(15,23,32,.45),0 8px 18px -8px rgba(15,23,32,.18);
  --k-focus:var(--k-accent);
  /* motion — same names and values as SOLOMMOTION (the site-wide tokens) */
  --motion-fast:160ms; --motion-base:280ms; --motion-slow:520ms; --motion-reveal:560ms; --motion-stagger:60ms;
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-in-out:cubic-bezier(.65,0,.35,1); --ease-snap:cubic-bezier(.34,1.56,.64,1);
  --motion-rise:18px; --motion-lift:-3px; --motion-press:.97;
  color-scheme:light;
}
@media (prefers-reduced-motion:reduce){
  :root{--motion-fast:0ms; --motion-base:0ms; --motion-slow:0ms; --motion-reveal:0ms; --motion-stagger:0ms; --motion-rise:0px; --motion-lift:0px; --motion-press:1;}
  .k *,.k *::before,.k *::after{animation-duration:1ms !important; animation-delay:0s !important; animation-iteration-count:1 !important; transition-duration:0s !important; transition-delay:0s !important; scroll-behavior:auto !important;}
}

/* ── 2. Base ──────────────────────────────────────────────────────────────── */
.k{font-family:var(--k-font); background:var(--k-bg); color:var(--k-text); line-height:1.6; font-size:var(--k-fs-1); -webkit-text-size-adjust:100%;}
.k *,.k *::before,.k *::after{box-sizing:border-box;}
:where(.k) a{color:var(--k-accent);}
:where(.k) :focus-visible{outline:3px solid var(--k-focus); outline-offset:3px; border-radius:4px;}
.k-icon{width:1.25em; height:1.25em; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; vertical-align:-.2em;}
.k-sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.k-container{width:100%; max-width:var(--k-container); margin-inline:auto; padding-inline:var(--k-gutter);}
.k-skip{position:absolute; left:-9999px; top:0; z-index:100; background:var(--k-accent); color:var(--k-on-accent); padding:.6rem 1rem; border-radius:0 0 var(--k-radius-s) 0;}
.k-skip:focus{left:0;}

/* ── 3. Type ──────────────────────────────────────────────────────────────── */
.k-eyebrow{display:inline-flex; align-items:center; gap:.5rem; font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--k-accent); margin:0 0 var(--k-s3);}
.k-h1{font-family:var(--k-font-display); font-size:var(--k-fs-5); line-height:1.06; letter-spacing:-.03em; font-weight:800; margin:0; text-wrap:balance;}
.k-h2{font-family:var(--k-font-display); font-size:var(--k-fs-4); line-height:1.12; letter-spacing:-.022em; font-weight:800; margin:0 0 var(--k-s4); text-wrap:balance;}
.k-h3{font-family:var(--k-font-display); font-size:var(--k-fs-3); line-height:1.2; letter-spacing:-.015em; font-weight:750; margin:0 0 var(--k-s2);}
.k-lead{font-size:var(--k-fs-2); color:var(--k-text-muted); max-width:42rem; margin:0 0 var(--k-s5);}
.k-muted{color:var(--k-text-muted);}
.k-center{text-align:center; margin-inline:auto;}
.k-section-head{max-width:46rem; margin:0 0 var(--k-s6);}
.k-section-head.k-center{margin-inline:auto;}

/* ── 4. Buttons ───────────────────────────────────────────────────────────── */
.k-btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:2.9rem; padding:.7rem 1.35rem; font:inherit; font-weight:700; font-size:var(--k-fs-1); line-height:1.2; text-decoration:none; text-align:center;
  border-radius:var(--k-pill); border:2px solid transparent; cursor:pointer; background:var(--k-accent); color:var(--k-on-accent);
  transition:transform var(--motion-fast) var(--ease-out),background-color var(--motion-fast),box-shadow var(--motion-base);}
.k-btn:hover{background:var(--k-accent-strong); transform:translateY(var(--motion-lift)); box-shadow:var(--k-shadow);}
.k-btn:active{transform:scale(var(--motion-press));}
.k-btn--secondary{background:transparent; color:var(--k-text); border-color:var(--k-border);}
.k-btn--secondary:hover{background:var(--k-surface-2); color:var(--k-text); border-color:var(--k-text-muted);}
.k-btn--ghost{background:transparent; color:var(--k-text); min-height:2.4rem; padding:.4rem .9rem; font-weight:600;}
.k-btn--ghost:hover{background:var(--k-surface-2); box-shadow:none; color:var(--k-text);}
.k-btn--lg{min-height:3.2rem; padding:.85rem 1.7rem; font-size:1.05rem;}
.k-btn .k-icon{transition:transform var(--motion-base) var(--ease-out);} .k-btn:hover .k-icon{transform:translateX(3px);}
.k-btn-row{display:flex; flex-wrap:wrap; gap:var(--k-s3); align-items:center;}
@media (max-width:40rem){ .k-btn-row--stack{flex-direction:column; align-items:stretch;} .k-btn-row--stack .k-btn{width:100%;} }
.k-link{display:inline-flex; align-items:center; gap:.35rem; font-weight:700; text-decoration:none; color:var(--k-accent);}
.k-link:hover{text-decoration:underline;} .k-link .k-icon{width:1em; height:1em; transition:transform var(--motion-base) var(--ease-out);} .k-link:hover .k-icon{transform:translateX(3px);}

/* ── 5. Section bands (light / alt / dark / brand) ────────────────────────── */
.k-band{padding-block:var(--k-band-y); background:var(--k-bg); color:var(--k-text); position:relative;}
.k-band--alt{--k-bg:var(--k-bg-alt);}
.k-band--dark,.k-band--brand{color:var(--k-text);}
.k-band--dark{background:var(--k-bg); --k-bg:var(--k-dark-bg); --k-bg-alt:var(--k-dark-surface); --k-surface:var(--k-dark-surface); --k-surface-2:#1f2b38; --k-text:var(--k-on-dark); --k-text-muted:var(--k-on-dark-muted); --k-border:var(--k-dark-border); --k-accent:var(--k-accent-on-dark); --k-accent-strong:#9cc2ff; --k-on-accent:#0b121a; --k-accent-soft:rgba(255,255,255,.07); --k-focus:#fff; color-scheme:dark;}
.k-band--brand{--k-bg:var(--k-brand); --k-surface:rgba(255,255,255,.12); --k-surface-2:rgba(255,255,255,.18); --k-text:var(--k-on-brand); --k-text-muted:rgba(255,255,255,.9); --k-border:rgba(255,255,255,.34); --k-accent:#fff; --k-accent-strong:#fff3ea; --k-on-accent:var(--k-brand-2); --k-accent-soft:rgba(255,255,255,.14); --k-focus:#fff; background:linear-gradient(135deg,var(--k-brand),var(--k-brand-2));}
.k-band--flush-top{padding-top:0;}

/* ── 6. Preview bar (compare A / B / C · Kit) ─────────────────────────────── */
.k-previewbar{background:#0b1118; color:#cfd8e2; font-size:.82rem;}
.k-previewbar .k-container{display:flex; flex-wrap:wrap; gap:.4rem 1rem; align-items:center; justify-content:space-between; padding-block:.5rem;}
.k-previewbar a{color:#fff; text-decoration:none; padding:.25rem .65rem; border-radius:var(--k-pill); border:1px solid #3a4756; font-weight:600;}
.k-previewbar a[aria-current="page"]{background:#fff; color:#0b1118; border-color:#fff;}
.k-previewbar a:hover{border-color:#fff;} .k-previewbar nav{display:flex; gap:.4rem; flex-wrap:wrap; align-items:center;}

/* ── 7. Header: sticky bar, nav, LOGIN control, mobile menu ───────────────── */
.k-header{position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--k-bg) 88%,transparent); -webkit-backdrop-filter:saturate(1.4) blur(12px); backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid transparent; transition:border-color var(--motion-base),box-shadow var(--motion-base);}
.k-header.is-scrolled{border-color:var(--k-border); box-shadow:var(--k-shadow-s);}
.k-header__inner{display:flex; align-items:center; gap:var(--k-s4); min-height:var(--k-header-h);}
.k-brand{display:inline-flex; align-items:center; gap:.55rem; font-weight:800; font-size:1.12rem; letter-spacing:-.02em; color:var(--k-text); text-decoration:none; margin-right:auto;}
.k-brand__mark{width:1.7rem; height:1.7rem; border-radius:7px; background:var(--k-brand); color:var(--k-on-brand); display:grid; place-items:center; font-size:.95rem; font-weight:800;}
.k-nav{display:none; gap:.15rem; align-items:center;}
.k-nav a{color:var(--k-text); text-decoration:none; font-weight:600; font-size:.97rem; padding:.5rem .8rem; border-radius:var(--k-pill);}
.k-nav a:hover{background:var(--k-surface-2);}
.k-actions{display:none; align-items:center; gap:var(--k-s2);}
.k-burger{display:inline-flex; align-items:center; justify-content:center; width:2.8rem; height:2.8rem; border-radius:var(--k-pill); border:1px solid var(--k-border); background:var(--k-surface); color:var(--k-text); cursor:pointer; list-style:none;}
.k-burger::-webkit-details-marker{display:none;}
.k-mobile{position:relative;} .k-mobile[open] .k-burger{background:var(--k-surface-2);}
.k-mobile__panel{position:absolute; right:0; top:calc(100% + .6rem); width:min(22rem,calc(100vw - 2.5rem)); background:var(--k-surface); color:var(--k-text); border:1px solid var(--k-border); border-radius:var(--k-radius); box-shadow:var(--k-shadow-l); padding:var(--k-s3); display:grid; gap:.15rem;}
.k-mobile__panel a{display:flex; align-items:center; gap:.6rem; padding:.8rem .9rem; border-radius:var(--k-radius-s); color:var(--k-text); text-decoration:none; font-weight:600; min-height:2.9rem;}
.k-mobile__panel a:hover{background:var(--k-surface-2);}
.k-mobile__label{font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--k-text-muted); font-weight:700; padding:.7rem .9rem .2rem;}
.k-mobile__panel .k-btn{margin-top:.4rem; color:var(--k-on-accent);} .k-mobile__panel .k-btn:hover{background:var(--k-accent-strong);}
.k-mobile__soon{display:flex; flex-direction:column; padding:.6rem .9rem; color:var(--k-text-muted); font-weight:600;} .k-mobile__soon small{font-weight:400;}
/* LOGIN control — a quiet text/ghost menu; "Book" stays the one solid button */
.k-login{position:relative;}
.k-login > summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:.35rem; padding:.5rem .8rem; border-radius:var(--k-pill); font-weight:600; font-size:.97rem; color:var(--k-text);}
.k-login > summary::-webkit-details-marker{display:none;}
.k-login > summary:hover,.k-login[open] > summary{background:var(--k-surface-2);}
.k-login > summary .k-icon:last-child{width:1em; height:1em; transition:transform var(--motion-base) var(--ease-out);} .k-login[open] > summary .k-icon:last-child{transform:rotate(180deg);}
.k-login__menu{position:absolute; right:0; top:calc(100% + .5rem); min-width:17rem; background:var(--k-surface); color:var(--k-text); border:1px solid var(--k-border); border-radius:var(--k-radius); box-shadow:var(--k-shadow-l); padding:.4rem; z-index:60;}
.k-login__item{display:flex; align-items:flex-start; gap:.7rem; padding:.7rem .75rem; border-radius:var(--k-radius-s); color:var(--k-text); text-decoration:none;}
a.k-login__item:hover{background:var(--k-surface-2);}
.k-login__item strong{display:block; font-size:.97rem; line-height:1.3;} .k-login__item small{display:block; color:var(--k-text-muted); font-size:.82rem; line-height:1.35;}
.k-login__item--soon{color:var(--k-text-muted); cursor:default;}
@media (min-width:56rem){
  .k-nav{display:flex;} .k-actions{display:flex;} .k-mobile{display:none;} .k-brand{margin-right:0;}
  .k-header__inner{gap:var(--k-s5);} .k-nav{margin-right:auto;}
}

/* ── 8. Hero (split), floating-card stack, framed mocks ───────────────────── */
.k-hero{padding-block:clamp(2.5rem,6vw,5rem) clamp(2.5rem,6vw,4.5rem); background:var(--k-hero-bg); position:relative; overflow:hidden;}
.k-hero__grid{display:grid; gap:var(--k-s6); align-items:center;}
.k-hero__copy{min-width:0;}
.k-hero__visual{position:relative; min-width:0;}
@media (min-width:62rem){ .k-hero__grid{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem);} .k-hero--wide-visual .k-hero__grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);} }
.k-hero--stack .k-hero__grid{grid-template-columns:1fr; text-align:left;}
.k-hero--center .k-hero__copy{text-align:center; margin-inline:auto; max-width:56rem;} .k-hero--center .k-btn-row{justify-content:center;}
.k-hero--glow::before{content:""; position:absolute; inset:-30% -10% auto auto; width:60rem; height:40rem; background:radial-gradient(closest-side,var(--k-glow,rgba(199,91,36,.18)),transparent); pointer-events:none;}
.k-frame{background:var(--k-surface); border:1px solid var(--k-border); border-radius:var(--k-radius); box-shadow:var(--k-shadow-l); overflow:hidden;}
.k-frame__bar{display:flex; align-items:center; gap:.4rem; padding:.55rem .8rem; background:var(--k-surface-2); border-bottom:1px solid var(--k-border);}
.k-frame__dot{width:.62rem; height:.62rem; border-radius:50%; background:var(--k-border); display:inline-block;}
.k-frame__url{margin-left:.6rem; flex:1; min-width:0; background:var(--k-bg); border:1px solid var(--k-border); border-radius:var(--k-pill); padding:.12rem .8rem; font-size:.75rem; color:var(--k-text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.k-frame__body{padding:var(--k-s4); font-size:.85rem;}
.k-frame__note{margin:0; padding:.45rem .8rem; border-top:1px solid var(--k-border); font-size:.72rem; color:var(--k-text-muted); background:var(--k-surface-2);}
.k-frame--phone{max-width:19rem; border-radius:2rem; border-width:6px; border-color:var(--k-text); margin-inline:auto;}
.k-frame--phone .k-frame__bar{justify-content:center; padding:.5rem;} .k-frame--phone .k-frame__bar::after{content:""; width:4rem; height:.28rem; border-radius:var(--k-pill); background:var(--k-border);}
/* floating cards: absolutely placed over a frame on wide screens, a plain stack on phones */
.k-floats{display:grid; gap:var(--k-s2); margin-top:var(--k-s4);}
.k-float{display:flex; align-items:center; gap:.7rem; background:var(--k-surface); color:var(--k-text); border:1px solid var(--k-border); border-radius:var(--k-radius); box-shadow:var(--k-shadow); padding:.65rem .9rem .65rem .7rem; font-size:.88rem; line-height:1.25; font-weight:650;}
.k-float__ico{width:2rem; height:2rem; border-radius:9px; display:grid; place-items:center; background:var(--k-accent-soft); color:var(--k-accent); flex:none;}
.k-float small{display:block; font-weight:500; color:var(--k-text-muted); font-size:.74rem;}
@media (min-width:48rem){
  .k-floats{display:block; margin:0; position:absolute; inset:0; pointer-events:none;}
  .k-float{position:absolute; width:max-content; max-width:14rem; left:var(--fx); top:var(--fy); right:var(--fr); bottom:var(--fb); animation:k-float-in var(--motion-slow) var(--ease-out) both, k-bob 6s var(--ease-in-out) infinite; animation-delay:calc(var(--fi,0)*140ms + 250ms), calc(var(--fi,0)*140ms + 1s);}
}
@keyframes k-float-in{from{opacity:0; transform:translateY(18px) scale(.96);} to{opacity:1; transform:none;}}
@keyframes k-bob{0%,100%{translate:0 0;} 50%{translate:0 -6px;}}
.k-hero-aside{margin-top:var(--k-s5); display:flex; flex-wrap:wrap; gap:var(--k-s3) var(--k-s5);}

/* ── 9. Slidable panels (carousel) — native scroll-snap; JS adds arrows/dots/keys ── */
.k-carousel{position:relative;}
.k-carousel__track{display:flex; gap:var(--k-s4); overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:.4rem .15rem 1rem; margin-inline:-.15rem; align-items:flex-start;}
.k-carousel__track::-webkit-scrollbar{display:none;}
.k-carousel__track > *{flex:0 0 min(85%,22rem); scroll-snap-align:start; min-width:0;}
.k-carousel--wide .k-carousel__track > *{flex-basis:min(88%,30rem);}
@media (min-width:48rem){ .k-carousel__track > *{flex-basis:calc((100% - 2*var(--k-s4))/3);} .k-carousel--wide .k-carousel__track > *{flex-basis:calc((100% - var(--k-s4))/2);} }
.k-carousel__ctrl{display:none; align-items:center; justify-content:space-between; gap:var(--k-s4); min-height:2.75rem;}
.k-js .k-carousel__ctrl{display:flex;}
.k-carousel__btns{display:flex; gap:var(--k-s2);}
.k-carousel__btn{width:2.75rem; height:2.75rem; border-radius:50%; border:1px solid var(--k-border); background:var(--k-surface); color:var(--k-text); display:grid; place-items:center; cursor:pointer; transition:transform var(--motion-fast) var(--ease-out),background-color var(--motion-fast);}
.k-carousel__btn:hover:not(:disabled){background:var(--k-surface-2); transform:translateY(-1px);} .k-carousel__btn:disabled{opacity:.35; cursor:default;}
.k-carousel__dots{display:flex; gap:.2rem; flex-wrap:wrap; min-height:1.5rem; align-items:center;}
.k-carousel__count{font-size:.88rem; font-weight:700; color:var(--k-text-muted); font-variant-numeric:tabular-nums;}
.k-carousel__dot{width:1.5rem; height:1.5rem; display:grid; place-items:center; border:0; background:none; cursor:pointer; padding:0;}
.k-carousel__dot::before{content:""; width:.55rem; height:.55rem; border-radius:50%; background:var(--k-border); transition:transform var(--motion-base) var(--ease-snap),background-color var(--motion-base);}
.k-carousel__dot[aria-current="true"]::before{background:var(--k-accent); transform:scale(1.35);}

/* ── 10. Tabs that switch a framed visual (GitHub-style) ──────────────────── */
.k-tabs__list{display:none; gap:.25rem; border-bottom:1px solid var(--k-border); margin-bottom:var(--k-s5); overflow-x:auto; scrollbar-width:none;}
.k-js .k-tabs__list{display:flex;} .k-tabs__list::-webkit-scrollbar{display:none;}
.k-tab{appearance:none; background:none; border:0; font:inherit; font-weight:700; color:var(--k-text-muted); padding:.85rem 1.1rem; cursor:pointer; white-space:nowrap; position:relative; border-radius:var(--k-radius-s) var(--k-radius-s) 0 0;}
.k-tab::after{content:""; position:absolute; left:.6rem; right:.6rem; bottom:-1px; height:3px; border-radius:3px 3px 0 0; background:var(--k-accent); transform:scaleX(0); transition:transform var(--motion-base) var(--ease-out);}
.k-tab[aria-selected="true"]{color:var(--k-text);} .k-tab[aria-selected="true"]::after{transform:scaleX(1);} .k-tab:hover{color:var(--k-text);}
.k-tabpanel{display:grid; gap:var(--k-s5); align-items:center; padding-block:var(--k-s4);}
.k-tabpanel[hidden]{display:none;}
.k-js .k-tabpanel:not([hidden]){animation:k-fade var(--motion-base) var(--ease-out) both;}
.k-js .k-tabpanel .k-tabpanel__h{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);}
@media (min-width:56rem){ .k-tabpanel{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:var(--k-s7);} }
@keyframes k-fade{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}

/* ── 11. Cards, grids, product blocks, step cards, offer cards ────────────── */
.k-grid{display:grid; gap:var(--k-s4);} .k-grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));} .k-grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,16.5rem),1fr));}
.k-card{background:var(--k-surface); border:1px solid var(--k-border); border-radius:var(--k-radius); padding:var(--k-s5); box-shadow:var(--k-shadow-s);}
.k-lift{transition:transform var(--motion-base) var(--ease-out),box-shadow var(--motion-base),border-color var(--motion-base);}
.k-lift:hover{transform:translateY(var(--motion-lift)); box-shadow:var(--k-shadow); border-color:color-mix(in srgb,var(--k-accent) 45%,var(--k-border));}
.k-feature__ico{width:2.75rem; height:2.75rem; border-radius:12px; display:grid; place-items:center; background:var(--k-accent-soft); color:var(--k-accent); margin-bottom:var(--k-s3);}
.k-feature h3{margin:0 0 .3rem; font-size:1.08rem; letter-spacing:-.01em;} .k-feature p{margin:0; color:var(--k-text-muted); font-size:.97rem;}
a.k-feature{text-decoration:none; color:inherit; display:block;} a.k-feature .k-link{margin-top:.7rem;}
/* product block: copy + framed visual, alternating */
.k-product{display:grid; gap:var(--k-s5); align-items:center; padding-block:var(--k-s5);}
.k-product + .k-product{border-top:1px solid var(--k-border);}
.k-product__copy .k-btn-row{margin-top:var(--k-s4);} .k-product__copy p{color:var(--k-text-muted); margin:0 0 var(--k-s3);} .k-product__copy .k-tag{font-weight:700; color:var(--k-accent); margin-bottom:.4rem;}
@media (min-width:56rem){ .k-product{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:var(--k-s7);} .k-product--flip .k-product__copy{order:2;} }
/* step cards */
.k-steps{display:grid; gap:var(--k-s4); list-style:none; margin:0; padding:0;}
@media (min-width:56rem){ .k-steps{grid-template-columns:repeat(3,minmax(0,1fr));} }
.k-step{position:relative; display:flex; flex-direction:column; gap:var(--k-s3); background:var(--k-surface); border:1px solid var(--k-border); border-radius:var(--k-radius); padding:var(--k-s5); box-shadow:var(--k-shadow-s);}
.k-step__n{align-self:flex-start; font-size:.78rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--k-accent); background:var(--k-accent-soft); padding:.25rem .7rem; border-radius:var(--k-pill);}
.k-step__art{border-radius:var(--k-radius-s); background:var(--k-surface-2); border:1px solid var(--k-border); aspect-ratio:16/9; width:100%; display:block;}
.k-step h3{margin:0; font-size:1.25rem; letter-spacing:-.015em;} .k-step p{margin:0; color:var(--k-text-muted);}
.k-step__price{font-weight:800; color:var(--k-text);}
.k-steps-after{margin:var(--k-s5) 0 0; padding:0; list-style:none; display:grid; gap:.4rem; color:var(--k-text-muted);} .k-steps-after strong{color:var(--k-text);}
/* offer / plan cards with a RECOMMENDED band */
.k-offers{display:grid; gap:var(--k-s4); align-items:stretch;}
@media (min-width:56rem){ .k-offers{grid-template-columns:repeat(3,minmax(0,1fr));} }
.k-offer{position:relative; display:flex; flex-direction:column; gap:var(--k-s3); background:var(--k-surface); border:1px solid var(--k-border); border-radius:var(--k-radius); padding:var(--k-s5); overflow:hidden;}
.k-offer--rec{border:2px solid var(--k-accent); box-shadow:var(--k-shadow-l); padding-top:calc(var(--k-s5) + 2rem);}
.k-offer__flag{position:absolute; left:0; right:0; top:0; background:var(--k-accent); color:var(--k-on-accent); text-align:center; font-size:.75rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; padding:.45rem;}
.k-offer h3{margin:0; font-size:1.35rem; letter-spacing:-.015em;} .k-offer__price{font-size:2rem; font-weight:800; letter-spacing:-.03em; line-height:1.1;} .k-offer__price small{font-size:.9rem; font-weight:600; color:var(--k-text-muted); letter-spacing:0; display:block;}
.k-offer p{margin:0; color:var(--k-text-muted);} .k-offer .k-btn{margin-top:auto;}
.k-offer ul{margin:0; padding:0; list-style:none; display:grid; gap:.45rem; color:var(--k-text-muted); font-size:.95rem;} .k-offer li{display:flex; gap:.55rem;} .k-offer li .k-icon{color:var(--k-accent); margin-top:.2em;}
/* before / after split panels */
.k-split{display:grid; gap:var(--k-s4);} @media (min-width:48rem){ .k-split{grid-template-columns:1fr 1fr;} }
.k-split__panel{border-radius:var(--k-radius); border:1px solid var(--k-border); background:var(--k-surface); padding:var(--k-s5);}
.k-split__panel--before{background:var(--k-surface-2);} .k-split__panel--after{border-color:var(--k-accent); box-shadow:inset 0 3px 0 var(--k-accent);}
.k-split__panel h3,.k-split__panel h4{margin:0 0 var(--k-s3); font-size:1.05rem;} .k-split__panel--before h3,.k-split__panel--before h4{color:var(--k-text-muted);}
/* stat callouts */
.k-stats{display:grid; gap:var(--k-s4); grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));}
.k-stat{border-left:3px solid var(--k-accent); padding:.2rem 0 .2rem var(--k-s4);} .k-stat__n{display:block; font-size:clamp(1.9rem,4.4vw,2.8rem); font-weight:800; letter-spacing:-.035em; line-height:1.05;} .k-stat__l{display:block; color:var(--k-text-muted); font-size:.92rem; margin-top:.2rem;}
.k-stat--card{background:var(--k-surface); border:1px solid var(--k-border); border-radius:var(--k-radius); box-shadow:var(--k-shadow); padding:.8rem 1.1rem; border-left-width:1px;}
/* trust strip */
.k-trust{display:flex; flex-wrap:wrap; gap:var(--k-s3) var(--k-s6); align-items:center; justify-content:center; padding-block:var(--k-s5); margin:0; list-style:none;}
.k-trust li{display:flex; align-items:center; gap:.6rem; font-weight:650; font-size:.95rem; color:var(--k-text);} .k-trust .k-icon{color:var(--k-accent);}
/* live-activity ticker (illustrative) */
.k-ticker{overflow:hidden; border-block:1px solid var(--k-border); background:var(--k-surface); -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.k-ticker__row{display:flex; gap:var(--k-s6); width:max-content; padding:.8rem 0; animation:k-marquee 38s linear infinite;}
.k-ticker__row span{display:inline-flex; gap:.55rem; align-items:center; font-weight:650; font-size:.92rem; white-space:nowrap;} .k-ticker__row .k-icon{color:var(--k-accent);}
.k-ticker:hover .k-ticker__row{animation-play-state:paused;}
@keyframes k-marquee{to{transform:translateX(-50%);}}
/* CTA band */
.k-cta{text-align:center;} .k-cta .k-h2{margin-inline:auto;} .k-cta .k-btn-row{justify-content:center;}
/* ── 11b. UI-mock primitives (for framed product mocks; always sample data) ── */
.k-pill{display:inline-flex; align-items:center; gap:.3rem; font-size:.74rem; font-weight:700; line-height:1; padding:.32rem .6rem; border-radius:var(--k-pill); background:var(--k-surface-2); color:var(--k-text-muted); white-space:nowrap;}
.k-pill .k-icon{width:1em; height:1em;}
.k-pill--ok{background:color-mix(in srgb,#2f9e5b 16%,var(--k-surface)); color:color-mix(in srgb,#1e7a43 75%,var(--k-text));}
.k-pill--bad{background:color-mix(in srgb,#d64545 15%,var(--k-surface)); color:color-mix(in srgb,#b42d2d 75%,var(--k-text));}
.k-pill--warn{background:color-mix(in srgb,#d99a1e 18%,var(--k-surface)); color:color-mix(in srgb,#8a5a00 75%,var(--k-text));}
.k-pill--info{background:var(--k-accent-soft); color:var(--k-accent);}
.k-pill--muted{background:var(--k-surface-2); color:var(--k-text-muted);}
.k-pill--label{font-size:.8rem; font-weight:700; padding:.42rem .85rem; margin:0 0 var(--k-s4); border:1px solid var(--k-border); background:var(--k-surface); color:var(--k-text); letter-spacing:.01em;}
.k-tag{margin:0 0 .35rem; font-size:.88rem;}
.k-mrows{list-style:none; margin:0; padding:0; display:grid; gap:.4rem;}
.k-mrows li{display:flex; align-items:center; gap:.6rem; padding:.55rem .65rem; border:1px solid var(--k-border); border-radius:var(--k-radius-s); background:var(--k-surface); font-size:.82rem; font-weight:600; min-width:0;}
.k-mrows li > span:first-of-type{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .k-mrows li > .k-icon{color:var(--k-accent);}
.k-kpi{border:1px solid var(--k-border); border-radius:var(--k-radius-s); padding:.5rem .65rem; background:var(--k-surface);} .k-kpi span{display:block; font-size:.68rem; color:var(--k-text-muted); text-transform:uppercase; letter-spacing:.06em;} .k-kpi b{font-size:1.25rem; letter-spacing:-.02em;}
.k-gauge{--v:50; width:4.6rem; height:4.6rem; border-radius:50%; display:grid; place-content:center; text-align:center; flex:none; background:radial-gradient(closest-side,var(--k-surface) 76%,transparent 78%),conic-gradient(var(--k-accent) calc(var(--v)*1%),var(--k-surface-2) 0);}
.k-gauge b{font-size:1.05rem; line-height:1;} .k-gauge span{font-size:.62rem; color:var(--k-text-muted);}
.k-bars{display:grid; gap:.55rem;} .k-bars > div{position:relative; height:2rem; border-radius:var(--k-radius-s); background:var(--k-surface-2); overflow:hidden;}
.k-bars > div::before{content:""; position:absolute; inset:0 auto 0 0; width:calc(var(--v)/var(--max,10)*100%); background:var(--k-accent-soft); border-right:3px solid var(--k-accent);}
.k-bars span{position:relative; display:block; line-height:2rem; padding-left:.7rem; font-size:.8rem; font-weight:700;}
.k-checks{list-style:none; margin:var(--k-s5) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; font-size:.9rem; color:var(--k-text-muted);}
.k-checks li{display:flex; gap:.45rem; align-items:flex-start;} .k-checks .k-icon{color:var(--k-accent); margin-top:.15em;}

/* ── 12. Footer ───────────────────────────────────────────────────────────── */
.k-footer{background:var(--k-dark-bg); color:var(--k-on-dark-muted); padding-block:var(--k-s7) var(--k-s5); font-size:.93rem;}
.k-footer a{color:var(--k-on-dark); text-decoration:none;} .k-footer a:hover{text-decoration:underline;}
.k-footer__grid{display:grid; gap:var(--k-s6) var(--k-s5); grid-template-columns:repeat(2,minmax(0,1fr));}
@media (min-width:56rem){ .k-footer__grid{grid-template-columns:1.4fr repeat(3,1fr);} }
.k-footer__brand{grid-column:1/-1;} @media (min-width:56rem){ .k-footer__brand{grid-column:auto;} }
.k-footer h2{font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--k-on-dark); margin:0 0 var(--k-s3);}
.k-footer ul{list-style:none; margin:0; padding:0; display:grid; gap:.5rem;} .k-footer p{margin:.4rem 0 0;}
.k-footer .k-brand{color:#fff; margin:0 0 .4rem;} .k-footer__soon{color:var(--k-on-dark-muted);}

/* ── 13. Motion helpers: scroll reveal (JS marks only below-the-fold items) ── */
.k-pre{opacity:0; transform:translate3d(0,var(--motion-rise),0);}
.k-pre.is-in{opacity:1; transform:none; transition:opacity var(--motion-reveal) var(--ease-out),transform var(--motion-reveal) var(--ease-out); transition-delay:calc(var(--ri,0)*var(--motion-stagger));}
@media print{ .k-pre{opacity:1 !important; transform:none !important;} .k-header{position:static;} .k-previewbar{display:none;} }