@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Manrope:wght@400;500;600;700;800&display=swap');

/* =========================================================
   PENN+ 2026 WEBSITE
   Complete desktop, tablet and mobile stylesheet
   ========================================================= */

/* DESIGN TOKENS AND GLOBAL RESET */

:root {
  --teal:#164f52;
  --deep:#082f32;
  --ivory:#fcfaf5;
  --purple:#8e5bb7;
  --yellow:#f4c542;
  --coral:#f28c8c;
  --sage:#a8c7a0;
  --ink:#263638;
  --muted:#667574
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  min-width:320px;
  overflow-x:hidden;
  background:var(--ivory);
  color:var(--ink);
  font-family:"Manrope",system-ui,sans-serif;
  letter-spacing:-.025em
}
a {
  text-decoration:none;
  color:inherit
}

button {
  font-family:inherit
}

/* HEADER AND NAVIGATION */

.nav26 {
  height:78px;
  padding:0 clamp(24px,5vw,78px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  z-index:50;
  background:#fcfaf5e8;
  backdrop-filter:blur(18px);
  border-bottom:1px solid #164f5217
}
.logo26 {
  font-size:35px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.08em;
  color:var(--teal)
}
.logo26 span {
  color:var(--coral)
}
.nav26 nav {
  display:flex;
  gap:36px
}
.nav26 nav a {
  font-size:12px;
  font-weight:700
}
.pill26,.primary26 {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  background:var(--teal);
  color:#fff;
  padding:0 20px;
  height:48px;
  border-radius:999px;
  font-size:12px;
  font-weight:800
}
.pill26 b,.primary26 span {
  font-size:16px
}

/* HERO */

.hero26 {
  min-height:calc(100svh - 78px);
  position:relative;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  overflow:hidden;
  background:#f6f1e9
}
.hero26-copy {
  padding:clamp(70px,7vw,108px) 30px 82px clamp(24px,5vw,78px);
  position:relative;
  z-index:4
}
.overline26 {
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
  color:var(--teal);
  margin:0 0 22px
}
.hero26 h1 {
  font-size:clamp(74px,7.4vw,114px);
  line-height:.77;
  letter-spacing:-.085em;
  margin:0;
  color:var(--deep);
  font-weight:700
}
.hero26 h1 em,.section-title26 h2 em,.understand-copy26 h2 em,.join26 h2 em,.close26 h2 em {
  font-family:"Instrument Serif",serif;
  font-weight:400;
  font-style:normal;
  color:var(--purple);
  letter-spacing:-.045em
}
.lede26 {
  max-width:540px;
  font-size:17px;
  line-height:1.64;
  color:#536361;
  margin:34px 0 0
}
.actions26 {
  display:flex;
  align-items:center;
  gap:26px;
  margin-top:34px
}
.primary26 {
  height:58px;
  padding:0 25px;
  border-radius:17px;
  font-size:13px;
  box-shadow:0 16px 34px #164f5225
}
.secondary26 {
  font-size:13px;
  font-weight:800;
  color:var(--teal)
}
.secondary26 span {
  margin-left:10px
}
.micro26 {
  font-size:11px;
  font-weight:600;
  margin-top:24px;
  color:#6d7775
}
.micro26 i {
  color:#28a66a;
  font-style:normal;
  margin-right:8px
}
.hero26-art {
  position:relative;
  min-height:690px
}
.image-window26 {
  position:absolute;
  inset:0;
  border-radius:0 0 0 92px;
  overflow:hidden
}
.image-window26:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#f6f1e9 0,transparent 25%),linear-gradient(0deg,#082f3240,transparent 50%)
}
.image-window26 img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center
}
.plus-thread26 {
  position:absolute;
  z-index:2;
  top:9%;
  right:6%;
  font:400 170px/1 "Instrument Serif";
  color:#f4c542cc;
  transform:rotate(12deg)
}
.match26 {
  position:absolute;
  z-index:3;
  left:-60px;
  top:20%;
  width:285px;
  background:#fff;
  padding:20px;
  border-radius:22px;
  box-shadow:0 25px 70px #18363825
}
.match26 small {
  font-size:8px;
  letter-spacing:.14em;
  color:#899594
}
.match26 strong {
  font:400 24px/1.05 "Instrument Serif";
  display:block;
  margin:9px 0 16px;
  color:var(--deep)
}
.match26 div {
  display:flex;
  flex-wrap:wrap;
  gap:6px
}
.match26 div span {
  font-size:8px;
  font-weight:800;
  padding:7px 9px;
  border-radius:10px;
  background:#edf4f0;
  color:var(--teal)
}
.conversation26 {
  position:absolute;
  z-index:3;
  right:8%;
  bottom:9%;
  width:300px;
  background:#123f42eb;
  color:#fff;
  border:1px solid #ffffff31;
  backdrop-filter:blur(14px);
  padding:18px;
  border-radius:22px;
  display:grid;
  grid-template-columns:40px 1fr;
  gap:10px;
  box-shadow:0 20px 50px #082f3250
}
.conversation26>i {
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#fff;
  color:var(--teal);
  font-style:normal;
  font-weight:800
}
.conversation26 p {
  margin:2px 0
}
.conversation26 p b,.conversation26 p small {
  display:block;
  font-size:10px
}
.conversation26 p small {
  font-size:8px;
  color:#a8c7a0;
  margin-top:3px
}
.conversation26>span {
  grid-column:1/-1;
  background:#fff;
  color:#334;
  padding:11px 13px;
  border-radius:6px 15px 15px;
  font-size:10px
}
.hero26-index {
  position:absolute;
  left:0;
  bottom:0;
  height:48px;
  width:42%;
  display:flex;
  align-items:center;
  gap:15px;
  padding-left:clamp(24px,5vw,78px);
  font-size:9px
}
.hero26-index span {
  font-weight:800
}
.hero26-index div {
  width:70px;
  height:1px;
  background:#b5c1bd
}
.hero26-index p {
  line-height:1.3
}
/* DARK BRAND STATEMENT STRIP */

.signal26 {
  background:var(--deep);
  color:#fff;
  min-height:112px;
  padding:24px clamp(24px,5vw,78px);
  display:grid;
  grid-template-columns:.7fr 1.5fr .6fr;
  align-items:center;
  gap:30px
}
.signal26 span {
  font:400 25px "Instrument Serif";
  color:#b9cfca
}
.signal26 strong {
  font-size:18px
}
.signal26 a {
  font-size:10px;
  font-weight:800;
  color:var(--yellow);
  justify-self:end
}
/* SHARED SECTION SPACING AND WELLNESS PATH SELECTOR */

.paths26,.experts26 {
  padding:clamp(90px,9vw,140px) clamp(24px,5vw,78px)
}
.section-title26 {
  display:grid;
  grid-template-columns:1.2fr .6fr;
  gap:30px;
  align-items:end;
  margin-bottom:56px
}
.section-title26>p {
  grid-column:1/-1;
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
  color:var(--teal);
  margin:0
}
.section-title26 h2 {
  font-size:clamp(52px,5vw,74px);
  line-height:.94;
  letter-spacing:-.065em;
  margin:0;
  color:var(--deep)
}
.section-title26>span {
  font-size:14px;
  line-height:1.7;
  color:var(--muted);
  max-width:330px
}
.path-tabs26 {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  border-top:1px solid #b9c8c3
}
.path-tabs26 button {
  border:0;
  border-right:1px solid #b9c8c3;
  background:transparent;
  min-height:92px;
  padding:18px;
  text-align:left;
  font:700 13px "Manrope";
  color:#596664;
  cursor:pointer;
  position:relative;
  transition:.25s
}
.path-tabs26 button small {
  display:block;
  font-size:8px;
  margin-bottom:12px;
  color:#899
}
.path-tabs26 button b {
  float:right
}
.path-tabs26 button:after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:0;
  background:var(--accent);
  transition:.25s;
  z-index:-1
}
.path-tabs26 button.active {
  color:var(--deep);
  transform:translateY(-5px)
}
.path-tabs26 button.active:after {
  height:100%
}
.path-detail26 {
  min-height:390px;
  background:#fff;
  border:1px solid #d6e0dc;
  display:grid;
  grid-template-columns:.35fr 1.1fr .8fr;
  gap:30px;
  padding:clamp(30px,4vw,58px);
  position:relative;
  overflow:hidden
}
.path-detail26:before {
  content:"";
  position:absolute;
  width:330px;
  height:330px;
  border-radius:50%;
  background:var(--accent);
  opacity:.24;
  left:-120px;
  bottom:-170px
}
.path-number26 {
  font:400 100px/1 "Instrument Serif";
  color:var(--accent);
  position:relative
}
.path-main26 p {
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase
}
.path-main26 h3 {
  font-size:clamp(38px,4vw,58px);
  line-height:1;
  letter-spacing:-.06em;
  margin:28px 0 0;
  max-width:560px
}
.path-copy26 small {
  font-size:8px;
  font-weight:800;
  letter-spacing:.13em;
  color:#87918f
}
.path-copy26 p {
  font-size:13px;
  line-height:1.6;
  margin:8px 0 25px
}
.path-copy26 a {
  display:flex;
  justify-content:space-between;
  border-top:1px solid #cbd5d1;
  padding-top:16px;
  font-size:12px;
  font-weight:800;
  color:var(--teal)
}
/* WE UNDERSTAND SECTION */

.understand26 {
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:790px;
  background:#ebeee8
}
.understand-image26 {
  position:relative;
  overflow:hidden
}
.understand-image26 img {
  width:100%;
  height:100%;
  object-fit:cover
}
.understand-image26 span {
  position:absolute;
  left:28px;
  bottom:28px;
  background:#fcfaf5e8;
  padding:14px 18px;
  border-radius:14px;
  font:400 19px "Instrument Serif"
}
.understand-copy26 {
  padding:clamp(70px,8vw,120px);
  display:flex;
  flex-direction:column;
  justify-content:center
}
.understand-copy26 h2 {
  font-size:clamp(50px,5vw,72px);
  line-height:.95;
  letter-spacing:-.065em;
  margin:0
}
.thoughts26 {
  margin:45px 0;
  border-top:1px solid #b8c4be
}
.thoughts26 p {
  font:400 21px "Instrument Serif";
  padding:18px 0;
  margin:0;
  border-bottom:1px solid #b8c4be;
  color:#465957
}
.understand-copy26>strong {
  font-size:15px;
  line-height:1.6;
  color:var(--teal)
}
/* WHATSAPP JOURNEY */

.journey26 {
  padding:clamp(90px,9vw,140px) clamp(24px,5vw,78px);
  background:var(--deep);
  color:#fff
}
.section-title26.light p {
  color:#a8c7a0
}
.section-title26.light h2 {
  color:#fff
}
.journey-line26 {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  margin:70px 0
}
.journey-line26>div {
  display:flex;
  align-items:center;
  position:relative
}
.journey-line26 i {
  width:44px;
  height:44px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:1px solid #8cabaa;
  font-style:normal;
  font-size:10px;
  color:var(--yellow)
}
.journey-line26 span {
  font-size:11px;
  font-weight:700;
  margin-left:11px
}
.journey-line26 b {
  margin-left:auto;
  margin-right:14px;
  color:#779695
}
.journey-chat26 {
  background:#164f52;
  border:1px solid #ffffff22;
  border-radius:26px;
  padding:32px;
  display:grid;
  grid-template-columns:.8fr 1.4fr .6fr;
  align-items:center;
  gap:40px
}
.journey-chat26>div {
  display:flex;
  align-items:center;
  gap:13px
}
.journey-chat26 i {
  width:42px;
  height:42px;
  background:#fff;
  color:var(--teal);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-style:normal;
  font-weight:800
}
.journey-chat26 span,.journey-chat26 span small {
  display:block;
  font-size:10px
}
.journey-chat26 span small {
  font-size:8px;
  color:#a8c7a0
}
.journey-chat26 p {
  font-size:13px;
  line-height:1.6;
  color:#c4d6d2
}
.journey-chat26 a {
  font-size:11px;
  font-weight:800;
  color:var(--yellow);
  justify-self:end
}
/* EXPERT CARDS */

.expert-row26 {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px
}
.expert-row26 article {
  border-top:1px solid #b9c8c3;
  padding-top:18px
}
.portrait26 {
  height:370px;
  border-radius:2px 60px 2px 2px;
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
  margin-bottom:24px
}
.portrait26:before {
  content:"";
  width:280px;
  height:280px;
  border:1px solid #ffffff77;
  border-radius:50%;
  position:absolute
}
.portrait26 span {
  font:400 78px "Instrument Serif";
  color:#fff;
  z-index:1
}
.portrait26 i {
  position:absolute;
  left:14px;
  bottom:14px;
  background:#fff;
  color:var(--teal);
  font-style:normal;
  font-size:8px;
  font-weight:800;
  padding:8px 10px
}
.p1 {
  background:linear-gradient(145deg,#e4b567,#b55f5d)
}
.p2 {
  background:linear-gradient(145deg,#aac9a4,#386e62)
}
.p3 {
  background:linear-gradient(145deg,#bba2d0,#71518d)
}
.p4 {
  background:linear-gradient(145deg,#b8d5d0,#397b76)
}
.p5 {
  background:linear-gradient(145deg,#efb7bd,#a45f78)
}
.expert-row26 article>small {
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--purple);
  font-weight:800
}
.expert-row26 h3 {
  font-size:24px;
  letter-spacing:-.05em;
  margin:10px 0 6px
}
.expert-row26 p {
  font-size:13px;
  color:var(--muted);
  margin:0 0 25px
}
.expert-row26 a {
  font-size:11px;
  font-weight:800;
  color:var(--teal)
}
.identity-note26 {
  font-size:10px;
  color:#8a9693;
  margin-top:22px
}
/* TRUST PRINCIPLES */

.trust26 {
  padding:clamp(90px,9vw,130px) clamp(24px,5vw,78px);
  background:#dfece6;
  text-align:center
}
.trust26 h2 {
  font:400 clamp(58px,6vw,86px)/.95 "Instrument Serif";
  letter-spacing:-.045em;
  margin:18px auto 55px;
  max-width:900px
}
.trust26>div {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid #9bb6ac
}
.trust26 span {
  padding:26px 12px;
  font-size:13px;
  font-weight:700;
  border-right:1px solid #9bb6ac
}
.trust26 span small {
  display:block;
  font-size:8px;
  color:#6f8880;
  margin-bottom:10px
}
/* JOIN PENN+ AS AN EXPERT */

.join26 {
  padding:clamp(80px,8vw,120px) clamp(24px,5vw,78px);
  display:grid;
  grid-template-columns:1.2fr .65fr;
  gap:10vw;
  align-items:end;
  background:var(--yellow)
}
.join26 h2 {
  font-size:clamp(54px,5.5vw,80px);
  line-height:.92;
  letter-spacing:-.07em;
  margin:0
}
.join26>div:last-child p {
  font-size:15px;
  line-height:1.7
}
.primary26.dark {
  background:var(--deep);
  margin-top:22px
}
/* FINAL CALL TO ACTION */

.close26 {
  padding:clamp(110px,12vw,180px) 24px;
  text-align:center;
  background:var(--purple);
  color:#fff;
  position:relative;
  overflow:hidden
}
.giant-plus26 {
  position:absolute;
  font:400 500px/1 "Instrument Serif";
  color:#ffffff0d;
  right:-30px;
  top:-130px
}
.close26>p {
  font-size:10px;
  font-weight:800;
  letter-spacing:.17em
}
.close26 h2 {
  font-size:clamp(54px,6vw,88px);
  line-height:.93;
  letter-spacing:-.06em;
  margin:26px auto 44px;
  max-width:1100px;
  position:relative
}
.close26 h2 em {
  color:#fff
}
.close26>a {
  display:inline-flex;
  padding:18px 24px;
  border-radius:16px;
  background:#fff;
  color:var(--purple);
  font-size:12px;
  font-weight:800;
  gap:30px
}
/* FOOTER */

.footer26 {
  padding:75px clamp(24px,5vw,78px);
  display:grid;
  grid-template-columns:1.8fr 1fr 1fr 1fr;
  gap:50px;
  background:#0c292b;
  color:#aec1bd
}
.footer26>div {
  display:flex;
  flex-direction:column;
  gap:10px
}
.footer26 .logo26 {
  color:#fff;
  margin-bottom:12px
}
.footer26 p {
  font-size:13px;
  line-height:1.7
}
.footer26 b {
  font-size:9px;
  letter-spacing:.14em;
  color:#fff;
  margin-bottom:9px
}
.footer26 a {
  font-size:12px
}
.copyright26 {
  padding:22px clamp(24px,5vw,78px);
  background:#0c292b;
  color:#6e8984;
  border-top:1px solid #29484a;
  display:flex;
  justify-content:space-between;
  font-size:9px
}
.mobile-wa26 {
  display:none
}

/* TABLET AND SMALL DESKTOP: 1000PX AND BELOW */

@media(max-width:1000px) {
  .nav26 nav {
    display:none
  }
  .hero26 {
    grid-template-columns:1fr
  }
  .hero26-art {
    min-height:650px
  }
  .image-window26 {
    border-radius:60px 0 0
  }
  .hero26-index {
    display:none
  }
  .signal26 {
    grid-template-columns:1fr
  }
  .signal26 a {
    justify-self:start
  }
  .path-tabs26 {
    overflow-x:auto;
    display:flex
  }
  .path-tabs26 button {
    min-width:160px
  }
  .path-detail26 {
    grid-template-columns:.3fr 1fr
  }
  .path-copy26 {
    grid-column:2
  }
  .understand26 {
    grid-template-columns:1fr
  }
  .understand-image26 {
    height:620px
  }
  .journey-line26 {
    overflow-x:auto;
    display:flex
  }
  .journey-line26>div {
    min-width:190px
  }
  .journey-chat26 {
    grid-template-columns:1fr
  }
  .journey-chat26 a {
    justify-self:start
  }
  .expert-row26 {
    grid-template-columns:1fr
  }
  .portrait26 {
    height:420px
  }
  .join26 {
    grid-template-columns:1fr
  }
  .footer26 {
    grid-template-columns:1fr 1fr
  }
}

/* MOBILE: 640PX AND BELOW */

@media(max-width:640px) {
  body {
    padding-bottom:72px
  }
  .nav26 {
    height:68px;
    padding:0 18px
  }
  .logo26 {
    font-size:31px
  }
  .nav26 .pill26 {
    display:none
  }
  .hero26-copy {
    padding:54px 20px 45px
  }
  .hero26 h1 {
    font-size:clamp(56px,17vw,68px);
    line-height:.79
  }
  .lede26 {
    font-size:16px;
    line-height:1.6;
    margin-top:28px
  }
  .actions26 {
    flex-direction:column;
    align-items:stretch
  }
  .primary26 {
    height:58px
  }
  .secondary26 {
    text-align:center
  }
  .hero26-art {
    min-height:540px
  }
  .image-window26 {
    border-radius:34px 0 0
  }
  .match26 {
    left:12px;
    top:12%;
    width:230px
  }
  .conversation26 {
    width:250px;
    right:14px;
    bottom:6%
  }
  .plus-thread26 {
    font-size:120px
  }
  .signal26 {
    padding:34px 20px
  }
  .signal26 strong {
    font-size:17px
  }
  .paths26,.experts26,.journey26 {
    padding:82px 20px
  }
  .section-title26 {
    display:block;
    margin-bottom:38px
  }
  .section-title26 h2 {
    font-size:46px
  }
  .section-title26>span {
    display:block;
    margin-top:20px
  }
  .path-tabs26 {
    margin-right:-20px
  }
  .path-detail26 {
    display:block;
    padding:30px 22px
  }
  .path-number26 {
    font-size:70px
  }
  .path-main26 h3 {
    font-size:38px;
    margin:15px 0 35px
  }
  .understand-image26 {
    height:480px
  }
  .understand-copy26 {
    padding:72px 20px
  }
  .understand-copy26 h2 {
    font-size:46px
  }
  .thoughts26 p {
    font-size:19px
  }
  .journey-line26 {
    margin:45px -20px 45px 0
  }
  .journey-chat26 {
    padding:24px
  }
  .portrait26 {
    height:360px
  }
  .trust26 {
    padding:85px 20px
  }
  .trust26 h2 {
    font-size:52px
  }
  .trust26>div {
    grid-template-columns:1fr 1fr
  }
  .join26 {
    padding:78px 20px
  }
  .join26 h2 {
    font-size:49px
  }
  .close26 {
    padding:100px 20px
  }
  .close26 h2 {
    font-size:48px
  }
  .footer26 {
    grid-template-columns:1fr;
    padding:65px 20px
  }
  .copyright26 {
    display:block;
    padding:22px 20px;
    line-height:2
  }
  .mobile-wa26 {
    display:flex;
    position:fixed;
    z-index:60;
    left:12px;
    right:12px;
    bottom:12px;
    height:56px;
    border-radius:16px;
    background:#168a52;
    color:#fff;
    align-items:center;
    justify-content:center;
    gap:20px;
    font-size:13px;
    font-weight:800;
    box-shadow:0 15px 35px #0b50306b
  }
}

/* DECORATIVE HERO PLUS POSITION */

.plus-thread26 {
  top:7%;
  right:35%;
  font-size:150px
}

/* SMALL MOBILE DECORATIVE ADJUSTMENT */

@media(max-width:640px) {
  .plus-thread26 {
    right:18%;
    font-size:110px
  }
}

/* =========================================================
   PENN+ HERO IMAGE — RESPONSIVE FIT
   Source image: images/penn-hero-2026.png
   Original dimensions: 1672 × 941 px
   ========================================================= */

/* The right-hand image area in the desktop hero */
.hero26-art {
  position: relative;
  width: 100%;
  min-height: 690px;
  overflow: visible;
}

/* Keeps the image inside the rounded hero window */
.image-window26 {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 0 0 0 92px;
  background: #e9e4da;
}

/* Desktop crop: preserves the woman on the right */
.image-window26 img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 66% center;
}

/* Tablet layout */
@media screen and (max-width: 1000px) {
  .hero26-art {
    min-height: 650px;
  }

  .image-window26 {
    border-radius: 60px 0 0 0;
  }

  .image-window26 img {
    object-position: 67% center;
  }
}

/* Mobile layout, designed around a 390px viewport */
@media screen and (max-width: 640px) {
  .hero26-art {
    width: 100%;
    min-height: 540px;
  }

  .image-window26 {
    border-radius: 34px 0 0 0;
  }

  .image-window26 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 68% center;
  }
}

/* Narrow phones */
@media screen and (max-width: 390px) {
  .hero26-art {
    min-height: 520px;
  }

  .image-window26 img {
    object-position: 69% center;
  }
}

/* =========================================================
   PENN+ "WE UNDERSTAND" RESPONSIVE IMAGE
   Source: images/penn-understood-2026.png
   Original image size: 1122 × 1402 px
   ========================================================= */

/* Complete two-column section on desktop */
.understand26 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  width: 100%;
  min-height: 790px;
  background: #ebeee8;
}

/* Image-side container */
.understand-image26 {
  position: relative;
  width: 100%;
  min-height: 790px;
  overflow: hidden;
  background: #d8d5c9;
}

/* Desktop image fitting */
.understand-image26 img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
}

/* "We listen before we guide" overlay */
.understand-image26 > span {
  position: absolute;
  z-index: 2;
  left: 28px;
  bottom: 28px;
  max-width: calc(100% - 56px);
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(252, 250, 245, 0.92);
  color: #263638;
  font-family: "Instrument Serif", serif;
  font-size: 19px;
  line-height: 1.2;
  backdrop-filter: blur(10px);
}

/* Tablet: image and copy stack vertically */
@media screen and (max-width: 1000px) {
  .understand26 {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .understand-image26 {
    width: 100%;
    height: 620px;
    min-height: 620px;
  }

  .understand-image26 img {
    object-position: 50% 52%;
  }
}

/* Mobile: designed for approximately 390px width */
@media screen and (max-width: 640px) {
  .understand-image26 {
    width: 100%;
    height: 480px;
    min-height: 480px;
  }

  .understand-image26 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 52%;
  }

  .understand-image26 > span {
    left: 20px;
    bottom: 20px;
    max-width: calc(100% - 40px);
    padding: 13px 16px;
    border-radius: 13px;
    font-size: 18px;
  }
}

/* Narrow phones */
@media screen and (max-width: 390px) {
  .understand-image26 {
    height: 470px;
    min-height: 470px;
  }

  .understand-image26 img {
    object-position: 50% 50%;
  }
}

/* =========================================================
   FINAL CLEANUP
   Removes the yellow cross and all horizontal sliding areas
   ========================================================= */

/* Remove the decorative yellow cross from every screen size */
.plus-thread26 {
  display: none !important;
}

/* Prevent any section from widening the browser viewport */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* Do not display native horizontal scrollbars in site sections */
.path-tabs26,
.journey-line26 {
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.path-tabs26::-webkit-scrollbar,
.journey-line26::-webkit-scrollbar {
  display: none;
}

/* Tablet: allow content to wrap instead of sliding sideways */
@media screen and (max-width: 1000px) {
  .path-tabs26 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100%;
    overflow: visible;
  }

  .path-tabs26 button {
    width: 100%;
    min-width: 0;
  }

  .journey-line26 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100%;
    overflow: visible;
  }

  .journey-line26 > div {
    min-width: 0;
  }
}

/* Mobile: compact grid and vertical journey, with no side scrolling */
@media screen and (max-width: 640px) {
  .path-tabs26 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    width: 100%;
    margin-right: 0;
    overflow: visible;
    border: 1px solid #b9c8c3;
    background: #b9c8c3;
  }

  .path-tabs26 button {
    width: 100%;
    min-width: 0;
    min-height: 82px;
    border: 0;
    background: #fcfaf5;
  }

  .path-tabs26 button:last-child {
    grid-column: 1 / -1;
  }

  .journey-line26 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    width: 100%;
    margin: 42px 0;
    overflow: visible;
  }

  .journey-line26 > div {
    width: 100%;
    min-width: 0;
    min-height: 68px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }

  .journey-line26 > div:last-child {
    border-bottom: 0;
  }

  .journey-line26 b {
    display: none;
  }
}

/* =========================================================
   HORIZONTAL FINGER-SWIPE SECTIONS
   Keeps items in one row while hiding the scrollbar UI
   ========================================================= */

/* Desktop: display all five items in a single horizontal row */
.path-tabs26,
.journey-line26 {
  width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.path-tabs26::-webkit-scrollbar,
.journey-line26::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.path-tabs26 {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.journey-line26 {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Tablet and mobile: invisible horizontal finger scrolling */
@media screen and (max-width: 1000px) {
  .path-tabs26,
  .journey-line26 {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
  }

  .path-tabs26::-webkit-scrollbar,
  .journey-line26::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    background: transparent;
  }

  .path-tabs26 button {
    width: auto;
    min-width: 170px;
    flex: 0 0 170px;
    scroll-snap-align: start;
  }

  .journey-line26 > div {
    width: auto;
    min-width: 190px;
    flex: 0 0 190px;
    scroll-snap-align: start;
  }
}

/* Mobile sizing for comfortable thumb swiping */
@media screen and (max-width: 640px) {
  .path-tabs26 {
    display: flex;
    grid-template-columns: none;
    gap: 0;
    margin-right: 0;
    border: 0;
    background: transparent;
  }

  .path-tabs26 button,
  .path-tabs26 button:last-child {
    width: auto;
    min-width: 156px;
    flex: 0 0 156px;
    grid-column: auto;
    min-height: 88px;
    border-right: 1px solid #b9c8c3;
    background: transparent;
  }

  .journey-line26 {
    display: flex;
    grid-template-columns: none;
    gap: 0;
    width: 100%;
    margin: 45px 0;
  }

  .journey-line26 > div {
    width: auto;
    min-width: 185px;
    min-height: 68px;
    flex: 0 0 185px;
    padding: 8px 0;
    border-bottom: 0;
  }

  .journey-line26 b {
    display: inline;
  }
}

/* =========================================================
   HERO EYEBROW TEXT UPDATE
   Increases only "WELLNESS SUPPORT · MADE FOR WOMEN"
   ========================================================= */

.hero26-copy > .overline26 {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.13em;
  margin-bottom: 26px;
}

@media screen and (max-width: 640px) {
  .hero26-copy > .overline26 {
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.11em;
    margin-bottom: 24px;
  }
}

/* =========================================================
   PENN+ IMAGE LOGO
   File location: images/pennplus.logo.png
   ========================================================= */

.logo26 {
  width: 132px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  overflow: visible;
  font-size: 0;
  line-height: 0;
}

.logo26 img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

.footer26 .footer-logo26 {
  width: 142px;
  height: 50px;
  margin-bottom: 12px;
}

@media screen and (max-width: 640px) {
  .logo26 {
    width: 116px;
    height: 40px;
  }

  .footer26 .footer-logo26 {
    width: 132px;
    height: 46px;
  }
}

/* EXPERT PROFILE PAGES */
.profile-page26 {
  min-height: 75vh;
  padding: clamp(55px, 7vw, 105px) clamp(24px, 7vw, 110px);
  background: #f6f1e9;
}
.profile-back26 {
  display: inline-block;
  margin-bottom: 38px;
  color: var(--teal);
  font-size: 13px;
  font-weight: 800;
}
.profile-hero26 {
  display: grid;
  grid-template-columns: minmax(300px, .75fr) minmax(0, 1fr);
  gap: clamp(45px, 7vw, 110px);
  align-items: center;
}
.profile-portrait26 {
  min-height: 560px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 4px 80px 4px 4px;
}
.profile-portrait26::before {
  content: "";
  position: absolute;
  width: 72%;
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 50%;
}
.profile-portrait26 span {
  position: relative;
  color: #fff;
  font: 400 clamp(90px, 10vw, 150px)/1 "Instrument Serif", serif;
}
.profile-portrait26 i {
  position: absolute;
  left: 20px;
  bottom: 20px;
  padding: 9px 12px;
  background: #fff;
  color: var(--teal);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}
.profile-copy26 h1 {
  margin: 0;
  color: var(--deep);
  font-size: clamp(56px, 6vw, 88px);
  line-height: .93;
  letter-spacing: -.065em;
}
.profile-copy26 h2 {
  margin: 22px 0;
  color: var(--purple);
  font: 400 clamp(27px, 3vw, 38px)/1.1 "Instrument Serif", serif;
}
.profile-copy26 > p:not(.overline26) {
  max-width: 570px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}
.profile-points26 {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 30px 0;
}
.profile-points26 span {
  padding: 9px 12px;
  border-radius: 999px;
  background: #e1ebe6;
  color: var(--teal);
  font-size: 10px;
  font-weight: 800;
}

/* PRIVACY AND TERMS PAGES */
.legal-page26 {
  width: min(850px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(70px, 9vw, 130px) 0;
}
.legal-page26 > h1 {
  margin: 0;
  color: var(--deep);
  font-size: clamp(50px, 6vw, 82px);
  line-height: .95;
  letter-spacing: -.06em;
}
.legal-date26 {
  margin: 20px 0 55px;
  color: var(--muted);
  font-size: 13px;
}
.legal-page26 section {
  padding: 28px 0;
  border-top: 1px solid #cbd5d1;
}
.legal-page26 section h2 {
  margin: 0 0 11px;
  color: var(--deep);
  font-size: 22px;
}
.legal-page26 section p {
  margin: 0;
  color: #52615f;
  font-size: 15px;
  line-height: 1.75;
}
.legal-page26 section a {
  color: var(--teal);
  font-weight: 800;
}

@media screen and (max-width: 760px) {
  .profile-hero26 {
    grid-template-columns: 1fr;
  }
  .profile-portrait26 {
    min-height: 430px;
  }
  .profile-copy26 h1 {
    font-size: 54px;
  }
}


/* =========================================================
   EXPERT PHOTO FRAME FIX
   Full rectangular photos, no circular masks or circle lines
   Applies to homepage cards and individual expert profiles
   ========================================================= */

/* Remove every decorative circular frame */
.portrait26::before,
.profile-portrait26::before,
.expert-visual26::before,
.expert-visual26::after {
  display: none !important;
  content: none !important;
}

/* Photo containers */
.portrait26,
.profile-portrait26,
.expert-visual26 {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: #dfe8e3;
}

/* Fit each photograph edge-to-edge inside the complete box */
.portrait26 > img,
.profile-portrait26 > img,
.expert-visual26 > img,
.portrait26 .expert-photo26,
.profile-portrait26 .expert-photo26,
.expert-visual26 .expert-photo26 {
  position: absolute !important;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  object-position: 50% 22% !important;
  transform: none !important;
}

/* Keep badges visible above the photograph */
.portrait26 > i,
.profile-portrait26 > i,
.expert-visual26 > i,
.expert-visual26 > small {
  z-index: 3;
}

/* Hide initials whenever a real image has been added */
.portrait26:has(img) > span,
.profile-portrait26:has(img) > span,
.expert-visual26:has(img) > span {
  display: none;
}

/* Homepage expert cards */
.portrait26 {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 4 / 5;
  border-radius: 3px 58px 3px 3px;
}

/* Individual expert profile photograph */
.profile-portrait26,
.profile-visual26 .expert-visual26 {
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 4 / 5;
  border-radius: 3px 76px 3px 3px;
}

/* Mobile photo proportions and face positioning */
@media screen and (max-width: 640px) {
  .portrait26,
  .profile-portrait26,
  .profile-visual26 .expert-visual26 {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 5;
    border-radius: 2px 48px 2px 2px;
  }

  .portrait26 > img,
  .profile-portrait26 > img,
  .expert-visual26 > img,
  .portrait26 .expert-photo26,
  .profile-portrait26 .expert-photo26,
  .expert-visual26 .expert-photo26 {
    object-fit: cover !important;
    object-position: 50% 20% !important;
  }
}