/* KX visual refresh. Existing content, controls and tutorial behaviour are preserved. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root {
  --bg:#101924;
  --panel:#172330;
  --text:#f5f0e7;
  --muted:#abb7c5;
  --gold:#e0bd83;
  --line:#ffffff16;
  --ease-out:cubic-bezier(.22,1,.36,1);
}
html {scroll-padding-top:calc(var(--header-height) + 104px)}
body {overflow-x:clip;font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif; -webkit-font-smoothing:antialiased; background:var(--bg);line-height:1.85}
body>header {top:20px;margin:0 auto;width:min(calc(100% - 48px),1160px);border:1px solid #ffffff18;border-radius:100px;background:#101924d9;box-shadow:0 8px 40px #07101b30;backdrop-filter:blur(20px)}
.nav {padding:10px 12px 10px 24px;gap:32px}
.brand {font-size:18px;letter-spacing:-.5px;font-weight:700}
.brand b {background:#c34b35;border-radius:50%;height:38px;min-width:38px;padding:0;line-height:38px;text-align:center;font-size:17px;margin-right:9px}
.nav nav {gap:6px}
.nav nav a {padding:10px 19px;border-radius:100px;color:#b5bfca;font-size:13px;font-weight:500;white-space:nowrap;transition:background-color .2s,color .2s}
.nav nav a:after {display:none}
.nav nav a[aria-current=page] {color:var(--text);background:#ffffff0d;font-weight:600}
.nav nav a:hover {color:var(--text);background:#ffffff09}
.button {border-radius:100px;padding:14px 26px;font-weight:600;font-size:14px;gap:16px;background:#d05a42;border-color:#d05a42;color:#fff7f0;box-shadow:0 5px 18px #120d0a12;transition:background-color .2s,transform .2s var(--ease-out),box-shadow .2s}
.button:hover {background:#e06b51;border-color:#e06b51;box-shadow:0 8px 24px #d05a4222}
.nav>.button {padding:11px 21px;flex:none;font-size:12px}
.button.ghost {background:#ffffff06;border-color:#ffffff25;color:var(--text);box-shadow:none}
.button.ghost:hover {background:#ffffff10;border-color:#ffffff40}
a:focus-visible,button:focus-visible {outline:2px solid var(--gold);outline-offset:5px}
.wrap {max-width:1280px;padding-inline:64px}
.hero {isolation:isolate;min-height:min(850px,calc(100svh - 80px));grid-template-columns:1.2fr 1fr;gap:28px;padding:100px 0 92px;background:none;align-items:center}
.hero::before {content:"";position:absolute;z-index:-2;pointer-events:none;inset:-100px calc(50% - 50vw) -34px;background:url(assets/landscape.webp) center bottom/cover no-repeat;filter:brightness(.45) saturate(.7);opacity:.43;mask-image:linear-gradient(#000 50%,transparent 100%)}
.hero::after {content:"";position:absolute;pointer-events:none;z-index:-1;inset:-100px calc(50% - 50vw) -34px;background:linear-gradient(90deg,#101924d9 10%,#10192424 72%),linear-gradient(180deg,#10192433,transparent 50%,#101924)}
.hero>div:first-child {position:relative;z-index:1}
.eyebrow {color:var(--gold);font-size:10px;font-weight:600;letter-spacing:2.4px}
.hero .eyebrow {display:flex;align-items:center;gap:12px;margin-bottom:26px}
.hero .eyebrow::before {content:"";width:28px;height:1px;background:var(--gold)}
.hero h1 {font-size:clamp(44px,5.4vw,76px);font-weight:600;line-height:1.23;letter-spacing:-2.5px;margin:0 0 30px;text-wrap:balance}
.hero h1 em {font-family:"STKaiti","KaiTi","Songti SC",serif;color:#e0bd83;font-weight:400;letter-spacing:-2px;font-style:normal}
.hero p {max-width:450px;font-size:15px;font-weight:400;color:#bac4cf;line-height:2;margin:0}
.actions {gap:14px;margin-top:34px}
.chips {gap:16px;margin-top:28px}
.chips span {border:0;border-radius:0;background:none;font-size:11px;padding:0;color:#a7b4c2;display:flex;align-items:center;gap:7px}
.chips span::before {content:"";height:3px;width:3px;border-radius:50%;background:#e0bd83;opacity:.7}
.hero-art {width:100%;isolation:isolate;position:relative;padding:28px 0 0;align-self:center}
.hero-art::before {content:"";position:absolute;z-index:-1;inset:12% 0 0;border:1px solid #e0bd831a;border-radius:50% 50% 42% 42%;background:radial-gradient(ellipse at 50% 45%,#b7773c18,transparent 68%)}
.hero-art img {height:auto;width:100%;max-height:460px;object-fit:contain;filter:drop-shadow(0 24px 28px #050d1940);animation-name:kx-calm-float;animation-duration:7s}
@keyframes kx-calm-float {0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.art-label {border:0;background:#152331a6;backdrop-filter:blur(8px);font-size:10px;letter-spacing:1.3px;color:#c3cbd3;padding:8px 20px;margin-top:20px}
.tutorial-nav {background:#101924eb;top:calc(var(--header-height) + 32px);border-bottom:1px solid var(--line);border-radius:0;gap:10px;padding:18px 0;scrollbar-width:none}
.tutorial-nav::-webkit-scrollbar {display:none}
.tutorial-nav a {background:transparent;border-color:transparent;border-radius:100px;color:#aeb9c5;font-size:12px;line-height:1.5;padding:10px 16px}
.tutorial-nav a[aria-current=location] {background:#d05a421a;border-color:#d05a4240;color:#f2a78d}
.tutorial-nav a:hover {background:#ffffff08;color:#f4dfbc;border-color:transparent}
.section {padding:86px 0}
.section+.section {border-color:var(--line)}
.section-head {margin-bottom:46px;align-items:start;gap:40px}
.section h2 {font-size:clamp(27px,3.2vw,39px);line-height:1.4;font-weight:500;letter-spacing:-1px;margin:12px 0 0;text-wrap:balance}
.section-head p {max-width:290px;font-size:13px;line-height:1.9;padding-top:28px}
.tutorial-card {background:linear-gradient(110deg,#1a2836a6,#15202ca6);border-color:#ffffff0c;border-radius:28px;gap:68px;grid-template-columns:.95fr 1.05fr;padding:52px;margin:26px 0;position:relative;overflow:clip;scroll-margin-top:calc(var(--header-height) + 124px)}
.tutorial-card::before {content:"";pointer-events:none;position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,#ffffff12,transparent)}
.tutorial-card:nth-of-type(even) .tutorial-image {order:0}
.tutorial-image {max-width:240px;border-radius:25px;background:#14202c;box-shadow:0 20px 40px #07111d4d;outline:1px solid #ffffff12;outline-offset:7px}
.tutorial-image img[src$=".png"] {filter:brightness(.93)}
.image-tag {background:#172b42df;backdrop-filter:blur(6px);font-size:9px;border-radius:100px;top:12px;left:12px;padding:5px 10px;color:#e5edf3}
.tutorial-number {background:none;border-radius:0;border:0;border-bottom:1px solid #e0bd8340;color:var(--gold);letter-spacing:1.6px;font-weight:500;padding:0 0 9px;display:inline-block;font-size:10px}
.tutorial-copy {max-width:430px}
.tutorial-copy h3 {font-size:clamp(23px,2.5vw,32px);font-weight:500;line-height:1.45;letter-spacing:-.6px;margin:23px 0 20px;text-wrap:balance}
.tutorial-copy p {font-size:14px;color:#bac5cf;line-height:2;margin:0}
.tutorial-tip,.note {background:transparent;border-left:1px solid #e0bd8350;padding:0 0 0 17px;color:#899cae;font-size:12px;line-height:1.9;margin:24px 0}
.bot-entry {background:none;border:1px solid #e0bd8324;border-radius:28px;padding:48px 24px;max-width:310px}
.bot-entry img {width:170px;height:185px;margin-bottom:18px;filter:drop-shadow(0 12px 22px #07111d66)}
.bot-entry strong {font-size:20px;font-weight:600;letter-spacing:-.5px}
.bot-entry small {color:#8b9daf;font-size:11px;letter-spacing:1px}
.diagram.tutorial-card {padding:38px;gap:44px;grid-template-columns:1.05fr .95fr}
.diagram .tutorial-image {max-width:100%;outline:none;border-color:#ffffff1a;border-radius:18px;box-shadow:0 10px 30px #07111d26}
.diagram .image-tag {background:#142235;padding:10px 16px;border-radius:0;font-size:10px;color:#acbbca}
.poster-card.tutorial-card {grid-template-columns:.95fr 1.05fr;gap:70px}
.poster-card .tutorial-image {max-width:370px;outline:none;border-radius:18px;border-color:#e0bd8320}
.poster-card .tutorial-image img {filter:none}
.rates {gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;margin-top:28px}
.rates .card {background:none;border:0;border-radius:0;padding:34px 30px;position:relative}
.rates .card+.card {border-left:1px solid var(--line)}
.card h3 {font-size:16px;font-weight:500}
.card p,.card small {font-size:13px;color:var(--muted)}
.number {font-family:Inter,sans-serif;font-size:54px;font-weight:500;letter-spacing:-2.5px;font-variant-numeric:tabular-nums;color:#e0bd83;margin:20px 0;line-height:1.3}
.cta {isolation:isolate;position:relative;overflow:hidden;background:#1a2835;border:1px solid #e0bd831f;border-radius:28px;padding:56px 48px;gap:32px}
.cta::before {content:"";position:absolute;pointer-events:none;z-index:-1;inset:0;background:url(assets/landscape.webp) right center/cover no-repeat;filter:brightness(.4) saturate(.5);opacity:.15}
.cta h2 {font-size:30px;letter-spacing:-.5px;margin:0 0 12px;font-weight:500}
.cta p {font-size:13px}
.cta>.button {flex:none}
footer {padding:36px 0;border-color:var(--line);font-size:10px;color:#788a9c}
.footer-inner {align-items:center;gap:24px}
#tutorialPreview {border-radius:24px;background:#14202c;border-color:#ffffff24;box-shadow:0 28px 100px #040a1355;padding:26px}
#tutorialPreview::backdrop {background:#070e18db;backdrop-filter:blur(8px)}
#tutorialPreview img[src$=".png"] {filter:none}
#tutorialPreview p {font-size:13px;color:#ced6df}
.preview-close {background:#243243;color:#f5f0e7}
.back-top {background:#172330dc;border-color:#ffffff24;backdrop-filter:blur(12px);box-shadow:none;color:#e0bd83;font-size:18px}
.reading-progress {height:2px}
.reading-progress span {background:#e0bd83}
@media(hover:hover) and (pointer:fine) {
 .tutorial-image:hover {transform:translateY(-3px);box-shadow:0 25px 45px #07111d66}
 .button:hover {transform:translateY(-2px)}
 .preview-close:hover,.back-top:hover {background:#293747}
}
@supports(animation-timeline:view()) {
 @media(min-width:900px) and (prefers-reduced-motion:no-preference) {
  .hero::before {animation:kx-landscape-depth linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
  @keyframes kx-landscape-depth {to{transform:translateY(28px)}}
 }
}
@media(max-width:1050px) {
 .wrap {padding-inline:36px}
 .nav {gap:16px;padding-left:18px}
 .nav nav a {padding-inline:13px}
 .hero {gap:20px}
 .hero h1 {font-size:clamp(43px,5.8vw,62px)}
 .tutorial-card {padding:38px;gap:40px}
 .poster-card.tutorial-card {gap:40px}
}
@media(max-width:760px) {
 body>header {top:12px;width:calc(100% - 24px);border-radius:24px}
 .nav {padding:12px 14px 8px;gap:10px;flex-wrap:wrap}
 .brand {font-size:15px;letter-spacing:-.3px}
 .brand b {width:30px;min-width:30px;height:30px;line-height:30px;font-size:13px;margin-right:5px}
 .nav>.button {font-size:10px;padding:8px 12px}
 .nav nav {order:3;gap:4px;width:100%;display:flex;justify-content:space-between;border-top:1px solid #ffffff0a;padding-top:7px}
 .nav nav a {text-align:center;flex:1;font-size:11px;line-height:1.5;padding:8px 5px}
 .wrap {padding-inline:24px}
 .hero {min-height:auto;grid-template-columns:1fr;padding:64px 0 46px;gap:26px;align-items:start}
 .hero::before {inset:-150px -24px -30px;background-position:65% bottom;opacity:.4}
 .hero::after {inset:-150px -24px -30px;background:linear-gradient(180deg,#101924a6,transparent 70%,#101924)}
 .hero>div:first-child {text-align:center}
 .hero .eyebrow {justify-content:center;font-size:9px;letter-spacing:1.5px;margin-bottom:22px}
 .hero h1 {font-size:clamp(36px,10vw,54px);letter-spacing:-1.5px;margin-bottom:24px}
 .hero h1 em {letter-spacing:-1px}
 .hero p {margin:auto;font-size:12px;max-width:350px;line-height:1.95}
 .actions {justify-content:center;margin-top:28px;gap:10px}
 .button {font-size:12px;padding:11px 17px;gap:10px}
 .chips {gap:12px;justify-content:center;margin-top:22px}
 .chips span {font-size:9px;gap:5px}
 .hero-art {max-width:290px;padding-top:18px;margin:auto}
 .hero-art img {max-height:260px}
 .art-label {font-size:9px;margin-top:10px;padding:6px 14px;letter-spacing:.6px}
 .tutorial-nav {top:calc(var(--header-height) + 24px);margin-inline:-24px;padding:14px 24px;gap:7px}
 .tutorial-nav a {font-size:11px;padding:9px 13px}
 .section {padding:54px 0}
 .section-head {margin-bottom:28px}
 .section h2 {font-size:26px;letter-spacing:-.5px}
 .section-head p {max-width:100%;padding-top:12px;font-size:12px}
 .eyebrow {font-size:9px;letter-spacing:1.8px}
 .tutorial-card,.diagram.tutorial-card,.poster-card.tutorial-card {grid-template-columns:1fr;padding:26px 22px;gap:32px;border-radius:22px;margin:20px 0}
 .tutorial-image {max-width:230px;border-radius:23px;outline-offset:5px}
 .tutorial-copy {max-width:100%}
 .tutorial-copy h3 {font-size:23px;letter-spacing:-.4px;margin:18px 0 16px}
 .tutorial-copy p {font-size:13px;line-height:1.95}
 .tutorial-number {font-size:9px;letter-spacing:1.3px}
 .tutorial-tip,.note {font-size:11px;margin:20px 0}
 .diagram .tutorial-image,.poster-card .tutorial-image {max-width:100%;border-radius:14px}
 .bot-entry {max-width:270px;padding:32px 18px}
 .bot-entry img {width:145px;height:150px}
 .rates {grid-template-columns:1fr}
 .rates .card {padding:24px 4px;grid-template-columns:1fr auto}
 .rates .card+.card {border-left:0;border-top:1px solid var(--line)}
 .rates .number {font-size:42px;line-height:1.2}
 .rates h3 {font-size:14px}
 .cta {display:block;border-radius:22px;padding:32px 25px}
 .cta h2 {font-size:25px}
 .cta p {font-size:12px}
 .cta>.button {margin-top:24px}
 .footer-inner {font-size:9px;line-height:1.9;display:flex;flex-direction:column;align-items:start;gap:10px}
 .back-top {right:14px;bottom:16px;width:40px;height:40px}
 #tutorialPreview {padding:20px 16px;border-radius:20px;max-width:94vw;max-height:90svh}
}
@media(prefers-reduced-motion:reduce) {
 *,*::before,*::after {animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .hero-art img {transform:none!important}
}
/* Long welfare heading stays on its intended two lines. */
body:has(.nav a[href="benefits.html"][aria-current="page"]) .hero h1 {font-size:clamp(40px,4.4vw,58px);letter-spacing:-1.5px;text-wrap:pretty}
@media(max-width:760px) {body:has(.nav a[href="benefits.html"][aria-current="page"]) .hero h1 {font-size:clamp(28px,8.2vw,43px);letter-spacing:-.9px}}