:root {
  --ink: #181a18;
  --muted: #666d68;
  --jade: #10251d;
  --jade-soft: #eaf3ed;
  --green: #397956;
  --accent: #9d6c22;
  --gold: #bd8f35;
  --gold-soft: #f7efdc;
  --silver: #e4e8e5;
  --paper: #f7f7f5;
  --line: #e1e5e1;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); line-height: 1.55; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
button, input { font: inherit; }
button { cursor: pointer; }
section[id] { scroll-margin-top: 78px; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
img { max-width: 100%; }
h1, h2, h3, p { overflow-wrap: break-word; }
h1, h2, h3 { letter-spacing: -.045em; }
.skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 40; padding: .65rem 1rem; background: #fff; border-radius: 9px; box-shadow: 0 4px 18px #0002; }
.skip-link:focus { top: 1rem; }
.content-wrap { width: min(1160px, calc(100% - 48px)); margin: auto; }
.content-narrow { width: min(920px, calc(100% - 48px)); margin: auto; }
.kicker { margin: 0 0 14px; color: var(--accent); font-size: .78rem; font-weight: 720; letter-spacing: .075em; }

/* Collection homepage */
.site-header { width: min(1160px, calc(100% - 48px)); height: 60px; margin: auto; display: flex; align-items: center; justify-content: space-between; }
.wordmark { font-size: .95rem; font-weight: 720; }
.header-link { color: var(--accent); font-size: .88rem; font-weight: 650; }
.universe-hero { width: min(1160px, calc(100% - 48px)); padding: 108px 0 86px; margin: auto; }
.universe-hero .eyebrow { margin: 0 0 17px; color: var(--gold); font-size: .78rem; font-weight: 750; letter-spacing: .09em; }
.universe-hero h1 { max-width: 920px; margin: 0; font-size: clamp(2.8rem, 5vw, 4.6rem); line-height: 1.11; }
.universe-hero > p:last-child { max-width: 560px; margin: 21px 0 0; color: var(--muted); font-size: 1.08rem; }
.featured-work { width: min(1160px, calc(100% - 48px)); min-height: 540px; margin: auto; padding: 62px; display: grid; grid-template-columns: 1.06fr .94fr; gap: 30px; align-items: center; overflow: hidden; border-radius: 24px; color: #fff; background: var(--jade); }
.work-copy { position: relative; z-index: 1; }
.work-kicker { margin: 0 0 15px; color: #e1be72; font-size: .77rem; font-weight: 700; letter-spacing: .08em; }
.work-copy h2 { margin: 0 0 15px; font-size: clamp(2.5rem, 4.4vw, 4.1rem); line-height: 1.04; }
.work-tagline { max-width: 520px; margin: 0 0 13px; color: #f2e4c4; font-size: clamp(1.55rem, 2.2vw, 2.05rem); font-weight: 650; line-height: 1.18; }
.work-description { max-width: 440px; margin: 0 0 28px; color: #d3dcd5; font-size: .99rem; }
.featured-work .text-link { color: #f7e7bc; font-weight: 650; }
.featured-work > img { width: min(100%, 430px); height: auto; justify-self: center; border-radius: 24px; }
.coming-worlds { width: min(1160px, calc(100% - 48px)); margin: auto; padding: 110px 0 125px; }
.section-heading .eyebrow { margin: 0 0 10px; color: var(--accent); font-size: .78rem; font-weight: 700; }
.section-heading h2 { max-width: 720px; margin: 0; font-size: clamp(2.35rem, 4vw, 3.8rem); line-height: 1.12; }
.world-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 34px; }
.world-list article { min-height: 158px; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.world-list p { margin: 0 0 8px; font-size: 1.16rem; font-weight: 700; }
.world-list span, .future-note { color: var(--muted); font-size: .85rem; }
.future-note { margin: 17px 0 0; }
.site-footer { width: min(1160px, calc(100% - 48px)); min-height: 86px; margin: auto; padding: 20px 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: .79rem; }
.site-footer p { margin: 0; }
.site-footer a { color: var(--ink); font-weight: 650; }

/* Product navigation and conversion */
.product-page { background: #fff; }
.site-nav { position: sticky; top: 0; z-index: 30; background: #fffffff0; border-bottom: 1px solid #edf0ed; backdrop-filter: blur(18px); }
.nav-inner { width: min(1160px, calc(100% - 48px)); height: 58px; margin: auto; display: flex; align-items: center; gap: 26px; }
.nav-universe { color: #4f5851; font-size: .82rem; font-weight: 650; }
.nav-product { display: inline-flex; align-items: center; gap: 8px; font-size: .89rem; font-weight: 720; }
.nav-product img { width: 28px; height: 28px; border-radius: 7px; }
.nav-action { margin-left: auto; color: var(--accent); font-size: .82rem; font-weight: 700; }
.product-hero { width: min(1160px, calc(100% - 48px)); min-height: 685px; margin: auto; padding: 80px 0 90px; display: grid; grid-template-columns: .98fr 1.02fr; gap: 60px; align-items: center; }
.hero-copy { max-width: 565px; }
.hero-copy h1 { margin: 0 0 22px; font-size: clamp(2.65rem, 4.35vw, 4.15rem); line-height: 1.12; font-weight: 730; }
.hero-copy h1 span { color: var(--accent); }
.hero-description { max-width: 480px; margin: 0; color: #515c53; font-size: clamp(1rem, 1.35vw, 1.1rem); line-height: 1.72; }
.hero-links { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 25px; margin-top: 31px; }
.primary-link { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 47px; padding: 11px 23px; border-radius: 999px; color: #fff; background: #806022; font-size: .92rem; font-weight: 700; transition: transform .2s ease, background .2s ease; }
.primary-link:hover { transform: translateY(-2px); background: #644915; }
.secondary-link { color: var(--accent); font-size: .9rem; font-weight: 680; }
.hero-note { margin: 19px 0 0; color: #818983; font-size: .76rem; }
.hero-stage { min-height: 540px; position: relative; display: flex; align-items: center; justify-content: center; }
.hero-stage:before { content: ""; position: absolute; inset: 11% 2% 8%; border-radius: 50%; background: radial-gradient(circle, #f7eacb 0, #fdf8ed 49%, transparent 72%); }
.app-phone { width: 290px; min-height: 540px; padding: 17px 18px 0; position: relative; overflow: hidden; border: 7px solid #1e211f; border-radius: 37px; background: #fff; box-shadow: 0 30px 70px #4b3a1d25, 0 3px 10px #18251a1c; }
.phone-status { display: flex; justify-content: space-between; color: #2b332c; font-size: .66rem; font-weight: 700; }
.phone-brand { display: flex; align-items: center; gap: 8px; margin-top: 25px; }
.phone-brand img { border-radius: 8px; }
.phone-brand strong { font-size: 1.08rem; letter-spacing: .025em; }
.phone-month { display: flex; justify-content: space-between; align-items: baseline; margin: 32px 0 18px; font-weight: 700; font-size: 1rem; }
.phone-month small { color: var(--gold); font-size: .68rem; }
.phone-timeline { position: relative; margin-left: 7px; }
.phone-timeline:before { content: ""; position: absolute; left: 21px; top: 13px; bottom: 28px; width: 2px; background: linear-gradient(#c79439, #eadbb5); }
.timeline-entry { position: relative; display: flex; align-items: center; gap: 12px; min-height: 92px; padding-bottom: 10px; }
.timeline-date { z-index: 1; flex: 0 0 44px; width: 44px; height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px solid #c99b4d; border-radius: 50%; background: #fffaf0; color: #83601c; font-size: .92rem; font-weight: 750; line-height: 1.1; }
.timeline-date small { font-size: .48rem; font-weight: 550; }
.timeline-copy { display: grid; min-width: 0; line-height: 1.35; }
.timeline-copy strong { font-size: .76rem; white-space: nowrap; }
.timeline-copy small { color: #808480; font-size: .61rem; white-space: nowrap; }
.timeline-entry b { margin-left: auto; color: var(--green); font-size: .68rem; white-space: nowrap; }
.timeline-entry b.income { color: #bb4c48; }
.phone-tab { position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-around; padding: 11px 2px 18px; border-top: 1px solid #edf0ed; color: #858b85; background: #fff; font-size: .55rem; }
.phone-tab span:first-child { color: #856021; font-weight: 700; }
.visual-disclaimer { position: absolute; bottom: -28px; left: 0; right: 0; margin: 0; color: #8b928c; font-size: .66rem; text-align: center; }

/* Story */
.recognition { padding: 100px 0 112px; background: var(--paper); text-align: center; }
.recognition h2 { margin: 0 auto 19px; font-size: clamp(2rem, 3.2vw, 3rem); line-height: 1.22; }
.recognition h2 span { color: var(--accent); }
.recognition .content-narrow > p:last-child { max-width: 625px; margin: auto; color: var(--muted); font-size: 1.02rem; line-height: 1.8; }
.journey { padding: 110px 0; }
.section-intro { max-width: 800px; }
.section-intro h2 { margin: 0; font-size: clamp(2.2rem, 3.8vw, 3.55rem); line-height: 1.16; }
.journey-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 60px; }
.journey-steps article { position: relative; padding-top: 24px; border-top: 1px solid #d7ded8; }
.journey-steps article:before { content: ""; position: absolute; width: 8px; height: 8px; top: -4px; left: 0; border-radius: 50%; background: var(--gold); }
.journey-steps span { color: #748078; font-size: .76rem; font-weight: 700; }
.journey-steps h3 { margin: 14px 0 8px; font-size: 1.5rem; }
.journey-steps p { max-width: 26ch; margin: 0; color: var(--muted); font-size: .94rem; }
.feature-section { padding: 110px 0; }
.feature-grid { display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 90px; }
.feature-copy h2 { margin: 0 0 22px; font-size: clamp(2.05rem, 3.6vw, 3.35rem); line-height: 1.16; }
.feature-copy h2 span { color: var(--accent); }
.feature-copy > p:not(.kicker) { max-width: 430px; margin: 0; color: #526057; font-size: 1rem; line-height: 1.75; }
.feature-copy > small { display: block; margin-top: 20px; color: #768179; font-size: .78rem; }
.feature-dashboard { background: #f8f7f3; }
.dashboard-visual { min-height: 376px; padding: 28px 32px 22px; border: 1px solid #ebe7df; border-radius: 24px; background: #fff; box-shadow: 0 22px 60px #453c2b10; }
.dashboard-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: .85rem; }
.dashboard-head span { color: #85857f; font-size: .72rem; white-space: nowrap; }
.dashboard-head b { padding: 5px 8px; border-radius: 8px; color: #866124; background: #fbf3e5; }
.dashboard-period { margin: 24px 0 16px; color: #535852; font-size: .88rem; font-weight: 650; }
.dashboard-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dashboard-stats div { display: grid; gap: 2px; padding: 12px; border-radius: 12px; background: #f8f8f6; }
.dashboard-stats small { color: #777c75; font-size: .68rem; }
.dashboard-stats strong { font-size: clamp(.9rem, 1.5vw, 1.12rem); white-space: nowrap; }
.dashboard-stats div:last-child strong { color: #986b28; }
.dashboard-chart { height: 126px; display: flex; justify-content: space-around; align-items: end; gap: 12px; margin-top: 23px; padding: 0 15px; border-bottom: 1px solid #d8d8d2; background: repeating-linear-gradient(to top, transparent 0 40px, #f1f0eb 40px 41px); }
.dashboard-chart span { width: 24px; height: var(--bar); border-radius: 6px 6px 0 0; background: linear-gradient(#b78734, #e5c68f); }
.dashboard-axis { display: flex; justify-content: space-between; margin-top: 8px; color: #8b918b; font-size: .65rem; }
.visual-caption { display: block; margin-top: 12px; color: #959a94; font-size: .65rem; text-align: right; }
.feature-freedom { background: #f7f4eb; }
.freedom-visual { min-height: 390px; padding: 25px 33px 20px; border-radius: 24px; background: #fff; box-shadow: 0 22px 60px #17352413; }
.visual-top { display: flex; justify-content: space-between; color: var(--gold); font-size: .75rem; font-weight: 700; }
.visual-top span:last-child { color: #8a948b; font-weight: 500; }
.freedom-ring { width: 166px; height: 166px; display: grid; place-items: center; margin: 13px auto 0; border: 11px solid #eee8db; border-top-color: #ca9e4b; border-right-color: #d6bd88; border-radius: 50%; color: #756d5d; text-align: center; font-size: .82rem; line-height: 1.55; }
.freedom-ring strong { color: #70501d; font-size: .98rem; }
.freedom-route { display: flex; align-items: end; gap: 8px; margin-top: 2px; color: #6a685e; font-size: .76rem; white-space: nowrap; }
.freedom-route > span { padding-bottom: 2px; }
.route-line { position: relative; flex: 1; min-width: 0; height: 80px; }
.route-line > svg { width: 100%; height: 100%; overflow: visible; }
.route-line > svg path { fill: none; stroke: #c89a47; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 5; }
.route-walker { position: absolute; left: 37%; top: 2px; width: 35px; height: 46px; transform: rotate(10deg); }
.route-walker svg { width: 100%; height: 100%; overflow: visible; }
.route-walker circle { fill: #75561e; }
.route-walker path { fill: none; stroke: #75561e; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.freedom-visual > p { margin: 14px 0 3px; color: #506057; font-size: .82rem; text-align: center; }
.freedom-visual > small { display: block; color: #9aa29c; font-size: .66rem; text-align: center; }
.feature-echo { background: #fff; }
.feature-echo .feature-copy { order: 2; }
.feature-echo .echo-visual { order: 1; }
.echo-visual { padding: 27px 32px 23px; border: 1px solid #ebe5d9; border-radius: 24px; background: #fffdf9; box-shadow: 0 22px 60px #453c2b10; }
.echo-visual-top { display: flex; justify-content: space-between; color: var(--accent); font-size: .78rem; font-weight: 700; }
.echo-visual-top span:last-child { color: var(--gold); }
.echo-ripple { height: 230px; position: relative; display: grid; place-items: center; overflow: hidden; }
.ripple-ring { position: absolute; left: 50%; top: 50%; border: 1px solid #d7b36b; border-radius: 50%; transform: translate(-50%, -50%); }
.ring-one { width: 112px; height: 112px; border-width: 2px; background: #fdf8ee; }
.ring-two { width: 205px; height: 205px; opacity: .72; }
.ring-three { width: 315px; height: 315px; opacity: .38; }
.ripple-center { z-index: 1; color: #79571f; font-size: .82rem; font-weight: 750; }
.ripple-label { z-index: 2; position: absolute; padding: 5px 9px; border: 1px solid #e8d9b9; border-radius: 99px; background: #fff; color: #765f3d; font-size: .7rem; white-space: nowrap; }
.ripple-budget { top: 23px; left: 13%; }
.ripple-fire { top: 70px; right: 3%; }
.ripple-wish { bottom: 23px; left: 10%; }
.echo-visual h3 { margin: 0 0 8px; font-size: 1.42rem; }
.echo-visual > p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.65; }
.echo-visual > small { display: block; margin-top: 14px; color: #929b93; font-size: .66rem; }
.feature-wish { background: #fbf9f3; }
.wish-visual { position: relative; display: flex; align-items: center; justify-content: center; }
.wish-card { width: 360px; min-height: 240px; padding: 25px; border: 1px solid #e7dfcb; border-radius: 22px; background: #fff; box-shadow: 0 15px 45px #69531a13; }
.wish-card p { margin: 0; color: #a47e36; font-size: .74rem; font-weight: 730; }
.wish-card h3 { margin: 20px 0 30px; font-size: 1.75rem; }
.wish-progress { height: 8px; border-radius: 99px; background: #efeee9; }
.wish-progress span { width: 62%; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #b1812b, #e4c68b); }
.wish-card small { display: block; margin-top: 12px; color: #848c83; font-size: .74rem; }
.badge-collection { margin-top: 65px; }
.badge-intro { text-align: center; }
.badge-intro h3 { margin: 0; font-size: clamp(1.45rem, 2.4vw, 2.2rem); line-height: 1.2; }
.badge-intro > p:last-child { margin: 12px 0 0; color: var(--muted); font-size: .88rem; }
.badge-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.badge-grid figure { min-width: 0; display: flex; align-items: center; gap: 15px; margin: 0; padding: 17px; border: 1px solid #eaddc4; border-radius: 18px; background: #fff; }
.badge-grid img { flex: 0 0 90px; width: 90px; height: 90px; object-fit: contain; }
.badge-grid figcaption { display: grid; gap: 6px; }
.badge-grid strong { font-size: .94rem; white-space: nowrap; }
.badge-grid small { color: #927a53; font-size: .72rem; }
.badge-caption { display: block; margin-top: 12px; color: #8e928d; font-size: .67rem; text-align: center; }
.practical { padding: 105px 0; text-align: center; }
.practical h2 { margin: 0 0 18px; font-size: clamp(2rem, 3.1vw, 2.85rem); line-height: 1.2; }
.practical h2 span { color: var(--accent); }
.practical .content-narrow > p:last-child { max-width: 620px; margin: auto; color: var(--muted); }
.trust { padding: 80px 0; background: var(--paper); }
.trust-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 70px; }
.trust h2 { margin: 0; font-size: clamp(2rem, 3vw, 2.8rem); line-height: 1.18; }
.trust-grid > div:last-child p { margin: 0 0 13px; color: #5c665e; font-size: .95rem; }
.trust-grid > div:last-child p:last-child { margin-bottom: 0; }
.availability { padding: 100px 0 110px; background: var(--jade); color: #fff; text-align: center; }
.availability .kicker { color: #dbc088; }
.availability h2 { margin: 0 0 14px; font-size: clamp(2.3rem, 4vw, 3.6rem); }
.availability .content-narrow > p:not(.kicker) { max-width: 580px; margin: 0 auto 27px; color: #d7e2d9; font-size: 1rem; }
.availability .primary-link { background: #d5ae62; color: #16231a; }
.availability-state { display: block; margin-top: 20px; color: #acc0b0; font-size: .78rem; }
.product-footer { width: min(1160px, calc(100% - 48px)); min-height: 90px; margin: auto; padding: 24px 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 22px; color: #718074; font-size: .75rem; }
.product-footer a { color: var(--ink); font-weight: 700; }
.site-footer .filing-link, .product-footer .filing-link { color: var(--muted); font-weight: 500; white-space: nowrap; }
.filing-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Product demonstrations: one idea, one visual, no real data. */
.feature-entry { background: #fff; }
.demo-panel { padding: 30px; border: 1px solid #e4e2dc; border-radius: 26px; background: #fff; box-shadow: 0 20px 50px #43351b0b; }
.demo-note { display: block; margin-top: 18px; color: #73736d; font-size: .68rem; line-height: 1.6; }
.demo-switch { display: flex; gap: 6px; width: fit-content; padding: 4px; border-radius: 99px; background: #f1f0ec; }
.demo-switch button { min-height: 40px; padding: 7px 17px; border: 0; border-radius: inherit; color: #64635f; background: transparent; font-size: .8rem; }
.demo-switch button[aria-pressed="true"] { color: #76541c; background: #fff; box-shadow: 0 2px 6px #0001; }
.entry-steps { display: flex; justify-content: space-between; gap: 5px; margin: 24px 0; padding: 0; list-style: none; counter-reset: step; color: #6a6963; font-size: .7rem; }
.entry-steps li { counter-increment: step; }
.entry-steps li:before { content: counter(step); margin-right: 5px; color: #a0772b; }
.entry-sheet { padding: 23px; border: 1px solid #ece8de; border-radius: 18px; background: #fbfaf7; }
.entry-sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 25px; }
.entry-sheet-head strong { font-size: 1rem; }
.entry-sheet-head > span { color: #77746b; font-size: .68rem; }
.entry-field { display: flex; justify-content: space-between; margin: 12px 0; font-size: .88rem; }
.entry-field > span { color: #7b796f; }
.entry-amount { margin: 25px 0 15px; font-size: 2.9rem; font-weight: 650; line-height: 1.15; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.entry-amount > span { font-size: 1.6rem; color: #8b887d; }
.entry-status { min-height: 3.2em; margin: 0; color: #79602e; font-size: .78rem; }
.simulation-result { display: grid; gap: 5px; margin-top: 25px; }
.simulation-result > small { font-size: .78rem; color: #6c6b64; }
.simulation-result > output { font-size: 2rem; font-weight: 700; line-height: 1.3; letter-spacing: -.035em; }
.simulation-result > span { color: #79766b; font-size: .75rem; }
.simulation-chart { display: block; width: 100%; margin: 18px 0; overflow: visible; }
.simulation-chart text { font-size: 11px; fill: #777269; }
.chart-grid path { stroke: #eeece7; fill: none; }
.chart-goal { fill: none; stroke: #c39a4d; stroke-width: 1.5; stroke-dasharray: 5 5; }
#simulation-path { fill: none; stroke: #ac802e; stroke-width: 3; }
#simulation-person circle { fill: #76551f; }
#simulation-person path { fill: none; stroke: #76551f; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
#simulation-flag path { fill: #d3aa54; stroke: #b08430; stroke-width: 2; }
.simulation-label { display: flex; justify-content: space-between; gap: 12px; font-size: .84rem; font-weight: 650; }
.simulation-label output { color: #8b6520; font-variant-numeric: tabular-nums; }
.simulation input { width: 100%; height: 32px; margin: 10px 0 0; accent-color: #a27a30; cursor: pointer; }
.slider-labels { display: flex; justify-content: space-between; color: #777269; font-size: .66rem; }
.quiet-button { min-height: 44px; margin-top: 10px; padding: 8px 0; border: 0; background: transparent; color: #876423; font-size: .78rem; }
.badge-grid figure { flex-direction: column; padding: 30px 18px; text-align: center; }
.badge-grid img { width: 138px; height: 138px; flex-basis: 138px; }
.badge-grid figcaption { gap: 10px; }
.badge-grid strong { font-size: 1.25rem; }
.badge-grid figcaption > span { font-size: .88rem; color: #696a63; }
.badge-grid small { font-size: .69rem; }
.feature-game { color: #f5f3ed; background: #101d19; }
.feature-game .kicker { color: #d6b16b; }
.feature-game h2 span { color: #e1c17f; }
.feature-game .feature-copy > p:not(.kicker) { color: #c7d0ca; }
.feature-game .feature-copy > small { color: #a7b4ac; }
.game-visual { padding: 24px; border: 1px solid #455044; border-radius: 26px; background: radial-gradient(ellipse at 50% 70%, #57431f33, transparent 70%); }
.game-hud { display: flex; justify-content: space-between; gap: 10px; font-size: .78rem; color: #e0c88e; }
.game-hud > span:last-child { color: #a8b5ad; font-size: .7rem; }
.game-visual > svg { width: 100%; display: block; }
.game-visual text { display: none; }
.game-arc { fill: none; stroke: #b59b6470; stroke-dasharray: 3 7; }
.game-slice { fill: none; stroke: #ffe6a3; stroke-width: 5; stroke-linecap: round; }
.game-visual > small { display: block; text-align: center; color: #a8b5ad; font-size: .67rem; }
.feature-tools { background: #f6f6f3; }
.tools-layout { display: grid; grid-template-columns: .95fr 1.05fr; gap: 90px; margin-top: 45px; align-items: center; }
.tool-options { display: grid; gap: 12px; }
.tool-options button { display: grid; gap: 7px; min-height: 105px; padding: 22px 25px; border: 1px solid transparent; border-radius: 18px; text-align: left; background: transparent; }
.tool-options button[aria-pressed="true"] { border-color: #d8c69f; background: #fff; }
.tool-options button strong { font-size: 1.12rem; color: #242823; }
.tool-options button span { font-size: .87rem; color: #717369; }
.tool-proof { min-height: 405px; }
.tool-proof h3 { margin: 0; font-size: 1.7rem; line-height: 1.3; }
.tool-flow { display: grid; justify-items: center; gap: 5px; padding: 25px 0; color: #76786e; font-size: .84rem; }
.tool-flow b { color: #baa373; font-weight: 400; }
.tool-flow strong { color: #846226; }
.tool-proof > p:last-child { margin: 0; font-size: .8rem; color: #6c7169; }
.tool-details { max-width: 750px; margin: 35px auto 0; border-top: 1px solid #dfe1d9; }
.tool-details summary { width: fit-content; margin: 0 auto; padding: 18px 0; cursor: pointer; color: #846226; font-size: .88rem; }
.tool-details p { margin: 5px 0 20px; font-size: .88rem; color: #5f655c; line-height: 2; text-align: center; }
.tools-boundary { max-width: 750px; margin: 0 auto; color: #777c72; font-size: .72rem; text-align: center; }

@media (max-width: 900px) {
  .product-hero { grid-template-columns: 1fr; gap: 35px; padding-top: 60px; }
  .hero-copy { max-width: 650px; }
  .hero-stage { min-height: 545px; }
  .feature-grid { grid-template-columns: 1fr; gap: 38px; }
  .tools-layout { grid-template-columns: 1fr; gap: 25px; }
  .tool-proof { width: 100%; max-width: 600px; margin: auto; }
  .feature-echo .feature-copy, .feature-echo .echo-visual { order: initial; }
  .feature-copy { max-width: 650px; }
  .feature-grid > *:last-child { max-width: 600px; width: 100%; margin: auto; }
  .feature-echo .feature-grid > .feature-copy { margin: 0; }
  .journey-steps { grid-template-columns: repeat(2, 1fr); }
  .badge-grid figure { flex-direction: column; text-align: center; }
  .world-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .content-wrap, .content-narrow, .nav-inner, .product-hero, .site-header, .universe-hero, .featured-work, .coming-worlds, .site-footer, .product-footer { width: min(100% - 36px, 1160px); }
  .nav-inner { gap: 13px; height: 54px; }
  .nav-universe { font-size: .75rem; }
  .nav-product { font-size: .82rem; }
  .nav-action { font-size: .73rem; }
  .product-hero { padding: 54px 0 54px; }
  .hero-copy h1 { font-size: clamp(2.25rem, 9vw, 3.3rem); line-height: 1.17; }
  .hero-description { font-size: .96rem; }
  .hero-links { gap: 13px; }
  .primary-link { min-height: 45px; padding: 10px 19px; }
  .hero-stage { min-height: 520px; margin-left: -12px; margin-right: -12px; }
  .app-phone { width: 268px; min-height: 505px; padding: 15px 15px 0; }
  .timeline-entry { min-height: 83px; }
  .visual-disclaimer { bottom: -16px; font-size: .58rem; }
  .recognition, .journey, .feature-section, .practical { padding: 75px 0; }
  .recognition { text-align: left; }
  .recognition h2, .section-intro h2, .feature-copy h2, .practical h2, .trust h2 { font-size: clamp(1.9rem, 7.5vw, 2.65rem); }
  .journey-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; margin-top: 35px; }
  .journey-steps article { padding-top: 15px; }
  .journey-steps h3 { margin: 7px 0 4px; font-size: 1.28rem; }
  .feature-grid { gap: 28px; }
  .dashboard-visual { padding: 22px 18px; }
  .dashboard-stats div { padding: 9px 7px; }
  .dashboard-stats strong { font-size: .82rem; }
  .freedom-visual { min-height: 360px; padding: 20px 22px; }
  .route-walker { left: 28%; }
  .echo-visual { padding: 26px 23px; }
  .wish-visual { min-height: 260px; }
  .wish-card { width: min(100%, 330px); }
  .badge-collection { margin-top: 40px; }
  .badge-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .badge-grid figure { padding: 10px 4px; gap: 5px; }
  .badge-grid img { flex-basis: 70px; width: 70px; height: 70px; }
  .badge-grid strong { font-size: .66rem; white-space: normal; }
  .badge-grid small { font-size: .61rem; }
  .badge-grid { grid-template-columns: 1fr; gap: 12px; }
  .badge-grid figure { flex-direction: row; padding: 18px; text-align: left; gap: 18px; }
  .badge-grid img { width: 85px; height: 85px; flex-basis: 85px; }
  .badge-grid strong { font-size: 1.1rem; }
  .badge-grid figcaption > span { font-size: .8rem; }
  .badge-grid small { font-size: .63rem; }
  .demo-panel { padding: 23px 18px; }
  .entry-steps { font-size: .64rem; }
  .entry-sheet { padding: 19px; }
  .tool-options button { min-height: 95px; padding: 20px; }
  .tool-proof { min-height: 380px; }
  .tools-layout { margin-top: 30px; }
  .practical { text-align: left; }
  .trust { padding: 74px 0; }
  .trust-grid { grid-template-columns: 1fr; gap: 22px; }
  .availability { padding: 80px 0; }
  .product-footer { min-height: 105px; flex-wrap: wrap; justify-content: flex-start; gap: 4px 14px; }
  .product-footer span:last-child { width: 100%; }
  .universe-hero { padding: 70px 0 55px; }
  .universe-hero h1 { font-size: clamp(2.3rem, 8vw, 3.2rem); }
  .featured-work { min-height: auto; padding: 36px 25px; grid-template-columns: 1fr; }
  .featured-work > img { width: min(100%, 300px); }
  .coming-worlds { padding: 80px 0; }
  .world-list { grid-template-columns: 1fr; margin-top: 26px; }
  .world-list article { min-height: 120px; }
  .site-footer { min-height: 100px; flex-wrap: wrap; justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .primary-link { transition: none; }
  .primary-link:hover { transform: none; }
}