/* A visual introduction to the personal page, before the guided questions. */
.experience-icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.exp-icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.experience-landing { background: #fff; }
.experience-hero { background: #f8f7f2; border-bottom: 1px solid #e4eaeb; }
.experience-hero-grid { display: grid; grid-template-columns: 1fr 1.06fr; gap: 65px; align-items: center; padding-top: 58px; padding-bottom: 49px; }
.experience-pitch > .eyebrow { font-size: 10px; color: #257081; letter-spacing: .15em; margin-bottom: 18px; }
.experience-pitch h1 { font-size: clamp(44px, 4.25vw, 61px); line-height: 1.08; letter-spacing: -.055em; color: #00486d; max-width: 570px; }
.experience-pitch h1 em { display: block; color: #b12c26; font-style: normal; }
.experience-pitch .experience-lead { font-size: 17px; line-height: 1.85; color: #426171; margin-top: 25px; max-width: 530px; }
.experience-pitch .experience-promise { font-size: 15px; line-height: 1.85; color: #183c4e; font-weight: 650; margin-top: 19px; }
.experience-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.experience-hero-actions .button { font-size: 13px; min-height: 53px; padding: 14px 21px; gap: 15px; }
.experience-hero-actions .button > span { font-size: 20px; line-height: 1; }
.experience-reassurance { display: flex; align-items: center; gap: 8px; font-size: 10px; color: #5b7580; margin-top: 18px; }
.experience-reassurance .exp-icon { width: 19px; height: 19px; color: #007568; }
#landing-return { margin-top: 12px; }
.experience-preview { margin: 0; position: relative; padding: 22px 18px 12px; border-radius: 22px; background: #e3eef2; border: 1px solid #d5e5eb; }
.experience-preview > figcaption { display: flex; gap: 8px; align-items: center; color: #466b7b; letter-spacing: .12em; font-size: 8px; font-weight: 800; margin: 0 5px 15px; }
.experience-preview > figcaption > span { width: 7px; height: 7px; border-radius: 50%; background: #ca9e42; }
.experience-preview-page { border-radius: 11px; background: #fff; overflow: hidden; box-shadow: 0 14px 33px #153e561c; border: 1px solid #cbdee7; }
.preview-page-top { background: #00486d; padding: 21px 22px 18px; color: #fff; position: relative; }
.preview-page-top > span { display: block; font-size: 7px; color: #efce86; font-weight: 800; letter-spacing: .14em; }
.preview-page-top > small { position: absolute; right: 19px; top: 20px; font-size: 6px; letter-spacing: .09em; border: 1px solid #ffffff40; padding: 3px 5px; border-radius: 3px; color: #dceaf0; }
.preview-page-top h2 { font-size: 27px; margin-top: 12px; letter-spacing: -.045em; }
.preview-page-top p { font-size: 8px; margin-top: 9px; line-height: 1.7; color: #d9e9f0; }
.preview-page-top p > span { color: #e7bd68; margin: 0 5px; }
.preview-page-content { padding: 18px; }
.preview-section-label { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; color: #31596c; }
.preview-section-label .exp-icon { width: 15px; height: 15px; color: #007568; }
.preview-section-label > strong { font-size: 10px; }
.preview-section-label > span { margin-left: auto; font-size: 7px; color: #79909a; }
.preview-campuses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.preview-campuses > div { border: 1px solid #dce5e9; border-radius: 5px; overflow: hidden; background: #fff; }
.preview-campuses img { width: 100%; height: 77px; object-fit: cover; }
.preview-campuses strong { display: block; font-size: 8px; line-height: 1.45; margin: 8px 8px 0; }
.preview-campuses small { display: block; font-size: 7px; color: #7a8f99; margin: 3px 8px 8px; }
.preview-price-label { display: flex; align-items: center; justify-content: center; gap: 5px; background: #edf5f2; color: #347163; font-size: 7px; border-radius: 4px; padding: 7px; margin: 10px 0 18px; }
.preview-price-label .exp-icon { width: 13px; height: 13px; }
.preview-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.preview-answers > div { border: 1px solid #dce5e9; border-radius: 5px; overflow: hidden; background: #fff; }
.preview-answers img { width: 100%; height: 90px; object-fit: cover; object-position: 50% 5%; }
.preview-answers > div:first-child img { object-position: 60% 5%; }
.preview-answers > div > span { display: block; font-size: 6px; letter-spacing: .08em; color: #638391; font-weight: 800; margin: 8px 9px 4px; }
.preview-answers strong { display: block; font-size: 11px; line-height: 1.35; margin: 0 9px 11px; color: #173f52; }
.preview-next-label { color: #6e8692; font-size: 7px; margin: 15px 0 7px; }
.preview-next { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.preview-next > span { display: flex; align-items: center; gap: 5px; border-radius: 4px; background: #007568; color: #fff; font-size: 7px; line-height: 1.5; font-weight: 700; padding: 9px 7px; }
.preview-next > span:nth-child(2) { background: #69478c; }
.preview-next > span:nth-child(3) { background: #b12c26; }
.preview-next .exp-icon { width: 14px; height: 14px; }
.experience-preview .preview-footnote { font-size: 8px; color: #68838f; text-align: center; line-height: 1.7; margin-top: 11px; }
.experience-journey { padding-top: 55px; padding-bottom: 43px; scroll-margin-top: 30px; }
.experience-section-heading { margin-bottom: 27px; }
.experience-section-heading h2 { font-size: 35px; }
.experience-section-heading .eyebrow { font-size: 9px; margin-bottom: 10px; }
.experience-section-heading > p { font-size: 14px; color: #67808b; margin-top: 11px; }
.experience-step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 21px; }
.experience-step { padding: 26px 26px 25px; border-radius: 12px; background: #00486d; color: #fff; display: flex; flex-direction: column; }
.experience-step.step-page { background: #007568; }
.experience-step.step-connect { background: #69478c; }
.experience-step-top { display: flex; align-items: center; gap: 13px; margin-bottom: 26px; }
.experience-step-number { display: grid; place-items: center; height: 49px; width: 49px; border-radius: 50%; border: 1px solid #ffffff50; background: #ffffff12; font-size: 20px; font-weight: 800; letter-spacing: -.05em; }
.experience-step-top > .exp-icon { width: 35px; height: 35px; color: #edce8e; }
.experience-step-top > b { margin-left: auto; font-size: 27px; color: #ffffff80; font-weight: 400; }
.experience-step h3 { font-size: 25px; line-height: 1.2; max-width: 300px; }
.experience-step > p { font-size: 12px; line-height: 1.85; color: #fff; opacity: .91; margin-top: 16px; margin-bottom: 25px; }
.step-why { border-top: 1px solid #ffffff45; padding-top: 17px; margin-top: auto; }
.step-why > span { display: block; font-size: 7px; letter-spacing: .13em; font-weight: 800; color: #edce8e; }
.step-why > strong { display: block; font-size: 12px; line-height: 1.65; margin-top: 7px; font-weight: 700; }
.experience-keep { display: grid; grid-template-columns: 125px 1fr auto; gap: 30px; align-items: center; border-radius: 12px; background: #fbf5e7; border: 1px solid #e7d8b7; padding: 31px; margin-bottom: 56px; }
.experience-keep-art { background: #edca7d; border-radius: 10px; padding: 17px 14px; color: #214c5e; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.experience-keep-art > .exp-icon { height: 31px; width: 31px; }
.experience-keep-art > span { flex: 1 0 100%; font-size: 7px; font-weight: 800; line-height: 1.6; letter-spacing: .09em; }
.experience-keep h2 { font-size: 29px; }
.experience-keep p { font-size: 12px; color: #657b86; max-width: 640px; line-height: 1.85; }
.experience-keep .eyebrow { font-size: 8px; color: #8f6a28; margin-bottom: 10px; }
.experience-keep small { display: block; font-size: 8px; color: #948361; margin-top: 9px; }
.experience-keep .button { font-size: 12px; }
.wizard-graphic { margin-top: 29px; border: 1px solid #ffffff40; background: #ffffff12; border-radius: 10px; overflow: hidden; }
.wizard-graphic > img { height: 175px; width: 100%; object-fit: cover; object-position: 50% 10%; }
.wizard-graphic > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 16px 10px; }
.wizard-graphic span { display: flex; flex-direction: column; gap: 6px; align-items: center; font-size: 8px; color: #e3edf2; }
.wizard-graphic .exp-icon { height: 23px; width: 23px; color: #edce8e; }
.question-why { display: flex; align-items: flex-start; gap: 12px; background: #faf5e9; border-left: 3px solid #d8ad53; border-radius: 0 6px 6px 0; padding: 15px; margin-top: 20px; max-width: 600px; }
.question-why > .exp-icon { width: 24px; height: 24px; color: #9e762c; margin-top: 2px; }
.question-why strong { display: block; color: #8c6c31; font-size: 8px; letter-spacing: .1em; font-weight: 800; }
.question-why p { font-size: 11px; line-height: 1.85; color: #657985; margin: 5px 0 0; }
body:has(#portal-screen:not([hidden])) footer > .wrap { justify-content: flex-start; gap: 70px; }
body:has(#portal-screen:not([hidden])) footer > .wrap > div:last-child { text-align: left; }
footer [data-action="restart"] { min-height: 44px; }
@media (min-width: 1600px) {
  .experience-hero-grid { padding-top: 68px; padding-bottom: 68px; gap: 75px; }
  .experience-pitch h1 { font-size: 64px; }
}
@media (max-width: 1100px) {
  .experience-hero-grid { gap: 30px; padding-top: 43px; padding-bottom: 40px; }
  .experience-pitch h1 { font-size: 49px; }
  .experience-pitch .experience-lead { font-size: 15px; }
  .experience-pitch .experience-promise { font-size: 13px; }
  .experience-hero-actions { gap: 9px; margin-top: 23px; }
  .experience-hero-actions .button { font-size: 11px; padding: 12px 16px; gap: 10px; }
  .experience-preview { padding: 17px 12px 11px; }
  .preview-page-top { padding: 19px 15px; }
  .preview-page-top h2 { font-size: 23px; }
  .preview-page-content { padding: 13px; }
  .preview-campuses { gap: 5px; }
  .preview-campuses img { height: 64px; }
  .preview-campuses strong { font-size: 7px; margin-left: 6px; margin-right: 6px; }
  .preview-section-label > span { display: none; }
  .preview-next > span { font-size: 6px; padding: 7px 5px; gap: 4px; }
  .preview-next .exp-icon { width: 12px; height: 12px; }
  .experience-step-grid { gap: 15px; }
  .experience-step { padding: 22px; }
  .experience-step h3 { font-size: 23px; }
  .experience-keep { grid-template-columns: 105px 1fr; gap: 23px; }
  .experience-keep > .button { grid-column: 2; justify-self: start; }
}
@media (max-width: 820px) {
  .experience-hero-grid { grid-template-columns: 1fr; gap: 35px; padding-top: 37px; padding-bottom: 34px; }
  .experience-pitch { max-width: 620px; }
  .experience-pitch h1 { font-size: 56px; max-width: 650px; }
  .experience-pitch .experience-lead { font-size: 16px; max-width: 600px; }
  .experience-pitch .experience-promise { font-size: 14px; }
  .experience-hero-actions .button { font-size: 13px; padding: 13px 20px; }
  .experience-preview { width: min(100%, 570px); justify-self: center; padding: 22px 18px 12px; }
  .preview-page-top { padding: 21px 22px 18px; }
  .preview-page-top h2 { font-size: 27px; }
  .preview-page-content { padding: 18px; }
  .preview-campuses img { height: 77px; }
  .preview-campuses strong { font-size: 8px; }
  .preview-next > span { font-size: 7px; padding: 9px 7px; }
  .experience-step-grid { grid-template-columns: 1fr; gap: 17px; }
  .experience-step { padding: 26px; }
  .experience-step-top { margin-bottom: 19px; }
  .experience-step h3 { max-width: 100%; font-size: 27px; }
  .experience-step > p { font-size: 14px; margin-top: 13px; margin-bottom: 22px; }
  .step-why > strong { font-size: 13px; }
  .experience-journey { padding-top: 40px; padding-bottom: 33px; }
}
@media (max-width: 600px) {
  .experience-hero-grid { padding-top: 28px; padding-bottom: 25px; gap: 29px; }
  .experience-pitch > .eyebrow { font-size: 8px; margin-bottom: 14px; }
  .experience-pitch h1 { font-size: 45px; line-height: 1.08; letter-spacing: -.05em; }
  .experience-pitch .experience-lead { font-size: 14px; line-height: 1.85; margin-top: 20px; }
  .experience-pitch .experience-promise { font-size: 12px; line-height: 1.9; margin-top: 16px; }
  .experience-hero-actions { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 23px; }
  .experience-hero-actions .button { font-size: 13px; min-height: 49px; }
  .experience-reassurance { font-size: 9px; line-height: 1.8; margin-top: 15px; }
  .experience-preview { padding: 15px 10px 10px; border-radius: 13px; }
  .experience-preview > figcaption { font-size: 6px; margin: 0 4px 11px; letter-spacing: .1em; }
  .preview-page-top { padding: 18px 14px 15px; }
  .preview-page-top > span { font-size: 6px; }
  .preview-page-top > small { right: 12px; top: 15px; font-size: 5px; }
  .preview-page-top h2 { font-size: 22px; margin-top: 12px; }
  .preview-page-top p { font-size: 6px; }
  .preview-page-top p > span { margin: 0 3px; }
  .preview-page-content { padding: 12px; }
  .preview-section-label { gap: 5px; margin-bottom: 9px; }
  .preview-section-label > strong { font-size: 8px; }
  .preview-section-label > .exp-icon { width: 13px; height: 13px; }
  .preview-campuses { gap: 5px; }
  .preview-campuses img { height: 59px; }
  .preview-campuses strong { font-size: 7px; margin: 7px 5px 0; }
  .preview-campuses small { font-size: 6px; margin: 3px 5px 7px; }
  .preview-price-label { font-size: 6px; margin-bottom: 14px; padding: 6px 3px; }
  .preview-price-label .exp-icon { width: 11px; height: 11px; }
  .preview-answers { gap: 7px; }
  .preview-answers img { height: 77px; }
  .preview-answers > div > span { font-size: 5px; margin: 7px 7px 4px; letter-spacing: .03em; }
  .preview-answers strong { font-size: 9px; margin: 0 7px 9px; }
  .preview-next-label { font-size: 6px; margin-top: 12px; }
  .preview-next { gap: 4px; }
  .preview-next > span { flex-direction: column; align-items: flex-start; font-size: 6px; padding: 8px 6px; gap: 5px; }
  .preview-next .exp-icon { width: 15px; height: 15px; }
  .experience-preview .preview-footnote { font-size: 7px; }
  .experience-journey { padding-top: 33px; padding-bottom: 28px; }
  .experience-section-heading h2 { font-size: 30px; }
  .experience-section-heading .eyebrow { font-size: 7px; max-width: 280px; }
  .experience-section-heading > p { font-size: 12px; margin-top: 10px; }
  .experience-step { padding: 23px; }
  .experience-step h3 { font-size: 26px; }
  .experience-step > p { font-size: 12px; line-height: 1.9; }
  .experience-step-number { width: 43px; height: 43px; font-size: 18px; }
  .experience-step-top > .exp-icon { width: 31px; height: 31px; }
  .step-why > strong { font-size: 12px; }
  .experience-keep { grid-template-columns: 68px 1fr; gap: 16px; padding: 22px; margin-bottom: 33px; }
  .experience-keep-art { grid-column: 1; grid-row: 1; padding: 13px; gap: 7px; align-self: start; }
  .experience-keep-art > .exp-icon { width: 34px; height: 34px; }
  .experience-keep-art > .exp-icon:nth-child(2) { display: none; }
  .experience-keep-art > span { display: none; }
  .experience-keep > div:nth-child(2) { grid-column: 2; }
  .experience-keep h2 { font-size: 26px; }
  .experience-keep .eyebrow { font-size: 6px; line-height: 1.9; }
  .experience-keep p { font-size: 11px; }
  .experience-keep small { font-size: 7px; }
  .experience-keep > .button { grid-column: 1 / -1; justify-self: stretch; font-size: 12px; }
  .wizard-graphic { display: none; }
  .wizard-intro h1 { font-size: 32px; }
  .wizard-intro > .intro-content > p { font-size: 11px; }
  .question-why { padding: 12px; gap: 9px; margin-top: 17px; }
  .question-why > .exp-icon { width: 22px; height: 22px; }
  .question-why strong { font-size: 7px; }
  .question-why p { font-size: 10px; line-height: 1.85; }
  body:has(#portal-screen:not([hidden])) footer > .wrap { gap: 18px; }
}
@media (max-width: 370px) {
  .experience-pitch h1 { font-size: 41px; }
  .experience-pitch .experience-lead { font-size: 13px; }
  .preview-page-top h2 { font-size: 20px; }
  .preview-campuses strong { font-size: 6px; }
  .preview-campuses small { font-size: 5px; }
  .experience-keep { padding: 19px; gap: 12px; grid-template-columns: 52px 1fr; }
  .experience-keep-art { padding: 9px; }
  .experience-keep h2 { font-size: 24px; }
}