:root {
  --color-primary: #724bdb !important;
  --color-primary-contrast: #fff !important;
  --color-primary-hover: #6540c7 !important;
  --color-primary-active: #5935b3 !important;
  --color-primary-dark-1: #6540c7 !important;
  --color-primary-dark-2: #5935b3 !important;
  --color-primary-dark-3: #4c2c9f !important;
  --color-primary-dark-4: #3f2485 !important;
  --color-primary-dark-5: #2c195d !important;
  --color-primary-dark-6: #1a0f38 !important;
  --color-primary-dark-7: #0b0618 !important;
  --color-primary-light-1: #805ee0 !important;
  --color-primary-light-2: #8e71e5 !important;
  --color-primary-light-3: #9c84e9 !important;
  --color-primary-light-4: #aa97ed !important;
  --color-primary-light-5: #c6b8f3 !important;
  --color-primary-light-6: #e2dcf9 !important;
  --color-primary-light-7: #f4f1fd !important;
  --color-primary-alpha-10: #724bdb19 !important;
  --color-primary-alpha-20: #724bdb33 !important;
  --color-primary-alpha-30: #724bdb4c !important;
  --color-primary-alpha-40: #724bdb66 !important;
  --color-primary-alpha-50: #724bdb80 !important;
  --color-primary-alpha-60: #724bdb99 !important;
  --color-primary-alpha-70: #724bdbb3 !important;
  --color-primary-alpha-80: #724bdbcc !important;
  --color-primary-alpha-90: #724bdbe6 !important;
}
.hop-home { max-width: 1120px; margin: 0 auto; padding: 5.5rem 2rem 4rem; }
.hop-home h1, .hop-home h2, .hop-home h3 { color: var(--color-text); letter-spacing: -0.035em; }
.hop-home p { color: var(--color-text-light-2); line-height: 1.65; }
.hop-eyebrow { color: var(--color-primary) !important; font-size: .78rem; font-weight: 700; letter-spacing: .13em; margin: 0 0 1rem; text-transform: uppercase; }
.hop-hero { align-items: center; display: grid; gap: 5rem; grid-template-columns: 1.25fr .75fr; min-height: 390px; }
.hop-hero h1 { font-size: clamp(2.75rem, 6vw, 4.8rem); line-height: 1.02; margin: 0; max-width: 750px; }
.hop-lede { font-size: 1.18rem; margin: 1.5rem 0 2rem; max-width: 650px; }
.hop-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.hop-actions .button, .hop-closing .button { margin: 0; }
.hop-hero-mark { display: grid; justify-items: center; position: relative; }
.hop-hero-mark img { filter: drop-shadow(0 18px 24px color-mix(in srgb, var(--color-primary) 22%, transparent)); width: min(100%, 220px); }
.hop-state-card { align-items: center; background: var(--color-box-body); border: 1px solid var(--color-secondary); border-radius: 8px; box-shadow: 0 12px 28px rgba(0,0,0,.12); color: var(--color-text); display: flex; font-size: .85rem; gap: .55rem; margin-top: -1rem; padding: .72rem .9rem; position: relative; }
.hop-state-dot { background: #2da44e; border-radius: 50%; height: .55rem; width: .55rem; }
.hop-intro { border-top: 1px solid var(--color-secondary); margin-top: 4.5rem; max-width: 780px; padding-top: 4.5rem; }
.hop-intro h2, .hop-flow h2, .hop-closing h2 { font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1.12; margin: 0 0 1.1rem; }
.hop-intro p { font-size: 1.12rem; }
.hop-benefits { display: grid; gap: 1px; grid-template-columns: repeat(3, 1fr); margin: 5rem 0; background: var(--color-secondary); border: 1px solid var(--color-secondary); }
.hop-benefits article { background: var(--color-box-body); padding: 2rem; }
.hop-number { color: var(--color-primary); font-size: .82rem; font-weight: 700; letter-spacing: .1em; }
.hop-benefits h2 { font-size: 1.35rem; margin: 3.5rem 0 .8rem; }
.hop-benefits p { font-size: .97rem; margin: 0; }
.hop-flow { display: grid; gap: 4rem; grid-template-columns: .8fr 1.2fr; padding: 2rem 0 5rem; }
.hop-flow h2 { font-size: 2.3rem; }
.hop-flow ol { border-left: 1px solid var(--color-secondary); list-style: none; margin: 0; padding: 0 0 0 2rem; }
.hop-flow li { display: grid; gap: 1rem; grid-template-columns: 2rem 1fr; margin: 0 0 2rem; position: relative; }
.hop-flow li:last-child { margin-bottom: 0; }
.hop-flow li > span { align-items: center; background: var(--color-box-body); border: 1px solid var(--color-primary); border-radius: 50%; color: var(--color-primary); display: flex; font-size: .8rem; font-weight: 700; height: 2rem; justify-content: center; margin-left: -3.05rem; }
.hop-flow h3 { font-size: 1.12rem; margin: .25rem 0 .3rem; }
.hop-flow li p { margin: 0; }
.hop-closing { align-items: center; background: color-mix(in srgb, var(--color-primary) 9%, var(--color-box-body)); border: 1px solid color-mix(in srgb, var(--color-primary) 32%, var(--color-secondary)); display: flex; justify-content: space-between; gap: 2rem; padding: 2.5rem; }
.hop-closing h2 { font-size: 2rem; margin-bottom: 0; max-width: 540px; }
@media (max-width: 760px) { .hop-home { padding: 3.5rem 1.25rem; } .hop-hero, .hop-flow { gap: 2.5rem; grid-template-columns: 1fr; } .hop-hero-mark { justify-items: start; } .hop-hero-mark img { width: 145px; } .hop-benefits { grid-template-columns: 1fr; } .hop-benefits h2 { margin-top: 1.5rem; } .hop-closing { align-items: flex-start; flex-direction: column; } }