/* Jump directly to page sections so deep links remain stable as artwork loads. */
html { scroll-behavior: auto; }

/* Compact opening: no decorative rings or empty space around the book art. */
.hero-inner { align-items:start; padding-top:28px; padding-bottom:28px; gap:32px; }
.hero-copy { padding-bottom:0; }
.hero .eyebrow { margin-top:0; margin-bottom:12px; }
.hero-art { margin:0; padding:0; max-width:480px; justify-self:end; }
.hero-art::before,.hero-art::after,.hero::before,.hero::after { content:none; display:none; }
.hero .book-cover { height:auto; transform:none; }
.hero .actions { row-gap:10px; }
.hero .text-link { display:inline-flex; align-items:center; min-height:48px; }
.preorder-impact { padding:18px 20px; border:1px solid #b78cc1; border-left:5px solid #bb2676; border-radius:16px; background:#fff4d9; }
.google-signup .preorder-impact h3 { font-family:var(--serif); font-size:24px; margin:0 0 9px; }
.preorder-impact p { font-size:14px!important; line-height:1.65; margin:0!important; color:#173f47; }
@media(max-width:700px) {
  .hero-inner { padding-top:20px; padding-bottom:22px; gap:18px; }
  .hero-art { width:88%; max-width:360px; margin:0 auto; padding:0; justify-self:center; }
  .hero .eyebrow { margin-bottom:10px; }
  .hero-text { margin-bottom:16px; }
  .hero .book-label { right:-8px; bottom:8px; width:94px; height:94px; font-size:10px; }
  .hero .book-label span { font-size:19px; }
  .preorder-impact { padding:16px; }
}
/* Earth Helpers: brighter reef colors, with the original brand and artwork intact. */
:root{
  --paper:#f2f4ff;
  --ink:#173c56;
  --ocean:#08728a;
  --pink:#d93683;
  --pinkdark:#a51d61;
  --lavender:#e9ddff;
  --lavenderink:#583d7e;
  --mist:#dff5f2;
  --line:#a9cdd3;
  --reef-coral:#ff887a;
  --reef-sun:#ffd16d;
  --reef-blue:#0b5576;
  --reef-mint:#a8e9d2;
  --reef-cloud:#fff9f0;
}
html{background:var(--paper)}
body{
  color:var(--ink);
  background:
    radial-gradient(ellipse at 4% 18%,rgba(202,180,255,.19),transparent 29rem),
    radial-gradient(ellipse at 97% 42%,rgba(255,174,163,.16),transparent 27rem),
    var(--paper);
}
.site-header{
  background:linear-gradient(105deg,#eff4ff 0%,#f3eaff 56%,#ffe9ed 100%);
  border-bottom-color:#b5bfd9;
}
.brand-small{color:var(--pinkdark)}
.brand-large{color:var(--lavenderink)}
.nav a:not(.nav-cta){color:#194f69}
.nav-cta{border-color:#a51d61;color:#8c1f59;background:#fff3f8}
.nav-cta:hover{background:#a51d61;color:#fff}
.hero{
  background:
    radial-gradient(ellipse at 77% 13%,rgba(30,155,174,.68),transparent 49%),
    radial-gradient(ellipse at 10% 96%,rgba(127,77,157,.38),transparent 48%),
    linear-gradient(122deg,#103d66,#0c5c79 70%,#12496c);
}
.hero .eyebrow{color:#a9f3e5}
.hero h1 em{color:#ff91bd}
.hero-text strong{color:#b4f8e7}
.hero .btn{background:#ff8caf;border-color:#ff8caf;color:#173c56}
.hero .btn:hover{background:#ffc0d1;border-color:#ffc0d1}
.hero .text-link{color:#fff4cc}
.hero-art:before{background:#ef9cac;opacity:.55}
.hero-art:after{border-color:#8ee7dd}
.book-label{background:#fff8ed;border-color:#e39bb5;color:#173c56}
.ribbon{
  background:linear-gradient(90deg,#bbeddf 0%,#d8c8ff 50%,#ffc2c5 100%);
  color:#173f58;
}
.section{scroll-margin-top:96px}
#mission{
  background:linear-gradient(135deg,#f4eaff 0%,#f1f4ff 53%,#e2f7f3 100%);
  border-radius:0 0 42px 42px;
}
#mission .eyebrow{color:#a32869}
#mission .value{
  min-height:190px;
  padding:22px 19px 18px;
  border:1px solid #d2c4ed;
  border-top:5px solid #ed829e;
  border-radius:16px;
  background:linear-gradient(145deg,#fff9f3,#f7f0ff);
  box-shadow:0 10px 24px rgba(67,57,103,.08);
}
#mission .value:nth-child(2){border-top-color:#20a7a7;background:linear-gradient(145deg,#effff8,#eff5ff)}
#mission .value:nth-child(3){border-top-color:#f0b743;background:linear-gradient(145deg,#fff8df,#ffeff3)}
#mission .value-number{color:#a51d61}
#mission .value h3{color:#274a66}
#mission .value p{color:#405c6d}
.book-section{background:linear-gradient(135deg,#d8f5f3 0%,#e7efff 55%,#fae6f2 100%)}
.book-head .eyebrow,.book-head .authors{color:#8d2a68}
.book-story{color:#214b66}
.book-commitment{
  border-color:#e5a6c7;
  border-left-color:#d93683;
  background:linear-gradient(110deg,#ffe2ec 0%,#f1e3ff 60%,#dff9f1 100%);
  box-shadow:0 16px 32px rgba(102,55,103,.13);
}
.book-commitment .eyebrow{color:#8f245f}
.book-commitment h3{color:#163e59}
.book-reader{padding:18px;border:1px solid #acd4d6;border-radius:20px;background:linear-gradient(145deg,#fff5f3,#eff6ff);box-shadow:0 16px 38px rgba(18,72,96,.13)}
.reader-viewport{background:#fff7e9;border:1px solid #c9afdc}
.reader-stage{border-color:#bdd6df;background:transparent;box-shadow:none}
.reader-nav{
  border-color:#8cbfca;
  background:#e2f8f4;
  color:#174659;
}
.reader-nav:hover:not(:disabled){background:#c5efe8}
.reader-label{color:#512f78}
.book-reader .sample-note{color:#496b77;font-weight:700}
.reader-enlarge{border-color:#d69dbd;background:#fff0f5;color:#862256}
.reader-enlarge:hover{background:#ffe0eb}
.belong{
  position:relative;
  isolation:isolate;
}
.belong:before{
  content:"";
  position:absolute;
  inset:10px 0;
  z-index:-1;
  border-radius:34px;
  background:linear-gradient(110deg,#dff6f2,#f0e7ff 55%,#fff0df);
}
.belong .eyebrow{color:#a32869}
.belong aside{border-left-color:#d38aa8}
.belong aside p{color:#31556a}
#help{
  background:linear-gradient(180deg,#f3f5ff 0%,#e7f8f2 100%);
  border-radius:36px;
}
.facts-head .eyebrow{color:#a32869}
.facts-head p{color:#355c70}
.fact{
  padding:20px 18px 18px;
  border:1px solid #c4d7df;
  border-top:5px solid #ed829e;
  border-radius:15px;
  background:linear-gradient(150deg,#fff9f2,#f2f1ff);
  box-shadow:0 8px 20px rgba(21,67,94,.06);
}
.fact:nth-child(3n+2){border-top-color:#21a3a4;background:linear-gradient(150deg,#effff8,#eef5ff)}
.fact:nth-child(3n){border-top-color:#f1b844;background:linear-gradient(150deg,#fff8e4,#fff0f1)}
.fact h3{color:#214967}
.fact p{color:#3e5c6b}
.source{color:#075e79;font-weight:700}
.give{
  border:1px solid #e6a8c0;
  background:linear-gradient(112deg,#ffe0e9,#f4e1ff 65%,#e1f8ee);
  box-shadow:0 12px 28px rgba(87,51,90,.1);
}
.give h3{color:#683a70}
.give p{color:#3e5266}
.give .btn{background:#8e245d;border-color:#8e245d;color:#fff}
.give .btn:hover{background:#6f174a;border-color:#6f174a}
.give-note{color:#4b3c59}
.contact-shell{background:linear-gradient(120deg,#fff6e8,#f1e7ff 50%,#dff5f2);padding-top:22px}
.contact{
  border:1px solid #dab6dd;
  background:linear-gradient(135deg,#f4e6ff 0%,#ffe7ed 55%,#dff8ef 100%);
  box-shadow:0 18px 40px rgba(62,46,96,.12);
}
.contact .eyebrow{color:#75418a}
.contact h2{color:#214967}
.contact-copy>p,.contact-lede{color:#35566d}
.contact-tag{border-color:#bf86ad;background:#fff4f7;color:#772451}
.google-signup{
  padding:20px;
  border:1px solid #d4c0e5;
  border-radius:18px;
  background:rgba(255,251,247,.88);
  box-shadow:0 10px 24px rgba(63,51,93,.08);
}
.google-signup h3{color:#633d7e}
.interest-form .field{color:#25485f}
.interest-form input:not([type=checkbox]):not([type=radio]),.interest-form textarea{
  border-color:#9eb9cd;
  background:#fffdf8;
  color:#173c56;
}
.interest-form input:focus-visible,.interest-form textarea:focus-visible{
  outline-color:#c52d79;
  border-color:#c52d79;
  box-shadow:0 0 0 3px rgba(197,45,121,.16);
}
.marketing-choice{border-color:#c8b4dc}
.form-consent input,.radio-option input{accent-color:#b12670}
.preview-notice{color:#5c3677}
.google-form-note,.privacy,.notice-details{color:#425a70}
.shipping-details{border-color:#c8b4dc}
.site-footer{
  color:#d5eeef;
  background:linear-gradient(100deg,#123e62,#0a6278);
}
.site-footer .footer-title{color:#fff0c6}
.site-footer .footer-note{color:#c9e8e8}
.footer-top{color:#fff}
.game-section{
  background:
    radial-gradient(ellipse at 100% 0%,rgba(28,142,161,.4),transparent 45%),
    linear-gradient(118deg,#103d62,#07576b);
}
.game-toolbar strong{color:#ffdc79}
.litter-one{background:#ffd78c;color:#3c4c57}
.litter-two{background:#f7bfd8;color:#473b5c}
.litter-three{background:#a9e8df;color:#17495c}
.litter-four{background:#e0cfff;color:#4b356a}
.litter-five{background:#ffc5a8;color:#533a52}
.litter-six{background:#b8e8fd;color:#164b66}
.litter:hover{background:#fff4d7}
.reset-game{background:#134f69;color:#fff;border-color:#80d3d1;min-height:48px}
.reset-game:hover,.motion-toggle:hover{background:#1d7080}
.game-status{color:#e1fff5}
.game-safety{color:#d5eeee}
.reef-game-section{
  background:
    radial-gradient(ellipse at 4% 12%,rgba(255,146,179,.2),transparent 28rem),
    radial-gradient(ellipse at 96% 80%,rgba(86,195,183,.2),transparent 30rem),
    linear-gradient(118deg,#123f65,#075a70);
}
.reef-game-card{background:linear-gradient(145deg,#fff8ee,#f2edff 58%,#e8fbf5);border:1px solid #a8d8d6}
.reef-mission-count{color:#a32366}
.reef-game-top h3{color:#204966}
.reef-instruction{color:#31586c}
.reef-scene{border-color:#75d4d6;box-shadow:inset 0 -45px 70px #07566d,0 12px 26px rgba(12,57,78,.16)}
.reef-choice{border-color:#7fb9c2;background:#fffaf3;color:#17465d}
.reef-choice:hover{background:#dcf9ee}
.reef-choice[aria-pressed="true"]{background:#f9dcea;border-color:#c3397b}
.reef-science{border-color:#b8d6d4;color:#345c68}
.reef-source{color:#075f7c}
.reef-next{background:#b92770;color:#fff}
.reef-next:hover{background:#921c5a}
.reef-safety{border:2px solid #edbe53;background:#fff1c4;color:#293f4c}
.reef-safety strong{color:#8e245d}
.theo-feature{background:linear-gradient(120deg,#d9f6f1,#e8e2ff 55%,#ffe5eb)}
.theo-feature-art{border:2px solid #75cbd0;box-shadow:0 22px 48px rgba(18,63,96,.24)}
.theo-feature-copy .eyebrow{color:#a51d61}
.theo-play-toggle{background:#b52a70;border-color:#b52a70}
.theo-play-toggle:hover{background:#8f205b;border-color:#8f205b}
.theo-play-toggle:focus-visible{outline-color:#0d6579}
.motion-toggle{min-height:48px;padding:10px 17px;font-size:13px}
.reset-game{min-height:48px;padding:9px 17px}
.source{display:inline-flex;align-items:center;min-height:48px}
.form-consent,.radio-option{min-height:48px;align-items:center}
.notice-details summary,.shipping-details summary{min-height:48px;display:flex;align-items:center}
.reader-dialog .close{min-height:48px}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{
  outline-color:#a51d61;
  outline-offset:3px;
}
@media(max-width:700px){
  #mission{border-radius:0 0 26px 26px}
  #mission .value{min-height:0;padding:18px 16px}
  .book-reader{padding:11px;border-radius:16px}
  .book-commitment{border-radius:15px}
  #help{border-radius:24px}
  .fact{padding:16px 13px 14px}
  .give{border-radius:17px}
  .contact-shell{padding-top:12px}
  .google-signup{padding:15px;border-radius:14px}
  .reef-game-card{border-radius:20px}
  .reef-game-section .reef-safety{box-shadow:0 6px 18px rgba(11,50,70,.2)}
}
@media(prefers-reduced-motion:reduce){
  .btn,.reader-nav,.reader-enlarge,.theo-play-toggle{transition:none}
}

/* Mission section: a bold storybook reef scene and three real next steps. */
#mission.mission-section{
  position:relative;
  width:100%;
  max-width:none;
  padding:0;
  overflow:hidden;
  border-radius:0;
  background:
    radial-gradient(ellipse at 5% 6%,rgba(255,204,100,.32),transparent 24rem),
    radial-gradient(ellipse at 94% 91%,rgba(86,204,196,.28),transparent 26rem),
    linear-gradient(145deg,#eff7ff 0%,#f8edff 52%,#fff3e8 100%);
}
#mission .mission-inner{
  padding-top:clamp(42px,6vw,76px);
  padding-bottom:clamp(46px,6vw,78px);
}
#mission .mission-intro{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(220px,.75fr);
  align-items:center;
  gap:clamp(22px,5vw,70px);
  min-height:350px;
  margin-bottom:26px;
  padding:clamp(28px,5vw,58px);
  overflow:hidden;
  border:2px solid #328e9d;
  border-radius:34px;
  background:
    radial-gradient(ellipse at 84% 20%,rgba(57,177,181,.54),transparent 36%),
    radial-gradient(ellipse at 3% 100%,rgba(119,80,153,.35),transparent 43%),
    linear-gradient(120deg,#113e66 0%,#0a637a 72%,#126879 100%);
  box-shadow:0 22px 48px rgba(31,58,103,.2);
}
#mission .mission-intro:before,
#mission .mission-intro:after{
  content:"";
  position:absolute;
  z-index:-1;
  border:1px solid rgba(186,247,232,.48);
  border-radius:50%;
  pointer-events:none;
}
#mission .mission-intro:before{width:390px;height:390px;right:-104px;top:-184px}
#mission .mission-intro:after{width:250px;height:250px;right:-65px;bottom:-168px;border-color:rgba(255,201,116,.56)}
#mission .mission-copy{position:relative;z-index:1;max-width:670px}
#mission .mission-copy .eyebrow{margin:0 0 13px;color:#aaf2de}
#mission #mission-title{
  max-width:660px;
  margin:0 0 18px;
  color:#fff8e8;
  font-size:clamp(39px,5.4vw,68px);
  line-height:1.02;
  letter-spacing:-.055em;
  text-wrap:balance;
}
#mission .mission-statement{
  max-width:660px;
  margin:0;
  color:#e4f5f4;
  font-size:clamp(16px,1.6vw,19px);
  line-height:1.65;
}
#mission .mission-portrait{
  position:relative;
  display:grid;
  align-self:stretch;
  min-height:245px;
  place-items:center;
}
#mission .mission-sun{
  position:absolute;
  width:min(100%,275px);
  aspect-ratio:1;
  border:2px solid rgba(255,220,130,.95);
  border-radius:44% 56% 47% 53% / 51% 43% 57% 49%;
  background:
    radial-gradient(circle at 32% 25%,#fff4a7 0 5%,transparent 5.5%),
    radial-gradient(circle at 69% 73%,#ffc1cc 0 4%,transparent 4.5%),
    linear-gradient(145deg,#ffd976,#ff9e8e 60%,#e987b9);
  box-shadow:0 14px 32px rgba(4,36,59,.23);
  transform:rotate(-7deg);
}
#mission .mission-portrait img{
  position:relative;
  z-index:1;
  width:min(78%,230px);
  max-height:285px;
  object-fit:contain;
  filter:drop-shadow(0 12px 12px rgba(4,35,51,.28));
}
#mission .mission-caption{
  position:absolute;
  z-index:2;
  right:2%;
  bottom:4%;
  padding:8px 15px;
  border:2px solid #fff1c5;
  border-radius:24px;
  background:#fff1c5;
  color:#173d59;
  font-size:13px;
  font-weight:800;
  letter-spacing:.03em;
  transform:rotate(4deg);
}
#mission .values{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:19px;
  margin:0;
}
#mission .value{
  position:relative;
  display:flex;
  min-width:0;
  min-height:315px;
  flex-direction:column;
  align-items:flex-start;
  gap:0;
  overflow:hidden;
  padding:27px clamp(20px,3vw,35px) 24px;
  border:2px solid #c5b2e7;
  border-top:2px solid #c5b2e7;
  border-radius:24px;
  background:linear-gradient(145deg,#fff8f0 0%,#f3e8ff 100%);
  box-shadow:0 13px 28px rgba(59,54,104,.11);
}
#mission .mission-card--self{grid-column:span 7;border-color:#d9a2c0;background:linear-gradient(145deg,#fff0e8 0%,#f4dcf6 100%)}
#mission .mission-card--kindness{grid-column:span 5;border-color:#86c9c9;background:linear-gradient(145deg,#e6fbf4 0%,#e4efff 100%)}
#mission .mission-card--home{
  grid-column:1/-1;
  min-height:202px;
  display:grid;
  grid-template-columns:136px minmax(0,1fr) auto;
  align-items:center;
  column-gap:22px;
  border-color:#e9bd71;
  background:linear-gradient(105deg,#fff1d3 0%,#ffeadb 53%,#e6f8ee 100%);
}
#mission .mission-card:before{
  content:"";
  position:absolute;
  width:168px;
  height:168px;
  right:-67px;
  bottom:-90px;
  border:1px solid rgba(104,84,151,.2);
  border-radius:50%;
  pointer-events:none;
}
#mission .mission-art{
  position:relative;
  z-index:1;
  display:grid;
  width:116px;
  height:116px;
  place-items:center;
  margin:0 0 15px auto;
  border:1px solid rgba(255,255,255,.9);
  border-radius:38% 62% 48% 52% / 55% 42% 58% 45%;
  background:#e7caff;
  box-shadow:0 8px 18px rgba(63,46,93,.12);
}
#mission .mission-card--kindness .mission-art{background:#ffd0d8}
#mission .mission-card--home .mission-art{width:124px;height:124px;margin:0;background:#d1f1df}
#mission .mission-art svg{width:82%;height:82%;overflow:visible}
#mission .mission-card-tag{
  position:relative;
  z-index:1;
  margin:0 0 8px;
  color:#7b3e78;
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  line-height:1.4;
  text-transform:uppercase;
}
#mission .mission-card--kindness .mission-card-tag{color:#116879}
#mission .mission-card--home .mission-card-tag{color:#8b4c25}
#mission .mission-card h3{
  position:relative;
  z-index:1;
  max-width:100%;
  margin:0 0 10px;
  color:#1c4561;
  font-size:clamp(25px,2.8vw,35px);
  line-height:1.1;
  letter-spacing:-.035em;
}
#mission .mission-card p:not(.mission-card-tag){
  position:relative;
  z-index:1;
  max-width:52ch;
  margin:0 0 17px;
  color:#35566b;
  font-size:15px;
  line-height:1.65;
}
#mission .mission-card--kindness p:not(.mission-card-tag){max-width:38ch}
#mission .mission-home-copy{min-width:0}
#mission .mission-home-copy p:not(.mission-card-tag){margin-bottom:0}
#mission .mission-action{
  position:relative;
  z-index:1;
  display:inline-flex;
  min-height:50px;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-top:auto;
  padding:10px 17px;
  border:2px solid #7b3372;
  border-radius:28px;
  background:#7b3372;
  color:#fff;
  font-size:14px;
  font-weight:800;
  line-height:1.2;
  text-decoration:none;
}
#mission .mission-card--kindness .mission-action{border-color:#126779;background:#126779}
#mission .mission-card--home .mission-action{border-color:#a44e38;background:#a44e38;white-space:nowrap}
#mission .mission-action:hover{background:#173f60;border-color:#173f60}
#mission .mission-action:focus-visible{outline:3px solid #173f60;outline-offset:4px}
@media(max-width:760px){
  #mission .mission-inner{padding-top:38px;padding-bottom:42px}
  #mission .mission-intro{
    grid-template-columns:minmax(0,1fr) 142px;
    gap:14px;
    min-height:0;
    padding:25px 21px 24px;
    border-radius:26px;
  }
  #mission .mission-copy{grid-column:1/-1}
  #mission #mission-title{font-size:clamp(37px,8vw,52px)}
  #mission .mission-portrait{grid-column:1/-1;min-height:175px}
  #mission .mission-sun{width:164px}
  #mission .mission-portrait img{width:142px;max-height:165px}
  #mission .mission-caption{right:calc(50% - 112px);bottom:0}
  #mission .values{grid-template-columns:1fr;gap:15px}
  #mission .value,#mission .mission-card--self,#mission .mission-card--kindness,#mission .mission-card--home{
    grid-column:1/-1;
    width:100%;
    min-height:0;
    border-radius:20px;
  }
  #mission .mission-card--self,#mission .mission-card--kindness{padding:20px 20px 20px}
  #mission .mission-art{width:90px;height:90px;margin-bottom:12px}
  #mission .mission-card--home{
    grid-template-columns:86px minmax(0,1fr);
    column-gap:15px;
    row-gap:13px;
    padding:18px;
  }
  #mission .mission-card--home .mission-art{width:82px;height:82px;grid-row:1/3}
  #mission .mission-card h3{font-size:clamp(25px,6vw,31px)}
  #mission .mission-card--home .mission-action{grid-column:1/-1;justify-self:start;white-space:normal}
}
@media(max-width:390px){
  #mission .mission-intro{padding:22px 18px;border-radius:22px}
  #mission .mission-copy .eyebrow{font-size:10px}
  #mission #mission-title{font-size:36px}
  #mission .mission-statement{font-size:15px}
  #mission .mission-card--home{grid-template-columns:70px minmax(0,1fr);gap:12px;padding:15px}
  #mission .mission-card--home .mission-art{width:68px;height:68px}
  #mission .mission-card--home .mission-card-tag{font-size:10px}
  #mission .mission-card--home h3{font-size:24px}
}