:root {
  --ink: #f4f1eb;
  --muted: #c7d0d6;
  --navy: #041d34;
  --navy-deep: #031426;
  --gold: #ddbd5b;
  --line: rgba(221, 189, 91, .52);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--navy-deep); color: var(--ink); font-family: "Times New Roman", Times, serif; }
.pkm-page { isolation: isolate; min-height: 100vh; position: relative; background: #031a30 url("/images/pkmnotes-pokemon-background.png") center top / cover fixed; }
.pkm-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 20, 40, .85), rgba(0, 29, 52, .76) 45%, rgba(0, 23, 43, .9)); }
.pkm-shell { width: min(960px, calc(100% - 42px)); margin: auto; padding: 18px 0 26px; }
.pkm-header { height: 34px; border-top: 1px solid var(--line); position: relative; }
.login-trigger { position: absolute; right: 0; top: 10px; border: 1px solid #f1d982; border-radius: 0; background: var(--gold); color: #0b2338; min-width: 122px; padding: .7rem 1.45rem; font: 700 .8rem "Times New Roman", Times, serif; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; box-shadow: 0 5px 15px rgba(0, 0, 0, .25); }

.hero { text-align: center; max-width: 690px; margin: 0 auto 20px; }
.site-title { color: var(--gold); font-size: clamp(1.72rem, 3vw, 2.42rem); font-weight: bold; letter-spacing: .08em; margin: 0; padding-top: 3px; }
.subtitle { color: #f1efe8; font-size: clamp(1rem, 1.7vw, 1.3rem); margin: .38rem 0 .9rem; }
.hero-copy { max-width: 590px; font-size: clamp(.88rem, 1.25vw, 1rem); line-height: 1.43; margin: 0 auto 1.05rem; }
.hero h1 { font-size: clamp(1.9rem, 3.7vw, 3.12rem); line-height: 1.02; margin: 0; letter-spacing: -.015em; }
.hero h1 sup { font-size: .42em; }.hero h1 span { display: block; color: var(--gold); font-size: .62em; margin-top: .17em; font-weight: normal; letter-spacing: .01em; }
.value-flow { display: flex; gap: 30px; align-items: center; justify-content: center; margin: 22px 0 10px; }.value-flow div { display: grid; gap: 5px; min-width: 175px; }.value-flow strong { font-size: clamp(1.48rem, 3vw, 2.36rem); color: var(--gold); }.value-flow span { color: var(--muted); font-size: .82rem; }.value-flow .arrow { font-size: 3rem; line-height: .75; color: var(--gold); }.interest { font-size: .97rem; font-weight: bold; letter-spacing: .01em; margin: .65rem 0 0; }

.comparison { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 19px 8px 18px; text-align: center; }.comparison h2, .terms h2 { font-size: clamp(1.18rem, 1.9vw, 1.52rem); margin: 0; }.comparison > p { margin: .3rem 0 15px; color: var(--gold); font-size: .88rem; }.bars { display: grid; gap: 11px; text-align: left; max-width: 650px; margin: auto; }.bar-row { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: center; font-size: .88rem; }.bar-value { display: flex; align-items: center; gap: 12px; min-width: 0; }.bar-row i { height: 25px; width: var(--bar); display: block; flex: 0 0 var(--bar); }.bar-value strong { color: #f5efe2; font-size: .9rem; white-space: nowrap; }.gold-bar { background: linear-gradient(90deg, #ad8531, #efd878); }.silver-bar { background: linear-gradient(90deg, #a6b7ca, #edf2f5); }.chart-caption { font-size: .77rem !important; color: var(--muted) !important; margin: 13px 0 0 !important; }

.terms { border: 1px solid rgba(221, 189, 91, .82); border-radius: 12px; background: rgba(30, 64, 90, .86); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); margin: 22px auto; padding: 13px 24px; max-width: 900px; }.terms h2 { color: var(--gold); }dl { margin: 9px 0 0; }dl div { display: grid; grid-template-columns: 34% 1fr; border-top: 1px solid rgba(255, 255, 255, .13); padding: 7px 0; font-size: .88rem; }dt { color: #d7e0e4; }dd { margin: 0; }.gold-term { color: var(--gold); font-weight: bold; }.contact { text-align: center; padding: 1px 0 17px; }.contact p { margin: 0 0 5px; font-size: .9rem; color: var(--muted); }.contact a { color: var(--gold); font-size: clamp(1.04rem, 1.7vw, 1.35rem); font-weight: bold; text-decoration: none; }.contact a:hover, .disclaimer a { color: var(--gold); }.disclaimer { border-top: 1px solid var(--line); font-size: .66rem; line-height: 1.24; color: #e4e8e9; padding-top: 12px; }.disclaimer p { margin: .42rem 0; }

.login-modal { display: none; position: fixed; z-index: 5; inset: 0; background: rgba(0, 8, 18, .83); padding: 20px; place-items: center; }.login-modal.is-open { display: grid; }.login-card { position: relative; width: min(370px, 100%); background: linear-gradient(145deg, #102844, #091d35); border: 1px solid var(--gold); padding: 27px 29px 29px; box-shadow: 0 24px 80px rgba(0, 0, 0, .66); }.login-card h2 { margin: 0 28px 23px 0; font-size: 1.5rem; line-height: 1.1; }.modal-close { position: absolute; right: 12px; top: 5px; border: 0; background: none; color: #fff; font-size: 2rem; cursor: pointer; }.login-card form { display: grid; gap: 18px; }.login-card label { display: grid; gap: 8px; font: 700 .82rem "Times New Roman", Times, serif; letter-spacing: .1em; text-transform: uppercase; }.login-card input { width: 100%; padding: .8rem .75rem; border: 1px solid #92a7b6; border-radius: 2px; background: #e9edfb; color: #0a1520; font: .94rem "Times New Roman", Times, serif; }.login-card input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }.login-card button[type="submit"] { width: 100%; border: 1px solid #f1d982; border-radius: 0; background: var(--gold); color: #092038; padding: .78rem 1rem; font: 700 .9rem "Times New Roman", Times, serif; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; box-shadow: 0 4px 13px rgba(0, 0, 0, .25); }.login-result { min-height: 24px; margin-top: 14px; }.login-error { color: #ffd0d0; font-family: "Times New Roman", Times, serif; font-size: .95rem; }

@media (max-width: 650px) {
  .pkm-page { background-attachment: scroll; }
  .pkm-shell { width: min(100% - 26px, 960px); }
  .desktop-only { display: none; }
  .pkm-header { height: 42px; }
  .login-trigger { min-width: 0; padding: .15rem 0; border: 0; background: transparent; box-shadow: none; color: var(--gold); font-size: .56rem; }
  .value-flow { gap: 10px; }
  .value-flow div { min-width: 0; }
  .value-flow .arrow { font-size: 3rem; }
  .value-flow span { font-size: .72rem; }
  .bars { max-width: 100%; }
  .bar-row { grid-template-columns: 72px minmax(0, 1fr); gap: 7px; }
  .bar-value { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .bar-row i { width: var(--bar); max-width: 100%; min-width: 0; height: 22px; flex: none; }
  .bar-value strong { font-size: .79rem; }
  .terms { padding: 14px 13px; }
  .terms dl div { grid-template-columns: 39% 1fr; gap: 5px; font-size: .82rem; }
  .disclaimer { font-size: .64rem; }
  .login-card { padding: 25px 24px; }
}