/* Jammin Sprouts — the public landing page.
   Colours are the app's screen palette; type is the brand pair (Baloo 2 for
   headings, Quicksand for everything else). See the brand guide in
   Drive > Assets.

   Compact on purpose: everything above fits in about two screens, so nobody
   has to scroll to find out what this is. */

:root {
  --cream: #fdf6ec;
  --paper: #fffbf4;
  --sage: #8fa170;
  --sage-deep: #6e8253;
  --sage-soft: #e6ead9;
  --coral: #e08a70;
  --coral-deep: #c97f6d;
  --coral-soft: #f6ded4;
  --pink: #efc3b8;
  --pink-soft: #f9e9e4;
  --butter: #e9c87e;
  --butter-soft: #f7ecd3;
  --ink: #5c4b3a;
  --soft: #8c7a69;
  --white: #fffdf9;
}

* { box-sizing: border-box; }

/* Sage behind everything, cream on the page itself. So a short page, and the
   rubber-band bounce at either end on a phone, show sage rather than a strip
   of cream hanging off the end of the footer. */
html { background: var(--sage-deep); }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: Quicksand, "Trebuchet MS", sans-serif;
  font-weight: 500;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2 {
  font-family: "Baloo 2", Quicksand, sans-serif;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 8px;
}

img { max-width: 100%; height: auto; }
a { color: var(--sage-deep); }

/* ---------- header ---------- */
.top {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 22px;
  /* Deep sage band, so the top and bottom of the page frame the cream middle
     instead of dissolving into it. The wordmark is live text, not part of an
     image, so it just flips to cream — nothing is lost. */
  background: rgba(110, 130, 83, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 2px dotted rgba(253, 246, 236, 0.35);
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--cream);
  font-family: "Baloo 2", Quicksand, sans-serif;
  font-weight: 800;
  font-size: 17px;
}
/* The sprout mark is soft green on transparent, so on a green band it would
   go muddy. A cream disc keeps it crisp and reads as a little seal. */
.markdot {
  display: grid;
  place-items: center;
  background: var(--cream);
  border-radius: 50%;
  flex: none;
}
.brand .markdot { width: 34px; height: 34px; }
.brand .markdot img { width: 22px; }
.brand em { font-style: normal; color: var(--butter); }

.topnav { display: flex; align-items: center; gap: 18px; }
.topnav a { text-decoration: none; font-weight: 700; font-size: 14px; color: var(--cream); }
.topnav a:hover { color: var(--butter); }
/* Inverted against the dark band — cream pill, sage type — so the one thing
   families actually came for still leads. */
.login, .topnav .login {
  background: var(--cream);
  color: var(--sage-deep);
  padding: 8px 16px;
  border-radius: 999px;
}
.login:hover, .topnav .login:hover { background: var(--butter); color: var(--sage-deep); }

/* ---------- layout ---------- */
main { max-width: 940px; margin: 0 auto; padding: 0 22px; }
section { padding: 40px 0; text-align: center; }

/* ---------- hero ---------- */
.hero { padding: 26px 0 30px; }
.hero-logo { width: min(320px, 72vw); }
.lede {
  font-size: 19px;
  color: var(--soft);
  max-width: 32ch;
  margin: 14px auto 18px;
}
.herobtns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 0; }

.cta {
  display: inline-block;
  background: var(--coral);
  color: var(--white);
  text-decoration: none;
  font-family: "Baloo 2", Quicksand, sans-serif;
  font-weight: 700;
  font-size: 17px;
  padding: 11px 26px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(224, 138, 112, 0.35);
}
.cta:hover { background: var(--coral-deep); }
.cta.ghost {
  background: var(--white);
  color: var(--sage-deep);
  box-shadow: 0 2px 8px rgba(92, 75, 58, 0.1);
}
.cta.ghost:hover { background: var(--sage-soft); }

/* ---------- three promises ---------- */
.promises {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  padding-top: 10px;
}
.promise {
  background: var(--white);
  border-radius: 22px;
  padding: 20px 18px;
  box-shadow: 0 2px 12px rgba(92, 75, 58, 0.07);
}
/* A gentle tilt so the row feels handmade rather than laid out. */
.tilt-l { transform: rotate(-1.4deg); }
.tilt-r { transform: rotate(1.4deg); }
.promise img { width: 46px; margin-bottom: 4px; }
.promise h2 { font-size: 20px; color: var(--coral); }
.promise p { margin: 0; font-size: 15px; color: var(--soft); }

/* ---------- the day ---------- */
.band {
  background: var(--sage-soft);
  border-radius: 26px;
  padding: 30px 24px;
  margin: 8px 0;
}
.bandtitle { font-size: 23px; color: var(--sage-deep); }
.ribbon {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 0;
  margin: 14px 0 0;
  counter-reset: step;
}
.ribbon li {
  background: var(--white);
  border-radius: 999px;
  padding: 7px 15px 7px 11px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ribbon li span { font-size: 15px; }
.bandnote { color: var(--sage-deep); font-weight: 700; font-size: 14px; margin: 18px 0 8px; }

.lanes {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 0;
  margin: 0;
}
.lanes li {
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 14px;
  font-weight: 600;
}
.lanes b { display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.l-mon { background: var(--coral-soft); color: var(--coral-deep); }
.l-tue { background: var(--butter-soft); color: #b08d3c; }
.l-wed { background: var(--white); color: var(--sage-deep); }
.l-thu { background: var(--pink-soft); color: var(--coral-deep); }
.l-fri { background: var(--white); color: var(--sage-deep); }

/* ---------- the year ---------- */
.year { position: relative; }
.year .rainbow { width: 76px; margin-bottom: 2px; }
.year h2 { font-size: 23px; color: var(--sage-deep); }
.bigfact {
  font-family: "Baloo 2", Quicksand, sans-serif;
  font-weight: 800;
  font-size: 25px;
  color: var(--coral);
  margin: 4px 0 2px;
}
/* margin-BLOCK only. The shorthand `margin: 3px 0` also sets the left/right
   margins to 0, and being more specific than .quiet it beat .quiet's
   `margin-inline: auto` — which left that one narrow line pinned to the left
   edge while the rest of the section stayed centred. */
.year p { margin-block: 3px; }
.quiet { color: var(--soft); font-size: 15px; max-width: 42ch; margin-inline: auto; }

/* ---------- say hello ---------- */
.hello {
  background: var(--pink-soft);
  border-radius: 26px;
  padding: 30px 24px 34px;
  position: relative;
}
.hello .sprig { width: 54px; margin-bottom: 2px; }
.hello h2 { font-size: 23px; color: var(--coral-deep); }
#helloform { max-width: 520px; margin: 16px auto 0; text-align: left; }
#helloform .row { display: flex; gap: 12px; flex-wrap: wrap; }
#helloform .row label { flex: 1 1 190px; }
#helloform label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--sage-deep);
  margin-bottom: 10px;
}
#helloform input,
#helloform textarea {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 15px;
  margin-top: 4px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 2px solid var(--white);
  background: var(--white);
  color: var(--ink);
  outline: none;
  resize: vertical;
}
#helloform input:focus,
#helloform textarea:focus { border-color: var(--coral); }
#helloform .hp { position: absolute; left: -9999px; }
#helloform button { margin-top: 4px; }
.formsays { font-size: 14px; font-weight: 700; margin: 10px 0 0; min-height: 1.2em; }
.formsays.good { color: var(--sage-deep); }
.formsays.bad { color: var(--coral-deep); }

/* ---------- footer ---------- */
.foot {
  text-align: center;
  background: var(--sage-deep);
  color: rgba(253, 246, 236, 0.85);
  font-size: 14px;
  padding: 34px 22px 44px;
  margin-top: 40px;
  border-top: 2px dotted rgba(253, 246, 236, 0.35);
}
.footmark { width: 42px; height: 42px; margin: 0 auto 8px; }
.footmark img { width: 28px; }
.foot p { margin: 3px 0; }
.footname {
  font-family: "Baloo 2", Quicksand, sans-serif;
  font-weight: 700;
  color: var(--cream);
  font-size: 16px;
}
/* Words in cream so the chant is readable; hearts in blossom so it stays sweet. */
.motto { color: var(--cream); letter-spacing: 0.06em; }
.motto i { font-style: normal; color: var(--pink); }
.footlinks { margin-top: 10px !important; }
.footlinks a { font-weight: 700; color: var(--cream); }
.footlinks a:hover { color: var(--butter); }

/* ---------- back to top ---------- */
.totop {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: var(--sage-deep);
  color: var(--white);
  border-radius: 50%;
  text-decoration: none;
  font-size: 18px;
  box-shadow: 0 3px 12px rgba(92, 75, 58, 0.25);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.totop.show { opacity: 1; pointer-events: auto; transform: none; }

html { scroll-behavior: smooth; }

@media (max-width: 620px) {
  section { padding: 30px 0; }
  .topnav { gap: 12px; }
  .topnav a:not(.login) { font-size: 13px; }
  .brand span { font-size: 15px; }
  .tilt-l, .tilt-r { transform: none; }
  .hello, .band { padding-inline: 18px; }
}