/* Shared "terms" section of the resource pages (partials/terms.blade.php) */
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/caveat-600-latin.woff2") format("woff2"); }
.rt { padding: 88px 0; background: #F2FAF6 url("../img/resources/terms-curves.svg") center / cover no-repeat; color: #1C2522; }
.rt-head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.rt-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 18px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #00744A; }
.rt-eyebrow::before, .rt-eyebrow::after { content: ""; width: 28px; height: 2px; border-radius: 2px; background: #00B26B; }
.rt-title { margin: 0 0 20px; font-size: clamp(32px, 3.6vw, 52px); line-height: 1.12; font-weight: 700; letter-spacing: -.02em; color: #0B2A1F; }
.rt-lead { max-width: 560px; margin: 0 auto; font-size: 17px; line-height: 1.6; color: #4A5550; }

.rt-row { display: grid; gap: 24px; }
.rt-art { display: none; margin: 0; }
.rt-card { padding: 32px 32px 36px; border-radius: 20px; background: #fff; box-shadow: 0 12px 32px -12px rgba(11,42,31,.16), 0 0 0 1px rgba(11,42,31,.04); }
.rt-card__h { display: flex; align-items: center; gap: 14px; margin: 0 0 24px; font-size: 20px; font-weight: 700; color: #0B2A1F; }
.rt-badge { flex: none; position: relative; width: 44px; height: 44px; border-radius: 50%; }
.rt-badge::after, .rt-list li::after { content: ""; position: absolute; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.rt-badge::after { inset: 12px; }
.rt-badge--yes { background: #0B3D2B; color: #fff; --ic: url("../img/resources/icons/check.svg"); }
.rt-badge--no { background: #FBDAD3; color: #5A1B12; --ic: url("../img/resources/icons/x.svg"); }
.rt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.rt-list li { position: relative; min-height: 28px; padding: 3px 0 0 44px; font-size: 16px; line-height: 1.5; }
.rt-list li::before { content: ""; position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; }
.rt-list li::after { left: 7px; top: 7px; width: 14px; height: 14px; }
.rt-list--yes li { color: #1C2522; --ic: url("../img/resources/icons/check.svg"); }
.rt-list--yes li::before { background: #DDF3E8; }
.rt-list--yes li::after { color: #00744A; }
.rt-list--no li { color: #4A5550; --ic: url("../img/resources/icons/x.svg"); }
.rt-list--no li::before { background: #FBE3DD; }
.rt-list--no li::after { color: #B42318; }

.rt-strip { list-style: none; margin: 32px 0 0; padding: 12px 8px; display: grid; border-radius: 24px; background: #fff; box-shadow: 0 12px 32px -12px rgba(11,42,31,.16), 0 0 0 1px rgba(11,42,31,.04); }
.rt-strip__item { display: flex; gap: 20px; align-items: flex-start; padding: 24px; }
.rt-strip__item + .rt-strip__item { border-top: 1px solid #E3EAE6; }
.rt-tile { flex: none; position: relative; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 20px; background: #E3F5EC; }
.rt-tile img { width: 40px; height: 40px; }
.rt-num { position: absolute; left: -8px; top: -8px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #0B2A1F; color: #fff; font-size: 14px; font-weight: 700; }
.rt-strip__t { margin: 0 0 6px; font-size: 17px; line-height: 1.35; font-weight: 700; color: #0B2A1F; }
.rt-strip__d { margin: 0; font-size: 15px; line-height: 1.55; color: #4A5550; }
.rt-strip a { color: #00744A; text-decoration: underline; text-underline-offset: 2px; }
.rt-tip { display: flex; gap: 10px; align-items: flex-start; max-width: 900px; margin: 24px auto 0; font-size: 14px; line-height: 1.55; color: #4A5550; }
.rt-tip img { flex: none; margin-top: 2px; }
.rt-tip b { color: #0B2A1F; font-weight: 600; }

@media (min-width: 700px) and (max-width: 1023px) { .rt-row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
  .rt-row { grid-template-columns: 28fr 36fr 36fr; align-items: start; }
  .rt-art { display: block; }
  .rt-art__img { display: block; width: 100%; height: auto; }
  .rt-note { position: relative; margin: -4px 0 0 18px; display: flex; align-items: flex-start; gap: 6px; font-family: "Caveat", "Segoe Script", cursive; font-weight: 600; font-size: 26px; line-height: 1.1; color: #1C2522; }
  .rt-note__arrow { flex: none; width: 56px; height: auto; transform: translateY(-4px); }
  .rt-note span { padding-top: 22px; }
  .rt-strip { grid-template-columns: repeat(var(--n, 3), 1fr); padding: 16px 8px; }
  .rt-strip[data-n="3"] { --n: 3; } .rt-strip[data-n="4"] { --n: 4; }
  .rt-strip__item + .rt-strip__item { border-top: 0; border-left: 1px solid #E3EAE6; }
  .rt-strip[data-n="4"] .rt-strip__item { gap: 16px; padding: 16px; }
  .rt-strip[data-n="4"] .rt-tile { width: 64px; height: 64px; border-radius: 16px; }
  .rt-strip[data-n="4"] .rt-tile img { width: 30px; height: 30px; }
}
@media (max-width: 639px) {
  .rt { padding: 64px 0; }
  .rt-head { margin-bottom: 32px; }
  .rt-eyebrow { font-size: 12px; letter-spacing: .1em; gap: 8px; }
  .rt-eyebrow::before, .rt-eyebrow::after { width: 16px; }
  .rt-card { padding: 24px 20px 28px; }
  .rt-strip__item { gap: 16px; padding: 20px 12px; }
  .rt-tile { width: 72px; height: 72px; }
}

/* Fit one screen height on desktop, on the site's corner radius scale (16px cards and panels, 12px tiles) */
.rt-card, .rt-strip { border-radius: 16px; }
.rt-tile, .rt-strip[data-n="4"] .rt-tile { border-radius: 12px; }
@media (min-width: 1024px) {
  .rt { padding: clamp(28px, 5vh, 56px) 0; }
  .rt-head { margin-bottom: clamp(16px, 2.6vh, 28px); }
  .rt-eyebrow { margin-bottom: 8px; }
  .rt-title { margin-bottom: 8px; font-size: clamp(28px, 4.4vh, 44px); }
  .rt-lead { font-size: 15.5px; line-height: 1.5; }
  .rt-row { gap: 20px; align-items: center; }
  .rt-art__img { max-height: 34vh; width: auto; max-width: 100%; margin: 0 auto; }
  .rt-note { font-size: 22px; margin-top: -8px; }
  .rt-note__arrow { width: 44px; }
  .rt-note span { padding-top: 16px; }
  .rt-card { padding: clamp(16px, 2.6vh, 24px) 24px; }
  .rt-card__h { margin-bottom: clamp(10px, 1.6vh, 16px); font-size: 18px; }
  .rt-badge { width: 36px; height: 36px; }
  .rt-badge::after { inset: 10px; }
  .rt-list { gap: clamp(6px, 1.1vh, 12px); }
  .rt-list li { min-height: 24px; padding: 2px 0 0 36px; font-size: 15px; line-height: 1.45; }
  .rt-list li::before { width: 24px; height: 24px; }
  .rt-list li::after { left: 6px; top: 6px; width: 12px; height: 12px; }
  .rt-strip { margin-top: clamp(14px, 2.2vh, 24px); padding: 6px 8px; }
  .rt-strip__item, .rt-strip[data-n="4"] .rt-strip__item { gap: 14px; padding: clamp(10px, 1.6vh, 16px) 16px; }
  .rt-tile, .rt-strip[data-n="4"] .rt-tile { width: 52px; height: 52px; }
  .rt-tile img, .rt-strip[data-n="4"] .rt-tile img { width: 26px; height: 26px; }
  .rt-num { width: 22px; height: 22px; left: -6px; top: -6px; font-size: 12px; }
  .rt-strip__t { margin-bottom: 2px; font-size: 15.5px; }
  .rt-strip__d { font-size: 14px; line-height: 1.45; }
  .rt-tip { margin-top: 12px; font-size: 13px; }
}
@media (min-width: 1024px) and (max-height: 920px) {
  .rt-head { margin-bottom: 14px; }
  .rt-lead { font-size: 14.5px; }
  .rt-card { padding-block: 14px; }
  .rt-card__h { margin-bottom: 8px; }
  .rt-list { gap: 5px; }
  .rt-list li { font-size: 14px; line-height: 1.4; }
  .rt-strip { margin-top: 12px; }
  .rt-strip__item, .rt-strip[data-n="4"] .rt-strip__item { padding-block: 8px; }
  .rt-strip__d { font-size: 13.5px; line-height: 1.4; }
}
/* The whole section (not just its box) fits under the sticky header */
@media (min-width: 1024px) {
  .rt, .rw { padding: clamp(18px, 3.2vh, 40px) 0; }
  .rt-title, .rw-title { font-size: clamp(26px, 4vh, 40px); }
}
@media (min-width: 1024px) and (max-height: 920px) {
  .rt-head, .rw-head { margin-bottom: 12px; }
  .rt-eyebrow, .rw-eyebrow { margin-bottom: 6px; }
  .rw-cards .rw-logo, .rw-cards[data-n="3"] .rw-logo { height: 48px; }
  .rw-quote { margin-top: 12px; padding-block: 10px; }
  .rw-rate { margin-top: 12px; }
  .rw-rate__in { padding-block: 6px; }
  .rw-stars { margin-top: 0; }
}
@media (min-width: 1024px) and (max-height: 740px) {
  .rt, .rw { padding-block: 14px; }
  .rt-lead, .rw-lead { font-size: 14px; line-height: 1.45; }
  .rt-list li { font-size: 13.5px; }
  .rw-card__text { font-size: 13px; }
}

/* "You get" and "You are not committing to" share one height */
@media (min-width: 1024px) {
  .rt-row { align-items: stretch; }
  .rt-art { align-self: center; }
}

/* "You get" / "You are not committing to": a pair of equal-height cards beside the illustration (no stretching to it) */
.rt-pair { display: grid; gap: 20px; }
@media (min-width: 700px) { .rt-pair { grid-template-columns: 1fr 1fr; align-items: stretch; } }
@media (min-width: 700px) and (max-width: 1023px) { .rt-row { grid-template-columns: 1fr; } }
@media (min-width: 1024px) {
  .rt-row { grid-template-columns: 28fr 72fr; align-items: center; }
  .rt-art { align-self: center; }
}
/* Section spacing = the site's section rhythm (.ec-sec: 64 / 80 / 104px), like every other section */
.rt, .rw { padding-block: var(--ec-sec-y, 80px); }

/* Inner spacing: comfortable again now that the section uses the site's section rhythm (all screen heights) */
@media (min-width: 1024px) {
  .rt-head { margin-bottom: 40px; }
  .rt-eyebrow { margin-bottom: 14px; }
  .rt-title { margin-bottom: 14px; font-size: clamp(32px, 3.2vw, 44px); }
  .rt-lead { font-size: 16px; line-height: 1.6; }
  .rt-card { padding: 24px 28px; }
  .rt-card__h { margin-bottom: 16px; }
  .rt-list { gap: 12px; }
  .rt-list li { font-size: 15px; line-height: 1.5; }
  .rt-strip { margin-top: 28px; padding: 8px; }
  .rt-strip__item, .rt-strip[data-n="4"] .rt-strip__item { padding: 18px 20px; gap: 16px; }
  .rt-strip__d { font-size: 14px; line-height: 1.5; }
  .rt-tip { margin-top: 16px; }
}