/* webkrown.com — INNER PAGES. Layouts only; every surface, colour and motion comes from kit.css
   (the brand kit) and tokens.css. Same craft rules: curves from border-radius/SVG, rings as inset
   shadows, a hue per card, features shown working (playbook §8). */

/* ── PAGE HERO: crumbs · eyebrow · word-rise h1 · lead · actions | art ── */
.phero { position: relative; isolation: isolate; padding: 168px 0 96px; overflow: clip; }
.phero.is-compact { padding-bottom: 40px; }
.phero > .wkm-aurora { position: absolute; left: 0; right: 0; top: -80px; height: 900px; z-index: -1; opacity: .75; -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent); mask-image: linear-gradient(180deg, #000 30%, transparent); }
.ph-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.is-compact .ph-grid { grid-template-columns: minmax(0, 1fr); }
.is-compact .ph-actions { width: 100%; }
.ph-actions .search { flex: 0 1 640px; }
.ph-copy { display: grid; gap: 26px; justify-items: start; }
.ph-title { font-size: clamp(50px, 7vw, 108px); }
.ph-copy .lead { font-size: 21px; }
.ph-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.crumbs { display: flex; gap: 10px; align-items: center; font: 500 13px/1 var(--font-sans); color: var(--ink-3); }
.crumbs a { color: var(--ink-2); text-decoration: none; } .crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--ink); }
.ph-art { position: relative; min-height: 440px; display: grid; place-items: center; }
.ph-mark { width: min(100%, 560px); filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .5)); }
/* art: three designs stacked like prints on a table */
.ph-stack { min-height: 480px; }
.ph-stack figure { position: absolute; width: 74%; margin: 0; border-radius: 18px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 80px -20px rgba(0, 0, 0, .8), 0 0 60px -20px var(--hue); }
.ph-stack img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.ph-stack figcaption { position: absolute; left: 12px; bottom: 12px; padding: 7px 12px; border-radius: 999px; background: rgba(7, 6, 15, .75); backdrop-filter: blur(8px); font: 600 12.5px/1 var(--font-sans); color: #fff; }
.st-0 { left: 0; top: 4%; rotate: -7deg; } .st-1 { right: 0; top: 22%; rotate: 5deg; z-index: 2; } .st-2 { left: 10%; bottom: 0; rotate: -2deg; z-index: 3; }
/* art: the kind's own design in a browser, with a live toast */
.ph-browser .browser { width: 100%; border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 50px 100px -30px rgba(0, 0, 0, .85); }
.ph-browser .b-view { aspect-ratio: 16 / 10.5; }
.ph-toast { position: absolute; left: -28px; bottom: 30px; z-index: 3; animation: toast-bob 6s ease-in-out infinite alternate; }
@keyframes toast-bob { to { translate: 0 -10px; } }
.sec.is-first { padding-top: 48px; }

/* ── DESIGNS ── */
.ds-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.ds-stats span { padding: 12px 18px; border-radius: 999px; font: 500 15px/1 var(--font-sans); color: var(--ink-2); 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); }
.ds-stats b { font: 700 17px/1 var(--font-display); color: var(--ink); margin-right: 4px; }
.kind-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.kind-card { position: relative; display: grid; border-radius: 28px; overflow: hidden; text-decoration: none; color: inherit; transition: translate 500ms var(--ease-out), box-shadow 500ms;
  background: radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--hue) 22%, transparent), transparent 70%), var(--surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hue) 22%, rgba(255, 255, 255, .08)), inset 0 1px 0 rgba(255, 255, 255, .07), 0 30px 60px -30px rgba(0, 0, 0, .7); }
.kind-card:hover { translate: 0 -6px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hue) 40%, transparent), 0 40px 80px -30px color-mix(in srgb, var(--hue) 45%, transparent); }
.kc-shot { display: block; aspect-ratio: 16 / 10; overflow: hidden; margin: 12px 12px 0; border-radius: 18px; }
.kc-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: scale 900ms var(--ease-out); }
.kind-card:hover .kc-shot img { scale: 1.05; }
.kc-body { display: grid; gap: 8px; padding: 22px 70px 26px 24px; }
.kc-body .ico-t { width: 42px; height: 42px; border-radius: 13px; margin-top: -44px; margin-bottom: 6px; }
.kc-body b { font: 650 22px/1.15 var(--font-display); letter-spacing: -0.02em; }
.kc-body > span:last-child { font: 400 14.5px/1.45 var(--font-sans); color: var(--ink-2); }
.kind-card .tpl-go { position: absolute; right: 20px; bottom: 22px; }
.kind-card:hover .tpl-go { background: var(--ink); color: var(--canvas); rotate: 0deg; box-shadow: none; }

/* ── FEATURES: the tour ── */
.tour-nav { position: sticky; top: 92px; z-index: 20; margin-top: -24px; }
.tour-links { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; width: max-content; max-width: 100%; margin: 0 auto; padding: 6px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px var(--ring), 0 20px 40px -20px rgba(0, 0, 0, .7); }
.tour-links a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; font: 500 14px/1 var(--font-sans); color: var(--ink-2); text-decoration: none; transition: background 200ms, color 200ms; }
.tour-links a:hover { color: var(--ink); background: color-mix(in srgb, var(--hue) 16%, transparent); }
.tour-links i { width: 7px; height: 7px; border-radius: 50%; background: var(--hue); box-shadow: 0 0 8px var(--hue); }
.tour { padding-top: 96px; }
.tour-row { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 64px; align-items: center; scroll-margin-top: 160px; }
.tour-row + .tour-row { margin-top: 140px; }
.tour-row.is-flip { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } .tour-row.is-flip .tour-copy { order: 2; }
.tour-copy { display: grid; gap: 20px; justify-items: start; }
.tour-n { font: 500 13px/1 var(--font-mono); letter-spacing: .14em; color: color-mix(in srgb, var(--hue) 60%, #fff); }
.tour-title { margin: 0; font: 700 clamp(36px, 3.8vw, 56px)/1.02 var(--font-display); letter-spacing: -0.04em; }
.tour-copy p { margin: 0; font: 400 18px/1.6 var(--font-sans); color: var(--ink-2); max-width: 44ch; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font: 400 16px/1.45 var(--font-sans); color: var(--ink-2); }
.ticks li { display: flex; gap: 12px; align-items: flex-start; }
.ticks svg { flex: none; width: 22px; height: 22px; padding: 5px; margin-top: -1px; border-radius: 50%; background: color-mix(in srgb, var(--hue, var(--accent)) 20%, transparent); stroke: color-mix(in srgb, var(--hue, var(--accent)) 55%, #fff); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tour-demo { padding: 32px; min-height: 380px; justify-content: center; }
.tour-demo > * { margin-top: 0 !important; }
.tour-demo:has(.cal) { padding-bottom: 104px; }
.tour-demo .cal-toast { top: auto; bottom: 24px; right: 32px; }
.bento-3 .nums-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bento-3 .nums-top > div:nth-child(3) { display: none; }
.grow-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 900px; margin: 0 auto; }

/* ── INDUSTRY ── */
.bento-3 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .bento-3 .c2 { grid-column: span 2; }
.day { list-style: none; margin: 0 auto; padding: 0; max-width: 880px; position: relative; display: grid; gap: 22px; }
.day::before { content: ""; position: absolute; left: 86px; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--sky), var(--krown-violet), var(--magenta), var(--ember)); opacity: .5; }
.day li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 40px; align-items: start; }
.day time { position: relative; justify-self: end; padding-top: 22px; font: 500 15px/1 var(--font-mono); color: var(--ink-2); }
.day time::after { content: ""; position: absolute; right: -27px; top: 20px; width: 12px; height: 12px; border-radius: 50%; background: var(--hue); box-shadow: 0 0 0 5px color-mix(in srgb, var(--hue) 22%, var(--canvas)), 0 0 18px var(--hue); }
.day-card { padding: 22px 26px; border-radius: 22px; background: radial-gradient(80% 90% at 0% 0%, color-mix(in srgb, var(--hue) 14%, transparent), transparent 70%), var(--surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hue) 20%, rgba(255, 255, 255, .07)), inset 0 1px 0 rgba(255, 255, 255, .06); }
.day-card b { display: block; font: 650 20px/1.25 var(--font-display); letter-spacing: -0.02em; margin-bottom: 6px; }
.day-card p { margin: 0; font: 400 16px/1.55 var(--font-sans); color: var(--ink-2); }

/* ── ABOUT ── */
.figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.fig { padding-top: 32px; }
.fig-art { position: relative; display: grid; justify-items: center; height: 250px; margin-bottom: 18px; }
.fig-art img { height: 190px; width: auto; align-self: end; rotate: 18deg; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55)); }
.fig:nth-child(2) .fig-art img { rotate: -18deg; } .fig:nth-child(3) .fig-art img { rotate: -22deg; }
.fig-head { position: absolute; top: 0; width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--hue), #fff 30%), var(--hue) 55%, color-mix(in srgb, var(--hue), #000 30%)); box-shadow: 0 16px 30px -8px color-mix(in srgb, var(--hue) 60%, transparent); }
.fig-n { font: 500 13px/1 var(--font-mono); letter-spacing: .14em; color: color-mix(in srgb, var(--hue) 60%, #fff); }
.engine { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.engine-copy { display: grid; gap: 26px; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.stat { padding: 30px; gap: 6px; }
.stat strong { font: 700 64px/1 var(--font-display); letter-spacing: -0.04em; background: linear-gradient(180deg, #fff 30%, color-mix(in srgb, var(--hue) 60%, #fff)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding: 0 .06em .08em 0; }
.stat span { font: 500 16px/1 var(--font-sans); color: var(--ink-2); }

/* ── HELP ── */
.search { position: relative; display: flex; align-items: center; gap: 14px; width: min(100%, 640px); height: 66px; padding: 0 24px; border-radius: 999px; cursor: text;
  background: color-mix(in srgb, var(--surface-raised) 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), 0 24px 60px rgba(0, 0, 0, .5); backdrop-filter: blur(16px); }
.search svg { width: 22px; height: 22px; stroke: var(--ink-3); fill: none; stroke-width: 2; }
.search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: 400 18px/1 var(--font-sans); color: var(--ink); }
.search input::placeholder { color: var(--ink-3); }
.search:focus-within { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent), 0 0 0 4px color-mix(in srgb, var(--accent) 28%, transparent), 0 24px 60px rgba(0, 0, 0, .5); }
.topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.topic { padding: 26px 26px 24px; gap: 6px; text-decoration: none; color: inherit; transition: translate 400ms var(--ease-out); }
.topic:hover { translate: 0 -4px; }
.topic .ico-t { margin-bottom: 12px; }
.topic b { font: 650 21px/1.2 var(--font-display); letter-spacing: -0.02em; } .topic span { font: 400 14.5px/1.3 var(--font-sans); color: var(--ink-3); }
.qa { max-width: 900px; margin: 88px auto 0; display: grid; gap: 64px; }
.qa-sec { scroll-margin-top: 110px; display: grid; gap: 12px; }
.qa-h { display: flex; align-items: center; gap: 14px; margin: 0 0 8px; font: 700 32px/1.1 var(--font-display); letter-spacing: -0.03em; }
.qa-h .ico-t { width: 44px; height: 44px; border-radius: 13px; }
.qa-item { border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--ring), inset 0 1px 0 rgba(255, 255, 255, .05); interpolate-size: allow-keywords; transition: background 300ms, box-shadow 300ms; }
.qa-item[open] { background: radial-gradient(90% 100% at 0% 0%, color-mix(in srgb, var(--hue) 12%, transparent), transparent 70%), var(--surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hue) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, .06); }
.qa-item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 24px; font: 600 18px/1.35 var(--font-display); letter-spacing: -0.01em; }
.qa-item summary::-webkit-details-marker { display: none; }
.qa-item summary i { flex: none; position: relative; width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-strong); transition: transform 400ms var(--ease-out), background 200ms; }
.qa-item summary i::before, .qa-item summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; margin: -.75px 0 0 -5.5px; border-radius: 1px; background: var(--ink); }
.qa-item summary i::after { transform: rotate(90deg); }
.qa-item[open] summary i { transform: rotate(45deg); background: var(--accent); box-shadow: none; }
.qa-item::details-content { height: 0; overflow: clip; transition: height 420ms var(--ease-out), content-visibility 420ms allow-discrete; }
.qa-item[open]::details-content { height: auto; }
.qa-item p { margin: 0; padding: 0 24px 24px; font: 400 16.5px/1.6 var(--font-sans); color: var(--ink-2); max-width: 70ch; }
.qa-none { text-align: center; font: 400 17px/1.5 var(--font-sans); color: var(--ink-2); }
.contact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ct { padding: 30px; gap: 8px; text-decoration: none; color: inherit; transition: translate 400ms var(--ease-out); }
.ct:hover { translate: 0 -4px; }
.ct .ico-t { margin-bottom: 10px; }
.ct b { font: 650 22px/1.2 var(--font-display); } .ct span { font: 400 15px/1.5 var(--font-sans); color: var(--ink-2); }
.ct em { margin-top: 10px; font: 600 14.5px/1 var(--font-sans); font-style: normal; color: color-mix(in srgb, var(--hue) 60%, #fff); }

/* ── PRICING: the comparison ── */
.price-bar { display: flex; justify-content: center; margin-bottom: 8px; }
.compare-head { margin-top: 140px; }
.compare { border-radius: 28px; overflow: auto; background: var(--surface); box-shadow: inset 0 0 0 1px var(--ring), inset 0 1px 0 rgba(255, 255, 255, .06), 0 40px 80px -40px rgba(0, 0, 0, .8); }
.compare table { width: 100%; min-width: 720px; border-collapse: collapse; font: 400 15.5px/1.4 var(--font-sans); }
.compare th, .compare td { padding: 18px 22px; text-align: center; border-bottom: 1px solid var(--line); }
.compare tbody th[scope="row"] { text-align: left; font-weight: 400; color: var(--ink-2); }
.compare thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); padding: 26px 22px; vertical-align: bottom; }
.c-name { display: block; font: 650 22px/1.1 var(--font-display); letter-spacing: -0.02em; margin-bottom: 8px; color: color-mix(in srgb, var(--hue) 45%, #fff); }
.c-price { font: 700 30px/1 var(--font-display); letter-spacing: -0.04em; } .c-price small { font: 400 13px/1 var(--font-sans); color: var(--ink-3); margin-left: 4px; letter-spacing: 0; }
.c-group th { text-align: left !important; padding-top: 30px !important; font: 500 12px/1 var(--font-mono) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); background: color-mix(in srgb, var(--surface-sunk) 60%, transparent); }
.compare .top { background: color-mix(in srgb, var(--magenta) 6%, transparent); }
.compare thead .top { background: linear-gradient(180deg, color-mix(in srgb, var(--magenta) 16%, var(--surface)), color-mix(in srgb, var(--magenta) 6%, var(--surface))); }
.compare .ok svg { width: 26px; height: 26px; padding: 6px; border-radius: 50%; background: color-mix(in srgb, var(--success) 20%, transparent); stroke: var(--success); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.compare .no { color: var(--ink-3); opacity: .55; } .compare .no svg { width: 14px; height: 14px; } .compare .txt { color: var(--ink); font-weight: 500; }

/* ── LEGAL ── */
.notice { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; font: 500 13.5px/1 var(--font-sans); color: var(--warning); background: var(--warning-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warning) 35%, transparent); }
.notice svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.legal { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 56px; align-items: start; }
.toc { position: sticky; top: 110px; display: grid; gap: 14px; }
.toc b { font: 500 12px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.toc a { display: flex; gap: 12px; padding: 10px 14px; border-radius: 12px; font: 500 14.5px/1.35 var(--font-sans); color: var(--ink-3); text-decoration: none; transition: background 250ms, color 250ms; }
.toc a span { font: 500 12px/1.6 var(--font-mono); color: var(--ink-3); }
.toc a:hover { color: var(--ink); }
.toc a.is-on { color: var(--ink); background: color-mix(in srgb, var(--krown-violet) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-text) 30%, transparent); }
.toc a.is-on span { color: var(--accent-text); }
.legal-body { display: grid; gap: 24px; min-width: 0; }
.in-short { flex-direction: row; gap: 20px; padding: 30px; }
.in-short h2 { margin: 4px 0 14px; font: 650 22px/1.2 var(--font-display); }
.prose { padding: 48px 52px; gap: 0; }
.prose section { scroll-margin-top: 110px; padding: 30px 0; border-top: 1px solid var(--line); }
.prose section:first-child { border-top: 0; padding-top: 0; }
.prose h2 { display: flex; align-items: baseline; gap: 14px; margin: 0 0 14px; font: 650 24px/1.25 var(--font-display); letter-spacing: -0.02em; }
.prose h2 span { font: 500 13px/1 var(--font-mono); color: var(--accent-text); }
.prose p, .prose li { font: 400 16.5px/1.7 var(--font-sans); color: var(--ink-2); max-width: 72ch; }
.prose p { margin: 0; } .prose ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.prose li::marker { color: var(--accent-text); }

/* ── 404 ── */
.nf { min-height: 100svh; display: grid; align-content: center; padding: 160px 0 120px; }
.nf .wrap { display: grid; justify-items: center; gap: 26px; }
.nf .ph-actions { justify-content: center; }

/* ── responsive ── */
@media (max-width: 1100px) {
  .bento-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bento-3 .c2 { grid-column: auto; } .bento-3 .c2:first-child { grid-column: 1 / -1; }
  .kind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tour-row, .tour-row.is-flip { grid-template-columns: minmax(0, 1fr); gap: 36px; } .tour-row.is-flip .tour-copy { order: 0; }
  .tour-row + .tour-row { margin-top: 96px; }
  .engine { grid-template-columns: minmax(0, 1fr); }
  .legal { grid-template-columns: 220px minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 960px) {
  .phero { padding: 128px 0 56px; }
  .ph-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ph-art { min-height: 300px; } .ph-stack { min-height: 340px; } .ph-mark { width: 78%; }
  .ph-toast { left: 8px; bottom: -18px; }
  .topics, .contact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figs { grid-template-columns: minmax(0, 1fr); } .fig-art { height: 200px; } .fig-art img { height: 150px; }
  .legal { grid-template-columns: minmax(0, 1fr); } .toc { position: relative; top: 0; }
  .toc ol { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
  .prose { padding: 32px 26px; }
  .tour-nav { top: 84px; } .tour-links { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .tour-links a { white-space: nowrap; }
  .compare-head { margin-top: 96px; }
}
@media (max-width: 680px) {
  .kind-grid, .contact { grid-template-columns: minmax(0, 1fr); }
  .topics, .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .topic { padding: 20px 18px; } .topic b { font-size: 17px; } .stat { padding: 22px; }
  .bento-3 { grid-template-columns: minmax(0, 1fr); } .bento-3 .c2 { grid-column: auto; }
  .compare table { min-width: 0; font-size: 13.5px; } .compare th, .compare td { padding: 13px 8px; } .compare tbody th[scope="row"] { padding-left: 16px; width: 46%; }
  .compare thead th { padding: 18px 6px; } .c-price { display: none; } .c-name { font-size: 15px; margin: 0; }
  .compare .ok svg { width: 22px; height: 22px; padding: 5px; } .compare .txt { font-size: 12.5px; }
  .ph-title { font-size: clamp(44px, 12vw, 60px); }
  .day::before { left: 60px; } .day li { grid-template-columns: 50px minmax(0, 1fr); gap: 26px; } .day time { font-size: 13px; } .day time::after { right: -19px; }
  .tour-demo { padding: 22px 16px; min-height: 0; }
  .in-short { flex-direction: column; }
  .search { height: 58px; }
  .stat strong { font-size: 52px; }
}
@media (prefers-reduced-motion: reduce) { .ph-toast { animation: none; } }

/* ── BRAND KIT (brand-kit.html): the living specimen ── */
.bk-index { display: flex; flex-wrap: wrap; gap: 8px; }
.bk-index a { padding: 10px 14px; border-radius: 999px; font: 500 14px/1 var(--font-sans); color: var(--ink-2); text-decoration: none; background: color-mix(in srgb, var(--surface) 80%, transparent); box-shadow: inset 0 0 0 1px var(--ring); transition: color 200ms, background 200ms; }
.bk-index a:hover { color: var(--ink); background: color-mix(in srgb, var(--krown-violet) 18%, transparent); }
.bk { display: grid; gap: 120px; padding-block: 48px 140px; }
.bk-group { display: grid; gap: 32px; scroll-margin-top: 100px; }
.bk-gh { display: grid; gap: 10px; max-width: 760px; }
.bk-gh h2 { margin: 0; font: 700 clamp(36px, 4.4vw, 60px)/1 var(--font-display); letter-spacing: -0.04em; }
.bk-gh p { margin: 0; font: 400 18px/1.55 var(--font-sans); color: var(--ink-2); }
.bk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.bk-spec { margin: 0; display: grid; grid-template-rows: 1fr auto; min-width: 0; border-radius: 26px; overflow: hidden; background: var(--surface); box-shadow: inset 0 0 0 1px var(--ring), inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 60px -30px rgba(0, 0, 0, .7); }
.bk-spec.span-2 { grid-column: span 2; } .bk-spec.span-3 { grid-column: 1 / -1; }
.bk-stage { position: relative; min-width: 0; min-height: 190px; display: grid; place-items: center; padding: 36px 28px; background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--krown-violet) 7%, transparent), transparent 70%), var(--canvas); overflow: hidden; }
.bk-spec.is-bare .bk-stage { padding: 20px; display: block; }
.bk-spec figcaption { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: baseline; padding: 16px 20px 18px; border-top: 1px solid var(--line); }
.bk-id { grid-row: span 3; align-self: start; padding: 6px 9px; border-radius: 8px; font: 600 12px/1 var(--font-mono); color: #fff; background: linear-gradient(135deg, var(--krown-violet), var(--magenta)); }
.bk-spec figcaption b { font: 650 16.5px/1.25 var(--font-display); letter-spacing: -0.01em; }
.bk-spec code { font: 400 12.5px/1.4 var(--font-mono); color: var(--accent-text); overflow-wrap: anywhere; }
.bk-used { font: 400 13px/1.4 var(--font-sans); color: var(--ink-3); }
.bk-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; }
.bk-col { display: grid; gap: 14px; justify-items: center; width: 100%; }
.bk-col .try { width: 100%; }
.bk-center { display: grid; place-items: center; }
.bk-logo { display: flex; align-items: center; gap: 22px; } .bk-logo img { height: 78px; } .brand-type { font: 700 64px/1 var(--font-display); letter-spacing: -0.035em; } .brand-type b { background: linear-gradient(90deg, var(--accent-text), var(--magenta)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-right: .04em; }
.bk-mark { height: 110px; width: auto; }
.bk-tagline { margin: 0; font: 700 34px/1.1 var(--font-display); letter-spacing: -0.03em; text-align: center; }
.bk-tagline em, .bk-crowntext em { font-family: var(--font-serif); font-weight: 400; background: var(--crown); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-right: .06em; }
.bk-silkw { width: min(100%, 420px); }
.bk-pills { display: flex; gap: 10px; align-items: center; justify-content: center; } .bk-pills img { height: 200px; width: auto; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .5)); }
.bk-giant { margin: 0; font: 800 clamp(64px, 12vw, 180px)/.85 var(--font-display); letter-spacing: -0.01em; background: linear-gradient(180deg, var(--ink) 30%, color-mix(in srgb, var(--ink) 20%, transparent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding: 0 .06em .06em; }
.bk-giant span { background: linear-gradient(100deg, var(--crown-blue), var(--krown-indigo) 30%, var(--orchid) 60%, var(--rose) 82%, var(--ember)); -webkit-background-clip: text; background-clip: text; }
.bk-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; width: 100%; }
.bk-sw { display: grid; gap: 4px; } .bk-sw i { height: 76px; border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .15); margin-bottom: 6px; }
.bk-sw b { font: 600 14px/1.2 var(--font-sans); } .bk-sw span { font: 500 12.5px/1 var(--font-mono); color: var(--ink-2); } .bk-sw code { font-size: 11.5px; color: var(--ink-3); }
.bk-crownbar { width: 100%; height: 64px; border-radius: 18px; background: var(--crown); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.bk-crowntext { margin: 18px 0 0; font: 700 40px/1 var(--font-display); letter-spacing: -0.03em; }
.bk-stage:has(.bk-crownbar) { display: block; }
.bk-t { font-size: clamp(40px, 6vw, 88px); text-align: center; }
.bk-body { margin: 0 0 14px; font: 400 16.5px/1.6 var(--font-sans); color: var(--ink-2); max-width: 44ch; } .bk-mono { margin: 0; font: 500 12.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.bk-scale .h2 { font-size: clamp(36px, 4.6vw, 64px); }
.bk-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: 100%; }
.bk-cards .card { padding: 28px; }
.bk-bento { width: 100%; }
.bk-tpls { width: 100%; } .bk-tpls .tpl { grid-column: span 4; }
.bk-stage .plans { margin-top: 20px; width: 100%; }
.bk-faq { width: 100%; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } .bk-faq .wkm-chat-qs { grid-row: 1; margin: 0; } .bk-faq .wkm-chat-win { grid-row: 1; position: relative; top: 0; height: 420px; }
.bk-aurora { position: relative; width: 100%; height: 240px; border-radius: 20px; overflow: hidden; display: grid; place-items: center; isolation: isolate; background: radial-gradient(60% 90% at 25% 30%, color-mix(in srgb, var(--krown-violet) 55%, transparent), transparent 70%), radial-gradient(50% 80% at 75% 70%, color-mix(in srgb, var(--rose) 45%, transparent), transparent 70%), radial-gradient(50% 70% at 60% 20%, color-mix(in srgb, var(--sky) 40%, transparent), transparent 70%), var(--canvas); }
.bk-aurora > .wkm-aurora { position: absolute; inset: 0; z-index: -1; } .bk-aurora .grain { mix-blend-mode: soft-light; opacity: .35; -webkit-mask-image: none; mask-image: none; }
.bk-aurora span { font: 700 34px/1 var(--font-display); letter-spacing: -0.03em; }
.bk-stage .addon-heap { padding: 0; }
.bk-stage .wkm-marquee { width: 100%; }
.bk-cur { position: relative !important; left: auto !important; top: auto !important; opacity: 1 !important; width: 34px; height: 34px; }
@media (max-width: 960px) {
  .bk-grid { grid-template-columns: minmax(0, 1fr); } .bk-spec.span-2 { grid-column: auto; }
  .bk-cards { grid-template-columns: minmax(0, 1fr); } .bk-tpls .tpl { grid-column: auto; }
  .bk-faq { grid-template-columns: minmax(0, 1fr); } .bk-faq .wkm-chat-qs, .bk-faq .wkm-chat-win { grid-row: auto; }
  .bk-logo img { height: 52px; } .brand-type { font-size: 42px; } .bk-pills img { height: 130px; }
  .bk { gap: 88px; }
}

/* ── contact ── */
.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.contact-way { display: grid; gap: 10px; align-content: start; }
.contact-way .h3 { margin: 6px 0 0; }
.contact-how { margin: 0; font: 600 18px/1.35 var(--font-sans); color: var(--ink); overflow-wrap: anywhere; }
.contact-way p:last-child { margin: 0; color: var(--ink-2); }
.contact-office { display: grid; gap: 24px; max-width: 860px; }
.contact-office .prose p { margin: 0 0 12px; color: var(--ink-2); }
.contact-office .prose a { color: var(--accent-text); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }