.hero { overflow: hidden; position: relative; padding: 74px 0 68px; background: #f8f5ff; }.hero-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(330px, .8fr); align-items: center; gap: 60px; }.hero h1 { margin: 0 0 20px; color: #5a4057; font-size: clamp(42px, 5vw, 67px); line-height: 1.15; letter-spacing: 0; }.hero-copy > p:not(.eyebrow) { max-width: 520px; margin: 0; color: var(--text-light); font-size: 17px; }.hero-actions { display: flex; align-items: center; gap: 25px; margin-top: 31px; }.hero-art { position: relative; min-height: 385px; display: flex; align-items: center; justify-content: center; }.hero-art img { position: relative; z-index: 2; width: min(100%, 385px); border-radius: 50%; box-shadow: 0 22px 45px rgba(139,97,138,.16); }.hero-rings { position: absolute; width: 335px; height: 335px; border: 1px solid #d9b8c6; border-radius: 50%; }.hero-rings::after { content: ""; position: absolute; inset: -25px; border: 1px dashed #dfcddc; border-radius: 50%; }.sound-chip { position: absolute; z-index: 3; padding: 8px 12px; border-radius: 4px; color: #76556a; background: #fff; box-shadow: 0 8px 25px rgba(99,72,92,.1); font-size: 13px; font-weight: 700; }.chip-one { top: 54px; left: 0; }.chip-two { right: 0; bottom: 62px; }.trust-strip { border-top: 1px solid #eee8f5; border-bottom: 1px solid #eee8f5; background: #fff; }.trust-list { display: flex; justify-content: center; gap: 70px; padding: 19px 0; color: var(--text-light); font-size: 14px; }.trust-list b { color: var(--primary-dark); }.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 50px; margin-bottom: 38px; }.section-heading h2, .scene-copy h2, .faq-layout h2 { margin: 0; font-size: clamp(30px, 4vw, 42px); line-height: 1.25; }.section-heading > p { max-width: 410px; margin: 0; color: var(--text-light); }.program-section { background: #fff; }.program-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }.program-card { min-height: 270px; padding: 25px; border: 1px solid transparent; transition: transform .2s, box-shadow .2s; }.program-card:hover { transform: translateY(-5px); box-shadow: 0 14px 25px rgba(96,62,91,.1); }.program-card.lavender { background: #efedff; }.program-card.peach { background: #fff0e9; }.program-card.yellow { background: #fff8d9; }.program-card.blue { background: #eaf6fb; }.program-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 50%; color: #8b5a76; background: rgba(255,255,255,.7); font-weight: 700; }.program-card h3 { margin: 28px 0 8px; font-size: 22px; }.program-card p { min-height: 78px; margin: 0; color: var(--text-light); font-size: 14px; }.program-card em { color: var(--primary-dark); font-size: 13px; font-style: normal; font-weight: 700; }.picks-section { background: var(--bg-light); }.pick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }.pick-card { position: relative; min-height: 295px; padding: 28px; border: 1px solid var(--border); background: #fff; }.pick-card.featured { color: #fff; border: 0; background: #90647f; }.pick-number { position: absolute; top: 25px; right: 25px; color: rgba(103,73,95,.19); font-size: 35px; font-weight: 700; }.featured .pick-number { color: rgba(255,255,255,.22); }.tag { margin: 0 0 30px; color: var(--primary); font-size: 13px; font-weight: 700; }.featured .tag { color: #fff0b2; }.pick-card h3 { max-width: 200px; margin: 0 0 13px; font-size: 25px; line-height: 1.3; }.pick-card > p:not(.tag) { margin: 0; color: var(--text-light); font-size: 14px; }.featured > p:not(.tag) { color: rgba(255,255,255,.82); }.duration { position: absolute; bottom: 27px; color: var(--text-muted); font-size: 12px; }.featured .duration { color: rgba(255,255,255,.67); }.scene-grid { display: grid; grid-template-columns: .88fr 1fr; align-items: center; gap: 90px; }.scene-visual { position: relative; min-height: 385px; overflow: hidden; background: #fff0d9; }.scene-sun { position: absolute; top: -80px; right: -38px; width: 260px; height: 260px; border-radius: 50%; background: #f6ce85; }.scene-line { position: absolute; left: 0; height: 9px; border-radius: 0 10px 10px 0; background: #a994b8; }.line-a { bottom: 150px; width: 67%; }.line-b { bottom: 123px; width: 42%; background: #d6989b; }.line-c { bottom: 96px; width: 84%; background: #fff9ee; }.scene-label { position: absolute; z-index: 2; left: 38px; bottom: 37px; padding: 17px 21px; color: #6b4c64; background: #fff; box-shadow: 0 8px 22px rgba(95,70,84,.1); font-size: 14px; }.scene-label b { display: block; margin-top: 3px; font-size: 20px; }.scene-copy > p:not(.eyebrow), .faq-layout > div > p { color: var(--text-light); }.check-list { padding: 0; margin: 25px 0 27px; list-style: none; }.check-list li { position: relative; padding: 5px 0 5px 25px; color: var(--text-light); }.check-list li::before { content: ""; position: absolute; left: 0; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }.voices-section { background: #f5f3ff; }.centered { display: block; text-align: center; }.centered > p:not(.eyebrow) { margin: 12px auto 0; }.voice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }.voice-grid blockquote { display: flex; min-height: 215px; flex-direction: column; justify-content: space-between; margin: 0; padding: 27px; background: #fff; }.voice-grid blockquote > p { margin: 0; color: #635968; }.voice-grid footer { display: flex; align-items: center; gap: 10px; font-size: 13px; }.voice-grid footer b { color: var(--primary-dark); }.voice-grid footer span { color: var(--text-muted); }.faq-layout { display: grid; grid-template-columns: .8fr 1.1fr; gap: 100px; }.faq-layout > div > p { margin-bottom: 25px; }.news-section { background: #fffdf8; }.news-list { border-top: 1px solid var(--border); }.news-row { display: grid; grid-template-columns: 115px 1fr auto; align-items: center; gap: 20px; padding: 23px 0; border-bottom: 1px solid var(--border); }.news-row time { color: var(--primary); font-size: 13px; font-weight: 700; }.news-row h3 { margin: 0; font-size: 18px; }.news-row span { color: var(--primary-dark); font-size: 13px; font-weight: 700; }
@media (max-width: 900px) { .hero-grid, .scene-grid, .faq-layout { grid-template-columns: 1fr; gap: 45px; }.hero-art { max-width: 500px; width: 100%; margin: 0 auto; }.program-grid { grid-template-columns: repeat(2, 1fr); }.scene-visual { min-height: 320px; }.voice-grid { grid-template-columns: 1fr; }.voice-grid blockquote { min-height: 170px; }.section-heading { align-items: start; }.trust-list { gap: 25px; }.news-row { grid-template-columns: 100px 1fr; }.news-row span { display: none; } }
@media (max-width: 480px) { .hero { padding: 55px 0; }.hero h1 { font-size: 43px; }.hero-copy > p:not(.eyebrow) { font-size: 15px; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 14px; }.hero-art { min-height: 285px; }.hero-art img { width: 275px; }.hero-rings { width: 245px; height: 245px; }.chip-one { top: 15px; }.chip-two { bottom: 20px; }.trust-list { display: block; padding: 13px 0; text-align: center; }.trust-list span { display: block; margin: 5px; }.section-heading { display: block; }.section-heading > p, .section-heading > .text-link { margin-top: 15px; }.program-grid, .pick-grid { grid-template-columns: 1fr; }.program-card { min-height: 230px; }.program-card h3 { margin-top: 18px; }.program-card p { min-height: 0; margin-bottom: 16px; }.scene-grid { gap: 35px; }.news-row { grid-template-columns: 1fr; gap: 3px; }.news-row h3 { font-size: 17px; } }