/* =========================================================
   Where to know — site.css
   Shared stylesheet for every page of the 2026-10 rebuild.
   Tokens come from the design system (colors_and_type.css);
   component values are read 1:1 from the handoff design files.
   Breakpoints: 760px (mobile nav), 900px (stacked story cards),
   1100px (blog table of contents).
   ========================================================= */

/* ---------- Fonts (self-hosted, no Google Fonts dependency) ---------- */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/Inter-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500 600; font-display: swap; src: url('../fonts/Inter-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700 800; font-display: swap; src: url('../fonts/Inter-Bold.ttf') format('truetype'); }

/* ---------- Tokens ---------- */
:root {
  --wtk-bg: #F5F2EC;
  --wtk-bg-card: #FFFFFF;
  --wtk-bg-alt: #EFEBE2;
  --wtk-navy: #1B2340;
  --wtk-navy-deep: #141A30;
  --wtk-teal: #6B9E89;
  --wtk-teal-soft: #DEE8E3;
  --wtk-teal-ink: #3F6B58;
  --wtk-coral: #C8685E;
  --wtk-coral-soft: #EEDAD6;
  --wtk-coral-ink: #A9483E;
  --wtk-amber: #B8924A;
  --wtk-amber-soft: #ECE1C8;
  --wtk-amber-ink: #7A5F2A;
  --wtk-purple: #8A7AB0;
  --wtk-purple-soft: #E2DEEC;
  --wtk-purple-ink: #5E4E8C;
  --wtk-fg: #1A1A2E;
  --wtk-fg-2: #3D3D52;
  --wtk-fg-3: #6B7280;
  --wtk-fg-4: #9CA3AF;
  --wtk-fg-body: #2E2E44;
  --wtk-fg-invert: #F5F2EC;
  --wtk-line: #E2DED3;
  --wtk-line-2: #D6D0BF;
  --wtk-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --hdr-h: 60px;
}
/* Chinese pages: fall back to system CJK fonts and keep strict line breaking. */
html[lang="zh-CN"] {
  --wtk-font-sans: 'Inter', 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
}
html[lang="zh-CN"] body { line-break: strict; }
/* CJK glyphs need far less negative tracking than Latin display type. */
html[lang="zh-CN"] :is(.hero h1, .results-lead, .stat .num, .h-display, .h-xl, .h-lg, .slide h2, .briefing h2, .faq h2, .demo h2) { letter-spacing: -.01em; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--hdr-h) + 16px); }
body { margin: 0; background: var(--wtk-bg); color: var(--wtk-fg); font-family: var(--wtk-font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
a:hover { color: inherit; opacity: .75; }
input, select, button, textarea { font: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
.page { background: var(--wtk-bg); color: var(--wtk-fg); overflow-x: clip; min-height: 100vh; display: flex; flex-direction: column; }
.page > main { flex: 1; }
.wrap { max-width: 1200px; margin: 0 auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.muted { color: var(--wtk-fg-3); }
.pretty { text-wrap: pretty; }
.balance { text-wrap: balance; }
:focus-visible { outline: 2px solid #7B61C4; outline-offset: 2px; }

/* Eyebrow label */
.eyebrow { font: 600 13px var(--wtk-font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--wtk-fg-3); }

/* ---------- Buttons ---------- */
.btn { display: inline-block; border-radius: 999px; white-space: nowrap; text-align: center; cursor: pointer; border: 0; }
.btn-primary { background: var(--wtk-navy); color: var(--wtk-fg-invert); }
.btn-primary:hover { color: var(--wtk-fg-invert); }
.btn-ghost { background: #FFFFFF; color: var(--wtk-fg); border: 1px solid var(--wtk-line-2); }
.btn-sm { height: 36px; padding: 0 18px; font: 600 14px/36px var(--wtk-font-sans); }
.btn-md { height: 48px; padding: 0 24px; font: 600 15px/48px var(--wtk-font-sans); }
.btn-md.btn-ghost { line-height: 46px; }
.btn-lg { height: 52px; padding: 0 30px; font: 600 17px/52px var(--wtk-font-sans); }
.btn-lg.btn-ghost { padding: 0 26px; line-height: 50px; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 20; background: #FFFFFF; border-bottom: 1px solid var(--wtk-line); box-shadow: 0 1px 2px rgba(27,35,64,.04); }
.site-header .bar { max-width: 1200px; margin: 0 auto; padding: 0 24px; height: var(--hdr-h); display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 24px; }
.site-header .logo { display: flex; align-items: center; justify-self: start; }
.site-header .logo img { height: 26px; width: auto; max-width: 100%; display: block; }
.nav-main { display: flex; gap: 32px; font: 500 14px var(--wtk-font-sans); color: var(--wtk-fg-2); justify-self: center; white-space: nowrap; }
.nav-link { padding: 6px 0; background: linear-gradient(var(--wtk-navy), var(--wtk-navy)) left bottom / 0% 1.5px no-repeat; transition: background-size .25s ease, color .2s ease; }
.nav-link:hover, .nav-link[aria-current="page"] { background-size: 100% 1.5px; color: var(--wtk-fg); opacity: 1; }
.nav-link[aria-current="page"] { font-weight: 600; }
.hdr-actions { display: flex; align-items: center; gap: 24px; justify-self: end; }
.hdr-actions .lang, .hdr-actions .signin { font: 500 14px var(--wtk-font-sans); color: var(--wtk-fg-2); white-space: nowrap; }
.menu-btn { display: none; width: 44px; height: 44px; margin-right: -10px; border: 0; background: transparent; place-items: center; cursor: pointer; }
.menu-btn .ic-close { display: none; }
.menu-btn[aria-expanded="true"] .ic-open { display: none; }
.menu-btn[aria-expanded="true"] .ic-close { display: block; }
.mobile-nav { display: none; position: absolute; left: 0; right: 0; top: var(--hdr-h); background: #FFFFFF; border-bottom: 1px solid var(--wtk-line); box-shadow: 0 8px 16px rgba(27,35,64,.08); flex-direction: column; padding: 8px 24px 16px; }
.mobile-nav a { min-height: 52px; display: flex; align-items: center; border-bottom: 1px solid var(--wtk-line); font: 600 17px var(--wtk-font-sans); color: var(--wtk-fg); }
.mobile-nav a:last-child { border-bottom: 0; border-top: 1px solid var(--wtk-line); font-weight: 500; color: var(--wtk-fg-2); }
.mobile-nav a:nth-last-child(2) { border-bottom: 0; }
@media (max-width: 759.98px) {
  .site-header .bar { grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; }
  .site-header .logo img { height: 22px; }
  .nav-main, .hdr-actions .signin { display: none; }
  .hdr-actions { gap: 12px; }
  .menu-btn { display: grid; }
  .site-header.menu-open .mobile-nav { display: flex; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--wtk-navy-deep); color: rgba(245,242,236,.72); padding: 56px 24px 40px; }
.site-footer .wrap { display: flex; flex-direction: column; gap: 32px; }
.site-footer .top { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.site-footer .brand { display: flex; flex-direction: column; gap: 14px; }
.site-footer .brand img { height: 24px; width: auto; display: block; align-self: flex-start; }
.site-footer .brand a { font: 500 15px var(--wtk-font-sans); }
.site-footer .brand .mail { color: var(--wtk-fg-invert); }
.site-footer .links { display: flex; gap: 28px; flex-wrap: wrap; font: 400 14px var(--wtk-font-sans); }
.site-footer .bottom { padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); font: 400 13px var(--wtk-font-sans); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.site-footer .bottom .company { display: flex; gap: 6px 12px; flex-wrap: wrap; }
.site-footer .bottom .company a { text-decoration: underline; text-underline-offset: 3px; }
/* "Cookie settings" reopens the consent banner (GDPR: withdrawing must be as easy as giving). */
.site-footer .bottom .end { display: flex; gap: 6px 24px; flex-wrap: wrap; }
.site-footer .ck-open { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.site-footer .ck-open:hover { opacity: .75; }
.site-footer .login { color: var(--wtk-fg-invert); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Cookie banner ---------- */
.cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50; max-width: 720px; margin: 0 auto; background: #FFFFFF; border: 1px solid var(--wtk-line); border-radius: 16px; box-shadow: 0 8px 24px rgba(27,35,64,.12); padding: 16px 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.cookie[hidden] { display: none; }
.cookie .txt { flex: 1 1 300px; font: 400 14px/1.5 var(--wtk-font-sans); color: var(--wtk-fg-2); }
.cookie .txt a { color: var(--wtk-fg); text-decoration: underline; text-underline-offset: 3px; }
.cookie .acts { display: flex; gap: 8px; flex: none; }
.cookie button { height: 40px; padding: 0 16px; border-radius: 999px; font: 600 14px var(--wtk-font-sans); cursor: pointer; }
.cookie .reject { border: 1px solid var(--wtk-line-2); background: #FFFFFF; color: var(--wtk-fg); }
.cookie .accept { border: 0; background: var(--wtk-navy); color: var(--wtk-fg-invert); }

/* ---------- Scroll reveal (enabled by JS only) ---------- */
.js-reveal [data-reveal].pre { opacity: 0; transform: translateY(24px); }
.js-reveal [data-reveal] { transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }

/* =========================================================
   HOME
   ========================================================= */

/* 01 Hero — scroll-driven: text lifts away, fragments gather into <wtk-flow>. */
.hero { position: relative; height: 200vh; background: #FFFFFF; }
.hero-stage { position: sticky; top: var(--hdr-h); height: calc(100vh - var(--hdr-h)); height: calc(100svh - var(--hdr-h)); min-height: 560px; display: flex; align-items: center; overflow: hidden; background: #FFFFFF; }
.hero-frags { position: absolute; inset: 0; overflow: hidden; }
.hero-frags > span { display: block; position: absolute; will-change: transform;
  transform: translate(calc(var(--gather, 0) * var(--tx, 0px)), calc(var(--gather, 0) * var(--ty, 0px))) scale(calc(1 + var(--reveal, 0) * .06 - var(--gather, 0) * .85));
  opacity: calc(1 - var(--gather, 0) * var(--gather, 0)); }
.hero-frags > span > span { display: block; padding: 8px 14px; border-radius: 999px; white-space: nowrap; animation: wtkDrift var(--dur, 24s) ease-in-out var(--delay, 0s) infinite alternate; }
.hero-flow { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: var(--flowOp, 0); }
.hero-flow wtk-flow { display: block; width: min(100%, 1400px, calc((100vh - var(--hdr-h)) * 2.4)); }
.hero-veil { position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 160px); background: rgba(240,235,224,.25); backdrop-filter: blur(4px) saturate(110%); -webkit-backdrop-filter: blur(4px) saturate(110%); -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 160px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 160px), transparent); transform: translateY(calc(var(--p1, 0) * -112%)); will-change: transform; }
.hero-copy { position: relative; max-width: 1080px; margin: 0 auto; padding: 72px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 28px; opacity: calc(1 - var(--p1, 0) * .5); transform: translateY(calc(var(--p1, 0) * -112vh)); will-change: transform; }
.hero h1 { font: 700 clamp(40px,6.2vw,92px)/1.02 var(--wtk-font-sans); letter-spacing: -.045em; text-wrap: balance; }
.hero-sub { max-width: 620px; font: 400 clamp(18px,1.8vw,21px)/1.5 var(--wtk-font-sans); color: var(--wtk-fg-2); text-wrap: pretty; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.hero-award { display: flex; align-items: center; gap: 12px; margin-top: 16px; font: 500 13px var(--wtk-font-sans); color: var(--wtk-fg-3); }
.hero-award img { height: 96px; width: auto; display: block; }
@keyframes wtkRipple { 0% { transform: scale(1); opacity: .45; } 100% { transform: scale(3.2); opacity: 0; } }
@keyframes wtkDrift { 0% { transform: translate3d(0,0,0); } 100% { transform: translate3d(var(--dx), var(--dy), 0); } }
/* Short laptop screens: tighten the hero so the award badge stays inside the first screen. */
@media (max-height: 900px) and (min-width: 760px) {
  .hero-copy { padding-top: 40px; padding-bottom: 40px; gap: 20px; }
  .hero-award { margin-top: 4px; }
  .hero-award img { height: 72px; }
}
@media (max-height: 760px) and (min-width: 760px) {
  .hero-copy { padding-top: 24px; padding-bottom: 24px; gap: 16px; }
  .hero-award img { height: 56px; }
}
@media (max-width: 759.98px) {
  .hero { height: calc(100svh - var(--hdr-h)); }
  .hero-flow { display: none; }
  .hero-copy { padding: 32px 20px; }
  .hero-frags > span:nth-child(even) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero { height: calc(100vh - var(--hdr-h)); }
  .hero-frags > span > span { animation: none; }
}

/* 02 Results */
.results { padding: clamp(48px,6vw,80px) 24px clamp(64px,12vw,160px); background: #FFFFFF; }
.results .wrap { max-width: 1280px; display: flex; flex-direction: column; gap: clamp(48px,6vw,88px); }
.results-mobile { display: none; flex-direction: column; align-items: center; gap: 14px; }
.cat-grid { width: 100%; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.cat-chip { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; font: 600 13px var(--wtk-font-sans); }
.cat-chip svg { flex: none; }
.results-mobile .mark { width: 88px; height: auto; display: block; }
.act-list { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.act-row { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 12px; align-items: baseline; padding: 14px 16px; border-radius: 14px; background: var(--wtk-bg); }
.act-row b { font: 700 17px var(--wtk-font-sans); letter-spacing: -.01em; color: var(--wtk-fg); }
.act-row span { font: 400 14px/1.45 var(--wtk-font-sans); color: var(--wtk-fg-2); }
@media (max-width: 759.98px) { .results-mobile { display: flex; } }
.results-lead { max-width: 980px; margin-top: clamp(24px,4vw,48px); font: 600 clamp(32px,4.6vw,60px)/1.12 var(--wtk-font-sans); letter-spacing: -.03em; color: var(--wtk-fg); text-wrap: balance; }
.stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr)); gap: 32px; }
.stat { display: flex; flex-direction: column; gap: 8px; }
.stat .num { display: flex; align-items: baseline; gap: .12em; font: 700 clamp(60px,7vw,112px)/.9 var(--wtk-font-sans); letter-spacing: -.05em; color: var(--wtk-navy); }
.stat .num small { font-size: .36em; letter-spacing: -.01em; font-weight: 600; }
.stat .lbl { font: 500 17px/1.4 var(--wtk-font-sans); color: var(--wtk-fg-2); }
.stat .src { font: 500 12px var(--wtk-font-sans); color: var(--wtk-fg-3); }
.results-note { font: 500 15px/1.5 var(--wtk-font-sans); color: var(--wtk-fg-3); max-width: 720px; }

/* Shared section heads */
.sec-head { display: flex; flex-direction: column; gap: 16px; max-width: 820px; }
.h-display { font: 700 clamp(40px,5.4vw,76px)/1.02 var(--wtk-font-sans); letter-spacing: -.045em; text-wrap: balance; }
.h-display .muted, .h-xl .muted { color: var(--wtk-fg-3); }
.h-xl { font: 700 clamp(36px,4.6vw,64px)/1.05 var(--wtk-font-sans); letter-spacing: -.04em; text-wrap: balance; }
.h-lg { font: 700 clamp(28px,3.2vw,44px)/1.08 var(--wtk-font-sans); letter-spacing: -.035em; text-wrap: balance; }

/* 03 Market radar */
.radar-sec { padding: clamp(64px,12vw,160px) 24px; background: var(--wtk-bg); }
.radar-sec .wrap { display: flex; flex-direction: column; gap: 56px; }
.duo { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr)); gap: 20px; }
.duo-card { border-radius: 28px; padding: clamp(24px,3vw,40px); display: flex; flex-direction: column; gap: 24px; }
.duo-card.light { background: #FFFFFF; border: 1px solid var(--wtk-line); }
.duo-card.dark { background: var(--wtk-navy); color: var(--wtk-fg-invert); }
.duo-card .ttl { display: flex; flex-direction: column; gap: 6px; }
.duo-card .ttl span:first-child { font: 600 13px var(--wtk-font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--wtk-fg-3); }
.duo-card.dark .ttl span:first-child { color: #A9B8D6; }
.duo-card .ttl span:last-child { font: 600 22px/1.3 var(--wtk-font-sans); letter-spacing: -.02em; }
.duo-card .foot { font: 400 15px/1.55 var(--wtk-font-sans); color: var(--wtk-fg-2); }
.duo-card.dark .foot { color: rgba(245,242,236,.8); }
.gauge-box { flex: 1; min-height: 260px; display: grid; place-items: center; }
.gauge { width: 180px; height: 180px; border-radius: 50%; background: conic-gradient(var(--wtk-navy) 0 86%, var(--wtk-line) 86% 100%); display: grid; place-items: center; }
.gauge > div { width: 150px; height: 150px; border-radius: 50%; background: #FFFFFF; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.gauge .v { font: 700 48px/1 var(--wtk-font-sans); letter-spacing: -.04em; color: var(--wtk-navy); font-variant-numeric: tabular-nums; }
.gauge .l { font: 500 13px var(--wtk-font-sans); color: var(--wtk-fg-3); }
.radar { flex: 1; min-height: 260px; position: relative; }
.radar .ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; }
.radar .ring.r1 { width: 250px; height: 250px; margin: -125px 0 0 -125px; border: 1px solid rgba(255,255,255,.14); }
.radar .ring.r2 { width: 160px; height: 160px; margin: -80px 0 0 -80px; border: 1px solid rgba(255,255,255,.2); }
.radar .ripples { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.radar .ripples span { position: absolute; left: -35px; top: -35px; width: 70px; height: 70px; border-radius: 50%; border: 1.5px solid rgba(245,242,236,.55); opacity: 0; }
.radar.ripple-once .ripples span { animation: wtkRipple 4.2s cubic-bezier(.25,.6,.3,1) both; }
.radar.ripple-hover .ripples span { animation: wtkRipple 4.2s cubic-bezier(.25,.6,.3,1) infinite both; }
.radar .ripples span:nth-child(2) { animation-delay: 1.4s !important; }
.radar .ripples span:nth-child(3) { animation-delay: 2.8s !important; }
.radar .you { position: absolute; left: 50%; top: 50%; width: 70px; height: 70px; margin: -35px 0 0 -35px; border-radius: 50%; background: var(--wtk-fg-invert); color: var(--wtk-navy); display: grid; place-items: center; font: 700 13px var(--wtk-font-sans); cursor: default; }
.radar .comp { position: absolute; display: flex; flex-direction: column; gap: 6px; transition: transform .9s cubic-bezier(.2,.7,.2,1), opacity .6s ease, filter .6s ease; }
.radar .comp.a { left: 12%; top: 10%; align-items: flex-start; }
.radar .comp.b { right: 2%; bottom: 24%; align-items: flex-end; }
.radar .comp.c { left: 8%; bottom: 6%; align-items: flex-start; }
.radar .comp .who { display: flex; align-items: center; gap: 6px; font: 500 12px var(--wtk-font-sans); color: #A9B8D6; }
.radar .comp .who i { width: 10px; height: 10px; border-radius: 5px; background: #A9B8D6; }
.radar .comp .q { padding: 6px 12px; border-radius: 999px; font: 500 13px var(--wtk-font-sans); white-space: nowrap; }
.radar.live .comp { opacity: .45; }
.radar.live .comp.on { opacity: 1; filter: drop-shadow(0 0 14px rgba(245,242,236,.28)); }
.radar.live .comp.a.on { transform: translate(6px,-4px) scale(1.06); }
.radar.live .comp.b.on { transform: translate(-6px,-4px) scale(1.06); }
.radar.live .comp.c.on { transform: translate(6px,4px) scale(1.06); }
@media (max-width: 759.98px) { .radar { min-height: 300px; } }

/* Chips & tones */
.tone-pos { background: var(--wtk-teal-soft); color: var(--wtk-teal-ink); }
.tone-neg { background: var(--wtk-coral-soft); color: var(--wtk-coral-ink); }
.tone-mid { background: var(--wtk-amber-soft); color: var(--wtk-amber-ink); }

/* 04 How it works */
.how { padding: clamp(56px,8vw,112px) 24px; background: #FFFFFF; color: var(--wtk-fg); }
.how .wrap { display: flex; flex-direction: column; gap: 28px; }
.how-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.how-top .l { display: flex; flex-direction: column; gap: 14px; }
.how-dots { display: flex; gap: 6px; }
.how-dots button { height: 20px; width: 48px; padding: 8px 0; border: 0; background: transparent; cursor: pointer; }
.how-dots button span { display: block; height: 4px; border-radius: 2px; background: rgba(26,26,46,.15); transition: background .4s; }
.how-dots button[aria-current="true"] span { background: var(--wtk-fg); }
.how-arrows { display: flex; gap: 10px; }
.how-arrows button { width: 44px; height: 44px; border-radius: 22px; border: 1px solid var(--wtk-line-2); background: #FFFFFF; display: grid; place-items: center; cursor: pointer; transition: opacity .2s; }
.how-arrows button:hover { border-color: var(--wtk-navy); }
.how-arrows button:disabled { opacity: .35; cursor: default; }
.how-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.how-track::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; scroll-snap-align: start; border-radius: 28px; padding: clamp(24px,4vw,56px); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 48px; align-items: center; }
.slide.s1 { background: var(--wtk-teal-soft); }
.slide.s2 { background: var(--wtk-amber-soft); }
.slide.s3 { background: var(--wtk-purple-soft); }
.slide .copy { display: flex; flex-direction: column; gap: 14px; }
.slide .copy .eyebrow { color: var(--wtk-teal-ink); }
.slide.s2 .copy .eyebrow { color: var(--wtk-amber-ink); }
.slide.s3 .copy .eyebrow { color: var(--wtk-purple-ink); }
.slide h2 { font: 700 clamp(28px,3.6vw,48px)/1.06 var(--wtk-font-sans); letter-spacing: -.04em; }
.slide .copy p { max-width: 460px; font: 400 clamp(16px,1.6vw,19px)/1.5 var(--wtk-font-sans); color: var(--wtk-fg-2); }
.tags { display: flex; gap: 8px; flex-wrap: wrap; }
.tags span { padding: 6px 14px; border: 1px solid rgba(26,26,46,.16); background: rgba(255,255,255,.6); border-radius: 999px; font: 500 13px var(--wtk-font-sans); }
.panel { background: #FFFFFF; border: 1px solid rgba(26,26,46,.08); border-radius: 22px; box-shadow: 0 1px 2px rgba(27,35,64,.06); display: flex; flex-direction: column; justify-content: safe center; gap: 8px; padding: 18px; overflow: hidden; }
.panel-ttl { display: flex; align-items: center; gap: 8px; font: 600 15px var(--wtk-font-sans); }
.sample { padding: 2px 8px; border-radius: 999px; background: var(--wtk-bg-alt); color: var(--wtk-fg-3); font: 500 11px var(--wtk-font-sans); white-space: nowrap; }
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; gap: 12px; flex-wrap: wrap; }
.live-dot { display: flex; align-items: center; gap: 6px; font: 500 12px var(--wtk-font-sans); color: var(--wtk-teal-ink); }
.live-dot i { width: 7px; height: 7px; border-radius: 4px; background: var(--wtk-teal); }
.rv { display: grid; grid-template-columns: 28px minmax(0,1fr) 10px; gap: 12px; align-items: center; padding: 8px 12px; border: 1px solid var(--wtk-line); border-radius: 14px; background: #FFFFFF; }
.rv .flag { height: 22px; border-radius: 6px; background: var(--wtk-bg-alt); color: var(--wtk-fg-2); display: grid; place-items: center; font: 600 11px var(--wtk-font-sans); letter-spacing: .04em; }
.rv .body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rv .src { font: 500 11.5px var(--wtk-font-sans); color: var(--wtk-fg-3); }
.rv .txt { font: 500 14px/1.35 var(--wtk-font-sans); color: var(--wtk-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv .dot { width: 8px; height: 8px; border-radius: 4px; }
.panel.cmp { gap: 16px; }
.cmp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.legend { display: flex; gap: 14px; font: 500 12px var(--wtk-font-sans); color: var(--wtk-fg-3); }
.legend span { display: flex; align-items: center; gap: 5px; }
.legend i { width: 10px; height: 10px; border-radius: 5px; background: var(--wtk-navy); }
.legend span + span i { width: 8px; height: 8px; border-radius: 4px; background: #C9C2B3; }
.cmp-row { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 2px 12px; align-items: center; }
.cmp-row .ic { grid-row: span 2; width: 28px; height: 28px; border-radius: 8px; background: var(--wtk-bg); display: grid; place-items: center; }
.cmp-row .lbl { display: flex; justify-content: space-between; font: 500 13.5px var(--wtk-font-sans); color: var(--wtk-fg-2); }
.cmp-row .lbl b { font-weight: 600; }
.cmp-row .track { position: relative; display: block; height: 22px; }
.cmp-row .track > span { position: absolute; }
.cmp-row .base { left: 0; right: 0; top: 10px; height: 2px; border-radius: 1px; background: var(--wtk-line); }
.cmp-row .gap { top: 9px; height: 4px; border-radius: 2px; transition: left 1s cubic-bezier(.2,.7,.2,1), width 1s cubic-bezier(.2,.7,.2,1); }
.cmp-row .c { top: 6px; width: 10px; height: 10px; margin-left: -5px; border-radius: 5px; background: #C9C2B3; box-shadow: 0 0 0 2px #FFFFFF; }
.cmp-row .me { top: 3px; width: 16px; height: 16px; margin-left: -8px; border-radius: 8px; background: var(--wtk-navy); box-shadow: 0 0 0 2.5px #FFFFFF, 0 2px 6px rgba(27,35,64,.25); transition: left 1s cubic-bezier(.2,.7,.2,1); }
.task { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--wtk-line); border-radius: 14px; }
.task .meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.task .dept { font: 600 12px var(--wtk-font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--wtk-fg-3); }
.task .st { padding: 2px 8px; border-radius: 999px; font: 600 11px var(--wtk-font-sans); }
.task .due { font: 500 11.5px var(--wtk-font-sans); color: var(--wtk-fg-3); }
.task .av { grid-row: span 2; width: 34px; height: 34px; border-radius: 17px; color: #FFFFFF; display: grid; place-items: center; font: 600 12px var(--wtk-font-sans); }
.task .what { font: 500 14px/1.35 var(--wtk-font-sans); color: var(--wtk-fg); }
.ai-bar { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 14px; background: var(--wtk-purple-soft); font: 500 13px var(--wtk-font-sans); color: var(--wtk-purple-ink); }
.ai-bar .badge { flex: none; width: 26px; height: 26px; border-radius: 13px; background: #7B61C4; color: #FFFFFF; display: grid; place-items: center; font: 700 10px var(--wtk-font-sans); }
.ai-bar .t { flex: 1; min-width: 0; }
.ai-bar .go { flex: none; height: 30px; padding: 0 12px; border-radius: 999px; background: #FFFFFF; color: var(--wtk-purple-ink); font: 600 12.5px/30px var(--wtk-font-sans); display: flex; align-items: center; gap: 4px; box-shadow: 0 1px 2px rgba(27,35,64,.08); }
@media (max-width: 899.98px) {
  .slide { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .rv.extra { display: none; }
}
@media (max-height: 633px) { .rv.extra { display: none; } }

/* 05 Modules */
.modules { padding: clamp(56px,7vw,96px) 24px clamp(32px,4vw,48px); background: #FFFFFF; }
.modules .wrap { display: flex; flex-direction: column; gap: 28px; }
.modules h2 { max-width: 760px; }
.mod-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(min(100%,320px),1fr)); gap: 12px; }
.mod { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 14px; align-items: start; padding: 18px; border: 1px solid var(--wtk-line); border-radius: 16px; background: #FFFFFF; transition: background-color .2s ease; }
.mod:hover { background-color: var(--wtk-bg); }
.mod .ic { width: 40px; height: 40px; border-radius: 12px; background: var(--wtk-bg); display: grid; place-items: center; }
.mod .tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mod .tx b { font: 700 18px/1.25 var(--wtk-font-sans); letter-spacing: -.015em; }
.mod .tx span { font: 400 15px/1.5 var(--wtk-font-sans); color: var(--wtk-fg-2); text-wrap: pretty; }

/* 06 Staff mentions */
.staff { padding: 0 24px clamp(64px,8vw,112px); background: #FFFFFF; }
.staff-box { max-width: 1200px; margin: 0 auto; background: var(--wtk-bg); border-radius: 28px; padding: clamp(24px,4vw,48px); display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,380px),1fr)); gap: 32px; align-items: center; }
.staff-box .copy { display: flex; flex-direction: column; gap: 14px; }
.staff-box .copy p { max-width: 520px; font: 400 17px/1.55 var(--wtk-font-sans); color: var(--wtk-fg-2); text-wrap: pretty; }
html[lang="zh-CN"] .staff-box .copy p { max-width: 600px; line-height: 1.6; }
.staff-box .more { align-self: flex-start; font: 600 15px var(--wtk-font-sans); color: var(--wtk-navy); }
.quote-card { background: #FFFFFF; border: 1px solid var(--wtk-line); border-radius: 22px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.quote-card .who { display: flex; align-items: center; gap: 12px; }
.quote-card .av { width: 44px; height: 44px; border-radius: 22px; background: var(--wtk-teal); color: #FFFFFF; display: grid; place-items: center; font: 600 15px var(--wtk-font-sans); }
.quote-card .nm { display: flex; flex-direction: column; gap: 2px; }
.quote-card .nm b { font: 600 16px var(--wtk-font-sans); }
.quote-card .nm span { font: 500 13px var(--wtk-font-sans); color: var(--wtk-fg-3); }
.quote-card .q { font: italic 400 16px/1.6 var(--wtk-font-sans); color: var(--wtk-fg); }
.quote-card .src { font: 500 12px var(--wtk-font-sans); color: var(--wtk-fg-3); }

/* 09 Setup */
.setup { padding: clamp(64px,12vw,160px) 24px; background: var(--wtk-bg-alt); }
.setup .wrap { display: flex; flex-direction: column; gap: 56px; }
.setup h2 { max-width: 820px; }
/* One column, or all three side by side — never a 2 + 1 layout. */
.setup-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 40px; }
@media (min-width: 900px) { .setup-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
.setup-item { display: grid; grid-row: span 2; grid-template-rows: subgrid; gap: 12px; align-content: start; padding-top: 24px; border-top: 2px solid var(--wtk-navy); }
.setup-item b { font: 700 clamp(28px,3vw,40px)/1.1 var(--wtk-font-sans); letter-spacing: -.03em; }
.setup-item span { font: 400 17px/1.55 var(--wtk-font-sans); color: var(--wtk-fg-2); }

/* Forms (briefing + demo) */
.field { display: flex; flex-direction: column; gap: 6px; font: 500 13px var(--wtk-font-sans); color: var(--wtk-fg-2); }
.field input, .field select { width: 100%; height: 48px; border: 1px solid var(--wtk-line-2); border-radius: 12px; padding: 0 14px; background: #FFFFFF; font-size: 16px; color: var(--wtk-fg); }
.field input:focus, .field select:focus { outline: none; border-color: #7B61C4; box-shadow: 0 0 0 3px rgba(123,97,196,.25); }
.field input[aria-invalid="true"] { border-color: var(--wtk-coral); }
.select-wrap { position: relative; display: block; }
.select-wrap select { padding: 0 40px 0 14px; appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; }
.select-wrap svg { position: absolute; right: 14px; top: 50%; margin-top: -7px; pointer-events: none; }
.consent { display: flex; align-items: flex-start; gap: 10px; font: 400 13px/1.5 var(--wtk-font-sans); color: var(--wtk-fg-2); cursor: pointer; }
.consent input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--wtk-navy); flex: none; }
.consent a { text-decoration: underline; }
.form-err { font: 500 13px var(--wtk-font-sans); color: var(--wtk-coral-ink); }
.form-err[hidden] { display: none; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.submit { border: 0; border-radius: 999px; background: var(--wtk-navy); color: var(--wtk-fg-invert); cursor: pointer; }
.submit:disabled { opacity: .6; cursor: progress; }
.form-done[hidden], form[hidden] { display: none; }

/* 10 Sample briefing */
.briefing { padding: clamp(80px,10vw,128px) 24px; background: var(--wtk-purple-soft); }
.briefing .wrap { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr)); gap: 40px; align-items: center; }
.briefing .copy { display: flex; flex-direction: column; gap: 16px; }
.briefing .copy .eyebrow { color: var(--wtk-purple-ink); }
.briefing h2 { font: 700 clamp(32px,4vw,56px)/1.06 var(--wtk-font-sans); letter-spacing: -.04em; text-wrap: balance; }
.briefing .copy p { max-width: 480px; font: 400 18px/1.55 var(--wtk-font-sans); color: var(--wtk-fg-2); }
html[lang="zh-CN"] .briefing .copy p { max-width: 560px; line-height: 1.6; text-wrap: pretty; }
.briefing .card { background: #FFFFFF; border-radius: 24px; padding: clamp(20px,3vw,32px); position: relative; }
.briefing form { display: flex; flex-direction: column; gap: 14px; }
.briefing .submit { height: 50px; font: 600 16px var(--wtk-font-sans); }
.briefing .form-done { padding: 20px 4px; display: flex; flex-direction: column; gap: 8px; }
.briefing .form-done b { font: 700 22px var(--wtk-font-sans); letter-spacing: -.02em; }
.briefing .form-done span { font: 400 15px/1.5 var(--wtk-font-sans); color: var(--wtk-fg-2); }

/* 11 FAQ */
.faq { padding: clamp(64px,12vw,160px) 24px; background: var(--wtk-bg); }
.faq .wrap { max-width: 880px; display: flex; flex-direction: column; gap: 40px; }
.faq h2 { font: 700 clamp(32px,3.8vw,52px)/1.08 var(--wtk-font-sans); letter-spacing: -.035em; }
.faq-list { display: flex; flex-direction: column; border-top: 1px solid var(--wtk-line-2); }
.faq-item { border-bottom: 1px solid var(--wtk-line-2); }
.faq-item button { width: 100%; min-height: 72px; padding: 18px 0; border: 0; background: transparent; display: flex; justify-content: space-between; align-items: center; gap: 16px; text-align: left; cursor: pointer; color: var(--wtk-fg); font: 600 clamp(18px,1.8vw,22px)/1.35 var(--wtk-font-sans); letter-spacing: -.01em; }
.faq-item .pm { flex: none; width: 32px; height: 32px; border-radius: 16px; border: 1px solid var(--wtk-line-2); display: grid; place-items: center; font: 400 20px/1 var(--wtk-font-sans); color: var(--wtk-fg-2); }
.faq-item .pm::before { content: '+'; }
.faq-item button[aria-expanded="true"] .pm::before { content: '\2212'; }
.faq-item p { padding: 0 48px 24px 0; font: 400 17px/1.6 var(--wtk-font-sans); color: var(--wtk-fg-2); text-wrap: pretty; }
.faq-item p[hidden] { display: none; }
@media (max-width: 759.98px) { .faq-item p { padding: 0 0 22px 0; } }

/* 12 Book a demo */
.demo { padding: clamp(64px,12vw,160px) 24px; background: radial-gradient(ellipse 80% 70% at 50% 120%, #3A2F6B 0%, var(--wtk-navy) 62%); color: var(--wtk-fg-invert); }
.demo .wrap { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,440px),1fr)); gap: 56px; align-items: start; }
.demo .copy { display: flex; flex-direction: column; gap: 20px; }
.demo h2 { font: 700 clamp(40px,5vw,72px)/1.02 var(--wtk-font-sans); letter-spacing: -.045em; }
.demo .copy p { max-width: 440px; font: 400 19px/1.55 var(--wtk-font-sans); color: rgba(245,242,236,.8); }
html[lang="zh-CN"] .demo .copy p { max-width: 540px; line-height: 1.6; text-wrap: pretty; }
.demo .points { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; font: 400 16px var(--wtk-font-sans); color: rgba(245,242,236,.88); }
.demo .card { background: var(--wtk-bg); color: var(--wtk-fg); border-radius: 28px; padding: clamp(24px,3vw,36px); position: relative; }
.demo form { display: flex; flex-direction: column; gap: 16px; }
.demo .grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,200px),1fr)); gap: 12px; }
.demo .submit { height: 54px; font: 600 17px var(--wtk-font-sans); }
.demo .demo-done { padding: 32px 8px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.demo .demo-done b { font: 700 26px var(--wtk-font-sans); letter-spacing: -.02em; }
.demo .demo-done > span:last-child { font: 400 16px/1.5 var(--wtk-font-sans); color: var(--wtk-fg-2); }
.demo .hint { font: 400 13px/1.5 var(--wtk-font-sans); color: var(--wtk-fg-3); text-align: center; }

/* =========================================================
   BLOG
   ========================================================= */
.blog-hero { padding: clamp(64px,9vw,120px) 24px 40px; background: var(--wtk-bg); }
.blog-hero .wrap { display: flex; flex-direction: column; gap: 20px; }
.blog-hero h1 { max-width: 820px; font: 700 clamp(44px,6vw,84px)/1.02 var(--wtk-font-sans); letter-spacing: -.045em; text-wrap: balance; }
.blog-hero p { max-width: 600px; font: 400 clamp(17px,1.6vw,20px)/1.55 var(--wtk-font-sans); color: var(--wtk-fg-2); text-wrap: pretty; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.chips button { height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--wtk-line-2); background: #FFFFFF; color: var(--wtk-fg); font: 500 14px var(--wtk-font-sans); cursor: pointer; white-space: nowrap; }
.chips button[aria-pressed="true"] { background: var(--wtk-navy); border-color: var(--wtk-navy); color: var(--wtk-fg-invert); }
.blog-list { padding: 0 24px clamp(72px,9vw,120px); }
.blog-list .wrap { display: flex; flex-direction: column; gap: 20px; }
.feat { color: var(--wtk-fg); border: 1px solid var(--wtk-line); background: #FFFFFF; border-radius: 24px; overflow: hidden; display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,380px),1fr)); box-shadow: 0 1px 2px rgba(27,35,64,.06); }
.feat .art { min-height: 220px; padding: 32px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.feat .art span { font: 600 13px var(--wtk-font-sans); letter-spacing: .1em; text-transform: uppercase; }
.feat .art img { width: min(100%,220px); height: auto; align-self: center; display: block; }
/* Featured card sits on navy; the navy line illustrations are inverted to light. */
.feat .art img { filter: invert(1) brightness(1.05); opacity: .9; }
.feat .tx { padding: clamp(24px,3vw,36px); display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.feat .tx b { font: 700 clamp(22px,2vw,28px)/1.2 var(--wtk-font-sans); letter-spacing: -.02em; text-wrap: balance; }
.feat .tx .sub { font: 400 16px/1.55 var(--wtk-font-sans); color: var(--wtk-fg-2); text-wrap: pretty; }
.feat .tx .mins { font: 500 14px var(--wtk-font-sans); color: var(--wtk-fg-3); }
.feat .tx .go { font: 600 15px var(--wtk-font-sans); color: var(--wtk-navy); }
@media (max-width: 759.98px) { .feat .art { min-height: 0; padding: 20px 24px; } .feat .art img { width: 150px; } }
.cards { display: grid; grid-template-columns: repeat(auto-fill,minmax(min(100%,340px),1fr)); gap: 20px; }
.card-a { border: 1px solid var(--wtk-line); color: var(--wtk-fg); background: #FFFFFF; border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; }
.card-a[hidden] { display: none; }
.card-a .art { height: 150px; padding: 22px 24px; display: flex; justify-content: space-between; align-items: flex-start; }
.card-a .art span { font: 600 12px var(--wtk-font-sans); letter-spacing: .1em; text-transform: uppercase; }
.card-a .art img { width: 150px; height: auto; display: block; align-self: flex-end; }
.card-a .tx { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.card-a .tx b { font: 700 22px/1.25 var(--wtk-font-sans); letter-spacing: -.02em; text-wrap: balance; }
.card-a .tx .sub { font: 400 15px/1.55 var(--wtk-font-sans); color: var(--wtk-fg-2); flex: 1; text-wrap: pretty; }
.card-a .tx .mins { font: 500 13px var(--wtk-font-sans); color: var(--wtk-fg-3); }
.art-head { padding: clamp(48px,7vw,96px) 24px clamp(40px,6vw,72px); }
.art-head .wrap { max-width: 880px; display: flex; flex-direction: column; gap: 20px; }
.art-head .back { align-self: flex-start; padding: 8px 0; font: 600 14px var(--wtk-font-sans); }
.art-head .kicker { font: 600 13px var(--wtk-font-sans); letter-spacing: .12em; text-transform: uppercase; }
.art-head h1 { font: 700 clamp(36px,5vw,64px)/1.05 var(--wtk-font-sans); letter-spacing: -.04em; text-wrap: balance; }
.art-head .sub { max-width: 720px; font: 400 clamp(18px,1.8vw,22px)/1.5 var(--wtk-font-sans); color: var(--wtk-fg-2); text-wrap: pretty; }
.art-head .by { display: flex; align-items: center; gap: 12px; margin-top: 8px; font: 500 14px var(--wtk-font-sans); color: var(--wtk-fg-2); }
.art-head .by span { width: 36px; height: 36px; border-radius: 18px; background: #FFFFFF; display: grid; place-items: center; }
.art-head .by img { width: 20px; }
.art-body { background: #FFFFFF; padding: clamp(48px,6vw,80px) 24px; }
.art-body .wrap { max-width: 1100px; display: grid; grid-template-columns: minmax(0,700px) 240px; gap: 64px; align-items: start; }
.prose { max-width: 700px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.prose h2 { margin: 24px 0 0; font: 700 clamp(24px,2.4vw,30px)/1.2 var(--wtk-font-sans); letter-spacing: -.025em; scroll-margin-top: 84px; }
.prose h3 { margin: 12px 0 0; font: 600 20px/1.3 var(--wtk-font-sans); letter-spacing: -.015em; }
.prose p { font: 400 18px/1.7 var(--wtk-font-sans); color: var(--wtk-fg-body); text-wrap: pretty; }
.prose b { font-weight: 600; color: var(--wtk-fg); }
.prose .list { display: flex; flex-direction: column; gap: 12px; padding: 4px 0; margin: 0; list-style: none; }
.prose .list li { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 8px; font: 400 18px/1.6 var(--wtk-font-sans); color: var(--wtk-fg-body); }
.prose .list .mk { font: 600 15px/1.8 var(--wtk-font-sans); color: var(--wtk-fg-3); }
.prose figure { margin: 8px 0; padding: 4px 0 4px 20px; display: flex; flex-direction: column; gap: 8px; }
.prose figure figcaption { font: 600 12px var(--wtk-font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--wtk-fg-3); }
.prose blockquote { margin: 0; font: italic 400 19px/1.65 var(--wtk-font-sans); color: var(--wtk-fg); text-wrap: pretty; }
.prose .tbl { border: 1px solid var(--wtk-line); border-radius: 14px; overflow: hidden; font: 400 15px/1.5 var(--wtk-font-sans); }
.prose .tbl .r { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.3fr); border-top: 1px solid var(--wtk-line); color: var(--wtk-fg-body); }
.prose .tbl .r span { padding: 12px 16px; }
.prose .tbl .r span:first-child { font-weight: 500; color: var(--wtk-fg); }
.prose .tbl .r.h { background: var(--wtk-bg); font-weight: 600; color: var(--wtk-fg); border-top: 0; }
.toc { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 14px; }
.toc > span { font: 600 12px var(--wtk-font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--wtk-fg-3); }
.toc nav { display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--wtk-line); }
.toc a { padding: 6px 0 6px 14px; font: 500 14px/1.4 var(--wtk-font-sans); color: var(--wtk-fg-2); }
@media (max-width: 1099.98px) { .art-body .wrap { grid-template-columns: minmax(0,1fr); } .toc { display: none; } }
.art-cta { background: var(--wtk-purple-soft); padding: clamp(56px,7vw,96px) 24px; }
.art-cta .wrap { max-width: 1100px; display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.art-cta .tx { display: flex; flex-direction: column; gap: 12px; max-width: 620px; }
.art-cta .tx b { font: 700 clamp(28px,3.2vw,44px)/1.1 var(--wtk-font-sans); letter-spacing: -.035em; text-wrap: balance; }
.art-cta .tx span { font: 400 17px/1.55 var(--wtk-font-sans); color: var(--wtk-fg-2); }
.art-cta .acts { display: flex; gap: 12px; flex-wrap: wrap; }
.art-cta .acts .btn { font-size: 16px; }
.related { background: var(--wtk-bg); padding: clamp(56px,7vw,96px) 24px; }
.related .wrap { display: flex; flex-direction: column; gap: 28px; }
.related h2 { font: 700 clamp(24px,2.6vw,34px) var(--wtk-font-sans); letter-spacing: -.03em; }
.related .grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(min(100%,320px),1fr)); gap: 20px; }
.rel { border: 1px solid var(--wtk-line); padding: 24px; color: var(--wtk-fg); background: #FFFFFF; border-radius: 24px; display: flex; flex-direction: column; gap: 12px; min-height: 200px; }
.rel .top { display: flex; justify-content: space-between; align-items: center; }
.rel .cat { padding: 3px 10px; border-radius: 999px; font: 600 12px var(--wtk-font-sans); }
.rel .mins { font: 500 13px var(--wtk-font-sans); color: var(--wtk-fg-3); }
.rel b { font: 700 20px/1.3 var(--wtk-font-sans); letter-spacing: -.02em; flex: 1; text-wrap: balance; }
.rel .go { font: 600 14px var(--wtk-font-sans); color: var(--wtk-navy); }

/* =========================================================
   LEGAL / THANK YOU / 404
   ========================================================= */
.legal { padding: clamp(48px,7vw,96px) 24px clamp(64px,8vw,120px); }
.legal .wrap { max-width: 1100px; display: grid; grid-template-columns: 240px minmax(0,1fr); gap: clamp(32px,5vw,72px); align-items: start; }
.legal aside { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 20px; }
.legal aside > span { font: 600 12px var(--wtk-font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--wtk-fg-3); }
.legal-tabs { display: flex; flex-direction: column; gap: 4px; border-radius: 14px; }
.legal-tabs a { min-height: 44px; padding: 10px 14px; border-radius: 10px; color: var(--wtk-fg-2); font: 500 15px var(--wtk-font-sans); display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.legal-tabs a small { font: 400 12px var(--wtk-font-sans); color: var(--wtk-fg-3); }
.legal-tabs a[aria-current="page"] { background: #FFFFFF; color: var(--wtk-fg); font-weight: 600; }
.legal-toc { display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--wtk-line-2); margin-top: 4px; }
.legal-toc a { padding: 5px 0 5px 14px; font: 400 13px/1.4 var(--wtk-font-sans); color: var(--wtk-fg-2); }
@media (max-width: 899.98px) {
  .legal .wrap { grid-template-columns: minmax(0,1fr); }
  .legal aside { position: static; }
  .legal-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); padding: 4px; background: #EAE5DA; }
  .legal-tabs a { padding: 8px 6px; font-size: 13.5px; align-items: center; text-align: center; }
  .legal-tabs a[aria-current="page"] { box-shadow: 0 1px 2px rgba(27,35,64,.08); }
  .legal-tabs a small, .legal-toc { display: none; }
}
.doc { min-width: 0; background: #FFFFFF; border: 1px solid var(--wtk-line); border-radius: 24px; padding: clamp(24px,4vw,56px); display: flex; flex-direction: column; gap: 18px; }
.doc-head { display: flex; flex-direction: column; gap: 10px; padding-bottom: 20px; border-bottom: 1px solid var(--wtk-line); margin-bottom: 4px; }
.doc-head .co { font: 600 13px var(--wtk-font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--wtk-fg-3); }
.doc-head h1 { font: 700 clamp(36px,4.6vw,56px)/1.05 var(--wtk-font-sans); letter-spacing: -.04em; }
.doc-head .meta { font: 500 14px var(--wtk-font-sans); color: var(--wtk-fg-3); }
.doc h2 { margin: 22px 0 0; font: 700 22px/1.3 var(--wtk-font-sans); letter-spacing: -.02em; scroll-margin-top: 84px; }
.doc h3 { margin: 8px 0 0; font: 600 17px/1.35 var(--wtk-font-sans); }
.doc p { max-width: 72ch; font: 400 16px/1.7 var(--wtk-font-sans); color: var(--wtk-fg-body); text-wrap: pretty; }
.doc a { text-decoration: underline; text-underline-offset: 2px; }
.doc ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; max-width: 72ch; }
.doc ul li { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 6px; font: 400 16px/1.6 var(--wtk-font-sans); color: var(--wtk-fg-body); }
.doc ul li::before { content: '—'; color: var(--wtk-fg-4); }
.doc .addr { padding: 16px 20px; border-radius: 14px; background: var(--wtk-bg); display: flex; flex-direction: column; gap: 4px; font: 400 15px/1.55 var(--wtk-font-sans); color: var(--wtk-fg); max-width: 72ch; font-style: normal; }
.doc .addr span:first-child { font-weight: 600; }
.doc .facts { display: flex; flex-direction: column; margin: 0; }
.doc .facts div { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr)); gap: 4px 24px; padding: 16px 0; border-bottom: 1px solid var(--wtk-line); }
.doc .facts dt { font: 500 14px/1.5 var(--wtk-font-sans); color: var(--wtk-fg-3); }
.doc .facts dd { margin: 0; font: 500 17px/1.5 var(--wtk-font-sans); color: var(--wtk-fg); white-space: pre-line; }
.doc .tbl-wrap { border: 1px solid var(--wtk-line); border-radius: 14px; overflow: auto; }
.doc table { min-width: 640px; width: 100%; border-collapse: collapse; font: 400 14px/1.5 var(--wtk-font-sans); color: var(--wtk-fg-body); text-align: left; }
.doc th { background: var(--wtk-bg); font: 600 13px/1.4 var(--wtk-font-sans); color: var(--wtk-fg); padding: 12px 14px; vertical-align: top; }
.doc td { border-top: 1px solid var(--wtk-line); padding: 12px 14px; vertical-align: top; }
.doc td:first-child { font-weight: 500; color: var(--wtk-fg); }
.doc .note { margin-top: 12px; padding: 16px 20px; border-radius: 14px; background: var(--wtk-bg-alt); display: flex; flex-direction: column; gap: 6px; max-width: 72ch; }
.doc .note span:first-child { font: 600 12px var(--wtk-font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--wtk-fg-3); }
.doc .note span:last-child { font: 400 15px/1.6 var(--wtk-font-sans); color: var(--wtk-fg-body); }

.thanks { display: grid; place-items: center; padding: 56px 24px; }
.thanks .box { width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 28px; }
.thanks .top { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.check-badge { width: 56px; height: 56px; border-radius: 28px; background: var(--wtk-teal-soft); display: grid; place-items: center; }
.thanks h1 { font: 700 clamp(32px,4.4vw,52px)/1.06 var(--wtk-font-sans); letter-spacing: -.04em; }
.thanks .top p { font: 400 18px/1.55 var(--wtk-font-sans); color: var(--wtk-fg-2); }
.steps { display: flex; flex-direction: column; border-top: 1px solid var(--wtk-line-2); margin: 0; padding: 0; list-style: none; }
.steps li { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 16px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--wtk-line-2); }
.steps li span:first-child { font: 700 15px var(--wtk-font-sans); color: var(--wtk-fg-3); }
.steps li span:last-child { font: 500 17px/1.45 var(--wtk-font-sans); }
.row-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.nf { display: grid; place-items: center; padding: 48px 24px; }
.nf .box { max-width: 620px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.nf .q { padding: 8px 16px; border-radius: 999px; background: #F3DAD6; color: #8A3A31; font: 500 15px var(--wtk-font-sans); }
.nf .code { font: 700 clamp(72px,12vw,140px)/1 var(--wtk-font-sans); letter-spacing: -.06em; color: var(--wtk-navy); }
.nf h1 { font: 700 clamp(28px,3.6vw,40px)/1.15 var(--wtk-font-sans); letter-spacing: -.03em; text-wrap: balance; }
.nf p { font: 400 17px/1.55 var(--wtk-font-sans); color: var(--wtk-fg-2); }
.nf .row-btns { justify-content: center; margin-top: 8px; }