/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4
 * route: custom (bespoke) · structure: bank-notice ledger · idea: "amount as a statement line, not a prize coupon"
 * paper: oklch(0.985 0.008 245) · accent: oklch(0.48 0.12 245) · display: Manrope · body: Noto Sans
 * axes: paper-band cool-light / display-style geometric / accent-hue golomt-blue · gates: all-pass · studied: no
 */
:root {
  --color-paper: oklch(0.99 0.006 245);
  --color-ink: oklch(0.32 0.05 245);
  --color-ink-2: oklch(0.48 0.03 245);
  --color-ink-3: oklch(0.62 0.025 245);
  --color-line: oklch(0.91 0.015 245);
  --color-brand: #0f62ac;
  --color-brand-2: #1a7fd0;
  --color-brand-soft: oklch(0.96 0.02 245);
  --color-on-brand: #ffffff;
  --color-gold: #c9a227;
  --color-gold-ink: #6b4e12;
  --color-banner: #0f62ac;
  --font-display: "Manrope", "Noto Sans", system-ui, sans-serif;
  --font-body: "Noto Sans", system-ui, sans-serif;
  --tap: 52px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --radius: 12px;
}

* { box-sizing: border-box; }
html, body {
  overflow-x: clip;
  max-width: 100vw;
}
html { height: 100%; }
body {
  margin: 0;
  min-height: 100svh;
  min-height: 100dvh;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: contain;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

.shell {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--color-paper);
  position: relative;
  isolation: isolate;
}
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.notice {
  flex: 0 0 auto;
  padding-top: 8px;
}
.pane--intro .display,
.pane--done .display {
  font-size: clamp(22px, 6vw, 26px);
  max-width: 18ch;
  line-height: 1.22;
}
.pane--intro .lede,
.pane--done .lede {
  text-align: left;
  max-width: 36ch;
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.5;
}

.ledger {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding: 12px 14px 12px 12px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-paper);
  transition: background .18s ease, border-color .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.ledger:active {
  background: var(--color-brand-soft);
  border-color: color-mix(in oklab, var(--color-brand) 28%, var(--color-line));
}
.mark {
  position: relative;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--color-brand);
  background: var(--color-brand-soft);
}
.mark__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.mark__track,
.mark__arc {
  fill: none;
  stroke-width: 1.5;
}
.mark__track { stroke: var(--color-line); }
.mark__arc {
  stroke: var(--color-brand);
  stroke-dasharray: 132;
  stroke-dashoffset: 132;
  stroke-linecap: square;
  transform-origin: 24px 24px;
  transform: rotate(-90deg);
}
.pane--intro.is-active .mark__arc,
.pane--done.is-active .mark__arc {
  animation: arc-in .85s var(--ease) .1s forwards;
}
@keyframes arc-in {
  to { stroke-dashoffset: 0; }
}
.mark__ico { position: relative; z-index: 1; display: block; }
.check-path {
  stroke-dasharray: 16;
  stroke-dashoffset: 16;
}
.pane--done.is-active .check-path {
  animation: draw-in .4s var(--ease) .38s forwards;
}
@keyframes draw-in {
  to { stroke-dashoffset: 0; }
}
.ledger__copy {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ledger__lab {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-ink-3);
}
.ledger__val {
  font-family: var(--font-display);
  font-size: clamp(24px, 6.6vw, 30px);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--color-brand);
  line-height: 1.1;
}

.facts {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
.facts li {
  min-width: 0;
  padding: 12px 6px 11px;
  text-align: center;
  font-size: 11px;
  color: var(--color-ink-3);
  border-left: 1px solid var(--color-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transition: background .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.facts li:first-child { border-left: 0; }
.facts li:active { background: var(--color-brand-soft); }
.fact__ico { color: var(--color-brand); display: block; margin-bottom: 2px; }
.facts b {
  display: block;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  color: var(--color-ink);
  line-height: 1.1;
}

.foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0 calc(10px + var(--safe-b));
  font-size: 12px;
  color: var(--color-ink-3);
  flex: 0 0 auto;
}
.foot a { color: inherit; text-decoration: none; }

.pane--intro,
.pane--done {
  position: relative;
  z-index: 1;
  padding-top: 0;
  padding-left: 16px;
  padding-right: 16px;
}

.pane--q {
  background: #f6f9fc;
}

/* ── Mast ──────────────────────────────────────────────────────── */
.mast {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: calc(10px + var(--safe-t)) 16px 8px;
  min-width: 0;
}
.mast__back {
  width: 40px; height: 40px;
  border: 0; background: transparent;
  color: var(--color-ink);
  border-radius: 12px;
  cursor: pointer;
  display: grid; place-items: center;
  -webkit-tap-highlight-color: transparent;
}
.mast__back[hidden] { visibility: hidden; pointer-events: none; }
.mast__back:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.mast__back:active { transform: scale(.94); }
.mast__brand { min-width: 0; display: flex; justify-content: center; }
.mast__logo { height: 24px; width: auto; max-width: 148px; display: block; }
.mast__reward {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 800;
  letter-spacing: .02em;
  color: var(--color-gold-ink);
  background: var(--color-gold);
  padding: 6px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
body.is-intro .story,
body.is-done .story { display: none; }
body.is-intro .mast__reward,
body.is-done .mast__reward { display: none; }
body.is-intro .mast,
body.is-done .mast {
  grid-template-columns: 1fr;
  padding: calc(12px + var(--safe-t)) 16px 12px;
  border-bottom: 1px solid var(--color-line);
}
body.is-intro .mast__back,
body.is-done .mast__back { display: none; }
body.is-intro .mast__brand,
body.is-done .mast__brand { justify-content: center; }

.story {
  display: flex;
  gap: 5px;
  padding: 0 16px 8px;
}
.story__seg {
  display: block;
  flex: 1;
  min-width: 0;
  height: 3px;
  border-radius: 99px;
  background: var(--color-line);
  overflow: hidden;
}
.story__seg i {
  display: block; height: 100%; width: 0;
  background: var(--color-brand);
  border-radius: inherit;
  transition: width .35s var(--ease);
}
.story__seg.is-on i { width: 100%; }
.story__seg.is-now i { width: 38%; }

/* ── Stage ─────────────────────────────────────────────────────── */
.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
}

.pane {
  display: none;
  flex: 1;
  flex-direction: column;
  padding: 8px 16px calc(16px + var(--safe-b));
  min-width: 0;
}
.pane.is-active {
  display: flex;
  animation: sweep .32s var(--ease);
}
.pane--intro.is-active,
.pane--done.is-active { animation: none; }
@keyframes sweep {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.pane--intro.is-active .notice,
.pane--done.is-active .notice { animation: rise .48s var(--ease) both; }
.pane--intro.is-active .ledger,
.pane--done.is-active .ledger { animation: rise .48s var(--ease) .08s both; }
.pane--intro.is-active .facts { animation: rise .48s var(--ease) .16s both; }
.pane--intro.is-active .dock,
.pane--done.is-active .dock { animation: rise .48s var(--ease) .22s both; }
@media (prefers-reduced-motion: reduce) {
  .pane.is-active { animation: none; }
  .story__seg i { transition: none; }
  .pane--intro.is-active .notice,
  .pane--done.is-active .notice,
  .pane--intro.is-active .ledger,
  .pane--done.is-active .ledger,
  .pane--intro.is-active .facts,
  .pane--intro.is-active .dock,
  .pane--done.is-active .dock { animation: none; }
  .mark__arc,
  .check-path { animation: none; stroke-dashoffset: 0; }
}

.kicker {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-brand);
}
.display {
  margin: 0;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 800;
  font-size: clamp(26px, 8vw, 34px);
  line-height: 1.15;
  letter-spacing: -.03em;
  overflow-wrap: anywhere;
  min-width: 0;
}
.display--sm { font-size: clamp(24px, 7vw, 30px); }
.display__mark {
  color: var(--color-brand);
  box-decoration-break: clone;
}
.lede {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-ink-2);
}

.dock {
  margin-top: auto;
  padding-top: 12px;
  position: relative;
  z-index: 8;
}
.dock--split {
  display: flex;
  gap: 10px;
  align-items: center;
}
.cta {
  appearance: none;
  border: 0;
  cursor: pointer;
  position: relative;
  z-index: 8;
  width: 100%;
  min-height: var(--tap);
  padding: 14px 18px;
  border-radius: var(--radius);
  background: var(--color-brand);
  color: var(--color-on-brand);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  -webkit-tap-highlight-color: transparent;
  box-shadow: none;
  transition: background .15s ease, opacity .15s ease;
}
.cta__go {
  display: block;
  transition: transform .2s var(--ease);
}
.cta:hover .cta__go,
.cta:active .cta__go { transform: translateX(3px); }
.cta:hover { background: var(--color-brand-2); }
.cta:active { transform: scale(.98); }
.cta:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 3px; }
.cta[disabled] {
  background: var(--color-line);
  color: var(--color-ink-3);
  box-shadow: none;
  cursor: not-allowed;
}
.ghost {
  appearance: none; border: 0; background: none; cursor: pointer;
  color: var(--color-ink-3); font-size: 14px; padding: 12px 8px;
  -webkit-tap-highlight-color: transparent;
}

/* ── Question ──────────────────────────────────────────────────── */
.qhead { margin-bottom: 16px; min-width: 0; }
.qhead__idx {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-ink-3);
  margin-bottom: 8px;
}
.qhead__title {
  margin: 0;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 800;
  font-size: clamp(20px, 5.6vw, 24px);
  line-height: 1.25;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
  min-width: 0;
}
.qhead__hint {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--color-ink-3);
}

.keys {
  margin-top: 4px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-content: start;
}
.key {
  appearance: none;
  cursor: pointer;
  width: 100%;
  min-height: 132px;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  text-align: left;
  padding: 14px 14px 12px;
  border-radius: 18px;
  border: 1.5px solid var(--color-line);
  background: oklch(0.99 0.005 250 / .96);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s var(--ease), box-shadow .15s ease;
}
.key:hover { border-color: var(--color-brand); box-shadow: 0 8px 20px -14px oklch(0.40 0.12 250 / .45); }
.key:active { transform: scale(.985); }
.key:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.key__ico-wrap {
  width: 56px; height: 56px;
  border-radius: 14px;
  overflow: hidden;
  flex: 0 0 auto;
  background: #eef5fc;
  display: grid;
  place-items: center;
}
.key__ico {
  width: 48px; height: 48px;
  object-fit: contain;
  object-position: center;
  display: block;
  transition: transform .22s var(--ease);
}
.key__t {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.3;
  flex: 1;
}
.key__go {
  margin-top: auto;
  color: var(--color-brand);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
}
.key.is-on {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-on-brand);
}
.key.is-on .key__go { color: var(--color-on-brand); }
.key.is-on .key__ico-wrap { background: oklch(1 0 0 / .16); }
.key.is-on .key__ico {
  transform: scale(1.06);
  animation: ico-pop .34s var(--ease);
}
@keyframes ico-pop {
  0% { transform: scale(.86); }
  60% { transform: scale(1.1); }
  100% { transform: scale(1.06); }
}
.key .ripple {
  position: absolute;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 999px;
  background: oklch(0.84 0.12 85 / .55);
  pointer-events: none;
  animation: ripple .5s ease-out forwards;
}
@keyframes ripple {
  to { transform: scale(28); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .key.is-on .key__ico { animation: none; }
  .key .ripple { display: none; }
}

.faces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: auto; }
.face {
  appearance: none; cursor: pointer; min-height: var(--tap);
  border-radius: 16px; border: 1.5px solid var(--color-line);
  background: oklch(0.99 0.005 250); font-weight: 600;
}
.face.is-on { background: var(--color-brand); color: var(--color-on-brand); border-color: var(--color-brand); }

.chip-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  appearance: none; cursor: pointer;
  padding: 12px 14px; border-radius: 14px;
  border: 1.5px solid var(--color-line); background: oklch(0.99 0.005 250);
  font-weight: 600; min-height: 44px;
}
.chip.is-on { background: var(--color-brand); color: var(--color-on-brand); border-color: var(--color-brand); }

.stars { display: flex; gap: 6px; margin-top: auto; }
.star { flex: 1; appearance: none; border: 0; background: none; cursor: pointer; color: var(--color-line); padding: 8px; }
.star svg { width: 100%; max-width: 40px; fill: currentColor; }
.star.is-on { color: var(--color-gold); }

.nps { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 4px; margin-top: auto; }
.nps__cell {
  appearance: none; cursor: pointer; aspect-ratio: 1;
  border-radius: 8px; border: 1px solid var(--color-line);
  background: oklch(0.99 0.005 250); font-size: 12px; font-weight: 700;
  min-width: 0;
}
.nps__cell.is-on { background: var(--color-brand); color: var(--color-on-brand); border-color: var(--color-brand); }

/* ── Done ──────────────────────────────────────────────────────── */
.pane--done .dock { margin-top: auto; }
.auto {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--color-ink-3);
  text-align: center;
}
.auto__n {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--color-brand);
}

@media (max-width: 899px) {
  html, body {
    height: 100svh;
    max-height: 100svh;
    overflow: hidden;
  }
  .shell {
    height: 100svh;
    max-height: 100svh;
    min-height: 100svh;
    overflow: hidden;
  }
  .stage {
    flex: 1;
    min-height: 0;
  }
  .pane.is-active {
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .pane--intro.is-active,
  .pane--done.is-active {
    overflow: hidden;
  }
  .pane--intro,
  .pane--done {
    padding-bottom: 0;
  }
  .pane--intro .dock,
  .pane--done .dock {
    margin-top: auto;
    padding: 16px 0 8px;
    background: var(--color-paper);
  }
  .pane--intro .foot,
  .pane--done .foot {
    padding-top: 0;
  }
  .pane--q .dock--split { display: none; }
  .pane--q { background: var(--color-brand-soft); }
  .qhead { margin-bottom: 10px; }
  .key {
    min-height: 0;
    padding: 14px;
    gap: 8px;
    background: var(--color-paper);
  }
  .key__ico-wrap { width: 52px; height: 52px; border-radius: 14px; }
  .key__ico { width: 44px; height: 44px; }
  .key__t { font-size: 14px; }
  .keys { gap: 8px; }
}

@media (max-height: 700px) {
  .notice { padding-top: 4px; }
  .ledger { margin-top: 14px; padding: 12px 14px; }
  .facts { margin-top: 12px; }
  .pane--intro .lede,
  .pane--done .lede { margin-top: 8px; font-size: 13px; }
  .pane--intro .display,
  .pane--done .display { font-size: clamp(20px, 5.4vw, 24px); }
}

@media (hover: hover) and (pointer: fine) {
  .key:hover .key__ico { transform: scale(1.06); }
  .ghost:hover { color: var(--color-ink); }
}

@media (min-width: 900px) {
  html, body { overflow-x: hidden; }
  body {
    background: oklch(0.96 0.012 245);
  }
  .shell {
    max-width: 430px;
    min-height: calc(100dvh - 48px);
    margin: 24px auto;
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
      0 0 0 1px var(--color-line),
      0 24px 64px -28px oklch(0.32 0.05 245 / .18);
  }
  .mast {
    padding: 16px 28px 10px;
    grid-template-columns: 48px 1fr auto;
  }
  body.is-intro .mast,
  body.is-done .mast {
    grid-template-columns: 1fr;
    padding: 18px 28px 14px;
  }
  .mast__logo { height: 26px; }
  .story { padding: 0 28px 12px; }
  .stage { min-height: 640px; }
  .pane {
    padding: 8px 28px 28px;
  }
  .pane--intro .display,
  .pane--done .display { font-size: 26px; }
  .pane--intro .lede,
  .pane--done .lede { font-size: 15px; }
  .pane--q {
    max-width: 860px;
    width: 100%;
    margin-inline: auto;
  }
  .pane--q .keys {
    gap: 16px;
    margin-top: 8px;
    max-width: 760px;
  }
  .pane--q .key {
    min-height: 168px;
    padding: 22px 22px 18px;
    border-radius: 22px;
    font-size: 17px;
  }
  .key__ico-wrap {
    width: 88px;
    height: 88px;
    border-radius: 20px;
  }
  .key__ico {
    width: 76px;
    height: 76px;
  }
  .key__go { font-size: 22px; }
  .qhead__title { font-size: 28px; max-width: 28ch; }
  .dock--split { max-width: 480px; }
  .cta { min-height: 56px; font-size: 17px; }
}