/* ------------------------------------------------------------------
   Piggy Bank landing page, built from the Claude Design file
   "Landing Page.dc.html" against the HyperFrames design system.
   Measurements follow the design; component sizes (Button, Badge,
   input) match the design system's rendered styles.
   ------------------------------------------------------------------ */

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/instrumentsans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext carries the rupee sign */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/instrumentsans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibmplexmono-400-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibmplexmono-500-latin.woff2) format('woff2');
}

:root {
  --hf-bg: #f6f5f1;
  --hf-surface: #ffffff;
  --hf-surface-2: #eeedea;
  --hf-border: #e0dfdb;
  --hf-border-strong: #d0cfcb;

  --hf-fg: #1a1a1a;
  --hf-fg-secondary: #6b6b6b;
  --hf-fg-tertiary: #999999;
  --hf-heading: #0a0a0a;
  --hf-on-heading: #ffffff;

  --hf-accent-green: #1a7a0a;
  --hf-accent-green-bg: rgba(26, 122, 10, 0.07);
  --hf-accent-green-border: rgba(26, 122, 10, 0.25);

  --hf-font-display: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --hf-font-body: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --hf-font-mono: 'IBM Plex Mono', 'SF Mono', 'Fira Code', monospace;

  --hf-radius-sm: 4px;
  --hf-radius-md: 6px;
  --hf-radius-lg: 8px;
  --hf-radius-xl: 12px;

  --hf-dur-press: 120ms;
  --hf-dur-hover: 150ms;
  --hf-ease: ease;

  --pb-salmon: #f4877f;
  --pb-coin: #f7d64a;
  --danger: oklch(0.52 0.19 27);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* The root carries the page colour too, so overscroll past the footer and
   the area behind mobile browser toolbars match it instead of showing white. */
html {
  background: var(--hf-bg);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--hf-bg);
  color: var(--hf-fg);
  font-family: var(--hf-font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: var(--hf-heading);
  text-decoration: none;
}
a:hover {
  opacity: 0.85;
}

h1,
h2,
h3,
p {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
}

::selection {
  background: rgba(128, 128, 128, 0.2);
}

.icon {
  flex: none;
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}

/* ---------------------------------------------------------- Primitives */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--hf-radius-md);
  font-family: var(--hf-font-body);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    opacity var(--hf-dur-hover) var(--hf-ease),
    border-color var(--hf-dur-hover) var(--hf-ease),
    transform var(--hf-dur-press) var(--hf-ease);
}
.btn-md {
  height: 34px;
  padding: 0 16px;
  font-size: 13px;
}
.btn-lg {
  height: 40px;
  padding: 0 20px;
  font-size: 15px;
}
.btn-primary {
  background: var(--hf-heading);
  border-color: var(--hf-heading);
  color: var(--hf-on-heading);
}
.btn-primary:hover {
  opacity: 0.88;
}
.btn-primary:active {
  transform: scale(0.97);
}
.btn-primary:disabled {
  opacity: 0.5;
  cursor: default;
}
.btn-secondary {
  background: transparent;
  border-color: var(--hf-border);
  color: var(--hf-heading);
}
.btn.is-static {
  cursor: default;
}
.btn .icon {
  font-size: 14px;
}

.badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--hf-radius-sm);
  font-size: 12px;
  font-weight: 500;
  background: var(--hf-accent-green-bg);
  border: 1px solid var(--hf-accent-green-border);
  color: var(--hf-accent-green);
}

.input {
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--hf-border-strong);
  border-radius: var(--hf-radius-md);
  background: var(--hf-surface);
  color: var(--hf-heading);
  font-family: var(--hf-font-body);
  font-size: 15px;
}
.input::placeholder {
  color: var(--hf-fg-tertiary);
}
.input:focus {
  outline: 2px solid var(--hf-heading);
  outline-offset: 1px;
}

.eyebrow {
  font-family: var(--hf-font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hf-fg-secondary);
}

/* ----------------------------------------------------------------- Nav */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: max(20px, env(safe-area-inset-top));
  padding-bottom: 20px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--hf-font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--hf-heading);
}
.brand img {
  width: 30px;
  height: 30px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 14px;
}
.nav-link {
  color: var(--hf-fg-secondary);
}
/* On a phone the section links crowd the button; the page is short enough to scroll. */
@media (max-width: 560px) {
  .nav-link {
    display: none;
  }
}

/* ---------------------------------------------------------------- Hero */

.hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 56px;
  align-items: center;
  padding-top: 48px;
  padding-bottom: 80px;
}
.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.hero-title {
  font-family: var(--hf-font-display);
  font-size: clamp(44px, 6vw, 76px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--hf-heading);
  text-wrap: balance;
}
.hero-lede {
  max-width: 30em;
  font-size: 18px;
  line-height: 1.55;
  color: var(--hf-fg-secondary);
  text-wrap: pretty;
}

.get {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 460px;
  scroll-margin-top: 24px;
}
.waitlist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.waitlist .input {
  flex: 1 1 220px;
  min-width: 0;
}
.waitlist .btn {
  flex: 0 0 auto;
}
@media (max-width: 480px) {
  .waitlist .btn {
    flex: 1 1 100%;
  }
}
.joined {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--hf-border);
  border-radius: var(--hf-radius-md);
  background: var(--hf-surface);
  color: var(--hf-accent-green);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
}
.joined[hidden],
.waitlist[hidden],
.form-error[hidden] {
  display: none;
}
.joined .icon {
  font-size: 18px;
}
.joined b {
  font-weight: 600;
  word-break: break-all;
}
.form-error {
  margin-top: -6px;
  font-size: 13px;
  color: var(--danger);
}
.stores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.stores-label {
  font-size: 13px;
  color: var(--hf-fg-tertiary);
}

.hero-visual {
  display: flex;
  justify-content: center;
}
/* The device is a capture of the design's own mockup at 3×, so it stays sharp.
   Its drop shadow is drawn here rather than baked in, so it follows the
   rounded frame instead of being cut off at the image's edges. Values are
   the design's 0 40px 80px at its 0.8 scale. */
.device {
  width: min(326px, 100%);
  height: auto;
  filter: drop-shadow(0 32px 64px rgba(0, 0, 0, 0.18));
}

/* The live phone is 0.8× of the design's 402px device on desktop, and
   narrower on small screens; the still keeps the same footprint. */
.phone-slot {
  width: min(322px, 100%);
}
.phone-slot .device {
  width: calc(100% + 4px);
  max-width: none;
  margin: -2px;
}
/* The live device draws its own frame shadow. */
.phone-slot.is-live {
  filter: none;
}

/* ------------------------------------------------------------ Sections */

.band {
  border-top: 1px solid var(--hf-border);
}
.band-surface {
  background: var(--hf-surface);
}
.band-dark {
  background: var(--hf-heading);
}
.section {
  padding-top: 96px;
  padding-bottom: 96px;
}
.section-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 640px;
}
.section-title {
  font-family: var(--hf-font-display);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--hf-heading);
  text-wrap: balance;
}
#how,
#math {
  scroll-margin-top: 0;
}

/* How it works */
#how .section {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
}
.step {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  border: 1px solid var(--hf-border);
  border-radius: var(--hf-radius-xl);
  background: var(--hf-bg);
}
.step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--hf-radius-lg);
  color: var(--hf-heading);
  font-size: 22px;
}
.step-num {
  font-family: var(--hf-font-mono);
  font-size: 12px;
  color: var(--hf-fg-tertiary);
}
.step h3 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--hf-heading);
}
.step p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--hf-fg-secondary);
}

/* The math */
.math {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: 56px;
  align-items: start;
}
.math-copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.math-lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--hf-fg-secondary);
  text-wrap: pretty;
}
.ladder {
  overflow: hidden;
  border: 1px solid var(--hf-border);
  border-radius: var(--hf-radius-xl);
  background: var(--hf-surface);
}
.ladder-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--hf-border);
  font-size: 15px;
}
.ladder-row span {
  color: var(--hf-fg-secondary);
}
.ladder-row b {
  font-weight: 600;
  color: var(--hf-heading);
}
.ladder-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 18px;
  background: rgba(26, 122, 10, 0.1);
}
.ladder-total span {
  font-size: 15px;
  font-weight: 500;
  color: var(--hf-heading);
}
.ladder-total b {
  font-family: var(--hf-font-display);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--hf-heading);
}
.formula {
  font-family: var(--hf-font-mono);
  font-size: 13px;
  color: var(--hf-fg-tertiary);
}

.months {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px;
  border: 1px solid var(--hf-border);
  border-radius: var(--hf-radius-xl);
  background: var(--hf-surface);
}
.months-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.months-head h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--hf-heading);
}
.months-head span {
  font-size: 13px;
  color: var(--hf-fg-tertiary);
}
.months-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.month {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 76px;
  align-items: center;
  gap: 12px;
}
.month span {
  font-family: var(--hf-font-mono);
  font-size: 12px;
  color: var(--hf-fg-secondary);
}
.month b {
  text-align: right;
  font-size: 14px;
  font-weight: 600;
  color: var(--hf-heading);
}
.bar {
  height: 20px;
  overflow: hidden;
  border-radius: var(--hf-radius-sm);
  background: var(--hf-surface-2);
}
.bar > div {
  height: 100%;
  border-radius: var(--hf-radius-sm);
  background: var(--pb-salmon);
}
.month.is-last .bar > div {
  background: var(--hf-accent-green);
}

/* Bars grow in, month by month, once the chart scrolls into view. The
   hidden start state only applies when the script is running (.js), so
   the chart is complete without it. */
.js .bar > div {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js .months.is-in .bar > div {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  .js .bar > div {
    transform: none;
    transition: none;
  }
}
.months > p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--hf-fg-secondary);
}

/* Closing CTA */
.closing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-top: 80px;
  padding-bottom: 80px;
}
.closing-copy {
  display: flex;
  align-items: center;
  gap: 24px;
}
.closing-copy img {
  width: 88px;
  height: 88px;
  flex: none;
}
.closing-copy h2 {
  max-width: 14em;
  font-family: var(--hf-font-display);
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--hf-bg);
  text-wrap: balance;
}
.btn-coin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: var(--hf-radius-md);
  background: var(--pb-coin);
  color: var(--hf-heading);
  font-size: 15px;
  font-weight: 600;
}

.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-top: 24px;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  font-size: 13px;
  color: var(--hf-fg-tertiary);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.footer a {
  color: var(--hf-fg-secondary);
}

/* --------------------------------------------------------------- Legal */

.legal {
  max-width: 760px;
  padding-top: 40px;
  padding-bottom: 72px;
}
.legal .section-title {
  margin: 12px 0 8px;
}
.legal-meta {
  font-size: 14px;
  color: var(--hf-fg-tertiary);
}
.legal-summary {
  margin: 32px 0 8px;
  padding: 24px 28px;
  border: 1px solid var(--hf-accent-green-border);
  border-radius: var(--hf-radius-xl);
  background: var(--hf-accent-green-bg);
}
.legal-summary h2 {
  margin: 0 0 8px;
}
.legal section {
  padding-top: 32px;
}
.legal h2 {
  font-family: var(--hf-font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--hf-heading);
  margin-bottom: 10px;
}
.legal h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--hf-heading);
  margin: 18px 0 6px;
}
.legal p,
.legal li {
  font-size: 16px;
  line-height: 1.65;
  color: var(--hf-fg);
  text-wrap: pretty;
}
.legal p + p,
.legal ul + p {
  margin-top: 12px;
}
.legal ul {
  margin: 8px 0 0;
  padding-left: 20px;
}
.legal li + li {
  margin-top: 8px;
}
.legal b {
  font-weight: 600;
  color: var(--hf-heading);
}
.legal a:not(.btn) {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Account deletion form */
.delete-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
  padding: 24px;
  border: 1px solid var(--hf-border);
  border-radius: var(--hf-radius-xl);
  background: var(--hf-surface);
}
.delete-form[hidden],
.delete-done[hidden] {
  display: none;
}
.delete-form .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--hf-heading);
}
.phone-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 8px;
}
.delete-form .input {
  width: 100%;
  font-size: 16px;
}
.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--hf-fg-secondary);
  cursor: pointer;
}
.check input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  flex: none;
  accent-color: var(--hf-heading);
}
.btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #ffffff;
}
.btn-danger:hover {
  opacity: 0.9;
}
.btn-danger:disabled {
  opacity: 0.5;
  cursor: default;
}
.delete-form .form-error {
  margin: 0;
}
.delete-done {
  margin-top: 20px;
}