.qv-benefits, .qv-benefits * { box-sizing: border-box; } .qv-benefits { --qv-green: #123f35; --qv-green-dark: #092f28; --qv-gold: #ddb62f; --qv-gold-dark: #9b7100; --qv-cream: #f8f6ef; --qv-white: #ffffff; --qv-text: #263a34; --qv-muted: #62736d; --qv-border: #e6dfcd; width: 100%; color: var(--qv-text); background: var(--qv-white); font-family: inherit; line-height: 1.75; } .qv-benefits a { color: var(--qv-green); font-weight: 750; text-decoration: underline; text-decoration-color: rgba(221, 182, 47, .7); text-decoration-thickness: 2px; text-underline-offset: 3px; } .qv-benefits a:hover, .qv-benefits a:focus-visible { color: var(--qv-gold-dark); } .qv-benefits__hero { position: relative; overflow: hidden; padding: clamp(62px, 8vw, 108px) 22px; background: radial-gradient(circle at 10% 15%, rgba(221, 182, 47, .17), transparent 30%), linear-gradient(145deg, var(--qv-green), var(--qv-green-dark)); } .qv-benefits__hero-grid, .qv-benefits__container { width: 100%; max-width: 1180px; margin: 0 auto; } .qv-benefits__hero-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(32px, 5vw, 68px); } .qv-benefits__eyebrow { display: inline-block; margin-bottom: 14px; color: #f1cd55; font-size: 13px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; } .qv-benefits h1 { margin: 0 0 20px; color: #fff; font-size: clamp(38px, 5vw, 66px); line-height: 1.05; letter-spacing: -.035em; } .qv-benefits__lead { margin: 0 0 28px; color: rgba(255, 255, 255, .84); font-size: clamp(17px, 2vw, 20px); line-height: 1.75; } .qv-benefits__hero-actions, .qv-benefits__cta-actions { display: flex; flex-wrap: wrap; gap: 12px; } .qv-benefits__button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 21px; border: 2px solid var(--qv-gold); border-radius: 999px; background: var(--qv-gold); color: var(--qv-green-dark) !important; font-size: 14px; font-weight: 850 !important; line-height: 1.2; text-decoration: none !important; transition: transform .2s ease, background .2s ease; } .qv-benefits__button:hover, .qv-benefits__button:focus-visible { background: #f0ca43; transform: translateY(-2px); } .qv-benefits__button--ghost { border-color: rgba(255, 255, 255, .5); background: transparent; color: #fff !important; } .qv-benefits__button--ghost:hover, .qv-benefits__button--ghost:focus-visible { background: rgba(255, 255, 255, .1); } .qv-benefits__hero-figure { margin: 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, .26); border-radius: 24px; box-shadow: 0 26px 70px rgba(0, 0, 0, .27); } .qv-benefits__hero-figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } .qv-benefits__section { padding: clamp(62px, 7vw, 96px) 22px; } .qv-benefits__section--cream { background: var(--qv-cream); } .qv-benefits__section--green { color: #fff; background: var(--qv-green-dark); } .qv-benefits__heading { max-width: 820px; margin: 0 auto 35px; text-align: center; } .qv-benefits__kicker { display: block; margin-bottom: 10px; color: var(--qv-gold-dark); font-size: 12px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; } .qv-benefits__section--green .qv-benefits__kicker { color: #f1cd55; } .qv-benefits h2 { margin: 0 0 15px; color: var(--qv-green-dark); font-size: clamp(30px, 4vw, 48px); line-height: 1.13; letter-spacing: -.025em; } .qv-benefits__section--green h2 { color: #fff; } .qv-benefits__heading p { margin: 0; color: var(--qv-muted); font-size: 17px; } .qv-benefits__section--green .qv-benefits__heading p { color: rgba(255, 255, 255, .78); } .qv-benefits__intro-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 24px; align-items: stretch; } .qv-benefits__prose, .qv-benefits__principle { padding: clamp(25px, 4vw, 40px); border: 1px solid var(--qv-border); border-radius: 21px; } .qv-benefits__prose { background: #fff; } .qv-benefits__prose p { margin: 0 0 17px; font-size: 16px; } .qv-benefits__prose p:last-child { margin-bottom: 0; } .qv-benefits__principle { color: #fff; background: var(--qv-green); border-color: var(--qv-green); } .qv-benefits__principle span { display: grid; place-items: center; width: 47px; height: 47px; margin-bottom: 18px; color: var(--qv-green-dark); background: var(--qv-gold); border-radius: 14px; font-size: 22px; font-weight: 900; } .qv-benefits__principle h3 { margin: 0 0 12px; color: #fff; font-size: 24px; line-height: 1.25; } .qv-benefits__principle p { margin: 0; color: rgba(255, 255, 255, .82); font-size: 15px; } .qv-benefits__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; } .qv-benefits__card { padding: 25px; background: #fff; border: 1px solid var(--qv-border); border-radius: 18px; box-shadow: 0 12px 32px rgba(18, 63, 53, .06); } .qv-benefits__card-number { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 16px; color: var(--qv-green-dark); background: var(--qv-gold); border-radius: 12px; font-size: 13px; font-weight: 900; } .qv-benefits__card h3 { margin: 0 0 9px; color: var(--qv-green); font-size: 21px; line-height: 1.3; } .qv-benefits__card p { margin: 0; color: var(--qv-muted); font-size: 15px; } .qv-benefits__evidence { margin-top: 25px; padding: clamp(24px, 4vw, 37px); background: #fff; border: 1px solid var(--qv-border); border-left: 6px solid var(--qv-gold); border-radius: 18px; } .qv-benefits__evidence h3 { margin: 0 0 10px; color: var(--qv-green-dark); font-size: 24px; } .qv-benefits__evidence p { margin: 0 0 12px; color: var(--qv-muted); font-size: 15px; } .qv-benefits__evidence p:last-child { margin-bottom: 0; } .qv-benefits__audience-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; } .qv-benefits__audience { padding: 26px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .15); border-radius: 18px; } .qv-benefits__audience h3 { margin: 0 0 10px; color: #f1cd55; font-size: 21px; } .qv-benefits__audience p { margin: 0; color: rgba(255, 255, 255, .8); font-size: 15px; } .qv-benefits__teacher-note { display: grid; grid-template-columns: 76px 1fr; gap: 22px; align-items: start; margin-top: 25px; padding: clamp(25px, 4vw, 40px); color: var(--qv-text); background: #fff; border-radius: 20px; } .qv-benefits__quote-mark { display: grid; place-items: center; width: 76px; height: 76px; color: var(--qv-green-dark); background: var(--qv-gold); border-radius: 20px; font-family: Georgia, serif; font-size: 52px; font-weight: 900; line-height: 1; } .qv-benefits__teacher-note blockquote { margin: 0; color: var(--qv-text); font-size: clamp(17px, 2vw, 20px); line-height: 1.7; } .qv-benefits__teacher-note cite { display: block; margin-top: 14px; color: var(--qv-green); font-size: 14px; font-style: normal; font-weight: 850; } .qv-benefits__balance { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; } .qv-benefits__balance-card { padding: 25px; background: #fff; border: 1px solid var(--qv-border); border-radius: 18px; } .qv-benefits__balance-card--warning { background: #fffaf0; border-color: #ead18a; } .qv-benefits__balance-card h3 { margin: 0 0 12px; color: var(--qv-green-dark); font-size: 21px; } .qv-benefits__balance-card ul { margin: 0; padding-left: 20px; } .qv-benefits__balance-card li { margin-bottom: 8px; color: var(--qv-muted); font-size: 15px; } .qv-benefits__balance-card li:last-child { margin-bottom: 0; } .qv-benefits__path { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; } .qv-benefits__path-step { padding: 23px; background: #fff; border: 1px solid var(--qv-border); border-radius: 17px; } .qv-benefits__path-step strong { display: block; margin-bottom: 8px; color: var(--qv-green); font-size: 17px; } .qv-benefits__path-step p { margin: 0; color: var(--qv-muted); font-size: 14px; } .qv-benefits__reading { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 26px; } .qv-benefits__reading a { display: block; padding: 17px 19px; background: var(--qv-cream); border: 1px solid var(--qv-border); border-radius: 14px; text-decoration: none; } .qv-benefits__reading a:hover, .qv-benefits__reading a:focus-visible { background: #fff7d9; } .qv-benefits__sources { margin: 0; padding-left: 21px; } .qv-benefits__sources li { margin-bottom: 10px; color: var(--qv-muted); font-size: 14px; } .qv-benefits__faq { display: grid; gap: 12px; max-width: 900px; margin: 0 auto; } .qv-benefits__faq details { padding: 0 21px; background: #fff; border: 1px solid var(--qv-border); border-radius: 15px; } .qv-benefits__faq summary { padding: 18px 0; color: var(--qv-green-dark); cursor: pointer; font-size: 17px; font-weight: 850; } .qv-benefits__faq details p { margin: 0; padding: 0 0 19px; color: var(--qv-muted); font-size: 15px; } .qv-benefits__cta { padding: clamp(34px, 5vw, 55px); text-align: center; background: radial-gradient(circle at 50% 0, rgba(221, 182, 47, .19), transparent 42%), var(--qv-green-dark); border-radius: 25px; } .qv-benefits__cta h2 { color: #fff; } .qv-benefits__cta p { max-width: 720px; margin: 0 auto 24px; color: rgba(255, 255, 255, .8); font-size: 16px; } .qv-benefits__cta-actions { justify-content: center; } @media (max-width: 900px) { .qv-benefits__hero-grid, .qv-benefits__intro-grid { grid-template-columns: 1fr; } .qv-benefits__audience-grid { grid-template-columns: 1fr; } .qv-benefits__path { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .qv-benefits__hero, .qv-benefits__section { padding-left: 16px; padding-right: 16px; } .qv-benefits__cards, .qv-benefits__balance, .qv-benefits__reading, .qv-benefits__path { grid-template-columns: 1fr; } .qv-benefits__teacher-note { grid-template-columns: 1fr; } .qv-benefits__quote-mark { width: 58px; height: 58px; border-radius: 16px; font-size: 40px; } .qv-benefits__hero-actions, .qv-benefits__cta-actions { flex-direction: column; } .qv-benefits__button { width: 100%; } } .qv-benefits, .qv-benefits article { margin-top: 0 !important; margin-bottom: 0 !important; }