/* Sortie's underwater home. Keep the artwork separate from readable page content. */
:root{--ink:#123746;--cream:#f4faf8;--line:#d5e4e3;--muted:#526b72;--plum:#173c58}
.preview-bar{background:#dfefef;color:#325d66}
.wordmark-dot{color:#8e54bd}
.hero--reef{background:#092d44}
.hero--reef .reef-scene{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;z-index:-2}
.reef-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(6,30,47,.94) 0%,rgba(6,30,47,.78) 25%,rgba(6,30,47,.37) 43%,rgba(6,30,47,0) 64%),linear-gradient(0deg,rgba(6,30,47,.88),rgba(6,30,47,0) 22%)}
.hero--reef .hero-inner{display:block;position:relative;max-width:1340px;min-height:650px;padding:65px 55px 40px}
.hero--reef .hero-copy{width:46%;max-width:530px;padding-bottom:0}
.hero--reef h1{font-size:clamp(58px,5.2vw,77px)}
.hero--reef h1 em{color:#f4b6e2}
.hero--reef .eyebrow{max-width:450px;color:#afe6e4;font-size:12px;letter-spacing:.12em}
.hero--reef .hero-copy>p{max-width:475px;color:#e1f1f2;font-size:18px;line-height:1.65}
.hero--reef .hero-actions{gap:15px;margin-top:27px}
.hero--reef .hero-link{color:#e3f7f8}
.hero--reef .hero-note{color:#b4d5de;font-size:13px}
.hero--reef .play{border-color:#87b9c9}
.hero--reef .hero-bottom{position:relative;max-width:none;margin:0;padding:22px 25px;color:#d9eff0;border-top-color:#b0e5e324;font-size:14px;background:#082d4333}
.hero--reef .hero-bottom span+span:before{color:#e8a4d8}
.hero--reef .button.white{background:#fff9e8;color:#153b50}
.features-section{background:#e4eff2}
.feature-tabs,.profession-tabs{border-color:#c7dce1}
.section-heading em,.sortie-friend em{color:#7151a4}
.gentle-grid article{background:#e6e8f4}
.gentle-grid article:nth-child(2){background:#dfeeea}
.gentle-grid article:nth-child(3){background:#fff0d7}
.mascots-section{background:radial-gradient(ellipse at 23% 50%,#c0e8e6,transparent 50%),#e6f2f3}
.sortie-friend>img{filter:drop-shadow(0 20px 18px #15506218)}
.pro-plan{background:linear-gradient(135deg,#294d68,#183347);border-color:#396078}
.pro-plan>p,.pro-plan .plan-footnote{color:#c4dce7}
.final-cta{background:radial-gradient(ellipse at 75% 130%,#387e96,transparent 65%),linear-gradient(125deg,#102e49,#284560);color:#f0fbff}
.final-cta h2 em{color:#efb2e2}
.final-cta .eyebrow.light{color:#b9e5e6}
@media(min-width:1600px){.hero--reef .hero-inner{min-height:710px;padding-top:80px}.hero--reef .hero-copy{width:45%}}
@media(min-width:781px) and (max-width:1050px){.hero--reef .hero-inner{min-height:610px;padding:52px 34px 35px}.hero--reef .hero-copy{width:48%}.hero--reef h1{font-size:55px}.hero--reef .hero-copy>p{font-size:16px}.hero--reef .hero-actions{gap:8px}.hero--reef .hero-link{font-size:13px}.hero--reef .reef-scene{object-position:59% center}.reef-shade{background:linear-gradient(90deg,#061e2fec, #061e2f99 39%,#061e2f00 70%),linear-gradient(0deg,#061e2fcc,transparent 22%)}}
@media(max-width:780px){
  .hero--reef .hero-inner{display:block;min-height:0;padding:42px 28px 390px}
  .hero--reef .hero-copy{width:100%;max-width:570px;margin:auto;padding:0}
  .hero--reef h1{font-size:58px}
  .hero--reef .eyebrow{max-width:400px;margin-left:auto;margin-right:auto;font-size:11px}
  .hero--reef .hero-copy>p{font-size:17px;max-width:495px;margin:22px auto 0}
  .hero--reef .hero-actions{gap:16px;justify-content:center}
  .hero--reef .hero-note{font-size:12px}
  .hero--reef .reef-scene{inset:auto 0 54px;height:410px;object-position:80% center}
  .reef-shade{inset:auto 0 53px;height:411px;background:linear-gradient(180deg,#092d44 0%,#092d4400 23%,#092d4400 80%,#092d44ad 100%)}
  .hero--reef .hero-bottom{gap:14px;padding:17px 12px;font-size:11px;min-height:54px;background:#092d44}
  .hero--reef .hero-bottom span{max-width:140px}
}
@media(max-width:440px){.hero--reef .hero-inner{padding:38px 23px 345px}.hero--reef h1{font-size:50px}.hero--reef .hero-copy>p{font-size:16px}.hero--reef .hero-actions{gap:12px}.hero--reef .hero-link{font-size:13px}.hero--reef .reef-scene{height:360px}.hero--reef .reef-shade{height:361px}.hero--reef .hero-bottom{font-size:10px;gap:10px}.hero--reef .hero-bottom span{max-width:100px}}