/* Homework Huddle — shared styles (design system borrowed from yourmathmom.com) */
:root {
  --purple: #3170e9; /* blue — Huddle's lead accent */
  --pink: #fbaed6;   /* soft pink */
  --rose: #ec4899;   /* deep pink */
  --teal: #fc5206;   /* bold orange */
  --sun: #feca0f;    /* sunny yellow */
  --ink: #333130;    /* charcoal */
  --cream: #fff0f8;  /* soft pink background */
  --paper: #f0f5ff;  /* soft blue background (Huddle flavor) */
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Nunito', system-ui, sans-serif;
  color: var(--ink);
  /* math-notebook graph paper: faint grid under everything light */
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(49,112,233,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(49,112,233,0.055) 1px, transparent 1px);
  background-size: 26px 26px;
  line-height: 1.6;
  overflow-x: hidden;
}
::selection { background: var(--pink); color: var(--ink); }
h1, h2, h3, .brand, .hbrand { font-family: 'Fredoka', sans-serif; }

/* ---------- Top nav (identical on every page of the site) ---------- */
.hnav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.7rem 1.2rem;
  background: #fff;
  border-bottom: 3px solid var(--ink);
}
.hbrand { font-size: 1.25rem; font-weight: 700; color: var(--ink); text-decoration: none; white-space: nowrap; }
.hbrand .pop { color: var(--rose); }
.hlinks { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; justify-content: flex-end; }
.hlinks a { color: var(--ink); text-decoration: none; font-weight: 800; font-size: 0.95rem; white-space: nowrap; }
.hlinks a:hover { color: var(--rose); }
.hlinks a.tutor-link {
  background: var(--rose); color: #fff;
  padding: 0.35rem 0.9rem; border-radius: 999px;
  box-shadow: 0 3px 0 rgba(0,0,0,0.18);
}
.hlinks a.tutor-link:hover { color: #fff; background: var(--purple); }
.hlinks a.account-link, .nav-links a.account-link {
  width: 36px; height: 36px; border-radius: 50%; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink); background: var(--paper);
  font-size: 1.05rem; line-height: 1;
  box-shadow: 0 2px 0 rgba(0,0,0,0.15);
}
.hlinks a.account-link:hover, .nav-links a.account-link:hover { background: var(--sun); }
.hlinks a.account-link.on { background: var(--sun); box-shadow: 2px 2px 0 var(--ink); }
@media (max-width: 560px) {
  .hnav { flex-direction: column; align-items: center; gap: 0.45rem; padding: 0.6rem 0.8rem; }
  .hlinks { justify-content: center; gap: 0.5rem 1rem; }
}

/* Huddle pages: the section tabs live INSIDE the one nav bar (no second menu) */
.hlinks.tabs { gap: 0.45rem; }
.hlinks.tabs a {
  font-size: 0.88rem;
  padding: 0.24rem 0.85rem; border-radius: 999px;
  border: 2px solid transparent;
}
.hlinks.tabs a:hover { border-color: var(--ink); background: var(--paper); color: var(--ink); }
.hlinks.tabs a.on { background: var(--purple); color: #fff; border-color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.hlinks.tabs a.on:hover { color: #fff; background: var(--purple); }
.hlinks.tabs a.tutor-link { padding: 0.35rem 0.9rem; border: none; }

/* ---------- Hero ---------- */
.hhero {
  position: relative;
  text-align: center;
  padding: 4rem 1.5rem 4.5rem;
  background: linear-gradient(160deg, var(--purple) 0%, var(--rose) 100%);
  color: #fff;
  overflow: hidden;
}
/* hand-drawn wave along the hero's bottom edge, colored like the next section */
.hhero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 18px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 18" preserveAspectRatio="none"><path d="M0 18 V9 Q22.5 0 45 9 T90 9 V18 Z" fill="%23fff0f8"/></svg>') repeat-x bottom;
  background-size: 90px 18px;
  pointer-events: none;
}
.hhero.to-paper::after {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 18" preserveAspectRatio="none"><path d="M0 18 V9 Q22.5 0 45 9 T90 9 V18 Z" fill="%23f0f5ff"/></svg>');
}

/* Katie peeking over the top edge of a card (bottom half cropped = "behind" the card) */
.has-peek { position: relative; }
.peek {
  position: absolute; top: -52px; right: 22px;
  width: 86px; height: 52px; overflow: hidden;
  pointer-events: none;
}
.peek img { width: 86px; height: auto; display: block; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.18)); }
a.peek { pointer-events: auto; cursor: pointer; }
a.peek:hover img { transform: translateY(-6px); }
.float {
  position: absolute;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  opacity: 0.18;
  user-select: none;
  pointer-events: none;
  animation: bob 6s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-6deg);} 50% { transform: translateY(-22px) rotate(6deg);} }
@media (prefers-reduced-motion: reduce) { .float { animation: none; } }
.badge {
  display: inline-block;
  background: rgba(255,255,255,0.22);
  backdrop-filter: blur(4px);
  border: 2px solid rgba(255,255,255,0.5);
  padding: 0.4rem 1.1rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
  z-index: 2; position: relative;
}
.hhero h1 {
  font-size: clamp(2.4rem, 8vw, 4.4rem);
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 1rem;
  text-shadow: 0 6px 24px rgba(0,0,0,0.18);
  z-index: 2; position: relative;
}
.hhero h1 .pop { color: var(--sun); }
.hhero .tagline {
  font-size: clamp(1.05rem, 3.2vw, 1.4rem);
  font-weight: 700;
  max-width: 620px;
  margin: 0 auto 2rem;
  z-index: 2; position: relative;
}
.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: #fff;
  color: var(--purple);
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
  padding: 0.95rem 2.1rem;
  border-radius: 999px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: 0 9px 0 rgba(0,0,0,0.15), 0 13px 28px rgba(0,0,0,0.25);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  z-index: 2; position: relative;
}
.cta:hover { transform: translateY(-3px); box-shadow: 0 12px 0 rgba(0,0,0,0.15), 0 17px 34px rgba(0,0,0,0.3); }
.cta:active { transform: translateY(4px); box-shadow: 0 3px 0 rgba(0,0,0,0.15), 0 6px 16px rgba(0,0,0,0.25); }
.cta.rose { color: var(--rose); }
.cta-sub { margin-top: 1rem; font-weight: 700; opacity: 0.9; font-size: 0.92rem; z-index: 2; position: relative; }
.cta-sub a { color: #fff; font-weight: 800; }

/* compact how-it-works strip inside the hero */
.mini-steps { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; margin-top: 1.4rem; z-index: 2; position: relative; }
.mini-steps span {
  background: rgba(255,255,255,0.18); border: 2px solid rgba(255,255,255,0.45);
  border-radius: 999px; padding: 0.32rem 0.95rem;
  font-weight: 800; font-size: 0.84rem;
}

/* ---------- Motion (guarded: none of this runs for reduced-motion users) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  /* one orchestrated hero entrance per page load */
  .hhero .badge   { animation: rise 0.5s ease-out backwards 0.05s; }
  .hhero h1       { animation: rise 0.5s ease-out backwards 0.12s; }
  .hhero .tagline { animation: rise 0.5s ease-out backwards 0.2s; }
  .hhero .mini-steps { animation: rise 0.5s ease-out backwards 0.28s; }
  .hhero .cta     { animation: rise 0.5s ease-out backwards 0.34s; }
  .hhero .cta-sub { animation: rise 0.5s ease-out backwards 0.4s; }
  /* emoji discs wiggle when their card is hovered */
  @keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-9deg); } 75% { transform: rotate(9deg); } }
  a.card:hover .emoji-disc,
  .method:hover .m-disc,
  .sneak-item:hover .m-disc { animation: wiggle 0.4s ease-in-out; }
  /* Katie images wiggle on hover; the peeking Katie pops up from behind her card */
  .callout img:hover, .finale img:hover { animation: wiggle 0.45s ease-in-out; }
  @keyframes peekUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
  .peek img { animation: peekUp 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s backwards; transition: transform 0.25s ease; }
  .has-peek:hover .peek img { transform: translateY(-5px); }
  /* content drifts in as it scrolls into view (modern browsers; others just show it) */
  @supports (animation-timeline: view()) {
    .cards .card, .plan, .step, .method, .chat, .mstep, .sneak-item {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }
  }
}

/* highlighter swipe behind the colored word in light-section titles */
.section-title .pop, .band-title .pop { position: relative; z-index: 1; white-space: nowrap; }
.section-title .pop::after, .band-title .pop::after {
  content: ""; position: absolute; z-index: -1;
  left: -0.12em; right: -0.12em; bottom: 0.06em; height: 0.42em;
  background: var(--sun); opacity: 0.6;
  transform: skew(-12deg) rotate(-1deg);
  border-radius: 0.12em;
}
.bg-rose .section-title .pop::after { display: none; } /* sun-on-rose titles: no swipe */

/* ---------- Sections ---------- */
section.block { padding: 4rem 1.5rem; }
.wrap { max-width: 980px; margin: 0 auto; }
.section-title { font-size: clamp(1.9rem, 5.5vw, 2.7rem); font-weight: 700; text-align: center; margin-bottom: 0.6rem; }
.section-title .pop { color: var(--purple); }
.section-sub { text-align: center; font-size: 1.08rem; font-weight: 600; opacity: 0.75; max-width: 660px; margin: 0 auto 2.6rem; }
.bg-pink { background: var(--pink); }
.bg-cream { background: var(--cream); }
.bg-rose { background: var(--rose); color: #fff; }
.bg-rose .section-title .pop { color: var(--sun); }

/* ---------- Cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 1.3rem; }
.card {
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 22px;
  padding: 1.7rem 1.5rem;
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform 0.12s ease;
  color: var(--ink);
  text-decoration: none;
  display: block;
}
a.card:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 var(--ink); }
.card .emoji { font-size: 2.3rem; display: block; margin-bottom: 0.6rem; }
.card h3 { font-size: 1.25rem; line-height: 1.2; font-weight: 600; margin-bottom: 0.35rem; text-wrap: balance; }
.card p { font-weight: 600; opacity: 0.78; font-size: 0.97rem; }
.card .go { display: inline-block; margin-top: 0.8rem; font-weight: 800; color: var(--purple); }

/* colored accents — variety so the site isn't all identical white boxes */
.card.acc-purple { box-shadow: 6px 6px 0 var(--purple); }
.card.acc-rose { box-shadow: 6px 6px 0 var(--rose); }
.card.acc-sun { box-shadow: 6px 6px 0 var(--sun); }
.card.acc-teal { box-shadow: 6px 6px 0 var(--teal); }
a.card.acc-purple:hover { box-shadow: 8px 8px 0 var(--purple); }
a.card.acc-rose:hover { box-shadow: 8px 8px 0 var(--rose); }
a.card.acc-sun:hover { box-shadow: 8px 8px 0 var(--sun); }
a.card.acc-teal:hover { box-shadow: 8px 8px 0 var(--teal); }
.emoji-disc {
  width: 62px; height: 62px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.9rem; border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  margin-bottom: 0.75rem; background: var(--pink);
}
.emoji-disc.purple { background: #dbe7ff; }
.emoji-disc.sun { background: #fff3c4; }
.emoji-disc.teal { background: #ffe0d1; }

/* tool-card tags (hub): what kind of thing each card is + what it costs */
.card .tooltag {
  display: inline-block; background: var(--paper); border: 2px solid var(--ink);
  border-radius: 999px; padding: 0.05rem 0.65rem;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em;
  margin-bottom: 0.55rem;
}
.card .tooltag.paid { background: var(--sun); }

/* Free vs Unlimited comparison (hub pricing) */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 1.3rem; max-width: 760px; margin: 0 auto; }
.plan {
  background: #fff; color: var(--ink);
  border: 3px solid var(--ink); border-radius: 22px;
  box-shadow: 6px 6px 0 var(--ink);
  padding: 1.7rem 1.5rem; text-align: left;
  display: flex; flex-direction: column;
}
.plan.featured { box-shadow: 6px 6px 0 var(--sun); }
.plan h3 { font-size: 1.3rem; font-weight: 600; }
.plan .amount { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.55rem; color: var(--purple); margin: 0.15rem 0 0.8rem; }
.plan.featured .amount { color: var(--rose); }
.plan ul { list-style: none; margin: 0 0 1.3rem; flex: 1; }
.plan li { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.5rem; }
.plan .cta { display: flex; justify-content: center; width: 100%; font-size: 1.05rem; padding: 0.85rem 1.2rem; }

/* prominent "we're working on it" state (decoder + challenge) */
.thinking {
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
  margin: 1.4rem auto 0; padding: 1.5rem 1.3rem;
  background: var(--paper); border: 3px dashed var(--purple); border-radius: 18px;
  max-width: 520px; text-align: center;
}
.thinking .spinner {
  width: 46px; height: 46px; border-radius: 50%;
  border: 5px solid var(--pink); border-top-color: var(--purple);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .thinking .spinner { animation-duration: 2.5s; } }
.thinking p { font-weight: 800; font-size: 1.02rem; }
.thinking .sub { font-size: 0.82rem; font-weight: 600; opacity: 0.65; }

.callout {
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 22px;
  box-shadow: 8px 8px 0 var(--rose);
  padding: 1.8rem 1.6rem;
  margin-top: 2.2rem;
}
.callout h3 { font-size: 1.35rem; margin-bottom: 0.5rem; }
.callout p { font-weight: 600; opacity: 0.85; margin-bottom: 0.5rem; }

/* swap-the-script rows */
.swap { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-bottom: 1rem; }
.swap .no, .swap .yes {
  border: 3px solid var(--ink); border-radius: 16px; padding: 0.9rem 1rem;
  font-weight: 700; font-size: 0.97rem; background: #fff;
}
.swap .no { box-shadow: 4px 4px 0 var(--teal); }
.swap .yes { box-shadow: 4px 4px 0 #1a9d4b; }
.swap .lbl { display: block; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 800; opacity: 0.6; margin-bottom: 0.25rem; }
@media (max-width: 560px) { .swap { grid-template-columns: 1fr; } }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 1.3rem; counter-reset: step; }
.step { text-align: center; }
.step .num {
  width: 54px; height: 54px; margin: 0 auto 0.7rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--sun); border: 3px solid var(--ink); border-radius: 50%;
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.5rem;
  box-shadow: 3px 3px 0 var(--ink);
}
.step h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.2rem; }
.step p { font-weight: 600; opacity: 0.75; font-size: 0.95rem; }

/* ---------- Decoder app ---------- */
.app-card {
  background: #fff; color: var(--ink);
  max-width: 640px; margin: 0 auto;
  border: 3px solid var(--ink); border-radius: 22px;
  box-shadow: 8px 8px 0 var(--ink);
  padding: 2rem 1.8rem;
  text-align: left;
}
.app-card label { display: block; font-weight: 800; margin: 0.4rem 0 0.4rem; font-size: 0.98rem; }
.app-card textarea {
  width: 100%; padding: 0.8rem 0.95rem;
  border: 2px solid var(--ink); border-radius: 12px;
  font-family: inherit; font-size: 1.05rem; font-weight: 600;
  min-height: 90px; resize: vertical;
  background: #fff; color: var(--ink);
}
.app-card textarea:focus { outline: 3px solid var(--pink); outline-offset: 1px; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.7rem; }
.chip {
  border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
  border-radius: 999px; padding: 0.25rem 0.8rem;
  font-family: inherit; font-weight: 800; font-size: 0.85rem; cursor: pointer;
}
.chip:hover { background: var(--sun); }
.app-btn {
  margin-top: 1.2rem; width: 100%; cursor: pointer; border: none;
  background: var(--purple); color: #fff;
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.15rem;
  padding: 0.95rem; border-radius: 999px;
  box-shadow: 0 6px 0 rgba(0,0,0,0.18); transition: transform 0.12s ease;
}
.app-btn:hover { transform: translateY(-2px); }
.app-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,0.18); }
.app-btn:disabled { opacity: 0.6; cursor: default; transform: none; }
.app-btn.google { background: #fff; color: var(--ink); border: 3px solid var(--ink); display: flex; align-items: center; justify-content: center; gap: 0.6rem; }
.app-btn.rose { background: var(--rose); }
.app-status { margin-top: 1rem; font-weight: 800; text-align: center; min-height: 1.2em; }
.app-status.ok { color: #1a9d4b; }
.app-status.err { color: var(--teal); }
.meta-row {
  display: flex; justify-content: space-between; align-items: center; gap: 0.8rem;
  flex-wrap: wrap; margin-bottom: 1rem;
}
.decodes-pill {
  background: var(--sun); border: 2px solid var(--ink); border-radius: 999px;
  padding: 0.2rem 0.85rem; font-weight: 800; font-size: 0.86rem;
}
.whoami { font-size: 0.82rem; font-weight: 700; opacity: 0.7; }
.whoami button { border: none; background: none; color: var(--purple); font-weight: 800; cursor: pointer; font-family: inherit; font-size: 0.82rem; text-decoration: underline; }
.fineprint { margin-top: 0.9rem; font-size: 0.78rem; font-weight: 600; opacity: 0.6; text-align: center; line-height: 1.4; }

/* results */
.result-head { text-align: center; margin: 2.2rem 0 1.2rem; }
.result-head h2 { font-size: clamp(1.5rem, 4.5vw, 2.1rem); font-weight: 700; }
.result-chips { display: flex; gap: 0.5rem; justify-content: center; margin-top: 0.5rem; flex-wrap: wrap; }
.result-chips span {
  background: #fff; border: 2px solid var(--ink); border-radius: 999px;
  padding: 0.15rem 0.8rem; font-weight: 800; font-size: 0.85rem;
}
.result-grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem; max-width: 640px; margin: 0 auto; }
.result-card {
  background: #fff; border: 3px solid var(--ink); border-radius: 22px;
  padding: 1.5rem 1.5rem; box-shadow: 6px 6px 0 var(--purple);
}
.result-card.alt { box-shadow: 6px 6px 0 var(--rose); }
.result-card.sunny { background: #fffbe8; box-shadow: 6px 6px 0 var(--sun); }
.result-card h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.5rem; }
.result-card p { font-weight: 600; opacity: 0.85; white-space: pre-line; }
.result-card ul { margin: 0.2rem 0 0 1.2rem; }
.result-card li { font-weight: 600; opacity: 0.85; margin-bottom: 0.45rem; }

/* paywall */
.paywall { text-align: center; }
.paywall .big { font-size: 2.6rem; margin-bottom: 0.4rem; }
.paywall h3 { font-size: 1.45rem; font-weight: 600; margin-bottom: 0.6rem; }
.paywall p { font-weight: 600; opacity: 0.8; margin-bottom: 0.4rem; }
.paywall .price { font-family: 'Fredoka', sans-serif; font-size: 1.2rem; color: var(--rose); font-weight: 600; }

.hidden { display: none !important; }

/* ---------- Footer ---------- */
footer { background: var(--ink); color: #fff; text-align: center; padding: 2.5rem 1.5rem; }
footer .brand { font-size: 1.5rem; font-weight: 700; }
footer a { color: var(--sun); text-decoration: none; font-weight: 800; }
footer small { display: block; margin-top: 0.8rem; opacity: 0.6; }
footer .builtby { margin-top: 0.9rem; font-size: 0.72rem; opacity: 0.65; }
footer .builtby a { color: #fff; opacity: 0.85; }
footer .builtby img { display: block; margin: 0 auto 0.25rem; height: 42px; width: 42px; }