/* Hallmark · genre: modern-minimal · macrostructure: Bento Grid · theme: custom town-grass · enrichment: none (typography + one screenshot) · nav: N5 floating pill · footer: Ft2 inline
 * tone: professional, fintech, confident · anchor hue: 145 green
 * pre-emit critique: P4 H4 E4 S5 R4 V5 */
@import url("tokens.css?v=1791487830");

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-sans); font-size: var(--text-md); line-height: 1.55; }
img, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; font-style: normal; overflow-wrap: anywhere; min-width: 0; }
p { margin: 0; }
.pixel { image-rendering: pixelated; image-rendering: crisp-edges; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* ---------- N5 floating pill nav ---------- */
.nav { position: sticky; top: var(--space-sm); z-index: 20; display: flex; justify-content: center; padding: 0 var(--gutter); }
.nav__pill { display: flex; align-items: center; gap: var(--space-md); padding: 6px 6px 6px var(--space-md); background: color-mix(in oklch, var(--color-paper) 88%, transparent); border: 1px solid var(--color-line); border-radius: 999px; box-shadow: 0 6px 24px -12px oklch(20% 0.02 265 / 0.25); backdrop-filter: blur(10px); max-width: 100%; }
.nav__brand { font-weight: 600; text-decoration: none; white-space: nowrap; letter-spacing: -0.02em; }
.nav__links { display: flex; gap: var(--space-md); }
.nav__links a { color: var(--color-ink-2); text-decoration: none; font-size: var(--text-sm); white-space: nowrap; }
.nav__links a:hover { color: var(--color-ink); }


/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: var(--space-xs); padding: 12px 20px; border-radius: 999px; font: 500 var(--text-sm) var(--font-sans); text-decoration: none; white-space: nowrap; border: 1px solid transparent; cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.btn--ink { background: var(--color-ink); color: var(--color-on-ink); }
.btn--ink:hover { background: var(--color-ink-2); }
.btn--line { background: transparent; color: var(--color-ink); border-color: var(--color-line); }
.btn--line:hover { border-color: var(--color-ink-3); }
.btn:active { transform: translateY(1px); }

/* ---------- layout ---------- */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
section { padding: var(--space-3xl) 0 0; }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); align-items: end; margin-bottom: var(--space-xl); }
.sec-head h2 { font-size: var(--text-2xl); }
.sec-head p { color: var(--color-ink-2); max-width: 46ch; }

/* ---------- hero ---------- */
.eyebrow { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); margin-bottom: var(--space-md); }
.hero__side { align-self: end; }
.btn--sm { padding: 8px 14px; }
.btn--accent { background: var(--color-accent); color: oklch(18% 0.04 145); }
.btn--accent:hover { background: color-mix(in oklch, var(--color-accent) 85%, white); }
.role { border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-lg); }
.role__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-sm); margin-bottom: var(--space-md); }
.role__head h3 { font-size: var(--text-xl); }
.role__head p { color: var(--color-ink-2); }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.ticks li { position: relative; padding-left: 22px; max-width: 70ch; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 0.55em; width: 8px; height: 8px; border-radius: 2px; background: var(--color-accent); }
.ticks--sm li { font-size: var(--text-sm); color: var(--color-ink-2); }
.fit { margin-top: var(--space-lg); }
.fit h3 { font-size: var(--text-md); font-weight: 500; color: var(--color-ink-2); letter-spacing: 0; margin-bottom: var(--space-sm); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.chips li { padding: 6px 14px; border-radius: 999px; background: var(--color-surface-2); font-size: var(--text-sm); }
.tile--dark b { color: var(--color-on-ink); font-weight: 600; }
.tiny { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 1px solid var(--color-line); border-radius: 6px; background: transparent; color: var(--color-ink-3); cursor: pointer; font-size: 11px; }
.tiny:hover { color: var(--color-ink); border-color: var(--color-ink-3); }
.tiny--exit { position: absolute; top: 12px; right: 12px; z-index: 3; color: oklch(80% 0.01 270); border-color: oklch(40% 0.02 270); }
.hero { padding-top: var(--space-3xl); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-2xl); align-items: end; }
.hero h1 { font-size: var(--text-display); }
.hero h1 span { color: var(--color-accent); }
.hero__lede { font-size: var(--text-lg); color: var(--color-ink-2); max-width: 40ch; margin-bottom: var(--space-xl); }
.hero__lede strong { color: var(--color-ink); font-weight: 500; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--color-line); border-radius: var(--radius-md); margin-top: var(--space-2xl); }
.facts div { padding: var(--space-lg); }
.facts div + div { border-left: 1px solid var(--color-line); }
.facts b { display: block; font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.02em; }
.facts span { color: var(--color-ink-2); font-size: var(--text-sm); }

/* ---------- method ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-sm); list-style: none; margin: 0; padding: 0; }
.steps li { background: var(--color-surface); border-radius: var(--radius-md); padding: var(--space-lg); }
.steps b { display: block; font-size: var(--text-lg); letter-spacing: -0.02em; margin-bottom: var(--space-xs); }
.steps .who { display: inline-block; font: 500 var(--text-xs) var(--font-mono); padding: 2px 8px; border-radius: 999px; margin-bottom: var(--space-md); background: var(--color-surface-2); color: var(--color-ink-2); }
.steps .who--me { background: var(--color-accent-soft); color: var(--color-accent-ink); }
.steps p { color: var(--color-ink-2); font-size: var(--text-sm); }

/* ---------- bento ---------- */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-sm); }
.tile { position: relative; background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); overflow: hidden; min-width: 0; }
.tile h3 { font-size: var(--text-xl); }
.tile p { color: var(--color-ink-2); font-size: var(--text-sm); max-width: 52ch; }
.tile .tag { font: 500 var(--text-xs) var(--font-mono); color: var(--color-ink-3); }
.tile--4 { grid-column: span 4; } .tile--3 { grid-column: span 3; } .tile--2 { grid-column: span 2; }
.tile--tall { grid-row: span 2; }
.tile--dark { background: var(--color-ink); color: var(--color-on-ink); }
.tile--dark p, .tile--dark .tag { color: color-mix(in oklch, var(--color-on-ink) 70%, transparent); }
.shot { margin-top: auto; border-radius: var(--radius-sm); border: 1px solid var(--color-line); overflow: hidden; }
.shot img { width: 100%; height: auto; }
.screen canvas:focus { outline: none; }
.tile .big, .big { font-size: clamp(2.2rem, 1.6rem + 2vw, 3.25rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.big small { font-size: var(--text-sm); font-weight: 400; letter-spacing: 0; color: var(--color-ink-2); display: block; margin-top: var(--space-xs); }
.vs { display: flex; gap: var(--space-xl); flex-wrap: wrap; margin-top: var(--space-xs); }
.spec { list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); }
.spec li { display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-xs) 0; border-top: 1px solid color-mix(in oklch, var(--color-on-ink) 15%, transparent); }
.spec li span:last-child { text-align: right; }
.tile a.more { font-size: var(--text-sm); font-weight: 500; text-underline-offset: 3px; }

/* ---------- contact + footer ---------- */
.contact { margin-top: var(--space-3xl); background: var(--color-ink); color: var(--color-on-ink); border-radius: var(--radius-lg); padding: clamp(32px, 6vw, 72px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xl); align-items: end; }
.contact h2 { font-size: var(--text-display); }
.contact p { color: color-mix(in oklch, var(--color-on-ink) 70%, transparent); max-width: 44ch; margin-top: var(--space-md); }
.contact .btn--ink { background: var(--color-accent); color: oklch(18% 0.04 145); }
.contact .btn--ink:hover { background: color-mix(in oklch, var(--color-accent) 85%, white); }
.foot { align-items: center; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md); padding: var(--space-xl) 0; color: var(--color-ink-3); font-size: var(--text-xs); }

/* ---------- game layer ---------- */
.game { position: fixed; inset: 0; z-index: 50; background: var(--color-game-bg); display: flex; align-items: center; justify-content: center; font-family: var(--font-pixel); }
.game[hidden] { display: none; }
body.game-on { overflow: hidden; }
body.game-on .page { visibility: hidden; }
.screen { position: relative; }
.screen canvas { width: 100%; height: 100%; border-radius: 6px; }
.game__top { position: absolute; top: var(--space-sm); right: var(--space-sm); left: var(--space-sm); display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); pointer-events: none; z-index: 2; }
.game__top > * { pointer-events: auto; }
.game__exit { font: 500 var(--text-sm) var(--font-sans); }
.banner { position: absolute; top: 0; left: 4%; padding: 8px 18px 6px; background: oklch(78% 0.07 70); color: oklch(30% 0.05 50); border: 3px solid oklch(42% 0.06 50); border-top: 0; border-radius: 0 0 8px 8px; box-shadow: inset 0 -3px 0 oklch(68% 0.08 65); font-size: clamp(14px, 2.4vmin, 20px); text-shadow: 1px 1px 0 oklch(88% 0.05 75); opacity: 0; transform: translateY(-100%); pointer-events: none; white-space: nowrap; }
.banner.show { animation: banner 2.4s var(--ease-out) forwards; }
@keyframes banner { 0% { opacity: 1; transform: translateY(-100%); } 12%, 80% { opacity: 1; transform: none; } 100% { opacity: 1; transform: translateY(-100%); } }
.dlg { position: absolute; left: 1.5%; right: 1.5%; bottom: 2%; background: var(--color-game-box); color: oklch(38% 0.01 270); border: 3px solid oklch(36% 0.02 270); box-shadow: inset 0 0 0 3px oklch(84% 0.03 230), inset 0 0 0 5px oklch(98% 0 0), inset 0 0 0 6px oklch(84% 0.03 230); border-radius: 10px; padding: clamp(12px, 2.4vmin, 20px) clamp(16px, 3vmin, 28px); font-size: clamp(15px, 3vmin, 27px); line-height: 1.45; min-height: 26%; text-shadow: 0.08em 0.08em 0 oklch(86% 0.01 90); }
.dlg[hidden] { display: none; }
.dlg__name { display: inline-block; font-size: 0.8em; color: oklch(48% 0.12 255); margin-bottom: 4px; }
.dlg__arrow { position: absolute; right: 16px; bottom: 10px; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 9px solid oklch(55% 0.2 25); animation: bob 0.8s steps(2) infinite; }
.dlg__arrow[hidden] { display: none; }
@keyframes bob { 50% { transform: translateY(3px); } }
.dlg__link { display: inline-block; margin-top: 8px; padding: 4px 12px; border: 3px solid var(--color-game-border); border-radius: 6px; color: var(--color-game-border); text-decoration: none; font-size: 0.85em; }
.dlg__link:hover { background: var(--color-game-border); color: var(--color-game-box); }
.dlg__link[hidden] { display: none; }
.pad { position: absolute; inset: auto 0 0 0; display: none; justify-content: space-between; align-items: end; padding: var(--space-lg); pointer-events: none; }
.pad > * { pointer-events: auto; }
.dpad { display: grid; grid-template-columns: repeat(3, 52px); grid-template-rows: repeat(3, 52px); }
.dpad button, .ab button { border: 0; background: oklch(32% 0.02 270 / 0.85); color: oklch(92% 0 0); font: 600 18px var(--font-pixel); touch-action: none; -webkit-user-select: none; user-select: none; }
.dpad button:active, .ab button:active, .dpad button.on { background: oklch(46% 0.03 270 / 0.95); }
.dpad [data-d="1"] { grid-area: 1 / 2; border-radius: 10px 10px 0 0; }
.dpad [data-d="2"] { grid-area: 2 / 1; border-radius: 10px 0 0 10px; }
.dpad [data-d="3"] { grid-area: 2 / 3; border-radius: 0 10px 10px 0; }
.dpad [data-d="0"] { grid-area: 3 / 2; border-radius: 0 0 10px 10px; }
.dpad span { grid-area: 2 / 2; background: oklch(32% 0.02 270 / 0.85); }
.ab { display: flex; gap: 14px; align-items: end; }
.ab button { width: 64px; height: 64px; border-radius: 50%; }
.ab [data-b="a"] { margin-bottom: 28px; background: oklch(50% 0.17 25 / 0.9); }
.hint { position: absolute; bottom: -28px; left: 0; right: 0; text-align: center; color: oklch(70% 0.02 270); font-size: 14px; }
@media (pointer: coarse), (max-width: 700px) { .pad { display: flex; } .hint { display: none; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } }

@media (max-width: 900px) {
  .hero, .sec-head, .contact { grid-template-columns: minmax(0, 1fr); }
  .hero { gap: var(--space-xl); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile--4, .tile--3, .tile--2 { grid-column: span 2; }
  .tile--tall { grid-row: auto; }
}
@media (max-width: 640px) {
  .nav__links { display: none; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts div + div { border-left: 0; border-top: 1px solid var(--color-line); }
  .steps { grid-template-columns: minmax(0, 1fr); }
}