/* Harmon Lively component styles. Copy of _DOCS/brand-kit/components/bundle.css with variables renamed to --hl-*. Scoped under .hl. */
.hl { font-family: var(--hl-font-sans, sofia-pro, "Helvetica Neue", Arial, sans-serif); color: var(--hl-charcoal, #2b2c2e); font-size: 17px; line-height: 1.7; }
.hl *, .hl *::before, .hl *::after { box-sizing: border-box; }
.hl :focus-visible { outline: 2px solid var(--hl-focus, #2f5468); outline-offset: 2px; }
.hl .on-navy :focus-visible, .hl.on-navy :focus-visible { outline-color: var(--hl-rose-light, #e0baae); }

/* Button */
.hl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 18px 32px; border: 1px solid transparent; border-radius: var(--hl-radius-none, 0); font: 500 14px/1 var(--hl-font-sans, sofia-pro, "Helvetica Neue", Arial, sans-serif); letter-spacing: 2px; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.hl-btn--primary { background: var(--hl-navy, #2f5468); color: var(--hl-white, #fff); }
.hl-btn--primary:hover { background: var(--hl-navy-deep, #1c323e); }
.hl-btn--secondary { background: var(--hl-rose, #d7a697); color: var(--hl-charcoal, #2b2c2e); }
.hl-btn--secondary:hover { background: var(--hl-beige, #f4f0ef); border-color: var(--hl-rose, #d7a697); }
.hl-btn--link { min-height: 0; padding: 0 0 4px; background: none; color: var(--hl-mauve, #7a5f57); border-bottom: 1px solid var(--hl-rose, #d7a697); }
.hl-btn--link:hover { color: var(--hl-navy, #2f5468); }
.on-navy .hl-btn--link { color: var(--hl-rose-light, #e0baae); }

/* Section heading */
.hl-eyebrow { display: flex; align-items: center; gap: 16px; margin: 0 0 16px; font: 500 14px/1.4 var(--hl-font-sans, sofia-pro, "Helvetica Neue", Arial, sans-serif); letter-spacing: 3px; text-transform: uppercase; color: var(--hl-mauve, #7a5f57); }
.hl-eyebrow::after { content: ""; width: var(--hl-dash-width, 40px); height: 1px; background: var(--hl-rose, #d7a697); }
.on-navy .hl-eyebrow { color: var(--hl-rose-light, #e0baae); }
.hl-title { margin: 0 0 24px; font: 400 44px/1.2 var(--hl-font-serif, freight-big-pro, Georgia, serif); color: var(--hl-navy, #2f5468); }
.on-navy .hl-title { color: var(--hl-white, #fff); }
.hl-answer { max-width: 640px; margin: 0; color: var(--hl-charcoal, #2b2c2e); }
.on-navy .hl-answer { color: var(--hl-white, #fff); }

/* Program card */
.hl-card { display: flex; flex-direction: column; gap: 16px; padding: 32px; background: var(--hl-blush, #f8ece8); border-radius: var(--hl-radius-none, 0); }
.hl-card__meta { margin: 0; font: 600 13px/1.4 var(--hl-font-sans, sofia-pro, "Helvetica Neue", Arial, sans-serif); letter-spacing: 2px; text-transform: uppercase; color: var(--hl-mauve, #7a5f57); }
.hl-card__title { margin: 0; font: 400 30px/1.3 var(--hl-font-serif, freight-big-pro, Georgia, serif); color: var(--hl-navy, #2f5468); }
.hl-card__body { margin: 0; }
.hl-card__list { margin: 0; padding: 0; list-style: none; }
.hl-card__list li { position: relative; padding-left: 24px; margin-bottom: 8px; }
.hl-card__list li::before { content: ""; position: absolute; left: 0; top: .8em; width: 12px; height: 1px; background: var(--hl-rose, #d7a697); }
.hl-card__price { margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--hl-hairline, #e4dad6); font-size: 15px; color: var(--hl-slate, #5c5d61); }
.hl-card__price strong { font: 400 26px/1 var(--hl-font-serif, freight-big-pro, Georgia, serif); color: var(--hl-navy, #2f5468); margin-left: 6px; }

/* Process steps */
.hl-steps__tabs { display: flex; gap: 0; border-bottom: 1px solid var(--hl-hairline, #e4dad6); margin-bottom: 32px; }
.hl-steps__tab { flex: 1; padding: 16px 8px; background: none; border: 0; border-bottom: 2px solid transparent; font: 600 14px/1.2 var(--hl-font-sans, sofia-pro, "Helvetica Neue", Arial, sans-serif); letter-spacing: 2px; text-transform: uppercase; color: var(--hl-slate, #5c5d61); cursor: pointer; }
.hl-steps__tab[aria-selected="true"] { color: var(--hl-navy, #2f5468); border-bottom-color: var(--hl-rose, #d7a697); }
.hl-steps__num { display: block; font: italic 400 28px/1 var(--hl-font-serif, freight-big-pro, Georgia, serif); color: var(--hl-mauve, #7a5f57); margin-bottom: 8px; letter-spacing: 0; }
.hl-steps__panel h4 { margin: 0 0 8px; font: 500 22px/1.4 var(--hl-font-serif, freight-big-pro, Georgia, serif); color: var(--hl-navy, #2f5468); }
.hl-steps__panel p { margin: 0 0 16px; max-width: 640px; }

/* Wave divider */
.hl-wave { display: block; width: 100%; height: var(--hl-wave-height, 80px); }

/* Slot picker */
.hl-slots { max-width: 560px; }
.hl-slots__legend { margin: 0 0 8px; font: 500 15px/1.4 var(--hl-font-sans, sofia-pro, "Helvetica Neue", Arial, sans-serif); color: var(--hl-charcoal, #2b2c2e); }
.hl-slots__days { display: flex; gap: 8px; margin-bottom: 16px; overflow-x: auto; }
.hl-slots__day { min-width: 72px; padding: 10px 8px; background: var(--hl-white, #fff); border: 1px solid var(--hl-slate, #5c5d61); border-radius: var(--hl-radius-none, 0); font: 500 13px/1.3 var(--hl-font-sans, sofia-pro, "Helvetica Neue", Arial, sans-serif); color: var(--hl-charcoal, #2b2c2e); text-align: center; cursor: pointer; }
.hl-slots__day[aria-pressed="true"] { background: var(--hl-navy, #2f5468); border-color: var(--hl-navy, #2f5468); color: var(--hl-white, #fff); }
.hl-slots__times { display: flex; flex-wrap: wrap; gap: 8px; }
.hl-slots__time { padding: 10px 18px; background: var(--hl-white, #fff); border: 1px solid var(--hl-slate, #5c5d61); border-radius: var(--hl-radius-pill, 999px); font: 500 14px/1 var(--hl-font-sans, sofia-pro, "Helvetica Neue", Arial, sans-serif); color: var(--hl-charcoal, #2b2c2e); cursor: pointer; }
.hl-slots__time[aria-pressed="true"] { background: var(--hl-rose, #d7a697); border-color: var(--hl-rose, #d7a697); color: var(--hl-charcoal, #2b2c2e); }
.hl-slots__time:disabled { color: var(--hl-slate, #5c5d61); border-style: dashed; text-decoration: line-through; cursor: not-allowed; }
.hl-slots__note { margin: 16px 0 0; font-size: 14px; color: var(--hl-slate, #5c5d61); }
.hl-badge { display: inline-block; padding: 4px 12px; border-radius: var(--hl-radius-pill, 999px); font: 600 12px/1.4 var(--hl-font-sans, sofia-pro, "Helvetica Neue", Arial, sans-serif); letter-spacing: 1px; text-transform: uppercase; border: 1px solid currentColor; }
.hl-badge--requested { color: var(--hl-mauve, #7a5f57); }
.hl-badge--confirmed { color: var(--hl-success, #2e6b57); }
.hl-badge--declined { color: var(--hl-danger, #9e3b2e); }

/* FAQ */
.hl-faq { border-top: 1px solid var(--hl-hairline, #e4dad6); }
.hl-faq details { border-bottom: 1px solid var(--hl-hairline, #e4dad6); }
.hl-faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; list-style: none; cursor: pointer; font: 500 22px/1.4 var(--hl-font-serif, freight-big-pro, Georgia, serif); color: var(--hl-navy, #2f5468); }
.hl-faq summary::-webkit-details-marker { display: none; }
.hl-faq summary::after { content: "+"; font: 300 28px/1 var(--hl-font-sans, sofia-pro, "Helvetica Neue", Arial, sans-serif); color: var(--hl-mauve, #7a5f57); }
.hl-faq details[open] summary::after { content: "\2212"; }
.hl-faq details p { margin: 0 0 24px; max-width: 680px; }
.hl-card .hl-btn--link { align-self: flex-start; }