

:root {
  --h5-max: 1320px;
  --h5-g: clamp(20px, 4vw, 60px);
  --h5-y: 128px;
  --h5-bg: #0f1011;
  --h5-card: #151719;
  --h5-hair: rgba(255, 255, 255, 0.075);
  --h5-ink: #f4f2ec;
  --h5-ink-2: rgba(244, 242, 236, 0.68);
  --h5-ink-3: rgba(244, 242, 236, 0.46);
  --h5-accent: #7fd3a4;
  --h5-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  
  --t-display: 80px;
  --t-h2: 56px;
  --t-num: 40px;
  --t-h3: 24px;
  --t-lead: 18px;
  --t-body: 16px;
  --t-small: 14px;
  --t-micro: 12px;
}
@media screen and (max-width: 767px) {
  :root { --h5-y: 80px; --t-display: 48px; --t-h2: 36px; --t-num: 32px; --t-h3: 22px; }
}


.text-italics, h1 em, h2 em, h3 em, h1 i, h2 i, .headingitalic, .large-heading em { font-style: normal; }  
h1 .text-italics, h2 .text-italics, h3 .text-italics, h4 .text-italics, .large-heading .text-italics,
h1 em, h2 em, h3 em { font-family: inherit; font-weight: inherit; letter-spacing: inherit; }
h1, .headingitalic { font-weight: 500; letter-spacing: -0.035em; }
h2, .large-heading { font-weight: 500; letter-spacing: -0.03em; }
h3 { font-weight: 500; letter-spacing: -0.015em; }

.p-60, .text-60, .financial-card-description, .cp-stat b, .art-call-hero, .h4-stat-v, .cp-plan-type span, .cp-rail-fig { font-weight: 400; }
body { font-kerning: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }


.cpc {
  --serif: "Cashpad Display", ui-sans-serif, system-ui, sans-serif;
  --sans: "Cashpad Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "Cashpad Mono", ui-monospace, Menlo, monospace;
}
.cpc .cpc-hero { font-weight: 500; letter-spacing: -0.03em; }


.h5-wrap { box-sizing: border-box; width: 100%; max-width: var(--h5-max); margin-inline: auto; }
.h5-arrow { flex: 0 0 auto; transition: transform 0.32s var(--h5-ease); }

.h5-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; height: 44px; padding: 0 20px;
  border: 1px solid transparent; border-radius: 10px; background: var(--h5-ink); color: var(--h5-bg); font-family: "Cashpad Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 15px; font-weight: 500; letter-spacing: 0; line-height: 1; text-decoration: none; white-space: nowrap; flex: none;
  transition: background-color 0.16s var(--h5-ease), border-color 0.16s var(--h5-ease), color 0.16s var(--h5-ease);
}
.h5-btn:hover { background: #fff; color: var(--h5-bg); text-decoration: none; }
.h5-btn--line { background: transparent; border-color: rgba(255, 255, 255, 0.18); color: var(--h5-ink); }
.h5-btn--line:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.h5-btn:active { transform: scale(0.98); }
.h5-btn:hover .h5-arrow, .h5-link:hover .h5-arrow { transform: translateX(3px); }
.h5-link {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 0; color: var(--h5-ink); font-size: 15px; font-weight: 500;
  line-height: 1.2; text-decoration: none; white-space: nowrap; transition: color 0.16s var(--h5-ease);
}
.h5-link:hover { color: var(--h5-accent); text-decoration: none; }
.h5-btn:focus-visible, .h5-link:focus-visible {
  outline: 2px solid var(--h5-accent); outline-offset: 3px; border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) { .h5-arrow, .h5-btn, .h5-link { transition: none; } }
