/* ============================================================
   DARTEE GOLF, How It Works page
   Layered on styles.css. Same design system.
   ============================================================ */

/* hero */
.hw-hero { position: relative; background: radial-gradient(120% 130% at 80% 0%, var(--green-700) 0%, var(--green-900) 60%); color: var(--cream-50); overflow: hidden; }
.hw-hero::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 2px, transparent 2px 9px); pointer-events: none; }
.hw-hero__inner { position: relative; z-index: 2; padding: 64px 0 58px; text-align: center; }
.hw-hero .eyebrow { color: var(--gold-100); }
.hw-hero h1 { font-family: var(--ff-display); text-transform: uppercase; font-size: clamp(42px, 6.4vw, 84px); line-height: .92; margin: 0 0 14px; color: var(--cream-50); }
.hw-hero p { color: rgba(243,236,219,.82); font-size: clamp(16px, 2vw, 20px); max-width: 56ch; margin: 0 auto; }
.hw-hero__time { margin-top: 20px; display: inline-flex; align-items: center; gap: 9px; background: rgba(200,162,75,.16); border: 1px solid rgba(200,162,75,.4); color: var(--gold-100); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; padding: 8px 16px; border-radius: 999px; }
.hw-hero__time svg { width: 16px; height: 16px; }
.hw-hero__cta { margin-top: 24px; }
.hw-hero__cta .btn { display: inline-flex; align-items: center; gap: 9px; }

/* steps */
.hw-steps { padding: 30px 0 20px; }
.hstep { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 40px 0; }
.hstep + .hstep { border-top: 1px solid var(--line); }
.hstep.reverse .hstep__media { order: -1; }
.hstep__media { position: relative; }
.hstep__media .frame { aspect-ratio: 5/4; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-md); background: var(--cream-100); }
.hstep__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hstep__num { position: absolute; top: -18px; left: -14px; width: 64px; height: 64px; border-radius: 50%; background: var(--gold); color: var(--green-900); font-family: var(--ff-display); font-size: 30px; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); border: 3px solid var(--cream-50); z-index: 2; }
.hstep__kicker { font-weight: 800; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-600); margin: 0 0 10px; }
.hstep h2 { font-family: var(--ff-display); text-transform: uppercase; font-size: clamp(28px, 3.4vw, 44px); line-height: .98; margin: 0 0 14px; color: var(--green-900); }
.hstep p { font-size: 16.5px; color: var(--ink-soft); line-height: 1.6; margin: 0 0 16px; max-width: 48ch; }
.hstep ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.hstep li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; color: var(--ink); }
.hstep li svg { width: 19px; height: 19px; color: var(--green-600); flex: none; margin-top: 2px; }

/* tip callout */
.hw-tip { background: var(--green-800); border: 1px solid var(--green-700); border-left: 4px solid var(--gold); border-radius: var(--r-md); padding: 16px 20px; margin-top: 18px; font-size: 14.5px; color: var(--cream-50); display: flex; gap: 12px; align-items: flex-start; }
.hw-tip svg { width: 20px; height: 20px; color: var(--gold); flex: none; margin-top: 1px; }
.hw-tip b { color: var(--gold-100); }

/* quick-spec strip */
.hw-specs { background: var(--green-900); color: var(--cream-50); }
.hw-specs__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; padding: 40px 0; }
.hw-spec { text-align: center; }
.hw-spec__n { font-family: var(--ff-display); font-size: clamp(28px, 3vw, 40px); color: var(--gold); line-height: 1; }
.hw-spec__l { font-size: 13px; color: rgba(243,236,219,.78); margin-top: 8px; font-weight: 600; }

/* video band reuse styles from styles.css (.videoband) */

@media (max-width: 900px) {
  .hstep { grid-template-columns: 1fr; gap: 26px; padding: 32px 0; }
  .hstep.reverse .hstep__media { order: 0; }
  .hw-specs__row { grid-template-columns: 1fr 1fr; gap: 26px 16px; }
}
@media (max-width: 560px) {
  .hstep__num { width: 54px; height: 54px; font-size: 25px; top: -14px; left: -8px; }
  .hw-specs__row { grid-template-columns: 1fr 1fr; }
}