/* webkrown.com — page styles. Colours, type, radii and motion timings come from tokens.css
   (the WebKrown design system); motion behaviour comes from wk-motion. Night theme throughout.

   CRAFT RULES this sheet keeps (docs/motion-playbook.md §9):
   · every surface has a FINISHED edge (.fin recipe below): a hairline that is lighter at the top
     than the bottom, a 1px inner highlight, and a soft deep shadow — never a flat 1px line alone
   · every card carries its own colour (--hue): a wash in its corner, a tinted icon tile
   · nothing rests on a transform (scale, rotate, fractional translate) — settled = sharp
   · text masks leave room for overhanging ink (italic swashes, tight tracking) */
:root { --wkm-accent: var(--accent); --wkm-beam: var(--amber);
  --crown: linear-gradient(100deg, var(--sky), var(--crown-blue) 20%, var(--krown-indigo) 38%, var(--orchid) 58%, var(--magenta) 72%, var(--rose) 86%, var(--ember));
  --page: 1360px; --gutter: 40px;
  --wkm-coin-face: #1a1631; --wkm-coin-ink: rgba(243, 241, 250, .86); --wkm-coin-rim-a: var(--sky); --wkm-coin-rim-b: var(--magenta); --wkm-coin-rim-c: var(--ember); --wkm-coin-font: var(--font-mono); }
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--canvas); color-scheme: dark; overflow-x: clip; }
/* declared on the themed element (not :root) so var(--surface)/var(--ink) resolve to THIS theme */
[data-theme] { --ring: color-mix(in srgb, var(--ink) 10%, transparent);
  --fin-fill: linear-gradient(180deg, color-mix(in srgb, var(--surface), #fff 2.5%), var(--surface));
  --fin-shadow: 0 1px 0 rgba(0, 0, 0, .5), 0 30px 60px -30px rgba(0, 0, 0, .7); }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
img { max-width: 100%; display: block; }
a { color: inherit; }
.wrap { width: 100%; max-width: calc(var(--page) + var(--gutter) * 2); margin: 0 auto; padding-inline: var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
svg { flex: none; }

/* the finished edge */
.card, .plan, .wkm-hstory .wkm-panel, .win, .float, .toast, .tpl-frame { position: relative; background: var(--fin-fill); box-shadow: var(--fin-shadow); }
/* the ring is drawn ON TOP of the content, as one geometric shape (box-shadow on ::after) — so an image or a
   bar touching the edge never covers it, and the curve is anti-aliased once. See the EDGE RULE in the playbook §8. */
.card::after, .plan::after, .wkm-hstory .wkm-panel::after, .win::after, .float::after, .toast::after, .tpl-frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5; box-shadow: inset 0 0 0 1px var(--ring-c, var(--ring)), inset 0 1px 0 rgba(255, 255, 255, .07); }

/* type — big and confident; the stressed word is the brand's italic in the crown gradient */
.h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(58px, 9.2vw, 144px); line-height: .92; letter-spacing: -0.048em; margin: 0; text-wrap: balance; }
.h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(46px, 6.6vw, 100px); line-height: .96; letter-spacing: -0.045em; margin: 0; text-wrap: balance; }
.h1 em, .h2 em, .h3 em, .p-title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; padding: 0 .08em 0 .02em;
  background: var(--crown); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: crown-flow 9s ease-in-out infinite alternate; }
@keyframes crown-flow { from { background-position: 0% 0; } to { background-position: 100% 0; } }
.h3 { font-family: var(--font-display); font-weight: 650; font-size: 32px; line-height: 1.08; letter-spacing: -0.03em; margin: 0; }
.lead { font: 400 20px/1.55 var(--font-sans); color: var(--ink-2); margin: 0; max-width: 48ch; text-wrap: pretty; }

/* eyebrow: a small glass pill — index, a live crown dot, the label resolving */
.wkm-eyebrow { width: max-content; max-width: 100%; display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 7px 14px 7px 8px; border-radius: 999px; font: 500 12.5px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
  background: linear-gradient(color-mix(in srgb, var(--surface-raised) 88%, transparent), color-mix(in srgb, var(--surface) 88%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent), inset 0 1px 0 rgba(255, 255, 255, .08); backdrop-filter: blur(12px); }
.wkm-eyebrow-i { padding: 4px 8px; border-radius: 999px; background: var(--surface-sunk); color: var(--ink); letter-spacing: .06em; }
.wkm-eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--crown); animation: dot-pulse 2.4s ease-out infinite; margin-left: 4px; }
.wkm-eyebrow-i + .wkm-eyebrow-dot { margin-left: 0; }
.wkm-eyebrow-mark { display: inline-grid; place-items: center; margin-left: 2px; } .wkm-eyebrow-mark img { height: 14px; width: auto; }
@keyframes dot-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--orchid) 55%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }

/* buttons */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent; font: 500 15px/1 var(--font-sans); color: var(--ink); text-decoration: none; cursor: pointer; white-space: nowrap; background: none; transition: background 160ms, border-color 160ms, box-shadow 280ms, color 200ms; }
.btn-lg { height: 58px; padding: 0 30px; font-size: 16px; }
.btn-sm { height: 42px; padding: 0 18px; font-size: 14px; }
.btn .arr { transition: transform 280ms var(--ease-out); }
.btn:hover .arr { transform: translateX(4px); }
.btn-crown { color: #fff; background: linear-gradient(180deg, #16132c, var(--krown-ink)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 16%, transparent), inset 0 1px 0 rgba(255, 255, 255, .12), 0 8px 24px rgba(0, 0, 0, .45); }
.btn-crown:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent), inset 0 1px 0 rgba(255, 255, 255, .12), var(--shadow-glow); }
.btn-ghost { color: var(--ink-2); }
.btn-ghost:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent); }
.btn-line { background: linear-gradient(color-mix(in srgb, var(--surface-raised) 70%, transparent), color-mix(in srgb, var(--surface) 70%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 16%, transparent), inset 0 1px 0 rgba(255, 255, 255, .08); }
.btn-line.wkm-fill { --wkm-fill: var(--accent); }
.btn-line.wkm-fill:hover { color: #fff; }
.btn-primary { color: #fff; background: linear-gradient(180deg, var(--accent-hover), var(--accent)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .28), 0 12px 32px -8px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 16px 44px -8px color-mix(in srgb, var(--accent) 90%, transparent); }

/* NAV — a floating glass pill */
.nav-slot { position: fixed; top: 16px; left: 0; right: 0; z-index: 50; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; }
.nav { pointer-events: auto; width: 100%; max-width: 1140px; height: 66px; display: flex; align-items: center; gap: 8px; padding: 0 9px 0 20px; border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 66%, transparent);
  backdrop-filter: saturate(170%) blur(20px); -webkit-backdrop-filter: saturate(170%) blur(20px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent), inset 0 1px 0 rgba(255, 255, 255, .08), 0 14px 44px rgba(0, 0, 0, .4); }
.nav[data-wkm-scrolled] { max-width: 900px; height: 58px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font: 700 22px/1 var(--font-display); letter-spacing: -0.025em; }
.brand img { height: 30px; width: auto; }
.foot .brand-lg { font: 700 30px/1 var(--font-display); letter-spacing: -0.03em; gap: 14px; color: var(--ink); } .brand-lg img { height: 44px; }
.brand b { font-weight: 700; background: linear-gradient(90deg, var(--accent-text), var(--magenta)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-right: .04em; }
.nav-links { display: flex; gap: 2px; margin: 0 auto; }
.nav-links a { padding: 11px 15px; border-radius: 999px; font: 500 14.5px/1 var(--font-sans); color: var(--ink-2); text-decoration: none; transition: color 160ms, background 160ms; }
.nav-links a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.nav-end { display: flex; gap: 6px; align-items: center; }

/* the phone menu: a two-line button that becomes a cross, and a glass sheet */
.nav-menu { display: none; position: relative; width: 44px; height: 44px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--ink) 8%, transparent); cursor: pointer; }
.nav-menu i { position: absolute; left: 13px; right: 13px; height: 1.8px; border-radius: 2px; background: var(--ink); transition: transform 300ms var(--ease-out), top 300ms var(--ease-out); }
.nav-menu i:first-child { top: 17px; } .nav-menu i:last-child { top: 25px; }
.nav-menu[aria-expanded="true"] i:first-child { top: 21px; transform: rotate(45deg); } .nav-menu[aria-expanded="true"] i:last-child { top: 21px; transform: rotate(-45deg); }
.nav-sheet { position: fixed; left: 12px; right: 12px; top: 88px; padding: 18px; border-radius: 28px; pointer-events: auto; display: grid; gap: 16px;
  background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: inset 0 0 0 1px var(--ring), inset 0 1px 0 rgba(255, 255, 255, .07), 0 30px 60px rgba(0, 0, 0, .6); animation: sheet-in 360ms var(--ease-out); }
.nav-sheet[hidden] { display: none; }
.nav-sheet nav { display: grid; }
.nav-sheet nav a { padding: 16px 10px; font: 600 22px/1 var(--font-display); letter-spacing: -0.02em; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.nav-sheet .btn { width: 100%; height: 54px; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(-10px) scale(.98); } }
.nav-links a[aria-current="page"] { color: var(--ink); background: color-mix(in srgb, var(--ink) 9%, transparent); }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 12px 18px; border-radius: 12px; background: var(--accent); color: #fff; text-decoration: none; font-weight: 600; }
.skip:focus { top: 16px; }
.sec-head.is-flush { margin: 0; }
.more-link { display: flex; justify-content: center; margin-top: 40px; }
.more-link .btn { height: 48px; box-shadow: inset 0 0 0 1px var(--ring); }

/* HERO */
.hero { position: relative; padding: 180px 0 0; isolation: isolate; }
.hero > .wkm-aurora { position: absolute; left: 0; right: 0; top: -80px; height: 1150px; z-index: -1; -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent); mask-image: linear-gradient(180deg, #000 40%, transparent); opacity: .9; }
.hero-copy { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 30px; }
.hero-copy .lead { text-align: center; font-size: 21px; }
.try { position: relative; display: flex; gap: 6px; align-items: center; width: 100%; max-width: 560px; padding: 6px 6px 6px 24px; border-radius: 999px;
  background: linear-gradient(color-mix(in srgb, var(--surface-raised) 86%, transparent), color-mix(in srgb, var(--surface) 86%, transparent));
  backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent), inset 0 1px 0 rgba(255, 255, 255, .08), 0 24px 60px rgba(0, 0, 0, .5); }
.try input { flex: 1; min-width: 0; height: 50px; border: 0; outline: 0; background: transparent; font: 400 17px/1 var(--font-sans); color: var(--ink); }
.try input::placeholder { color: var(--ink-3); }
.try:focus-within { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 4px color-mix(in srgb, var(--accent) 28%, transparent), 0 24px 60px rgba(0, 0, 0, .5); }
.addr { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; font: 400 14px/1 var(--font-mono); color: var(--ink-3); margin-top: -8px; }
.addr b { color: var(--ink); font-weight: 500; }
.addr i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 10px var(--success); }

/* the showcase: ONE design on a browser and the same on a phone, feature cards and the coin floating */
.show { position: relative; margin: 96px auto 0; max-width: 1280px; padding-bottom: 40px; }
.show-frame { position: relative; margin-right: 150px; border-radius: 24px; padding: 1px; background: linear-gradient(170deg, color-mix(in srgb, var(--ink) 34%, transparent), color-mix(in srgb, var(--ink) 6%, transparent) 45%); box-shadow: 0 70px 140px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(0, 0, 0, .5), 0 0 120px -40px color-mix(in srgb, var(--krown-violet) 50%, transparent); }
.browser { border-radius: 23px; overflow: hidden; background: var(--surface-raised); }
.b-bar { height: 46px; display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, color-mix(in srgb, var(--surface-raised), #fff 3%), var(--surface-raised)); }
.b-dots { display: flex; gap: 7px; } .b-dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--line-strong); }
.b-dots i:nth-child(1) { background: #ff5f57; } .b-dots i:nth-child(2) { background: #febc2e; } .b-dots i:nth-child(3) { background: #28c840; }
.b-url { flex: 1; max-width: 400px; margin: 0 auto; height: 28px; border-radius: 999px; background: var(--surface-sunk); box-shadow: inset 0 0 0 1px var(--line); display: flex; align-items: center; justify-content: center; gap: 8px; font: 400 12.5px/1 var(--font-mono); color: var(--ink-2); }
.b-url svg { width: 12px; height: 12px; stroke: var(--success); fill: none; stroke-width: 2; }
.b-live { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--success-soft); color: var(--success); font: 600 11.5px/1 var(--font-sans); }
.b-live i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; animation: dot-live 2s ease-in-out infinite; }
@keyframes dot-live { 50% { opacity: .35; } }
.b-view { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-sunk); }
.b-view img, .p-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: opacity 700ms var(--ease-out), transform 1000ms var(--ease-out); }
.b-view img:not(.is-on), .p-screen img:not(.is-on) { opacity: 0; transform: scale(1.03); }
.phone { position: absolute; right: 0; bottom: 0; width: 260px; aspect-ratio: 390 / 844; padding: 9px; border-radius: 44px; background: linear-gradient(160deg, #2a2640, #0b0a12 40%); box-shadow: 0 50px 90px rgba(0, 0, 0, .75), inset 0 0 0 1px color-mix(in srgb, #fff 16%, transparent), inset 0 0 0 3px #0b0a12; }
.p-screen { position: relative; width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background: var(--surface-sunk); }
.p-notch { position: absolute; top: 9px; left: 50%; width: 80px; height: 23px; margin-left: -40px; border-radius: 999px; background: #0b0a12; z-index: 2; }
.float { position: absolute; z-index: 3; display: flex; gap: 12px; align-items: center; padding: 12px 18px 12px 12px; border-radius: 20px; --fin-fill: linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 92%, transparent), color-mix(in srgb, var(--surface) 92%, transparent)); backdrop-filter: blur(18px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 28px 56px -12px rgba(0, 0, 0, .65); }
.float b { display: block; font: 600 14.5px/1.3 var(--font-sans); }
.float span { font: 400 13px/1.4 var(--font-sans); color: var(--ink-3); }
.float .ico { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; flex: none; }
.float .ico svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.f-book { left: -64px; top: 36%; } .f-book .ico { background: var(--success-soft); color: var(--success); }
.f-pay { left: 12%; bottom: -10px; } .f-pay .ico { background: var(--accent-soft); color: var(--accent-text); }
.f-live { right: 250px; top: -30px; } .f-live .ico { background: color-mix(in srgb, var(--ember) 20%, transparent); color: var(--amber); }
.seal { position: absolute; left: -64px; top: -96px; z-index: 4; }
.switch { display: flex; justify-content: center; margin-top: 44px; }

/* the glide switch — glass track, the chosen pill lit with the crown edge */
.wkm-tabs { display: inline-flex; gap: 2px; padding: 5px; border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 11%, transparent), inset 0 1px 0 rgba(255, 255, 255, .05); backdrop-filter: blur(14px); }
.wkm-tabs button { position: relative; z-index: 1; height: 42px; padding: 0 20px; border: 0; background: none; border-radius: 999px; font: 500 14.5px/1 var(--font-sans); color: var(--ink-3); cursor: pointer; transition: color 200ms; white-space: nowrap; display: inline-flex; align-items: center; }
.wkm-tabs button:hover { color: var(--ink-2); }
.wkm-tabs button.is-on { color: var(--ink); }
.wkm-tabs .wkm-glide { top: 5px; bottom: 5px; background: linear-gradient(180deg, #332c55, #231e3d); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13), inset 0 1px 0 rgba(255, 255, 255, .16), 0 8px 22px -6px color-mix(in srgb, var(--krown-violet) 70%, transparent); }
.wkm-tabs .wkm-glide::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--accent-text), var(--magenta), transparent); opacity: .9; }
.wkm-tabs .save { margin-left: 8px; padding: 4px 8px; border-radius: 999px; font: 600 11px/1 var(--font-sans); background: var(--success-soft); color: var(--success); }

/* kinds strip */
.kinds { padding: 104px 0 0; }
.kind { display: inline-flex; align-items: center; gap: 22px; font: 600 34px/1 var(--font-display); letter-spacing: -0.025em; color: var(--ink-3); white-space: nowrap; }
.kind::after { content: ""; width: 34px; height: 23px; background: url(img/webkrown-mark-tight.webp) center / contain no-repeat; opacity: .9; }

/* sections */
.sec { position: relative; padding: 160px 0; }
.sec-head { display: grid; gap: 24px; justify-items: start; margin-bottom: 72px; max-width: 1080px; }
.sec-head.center { justify-items: center; text-align: center; margin-inline: auto; }
.sec-head.center .lead { text-align: center; }
.ico-t { position: relative; width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; flex: none; color: #fff;
  background: linear-gradient(160deg, color-mix(in srgb, var(--hue, var(--accent)) 58%, #fff 6%), color-mix(in srgb, var(--hue, var(--accent)) 26%, var(--surface)) 70%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 16%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -6px 12px rgba(0, 0, 0, .22), 0 4px 10px -4px rgba(0, 0, 0, .6); }
/* glass: a soft specular sheen across the top half */
.ico-t::before { content: ""; position: absolute; left: 3px; right: 3px; top: 3px; height: 46%; border-radius: 12px 12px 18px 18px / 12px 12px 8px 8px; background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0)); pointer-events: none; }
.ico-t svg { position: relative; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); }
.ico-t svg { width: 23px; height: 23px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ─ HOW IT WORKS — pinned; three big panels travel sideways, each a working window ─ */
.wkm-hstory .wkm-pin { flex-direction: column; justify-content: center; align-items: stretch; gap: 36px; padding-top: 84px; }
.hs-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; width: 100%; max-width: calc(var(--page) + var(--gutter) * 2); margin: 0 auto; padding-inline: var(--gutter); }
.hs-title { display: grid; gap: 20px; justify-items: start; }
.hs-steps { position: relative; display: flex; gap: 36px; margin: 0 0 10px; padding: 0 0 18px; list-style: none; font: 500 14px/1 var(--font-sans); color: var(--ink-3); }
.hs-steps li { transition: color 300ms; }
.hs-steps li::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 9px; border-radius: 50%; background: var(--line-strong); vertical-align: 1px; transition: background 300ms, box-shadow 300ms; }
.hs-steps li:first-child, [data-wkm-active="1"] .hs-steps li:nth-child(2), [data-wkm-active="2"] .hs-steps li:nth-child(-n+3) { color: var(--ink); }
.hs-steps li:first-child::before, [data-wkm-active="1"] .hs-steps li:nth-child(2)::before, [data-wkm-active="2"] .hs-steps li:nth-child(-n+3)::before { background: var(--accent-text); box-shadow: 0 0 10px var(--accent-text); }
.hs-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.hs-bar i { display: block; height: 100%; width: calc(var(--wkm-progress, 0) * 100%); background: var(--crown); border-radius: inherit; }
.wkm-hstory .wkm-track { gap: 32px; padding-inline: max(var(--gutter), calc((100vw - var(--page)) / 2)); }
.wkm-hstory .wkm-panel { position: relative; overflow: hidden; width: min(86vw, 1240px); height: clamp(480px, calc(100svh - 330px), 640px); display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 48px; align-items: center; padding: 56px; border-radius: 36px; transition: opacity 500ms var(--ease-out); opacity: .45;
  background: radial-gradient(70% 90% at 100% 100%, color-mix(in srgb, var(--hue) 16%, transparent), transparent 70%), var(--fin-fill); --ring-c: color-mix(in srgb, var(--hue) 22%, rgba(255, 255, 255, .08)); }
.wkm-hstory .wkm-panel:nth-child(1) { --hue: var(--sky); } .wkm-hstory .wkm-panel:nth-child(2) { --hue: var(--krown-violet); } .wkm-hstory .wkm-panel:nth-child(3) { --hue: var(--ember); }
.wkm-hstory .wkm-panel.is-active { opacity: 1; }
.p-copy { position: relative; display: grid; gap: 18px; align-content: center; justify-items: start; }
.p-big { display: block; margin: 0 0 6px -6px; padding-right: .06em; font: 800 150px/.82 var(--font-display); letter-spacing: -0.06em; width: max-content; pointer-events: none; user-select: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--hue) 70%, #fff), color-mix(in srgb, var(--hue) 30%, transparent) 90%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; opacity: .9; }
.p-num { position: relative; font: 500 13px/1 var(--font-mono); color: color-mix(in srgb, var(--hue) 55%, #fff); letter-spacing: .14em; text-transform: uppercase; }
.p-title { position: relative; margin: 0; font: 700 clamp(40px, 4vw, 62px)/1 var(--font-display); letter-spacing: -0.04em; }
.p-copy p { position: relative; font: 400 18px/1.6 var(--font-sans); color: var(--ink-2); margin: 0; max-width: 32ch; }
.p-stage { position: relative; height: 100%; display: grid; place-items: center; }

/* the window every stage is drawn in */
.win { position: relative; border-radius: 18px; overflow: hidden; --fin-fill: linear-gradient(180deg, var(--surface-raised), var(--surface)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 40px 80px -24px rgba(0, 0, 0, .8); }
.win-bar { height: 40px; display: grid; grid-template-columns: 60px 1fr 60px; align-items: center; padding: 0 14px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface-raised), #fff 2%); }
.win-bar .b-dots i { width: 10px; height: 10px; }
.win-t { justify-self: center; font: 500 12px/1 var(--font-mono); color: var(--ink-3); letter-spacing: .04em; }

/* step 1: the form types itself and the preview takes shape beside it */
.w-s1 { width: 100%; }
.s1 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; padding: 24px; align-items: stretch; }
.s1-form { display: grid; gap: 18px; align-content: center; }
.fl { display: grid; gap: 9px; }
.fl > span:first-child { font: 500 12.5px/1 var(--font-sans); color: var(--ink-3); }
.fl-field { height: 50px; border-radius: 13px; background: var(--surface-sunk); box-shadow: inset 0 0 0 1px var(--field-line); display: flex; align-items: center; padding: 0 16px; font: 500 17px/1 var(--font-sans); transition: box-shadow 400ms; }
.is-active .fl-field { box-shadow: inset 0 0 0 1px var(--accent-text), 0 0 0 4px color-mix(in srgb, var(--accent) 24%, transparent); }
.mf-type { display: inline-block; overflow: hidden; white-space: nowrap; width: 0; padding-right: 2px; border-right: 2px solid var(--accent-text); }
.is-active .mf-type { animation: type 1.4s steps(10) .3s forwards, caret .8s step-end infinite; }
@keyframes type { to { width: calc(10ch + 4px); } }
@keyframes caret { 50% { border-color: transparent; } }
.mf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mf-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-strong); font: 500 13px/1 var(--font-sans); color: var(--ink-2); transition: all 400ms var(--ease-out); }
.mf-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.is-active .mf-chip.pick { background: color-mix(in srgb, var(--rose) 18%, transparent); box-shadow: inset 0 0 0 1px var(--rose); color: var(--ink); transition-delay: 1.8s; }
.mf-swatches { display: flex; gap: 10px; }
.mf-sw { width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c), #fff 30%), var(--c) 60%); box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--line-strong); transition: box-shadow 300ms 2.3s, transform 400ms 2.3s var(--ease-spring); }
.is-active .mf-sw.pick { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--ink); transform: scale(1.1); }
.s1-prev { --pv: #a39fb2; position: relative; border-radius: 14px; overflow: hidden; background: #faf5f3; color: #2a1f22; display: grid; grid-template-rows: auto 1fr auto; box-shadow: 0 20px 40px rgba(0, 0, 0, .45); transition: --pv 0s; }
.is-active .s1-prev { --pv: #c77b8b; }
.pv-nav { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid #efe6e3; }
.pv-name { font: italic 400 17px/1 var(--font-serif); clip-path: inset(0 100% 0 0); }
.is-active .pv-name { animation: pv-name 1.4s steps(10) .3s forwards; }
@keyframes pv-name { to { clip-path: inset(0 0 0 0); } }
.pv-links { display: flex; gap: 6px; } .pv-links i { width: 20px; height: 5px; border-radius: 3px; background: #e6dcd8; }
.pv-hero { display: grid; gap: 10px; align-content: center; padding: 18px 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--pv) 16%, #faf5f3), #faf5f3); transition: background 800ms 2.4s; }
.pv-kicker { font: 600 9px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--pv); transition: color 800ms 2.4s; }
.pv-h { font: 400 25px/1 var(--font-serif); letter-spacing: -0.01em; }
.pv-h em { color: var(--pv); transition: color 800ms 2.4s; }
.pv-btn { justify-self: start; padding: 8px 14px; border-radius: 999px; background: var(--pv); color: #fff; font: 600 10.5px/1 var(--font-sans); transition: background 800ms 2.4s; }
.pv-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 16px 16px; }
.pv-cards i { height: 44px; border-radius: 8px; background: color-mix(in srgb, var(--pv) 22%, #fff); transition: background 800ms 2.6s; }

/* step 2: three designs fan out, the cursor picks one */
.fan { position: relative; width: 100%; height: 100%; }
.fan figure { position: absolute; top: 50%; left: 50%; width: 52%; aspect-ratio: 16 / 11; margin: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px color-mix(in srgb, #fff 14%, transparent), 0 24px 50px rgba(0, 0, 0, .55); transform: translate(-50%, -50%); transition: transform 1000ms var(--ease-out), box-shadow 500ms; }
.fan img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.fan figcaption { position: absolute; left: 10px; bottom: 10px; padding: 6px 10px; border-radius: 999px; background: rgba(7, 6, 15, .72); backdrop-filter: blur(8px); font: 600 12px/1 var(--font-sans); color: #fff; }
.is-active .fan figure:nth-child(1) { transform: translate(-104%, -44%) rotate(-7deg) scale(.84); transition-delay: .15s; }
.is-active .fan figure:nth-child(3) { transform: translate(4%, -44%) rotate(7deg) scale(.84); transition-delay: .15s; }
.fan figure:nth-child(2) { z-index: 2; }
.is-active .fan figure:nth-child(2) { transform: translate(-50%, -56%); box-shadow: 0 0 0 2px var(--accent-text), 0 0 0 6px color-mix(in srgb, var(--accent) 25%, transparent), 0 40px 80px color-mix(in srgb, var(--krown-violet) 45%, transparent); transition-delay: 1.25s; }
.fan .pick-badge { position: absolute; top: 10px; right: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 8px; border-radius: 999px; background: var(--accent); color: #fff; font: 600 12px/1 var(--font-sans); box-shadow: 0 6px 16px rgba(0, 0, 0, .4); transform: scale(0); transition: transform 500ms 1.35s var(--ease-spring); }
.is-active .fan .pick-badge { transform: scale(1); }
.pick-badge svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 3; }
.fcur { position: absolute; z-index: 6; left: 88%; top: 94%; width: 26px; height: 26px; color: #fff; opacity: 0; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6)); pointer-events: none; }
.fcur svg { width: 100%; height: 100%; stroke: #07060f; stroke-width: 1.4; stroke-linejoin: round; }
.is-active .fan .fcur { animation: cur-pick 1.5s .1s var(--ease-out) both; }
@keyframes cur-pick { 0% { left: 90%; top: 96%; opacity: 0; } 15% { opacity: 1; } 70% { left: 50%; top: 46%; transform: scale(1); } 80% { transform: scale(.78); } 90%, 100% { left: 50%; top: 46%; transform: scale(1); opacity: 1; } }

/* step 3: Publish → the address locks green → you are live (confetti) → a booking arrives */
.w-s3 { width: 94%; }
.w-s3 .win-bar { grid-template-columns: 60px 1fr 60px; }
.gl-url { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 14px; border-radius: 999px; background: var(--surface-sunk); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); }
.gl-url svg { width: 12px; height: 12px; stroke: var(--ink-3); fill: none; stroke-width: 2; transition: stroke 400ms 2s; }
.is-active .gl-url svg { stroke: var(--success); }
.w-s3 .win-body { position: relative; aspect-ratio: 16 / 9.4; overflow: hidden; }
.w-s3 .win-body img { width: 100%; height: 100%; object-fit: cover; object-position: top; filter: saturate(.3) brightness(.45); transition: filter 900ms 2s var(--ease-out); }
.is-active .w-s3 .win-body img { filter: none; }
.gl-pub { position: absolute; left: 50%; top: 50%; translate: -50% -50%; height: 46px; padding: 0 26px; border-radius: 999px; background: var(--accent); color: #fff; font: 600 15px/46px var(--font-sans); box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 60%, transparent); transition: opacity 300ms 1.8s, scale 300ms 1.8s; }
.is-active .gl-pub { animation: press 360ms 1.05s var(--ease-out) both; opacity: 0; scale: .9; }
@keyframes press { 50% { transform: scale(.9); } }
.gl-prog { position: absolute; left: 0; right: 0; top: 0; height: 3px; }
.gl-prog i { display: block; height: 100%; width: 0; background: var(--crown); box-shadow: 0 0 12px var(--krown-violet); }
.is-active .gl-prog i { animation: prog 800ms 1.2s var(--ease-in-out) forwards; }
@keyframes prog { 0% { width: 0; opacity: 1; } 90% { width: 100%; opacity: 1; } 100% { width: 100%; opacity: 0; } }
.gl-live { position: absolute; left: 50%; top: 22%; translate: -50% -50%; display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; background: rgba(7, 6, 15, .78); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--success) 50%, transparent), 0 20px 40px rgba(0, 0, 0, .5); color: var(--success); font: 600 17px/1 var(--font-sans); opacity: 0; scale: .8; transition: opacity 500ms 2.05s, scale 700ms 2.05s var(--ease-spring); }
.is-active .gl-live { opacity: 1; scale: 1; }
.gl-live i { width: 10px; height: 10px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; }
.gl-toast { position: absolute; right: -6px; bottom: 6%; z-index: 4; opacity: 0; translate: 0 24px; transition: opacity 500ms 2.8s, translate 700ms 2.8s var(--ease-out); }
.is-active .gl-toast { opacity: 1; translate: 0 0; }
.p-stage .fcur { left: 80%; top: 96%; }
.is-active .p-stage > .fcur { animation: cur-pub 1.3s .1s var(--ease-out) both; }
@keyframes cur-pub { 0% { left: 84%; top: 98%; opacity: 0; } 15% { opacity: 1; } 70% { left: 51%; top: 55%; transform: scale(1); } 80% { transform: scale(.78); } 88% { left: 51%; top: 55%; transform: scale(1); opacity: 1; } 100% { left: 58%; top: 70%; opacity: 0; } }

/* toasts (a notification that slides in) */
.toast { display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 18px; --fin-fill: linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 94%, transparent), color-mix(in srgb, var(--surface) 94%, transparent)); backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 50px -12px rgba(0, 0, 0, .7); }
.toast b { display: block; font: 600 14px/1.3 var(--font-sans); }
.toast span:not(.av) { display: block; font: 400 12.5px/1.4 var(--font-sans); color: var(--ink-3); white-space: nowrap; }
.toast-t { font: 500 11px/1 var(--font-mono) !important; color: var(--ink-3); margin-left: 6px; }
.av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none; font: 600 12.5px/1 var(--font-sans); color: #fff; background: linear-gradient(145deg, color-mix(in srgb, var(--c), #fff 25%), color-mix(in srgb, var(--c), #000 25%)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }

/* ─ SHOWROOM — an editorial grid: two big, then rows of three; each card lit in its design's colour ─ */
.show-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; margin-bottom: 56px; }
.show-head .sec-head { max-width: 860px; }
.tpl-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px 28px; }
.tpl { grid-column: span 4; display: block; color: inherit; text-decoration: none; }
.tpl.is-big { grid-column: span 6; }
.tpl-grid.is-even .tpl { grid-column: span 4; }
.tpl-grid.is-filtered .tpl { grid-column: span 4; }
.tpl[hidden] { display: none; }
.tpl-frame { position: relative; aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden; container-type: size;
  background: radial-gradient(110% 80% at 50% 0%, color-mix(in srgb, var(--hue) 32%, transparent), transparent 72%), linear-gradient(180deg, var(--surface), var(--surface-sunk)); --ring-c: color-mix(in srgb, var(--hue) 26%, rgba(255, 255, 255, .08));
  transition: translate 600ms var(--ease-out), box-shadow 600ms var(--ease-out); }
.tpl.is-big .tpl-frame { aspect-ratio: 5 / 4; }
.tpl-grid.is-filtered .tpl .tpl-frame, .tpl-grid.is-filtered .tpl.is-big .tpl-frame { aspect-ratio: 4 / 5; }
.tpl-page { position: absolute; inset: 24px 24px auto; border-radius: 14px 14px 0 0; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 40px rgba(0, 0, 0, .5); transition: translate 2.6s var(--ease-in-out); }
.tpl.is-big .tpl-page { inset: 32px 64px auto; }
.tpl-page img { width: 100%; }
.tpl:hover .tpl-frame { translate: 0 -8px; box-shadow: var(--fin-shadow), 0 40px 90px -30px color-mix(in srgb, var(--hue) 45%, transparent); }
.tpl:hover .tpl-page { translate: 0 calc(-100% + 100cqh - 24px); }
.tpl-use { display: none; position: absolute; left: 50%; bottom: 20px; translate: -50% 0; }
@media (hover: none) { .tpl-use { display: inline-flex; } }
.tpl:focus-visible .tpl-use { display: inline-flex; }
.wkm-cursor { --wkm-cursor-bg: var(--ink); --wkm-cursor-fg: var(--canvas); font-family: var(--font-sans); padding: 14px 20px; font-size: 14px; }
.tpl-meta { display: flex; align-items: center; gap: 12px; padding: 20px 4px 0; }
.tpl-name { font: 650 26px/1.1 var(--font-display); letter-spacing: -0.025em; }
.tpl-tag { padding: 6px 10px; border-radius: 999px; font: 600 11.5px/1 var(--font-sans); color: color-mix(in srgb, var(--hue) 70%, #fff); background: color-mix(in srgb, var(--hue) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hue) 35%, transparent); }
.tpl-kind { margin-left: auto; font: 400 15px/1.2 var(--font-sans); color: var(--ink-3); }
.tpl-go { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink-2); transition: background 300ms, color 300ms, rotate 400ms var(--ease-out), box-shadow 300ms; rotate: -45deg; }
.tpl:hover .tpl-go { background: var(--ink); color: var(--canvas); rotate: 0deg; box-shadow: none; }
.show-foot { display: flex; justify-content: center; margin-top: 72px; }

/* ─ RUNS THE BUSINESS — bento; each card a small working screen in its own colour ─ */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px; }
.card { position: relative; padding: 40px; border-radius: 32px; overflow: hidden; display: flex; flex-direction: column; gap: 14px; min-width: 0;
  background: radial-gradient(80% 60% at 100% 0%, color-mix(in srgb, var(--hue) 15%, transparent), transparent 70%), var(--fin-fill); --ring-c: color-mix(in srgb, var(--hue) 20%, rgba(255, 255, 255, .08)); }
.card.wkm-spot { --wkm-accent: var(--hue); }
.card > .ico-t { margin-bottom: 10px; }
.card p { font: 400 16.5px/1.6 var(--font-sans); color: var(--ink-2); margin: 0 0 10px; max-width: 44ch; }
.c4 { grid-column: span 4; } .c2 { grid-column: span 2; } .c3 { grid-column: span 3; }
.ex { position: absolute; top: 26px; right: 26px; padding: 6px 10px; border-radius: 999px; font: 500 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-strong); }
.demo-box { border-radius: 20px; background: var(--surface-sunk); box-shadow: inset 0 0 0 1px var(--line), inset 0 2px 8px rgba(0, 0, 0, .3); }

/* bookings: a week filling up */
.cal { display: grid; grid-template-columns: 58px repeat(4, minmax(0, 1fr)); grid-template-rows: 42px repeat(4, 58px); gap: 6px; padding: 14px; margin-top: auto; border-radius: 20px; background: var(--surface-sunk); box-shadow: inset 0 0 0 1px var(--line), inset 0 2px 8px rgba(0, 0, 0, .3); }
.cal-d { align-self: center; justify-self: center; display: inline-flex; gap: 6px; align-items: baseline; padding: 7px 12px; border-radius: 999px; font: 500 12.5px/1 var(--font-sans); color: var(--ink-3); }
.cal-d b { font: 650 15px/1 var(--font-display); color: var(--ink); }
.cal-d.is-today { background: var(--accent-soft); color: var(--accent-text); } .cal-d.is-today b { color: var(--accent-text); }
.cal-t { grid-column: 1; align-self: start; padding-top: 4px; font: 500 11.5px/1 var(--font-mono); color: var(--ink-3); }
.ev { display: grid; align-content: start; gap: 3px; margin: 1px; padding: 9px 11px; border-radius: 12px; min-width: 0; font: 400 12px/1.25 var(--font-sans); color: color-mix(in srgb, var(--c) 55%, #fff); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 30%, var(--surface)), color-mix(in srgb, var(--c) 18%, var(--surface))); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, .1); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ev b { font: 600 13px/1.2 var(--font-sans); color: #fff; overflow: hidden; text-overflow: ellipsis; }
html.wkm-on .card:not(.wkm-in) .ev { opacity: 0; }
.card.wkm-in .ev { animation: ev-pop 700ms calc(var(--d) * 150ms + 350ms) var(--ease-spring) both; }
@keyframes ev-pop { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: none; } }
.card.wkm-in .ev[style*="--d:6"] { animation: ev-pop 700ms 1.6s var(--ease-spring) both, ev-ring 2s 2.3s ease-out 2; }
@keyframes ev-ring { 0% { box-shadow: inset 0 0 0 1px var(--c), 0 0 0 0 color-mix(in srgb, var(--c) 60%, transparent); } 100% { box-shadow: inset 0 0 0 1px var(--c), 0 0 0 12px transparent; } }
.cal-toast { position: absolute; right: 28px; top: 28px; opacity: 0; translate: 0 -16px; transition: opacity 500ms 1.6s, translate 700ms 1.6s var(--ease-out); }
.card.wkm-in .cal-toast { opacity: 1; translate: 0 0; }

/* shop: an order travelling to Shipped */
.shop { display: grid; gap: 12px; margin-top: auto; }
.shop-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.shop-sum > div { padding: 12px 12px 14px; border-radius: 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--ember) 10%, var(--surface-sunk)), var(--surface-sunk)); box-shadow: inset 0 0 0 1px var(--line); }
.shop-sum small { display: block; font: 500 11px/1.2 var(--font-sans); color: var(--ink-3); margin-bottom: 8px; white-space: nowrap; }
.shop-sum strong { font: 650 20px/1 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.prod { display: flex; gap: 14px; align-items: center; padding: 12px 16px 12px 12px; border-radius: 18px; background: var(--surface-sunk); box-shadow: inset 0 0 0 1px var(--line); }
.prod img { width: 58px; height: 58px; border-radius: 12px; object-fit: cover; }
.prod b { display: block; font: 600 14.5px/1.3 var(--font-sans); } .prod span { font: 400 12.5px/1.4 var(--font-sans); color: var(--ink-3); }
.prod strong { margin-left: auto; font: 650 18px/1 var(--font-display); letter-spacing: -0.02em; }
.track { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 14px 0 6px; }
.tr-line { position: absolute; left: 16.66%; right: 16.66%; top: 28px; height: 2px; border-radius: 2px; background: var(--line-strong); }
.tr-line i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--amber), var(--ember), var(--rose)); transition: width 1.4s .6s var(--ease-in-out); }
.card.wkm-in .tr-line i { width: 100%; }
.tr { position: relative; display: grid; justify-items: center; gap: 8px; }
.tr svg { width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--line-strong); stroke: transparent; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transition: background 400ms, box-shadow 400ms, stroke 400ms; }
.tr em { font: 500 12.5px/1 var(--font-sans); font-style: normal; color: var(--ink-3); transition: color 400ms; }
.card.wkm-in .tr svg { background: linear-gradient(145deg, var(--amber), var(--ember)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ember) 22%, transparent); stroke: #fff; }
.card.wkm-in .tr em { color: var(--ink); }
.card.wkm-in .tr:nth-child(2) svg, .card.wkm-in .tr:nth-child(2) em { transition-delay: .3s; }
.card.wkm-in .tr:nth-child(3) svg, .card.wkm-in .tr:nth-child(3) em { transition-delay: 1.2s; }
.card.wkm-in .tr:nth-child(4) svg, .card.wkm-in .tr:nth-child(4) em { transition-delay: 2s; }
.inv { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 14px; font: 400 13px/1.3 var(--font-sans); color: var(--ink-2); background: color-mix(in srgb, var(--ember) 9%, var(--surface-sunk)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ember) 30%, transparent); opacity: 0; translate: 0 10px; transition: opacity 500ms 2.3s, translate 600ms 2.3s var(--ease-out); }
.card.wkm-in .inv { opacity: 1; translate: 0 0; }
.inv b { color: var(--ink); font-weight: 600; }
.inv-i svg { width: 18px; height: 18px; stroke: var(--amber); fill: none; stroke-width: 1.8; display: block; }
.inv-pdf { margin-left: auto; padding: 5px 8px; border-radius: 7px; font: 600 10.5px/1 var(--font-mono); background: color-mix(in srgb, var(--ember) 22%, transparent); color: var(--amber); }

/* inbox: messages from every channel, a new one arriving */
.inbox { list-style: none; margin: auto 0 0; padding: 6px; display: grid; gap: 4px; border-radius: 20px; background: var(--surface-sunk); box-shadow: inset 0 0 0 1px var(--line); }
.inbox li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 11px; align-items: center; padding: 10px; border-radius: 14px; }
.inbox .av { grid-row: span 2; width: 34px; height: 34px; font-size: 11.5px; }
.inbox li div { min-width: 0; grid-row: span 2; }
.inbox b { display: block; font: 600 13.5px/1.3 var(--font-sans); }
.inbox li div span { display: block; font: 400 12.5px/1.35 var(--font-sans); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox time { font: 500 10.5px/1 var(--font-mono); color: var(--ink-3); text-align: right; }
.src svg { width: 15px; height: 15px; fill: none; stroke-width: 2; display: block; margin-left: auto; }
.src-wa svg { stroke: var(--success); } .src-ig svg { stroke: var(--orchid); } .src-form svg { stroke: var(--amber); } .src-mail svg { stroke: var(--sky); }
.inbox li.is-new { background: color-mix(in srgb, var(--sky) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sky) 30%, transparent); }
.inbox li.is-new time { color: var(--sky); }
html.wkm-on .card:not(.wkm-in) .inbox li { opacity: 0; }
.card.wkm-in .inbox li { animation: msg-in 600ms calc(var(--n, 1) * 110ms + 250ms) var(--ease-out) both; }
.card.wkm-in .inbox li.is-new { animation: msg-in 700ms 1.3s var(--ease-spring) both; }
.inbox li:nth-child(2) { --n: 1; } .inbox li:nth-child(3) { --n: 2; } .inbox li:nth-child(4) { --n: 3; }
@keyframes msg-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* numbers: the chart draws itself in the crown colours */
.nums { display: grid; gap: 16px; margin-top: auto; padding: 22px 24px 20px; border-radius: 20px; background: var(--surface-sunk); box-shadow: inset 0 0 0 1px var(--line); }
.nums-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.nums-top small { display: block; font: 500 12.5px/1 var(--font-sans); color: var(--ink-3); margin-bottom: 10px; }
.nums-top strong { font: 650 34px/1 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.up { display: inline-block; margin-left: 8px; padding: 4px 7px; border-radius: 999px; font: 600 11px/1 var(--font-sans); font-style: normal; color: var(--success); background: var(--success-soft); vertical-align: 6px; }
.area { width: 100%; height: auto; display: block; overflow: visible; }
.area-l { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2s .3s var(--ease-out); filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--krown-violet) 60%, transparent)); }
.area-f { opacity: 0; transition: opacity 1.2s 1.2s; }
.area-dot { fill: #fff; opacity: 0; transition: opacity 300ms 2.1s; }
.card.wkm-in .area-l { stroke-dashoffset: 0; } .card.wkm-in .area-f { opacity: 1; } .card.wkm-in .area-dot { opacity: 1; animation: dot-glow 2s 2.3s ease-out infinite; }
@keyframes dot-glow { 0% { filter: drop-shadow(0 0 0 var(--ember)); } 50% { filter: drop-shadow(0 0 8px var(--ember)); } 100% { filter: drop-shadow(0 0 0 var(--ember)); } }
.srcs { display: grid; gap: 12px; }
.srcs-bar { display: flex; gap: 3px; height: 10px; }
.srcs-bar span { width: var(--w); border-radius: 999px; background: linear-gradient(180deg, color-mix(in srgb, var(--c), #fff 20%), var(--c)); transform-origin: left; transition: scale 900ms calc(var(--d) * 120ms + .6s) var(--ease-out); scale: 0 1; }
.card.wkm-in .srcs-bar span { scale: 1 1; }
.srcs-key { display: flex; flex-wrap: wrap; gap: 8px 18px; font: 400 12.5px/1 var(--font-sans); color: var(--ink-3); }
.srcs-key span { display: inline-flex; align-items: center; gap: 7px; } .srcs-key b { color: var(--ink); font-weight: 600; }
.srcs-key i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }

/* AI writing */
.ai-box { position: relative; display: grid; gap: 14px; margin-top: auto; padding: 22px; border-radius: 20px; background: linear-gradient(180deg, color-mix(in srgb, var(--magenta) 8%, var(--surface-sunk)), var(--surface-sunk)); box-shadow: inset 0 0 0 1px var(--line); }
.ai-shimmer { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1.3 var(--font-sans); background: linear-gradient(100deg, var(--ink-3) 35%, var(--ink) 50%, var(--ink-3) 65%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: ai-sheen 2.6s linear infinite; }
.ai-shimmer svg { width: 16px; height: 16px; stroke: var(--magenta); fill: none; stroke-width: 1.8; }
@keyframes ai-sheen { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.ai-type { font: italic 400 21px/1.35 var(--font-serif); color: var(--ink); clip-path: inset(0 100% 0 0); }
.card.wkm-in .ai-type { animation: ai-write 3.2s steps(40) .6s forwards; }
@keyframes ai-write { to { clip-path: inset(0 -0.2em 0 0); } }
.ai-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-chips span { padding: 8px 12px; border-radius: 999px; font: 500 12.5px/1 var(--font-sans); color: color-mix(in srgb, var(--magenta) 50%, #fff); background: color-mix(in srgb, var(--magenta) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--magenta) 32%, transparent); opacity: 0; translate: 0 6px; transition: opacity 400ms, translate 500ms var(--ease-out); }
.card.wkm-in .ai-chips span { opacity: 1; translate: 0 0; }
.card.wkm-in .ai-chips span:nth-child(1) { transition-delay: 3.9s; } .card.wkm-in .ai-chips span:nth-child(2) { transition-delay: 4s; } .card.wkm-in .ai-chips span:nth-child(3) { transition-delay: 4.1s; } .card.wkm-in .ai-chips span:nth-child(4) { transition-delay: 4.2s; }

/* your own domain: the address switches over, the checks tick */
.dom { display: grid; gap: 16px; margin-top: auto; padding: 20px; border-radius: 20px; background: var(--surface-sunk); box-shadow: inset 0 0 0 1px var(--line); }
.dom-bar { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); font: 500 15px/1 var(--font-mono); overflow: hidden; }
.dom-bar svg { width: 15px; height: 15px; fill: none; stroke: var(--ink-3); stroke-width: 2; transition: stroke 400ms 1.4s; }
.card.wkm-in .dom-bar svg { stroke: var(--success); }
.dom-swap { display: inline-grid; } .dom-swap > span { grid-area: 1 / 1; transition: translate 700ms var(--ease-out), opacity 500ms; }
.dom-old { color: var(--ink-3); } .dom-new { color: var(--ink); opacity: 0; translate: 0 110%; }
.card.wkm-in .dom-old { opacity: 0; translate: 0 -110%; transition-delay: 1s; }
.card.wkm-in .dom-new { opacity: 1; translate: 0 0; transition-delay: 1.1s; }
.dom-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dom-checks li { display: flex; align-items: center; gap: 10px; font: 400 14px/1.3 var(--font-sans); color: var(--ink-2); opacity: .35; transition: opacity 400ms calc(var(--d) * 350ms + 1.5s); }
.dom-checks svg { width: 22px; height: 22px; padding: 5px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); fill: none; stroke: transparent; stroke-width: 3; stroke-linecap: round; transition: all 400ms calc(var(--d) * 350ms + 1.5s); }
.card.wkm-in .dom-checks li { opacity: 1; }
.card.wkm-in .dom-checks svg { background: var(--success); box-shadow: 0 0 0 4px var(--success-soft); stroke: #04140c; }

/* WHY — the statement lights up as you scroll */
.statement { font-family: var(--font-display); font-weight: 650; font-size: clamp(36px, 5vw, 76px); line-height: 1.04; letter-spacing: -0.035em; margin: 0; max-width: 20ch; }
.why-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; margin-top: 96px; border-top: 1px solid var(--line); padding-top: 48px; }
.why-row .ico-t { margin-bottom: 22px; }
.why-row h3 { font: 650 24px/1.2 var(--font-display); letter-spacing: -0.02em; margin: 0 0 10px; }
.why-row p { font: 400 17px/1.6 var(--font-sans); color: var(--ink-2); margin: 0; }

/* ADD-ONS — a heap of glossy pills that tumble in, each in its own colour */
.addon { position: relative; display: inline-flex; align-items: center; gap: 12px; height: 64px; padding: 0 28px 0 10px; border-radius: 999px; font: 500 17px/1 var(--font-sans); white-space: nowrap; color: #fff; overflow: hidden; cursor: default;
  background: linear-gradient(180deg, color-mix(in srgb, var(--hue) 30%, var(--surface-raised)), color-mix(in srgb, var(--hue) 10%, var(--surface)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hue) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -10px 18px rgba(0, 0, 0, .28), 0 18px 36px -14px color-mix(in srgb, var(--hue) 60%, transparent); transition: translate 400ms var(--ease-out), box-shadow 400ms; }
.addon::before { content: ""; position: absolute; left: 14px; right: 14px; top: 2px; height: 45%; border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0)); pointer-events: none; }
.addon i { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(145deg, color-mix(in srgb, var(--hue), #fff 22%), color-mix(in srgb, var(--hue), #000 18%)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 4px 10px rgba(0, 0, 0, .35); }
.addon i svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.addon:hover { translate: 0 -4px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -10px 18px rgba(0, 0, 0, .28), 0 26px 44px -14px color-mix(in srgb, var(--hue) 80%, transparent); }
.addon-heap { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 12px; max-width: 1080px; margin: 0 auto; padding: 24px 0; }

/* PRICING — three big plans; the top one glows from inside, its edge carries the beam */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; margin-top: 56px; }
.plan { position: relative; padding: 44px 40px 40px; border-radius: 34px; display: flex; flex-direction: column;
  background: radial-gradient(90% 55% at 0% 0%, color-mix(in srgb, var(--hue) 13%, transparent), transparent 70%), var(--fin-fill); --ring-c: color-mix(in srgb, var(--hue) 20%, rgba(255, 255, 255, .08)); }
.plan.top { background: radial-gradient(80% 45% at 20% 0%, color-mix(in srgb, var(--krown-violet) 26%, transparent), transparent 70%), linear-gradient(180deg, #171230, var(--surface) 60%); --ring-c: color-mix(in srgb, var(--orchid) 55%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 50px 120px -40px color-mix(in srgb, var(--krown-violet) 75%, transparent); }
.plan-glow { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: -1; }
.plan-glow img { position: absolute; right: -92px; top: -196px; height: 360px; rotate: 34deg; opacity: .9; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .6)); }
.plan-glow::before { content: ""; position: absolute; left: 50%; top: -30%; width: 70%; height: 60%; translate: -50% 0; border-radius: 50%; background: color-mix(in srgb, var(--orchid) 40%, transparent); filter: blur(60px); opacity: .5; animation: plan-glow 7s ease-in-out infinite alternate; }
@keyframes plan-glow { to { opacity: .8; translate: -40% 8%; } }
.plan-head { display: flex; justify-content: space-between; align-items: center; min-height: 50px; }
.plan .tag, .tag-pill .tag { padding: 8px 13px; border-radius: 999px; font: 600 12.5px/1 var(--font-sans); color: #fff; background: linear-gradient(90deg, color-mix(in srgb, var(--krown-violet) 60%, transparent), color-mix(in srgb, var(--magenta) 55%, transparent)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 6px 18px color-mix(in srgb, var(--magenta) 40%, transparent); }
.plan .tag .wkm-shimmer, .tag-pill .tag .wkm-shimmer { --wkm-shimmer: #fff; color: rgba(255, 255, 255, .78); }
.plan h3 { font: 650 30px/1.1 var(--font-display); letter-spacing: -0.03em; margin: 26px 0 8px; }
.pitch { font: 400 15.5px/1.5 var(--font-sans); color: var(--ink-2); margin: 0; min-height: 3em; }
.price { display: flex; align-items: baseline; gap: 10px; margin-top: 28px; font: 700 84px/1 var(--font-display); letter-spacing: -0.05em; }
.price .wkm-price { display: inline-block; }
.price .wkm-odo-lead { font-size: .46em; font-weight: 600; letter-spacing: 0; vertical-align: top; position: relative; top: .14em; margin-right: .06em; color: var(--ink-2); }
.plan.top .price .wkm-price { color: #fff; }
.price small { font: 400 16px/1 var(--font-sans); color: var(--ink-3); letter-spacing: 0; }
.billed { font: 400 14px/1.4 var(--font-sans); color: var(--ink-3); margin: 10px 0 0; min-height: 20px; }
.plan > .btn { width: 100%; margin: 30px 0 32px; }
.plan-lead { margin: 0 0 18px; padding-top: 26px; border-top: 1px solid var(--line); font: 500 12px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 15px; font: 400 15.5px/1.45 var(--font-sans); color: var(--ink-2); }
.plan li { display: flex; gap: 12px; align-items: flex-start; }
.plan li svg { flex: none; width: 22px; height: 22px; padding: 5px; margin-top: -1px; border-radius: 50%; background: color-mix(in srgb, var(--hue) 20%, transparent); stroke: color-mix(in srgb, var(--hue) 55%, #fff); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.plan.top li { color: var(--ink); }
.includes { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 48px auto 0; padding: 0; max-width: 1000px; }
.includes li { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; font: 500 14.5px/1 var(--font-sans); color: var(--ink-2); background: color-mix(in srgb, var(--surface-raised) 70%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent), inset 0 1px 0 rgba(255, 255, 255, .05); }
.includes svg { width: 17px; height: 17px; stroke: var(--accent-text); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pricing-note { text-align: center; margin-top: 28px; font: 400 13px/1.5 var(--font-sans); color: var(--ink-3); }

/* CLOSING */
.close { position: relative; isolation: isolate; text-align: center; padding: 220px 0 180px; overflow: hidden; }
.close > .wkm-aurora { position: absolute; inset: 0; z-index: -1; opacity: .85; -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 55%, #000, transparent); mask-image: radial-gradient(ellipse 60% 60% at 50% 55%, #000, transparent); }
.close .h1 { max-width: 12ch; margin: 0 auto; }
.close-body { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 24px; margin: 48px auto 0; max-width: 560px; } .close-body .try { width: 100%; }
.close-body .lead { text-align: center; }

/* FOOTER — columns, then the name as a giant living wordmark */
.foot { position: relative; padding: 104px 0 0; border-top: 1px solid var(--line); overflow: hidden; }
.foot-top { display: grid; grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); gap: 48px; }
.foot-brand { display: grid; gap: 18px; align-content: start; }
.foot-brand p { font: 400 16px/1.55 var(--font-sans); color: var(--ink-2); margin: 0; max-width: 32ch; }
.foot h4 { font: 500 12px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 18px; }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.foot a { text-decoration: none; color: var(--ink-2); font: 400 15px/1.4 var(--font-sans); transition: color 140ms; }
.foot a:hover { color: var(--ink); }
.foot-status { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-strong); font: 500 13px/1 var(--font-sans); color: var(--ink-2); width: max-content; }
.foot-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 10px var(--success); }
.wkm-giant { margin: 96px 0 0; padding-inline: 1vw; font-family: var(--font-display); font-weight: 800; font-size: 17.2vw; line-height: .8; letter-spacing: 0.012em; text-align: center; white-space: nowrap; user-select: none;
  background: linear-gradient(180deg, var(--ink) 30%, color-mix(in srgb, var(--ink) 10%, transparent) 95%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.wkm-giant .wkm-gl:not(.is-accent) { background: inherit; -webkit-background-clip: text; background-clip: text; transition: translate 500ms var(--ease-out); }
.wkm-giant { --wkm-giant-accent: linear-gradient(100deg, var(--crown-blue), var(--krown-indigo) 30%, var(--orchid) 60%, var(--rose) 82%, var(--ember)); }
.wkm-giant .wkm-gl { transition: translate 500ms var(--ease-out); }
.wkm-giant .wkm-gl:hover { translate: 0 -6%; }
.foot-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 28px 0 32px; border-top: 1px solid var(--line); margin-top: 32px; position: relative; font: 400 13px/1.4 var(--font-sans); color: var(--ink-3); }


/* TEXTURE + BRAND — grain over the light; the W's arms as silk pills; the mark as architecture */
.grain { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url(img/grain.png) 0 0 / 220px 220px; mix-blend-mode: soft-light; opacity: .2; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.hero-rays { position: absolute; left: 50%; top: -30%; width: 1800px; height: 1400px; translate: -50% 0; z-index: -1; pointer-events: none; opacity: .5;
  background: repeating-conic-gradient(from 180deg at 50% 0%, rgba(255, 255, 255, .06) 0deg 1.2deg, transparent 1.2deg 9deg);
  -webkit-mask-image: radial-gradient(ellipse 50% 60% at 50% 0%, #000, transparent 75%); mask-image: radial-gradient(ellipse 50% 60% at 50% 0%, #000, transparent 75%); animation: rays 40s ease-in-out infinite alternate; }
@keyframes rays { to { rotate: 6deg; } }
@keyframes orb-turn { to { rotate: 360deg; } }
.sec-why { overflow: clip; isolation: isolate; }
.giant-mark { position: absolute; right: -9vw; top: 90px; width: min(58vw, 880px); z-index: -1; pointer-events: none; opacity: .88; -webkit-mask-image: linear-gradient(100deg, transparent 2%, #000 38%), linear-gradient(180deg, #000 62%, transparent 96%); -webkit-mask-composite: source-in; mask-image: linear-gradient(100deg, transparent 2%, #000 38%), linear-gradient(180deg, #000 62%, transparent 96%); mask-composite: intersect; }
.sec-why .statement, .sec-why .why-row { position: relative; }
/* the brand pills: the W's arms as silk capsules, drifting at the corners of the closing band */
.brand-pills { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.bp { position: absolute; display: block; }
.bp img { display: block; height: 100%; width: auto; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .55)); animation: bp-float 9s ease-in-out infinite alternate; }
.bp-1 { left: max(-60px, calc(50% - 760px)); bottom: -140px; height: 520px; rotate: -24deg; }
.bp-2 { left: calc(50% - 560px); top: 70px; height: 240px; rotate: 32deg; opacity: .75; } .bp-2 img { animation-delay: -3s; }
.bp-3 { right: max(-60px, calc(50% - 760px)); bottom: -120px; height: 560px; rotate: 22deg; } .bp-3 img { animation-delay: -5s; }
.bp-4 { right: calc(50% - 540px); top: 40px; height: 200px; rotate: -30deg; opacity: .7; } .bp-4 img { animation-delay: -1.5s; }
@keyframes bp-float { to { translate: 0 -18px; } }
.close .grain { -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 22%, #000 70%, transparent); }
.close::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 46% 44% at 50% 45%, rgba(7, 6, 15, .7), transparent 75%); pointer-events: none; }

/* FAQ — a conversation: questions on the left, the chat on the right */
.faq-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
.faq-grid .wkm-chat-faq { display: contents; }
.faq-side { grid-row: 1; }
.wkm-chat-qs { grid-column: 1; grid-row: 2; list-style: none; margin: -24px 0 0; padding: 0; display: grid; gap: 10px; }
.wkm-chat-qs button { width: 100%; display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 0; border-radius: 18px; cursor: pointer; text-align: left; color: var(--ink-2); font: 500 17px/1.35 var(--font-sans);
  background: color-mix(in srgb, var(--surface) 80%, transparent); box-shadow: inset 0 0 0 1px var(--ring), inset 0 1px 0 rgba(255, 255, 255, .05); transition: background 250ms, color 250ms, box-shadow 250ms, translate 300ms var(--ease-out); }
.wkm-chat-qs button:hover { color: var(--ink); translate: 4px 0; }
.wkm-chat-qs button[aria-pressed="true"] { color: var(--ink); background: linear-gradient(90deg, color-mix(in srgb, var(--krown-violet) 22%, var(--surface)), var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-text) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, .08), 0 14px 30px -14px color-mix(in srgb, var(--krown-violet) 70%, transparent); }
.wkm-chat-n { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 500 12px/1 var(--font-mono); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-strong); transition: all 250ms; }
[aria-pressed="true"] .wkm-chat-n { background: var(--accent); color: #fff; box-shadow: none; }
.wkm-chat-win { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 110px; display: grid; grid-template-rows: auto 1fr; height: 600px; border-radius: 32px; overflow: hidden;
  background: radial-gradient(90% 60% at 100% 0%, color-mix(in srgb, var(--krown-violet) 18%, transparent), transparent 70%), linear-gradient(180deg, var(--surface-raised), var(--surface)); box-shadow: inset 0 0 0 1px var(--ring), inset 0 1px 0 rgba(255, 255, 255, .07), 0 40px 90px -40px rgba(0, 0, 0, .8); }
.wkm-chat-head { display: flex; align-items: center; gap: 14px; padding: 20px 24px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface-raised), #fff 2%); }
.wkm-chat-head b { display: block; font: 650 17px/1.2 var(--font-display); } .wkm-chat-head small { display: block; margin-top: 3px; font: 400 13px/1.2 var(--font-sans); color: var(--success); }
.wkm-chat-av { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(160deg, #2a2545, #15122a); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .18); }
.wkm-chat-av img { width: 26px; height: auto; }
.wkm-chat-thread { padding: 24px; overflow: hidden; }
.wkm-chat-thread p { margin: 0; max-width: 82%; font: 400 16px/1.5 var(--font-sans); }
.wkm-me { justify-self: end; padding: 13px 18px; border-radius: 22px 22px 6px 22px; color: #fff; background: linear-gradient(160deg, var(--accent-hover), var(--accent)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 10px 24px -10px color-mix(in srgb, var(--accent) 80%, transparent); transform-origin: right bottom; }
.wkm-them { display: flex; gap: 10px; align-items: flex-end; justify-self: start; transform-origin: left bottom; }
.wkm-them .wkm-chat-av { width: 32px; height: 32px; } .wkm-them .wkm-chat-av img { width: 20px; }
.wkm-them > span:last-child { padding: 13px 18px; border-radius: 22px 22px 22px 6px; color: var(--ink); background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--ring), inset 0 1px 0 rgba(255, 255, 255, .06); }
.wkm-them.is-typing > span:last-child { color: var(--ink-3); }

/* tablets and phones */
@media (max-width: 1180px) {
  .wkm-hstory .wkm-panel { padding: 40px; gap: 32px; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); }
  .s1 { grid-template-columns: minmax(0, 1fr); } .s1-prev { display: none; }
  .p-big { font-size: 120px; }
}
@media (max-width: 1100px) {
  .c4 { grid-column: span 6; } .c2, .c3 { grid-column: span 3; }
  .bento-3 .c2 { grid-column: span 2; }
  .show { margin-top: 72px; } .seal { left: -20px; }
}
@media (max-width: 960px) {
  :root { --gutter: 20px; }
  .nav-links { display: none; } .nav-end .btn-ghost { display: none; } .nav-end { margin-left: auto; } .nav-menu { display: block; } .nav { padding-right: 7px; }
  .nav-end .btn-crown { display: none; }
  .hero { padding-top: 132px; }
  .show-frame { margin-right: 0; }
  .phone { width: 150px; right: -8px; bottom: -30px; border-radius: 28px; padding: 6px; } .p-screen { border-radius: 23px; } .p-notch { display: none; }
  .f-book { left: -6px; top: auto; bottom: 30%; } .f-live, .f-pay, .seal { display: none; }
  .b-live { display: none; }
  .tpl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 18px; } .tpl, .tpl.is-big, .tpl-grid.is-filtered .tpl, .tpl-grid.is-even .tpl { grid-column: auto; }
  .tpl-frame, .tpl.is-big .tpl-frame { aspect-ratio: 4 / 5; } .tpl.is-big .tpl-page, .tpl-page { inset: 16px 16px auto; }
  .tpl-kind { display: none; } .tpl-name { font-size: 21px; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .c4, .c3 { grid-column: 1 / -1; } .c2 { grid-column: auto; }
  .card { padding: 28px 22px; } .cal { grid-template-columns: 46px repeat(4, minmax(0, 1fr)); padding: 10px; gap: 4px; } .ev { padding: 7px; font-size: 10.5px; } .ev b { font-size: 11.5px; }
  .cal-toast { position: relative; right: auto; top: auto; margin-top: 12px; }
  .nums-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nums-top > div:nth-child(3) { display: none; }
  .plans, .why-row { grid-template-columns: minmax(0, 1fr); }
  .plan { padding: 36px 26px 30px; }
  .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; }
  .wkm-hstory .wkm-panel { width: 88vw; height: auto; grid-template-columns: minmax(0, 1fr); padding: 26px 20px; opacity: 1; gap: 24px; }
  .p-big { font-size: 84px; }
  .p-stage { height: 340px; }
  .hs-head { flex-direction: column; align-items: flex-start; }
  .hs-steps { gap: 20px; }
  .gl-toast { right: 0; bottom: -8px; }
  .wkm-tabs button { padding: 0 12px; font-size: 13px; height: 38px; }
  .switch { overflow-x: auto; justify-content: flex-start; padding-bottom: 4px; }
  .try { padding-left: 16px; } .try .btn { padding: 0 16px; } .try input { font-size: 16px; }
  .sec { padding: 104px 0; }
  .addon { height: 54px; font-size: 15px; padding-right: 20px; } .addon i { width: 36px; height: 36px; }
  .price { font-size: 68px; }
  .faq-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } .faq-side, .wkm-chat-qs, .wkm-chat-win { grid-column: 1; grid-row: auto; }
  .wkm-chat-qs { margin: 0; } .wkm-chat-win { position: relative; top: 0; height: 460px; }
  .giant-mark { width: 110vw; right: -36vw; }
  .bp-1 { height: 300px; left: -70px; } .bp-3 { height: 320px; right: -70px; } .bp-2, .bp-4 { display: none; }
}

@media (max-width: 680px) {
  .tpl-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .bento, .bento-3 { grid-template-columns: minmax(0, 1fr); } .c4, .c2, .c3, .bento-3 .c2 { grid-column: auto; }
  .tpl-page { inset: 20px 20px auto; }
}
@media (prefers-reduced-motion: reduce) {
  .h1 em, .h2 em, .p-title em, .wkm-giant .wkm-gl, .wkm-eyebrow-dot, .ai-shimmer, .plan-glow::before, .b-live i, .hero-rays, .bp img { animation: none; }
  .ai-type, .pv-name { clip-path: none; } .mf-type { width: auto; border: 0; }
}

/* ── pricing by market (WebKrown plans P1, 2026-09-29): the switch, the Enterprise line, an offer ── */
.price-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; }
.mk-switch { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--surface-raised) 70%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent); }
.mk-switch button { border: 0; background: none; padding: 9px 14px; border-radius: 999px; font: 500 13.5px/1 var(--font-sans); color: var(--ink-3); cursor: pointer; }
.mk-switch button[aria-pressed="true"] { color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 16%, transparent); }
.mk-switch button:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.plan-ent { max-width: 860px; margin: 28px auto 0; padding: 16px 22px; border-radius: 18px; text-align: center; font: 400 15px/1.55 var(--font-sans); color: var(--ink-2); background: color-mix(in srgb, var(--surface-raised) 60%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent); }
.plan-ent b { color: var(--ink); font-weight: 600; }
.plan-ent a { color: var(--accent-text); font-weight: 600; text-decoration: none; white-space: nowrap; }
.plan-ent a svg { width: 14px; height: 14px; vertical-align: -2px; }
.plan .offer { margin: -6px 0 0; font: 500 13px/1.45 var(--font-sans); color: var(--success); }
.mk[hidden] { display: none !important; }

/* the official mark as a section's giant watermark (2026-10-03): faint, never a glow */
.ph-mark.is-official { opacity: .14; filter: saturate(1.05); }
/* the Why section: our real mark, full strength, to the right of the statement (San 2026-10-03: the old W
   there was not our logo) */
.giant-mark.is-official { opacity: .95; width: min(38vw, 580px); right: 2vw; top: 150px; -webkit-mask-image: none; mask-image: none; }
@media (max-width: 760px) { .giant-mark.is-official { opacity: .16; width: 96vw; right: -34vw; top: 70px; } }