/* DanSprout Stories brand marks: the 4Learn Motto hexagon logo replaces every older mark. Loaded last. */
.sprout, .en-mark, .auth-mark, .site-footer-mark {
  background: url(images/brand/logo-mark.png) center / contain no-repeat !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
}
.sprout::before, .sprout::after, .en-mark::before, .en-mark::after, .auth-mark::before, .auth-mark::after {
  content: none !important;
  display: none !important;
}
.sprout { display: inline-block; width: 34px; height: 34px; vertical-align: middle; margin-right: 8px; }
.en-mark { width: 32px !important; height: 32px !important; }
.auth-mark { width: 34px !important; height: 34px !important; }
.site-footer-mark { width: 30px !important; height: 30px !important; }

/* Header lockup: a lighter, fairy-tale look with a one-line description underneath */
.brand-text { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.1; text-align: left; }
.brand-name, .auth-brand .brand-text {
  font-family: 'Berkshire Swash', 'Fredoka', Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: .3px;
  background: linear-gradient(90deg, #4f8f9a 0%, #7d7fc4 55%, #c78bb5 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.7));
}
.landing-header .brand-name { font-size: 26px; }
.en-brand .brand-name { font-size: 24px; }
.auth-brand .brand-name { font-size: 24px; }
.brand-tag {
  display: block; margin-top: 3px;
  font: 600 11.5px/1.2 'Nunito', Arial, sans-serif; letter-spacing: .25px;
  color: #6f8a92 !important; -webkit-text-fill-color: #6f8a92; background: none;
  white-space: nowrap;
}
@media (max-width: 820px) { .brand-tag { display: none; } .landing-header .brand-name { font-size: 22px; } }
.en-brand .brand-tag { white-space: normal; max-width: 215px; font-size: 10.5px; text-align: left; }
.en-brand { flex: 0 0 auto; }

/* "Start in 3 easy steps" strip on the signed-in home screen */
.steps3-card { margin: 0 0 20px; padding: 18px 20px 20px; background: linear-gradient(135deg, #fffaf0 0%, #f1f7ee 100%); border: 1px solid #e3d3b8; }
.steps3-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.steps3-head h2 { margin: 0; font-size: 22px; }
.steps3-watch { border: 1px solid #d8c7ad; background: #fff; color: #1f2a46; border-radius: 99px; padding: 8px 16px; font: 700 13px Nunito, Arial, sans-serif; cursor: pointer; }
.steps3-watch:hover, .steps3-watch:focus { background: #fff3e0; }
.steps3-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.steps3-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; border: 1px solid #e0d3bd; background: #fff; border-radius: 16px; padding: 16px; cursor: pointer; font-family: Nunito, Arial, sans-serif; color: #1f2a46; transition: transform .12s, box-shadow .12s; }
.steps3-tile:hover, .steps3-tile:focus { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(33, 70, 60, .12); }
.steps3-num { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #7d7fc4; color: #fff; font: 800 20px Nunito, Arial, sans-serif; }
.steps3-title { font: 800 18px Nunito, Arial, sans-serif; margin-top: 4px; }
.steps3-text { font: 600 14px/1.4 Nunito, Arial, sans-serif; color: #5b6580; }
.steps3-go { margin-top: 6px; font: 800 14px Nunito, Arial, sans-serif; color: #c43f29; }
.steps3-tile.is-done { background: #eef7ec; border-color: #bcd9b6; }
.steps3-tile.is-done .steps3-num { background: #3a9a55; }
.steps3-tile.is-done .steps3-go { color: #3a9a55; }
@media (max-width: 720px) { .steps3-grid { grid-template-columns: 1fr; } .steps3-tile { flex-direction: row; flex-wrap: wrap; align-items: center; } .steps3-text { flex-basis: 100%; } }

/* Signed-in home: a slimmer header so the 3 steps and the create-a-story form are seen first */
#apiHomeView .home-hero { padding: 16px 24px 18px; }
#apiHomeView .home-hero .en-title { font-size: clamp(26px, 3.4vw, 36px); margin: 4px 0 0; }
#apiHomeView .home-hero .en-lede, #apiHomeView .home-hero .hero-pills { display: none; }
#apiHomeView .content-notice { margin: 8px 0 14px !important; }

/* ---- Home screen polish: two columns, stronger buttons, soft cards, field icons ---- */
.fi{display:inline-block;width:18px;height:18px;margin-right:8px;vertical-align:-3px;background-position:center;background-repeat:no-repeat;background-size:contain}
.fi-learner{background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b85435%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M4%2021c0-4.4%203.6-7%208-7s8%202.6%208%207%22%2F%3E%3C%2Fsvg%3E")}
.fi-grade{background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b85435%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%209l10-5%2010%205-10%205z%22%2F%3E%3Cpath%20d%3D%22M6%2011.5V16c0%201.5%203%203%206%203s6-1.5%206-3v-4.5%22%2F%3E%3Cpath%20d%3D%22M22%209v6%22%2F%3E%3C%2Fsvg%3E")}
.fi-skill{background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b85435%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224.5%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%221%22%2F%3E%3C%2Fsvg%3E")}
.fi-world{background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b85435%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M3%2012h18%22%2F%3E%3Cpath%20d%3D%22M12%203c3%203.2%203%2014.8%200%2018M12%203c-3%203.2-3%2014.8%200%2018%22%2F%3E%3C%2Fsvg%3E")}
.fi-idea{background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b85435%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2018h6M10%2021h4%22%2F%3E%3Cpath%20d%3D%22M12%203a6%206%200%200%200-3.6%2010.8c.7.6%201.1%201.3%201.1%202.2h5c0-.9.4-1.6%201.1-2.2A6%206%200%200%200%2012%203z%22%2F%3E%3C%2Fsvg%3E")}
.fi-length{background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b85435%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207v5l3%202%22%2F%3E%3C%2Fsvg%3E")}
.fi-book{background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b85435%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205.5C6.5%204%209.5%204%2012%205.5v14C9.5%2018%206.5%2018%204%2019.5z%22%2F%3E%3Cpath%20d%3D%22M20%205.5C17.5%204%2014.5%204%2012%205.5v14c2.5-1.5%205.5-1.5%208%200z%22%2F%3E%3C%2Fsvg%3E")}

#apiHomeView .en-card, #apiHomeView .home-hero { border-radius: 16px; box-shadow: 0 10px 25px -5px rgba(33, 53, 60, .10); border-color: #eadfce; }
#apiHomeView .story-window-body .en-label { display: block; margin-top: 20px; font-weight: 800; color: #1f2a46; }
#apiHomeView .story-window-body .en-select, #apiHomeView .story-window-body .en-input { margin-top: 8px; padding: 12px 14px; border-radius: 10px; }
#apiHomeView .en-button { background: #d94431; color: #fff; border-radius: 12px; box-shadow: 0 6px 14px rgba(217, 68, 49, .28); }
#apiHomeView .en-button:hover, #apiHomeView .en-button:focus { background: #b3321f; }
#apiHomeView #apiLibraryStart { background: #1f2a46; box-shadow: 0 6px 14px rgba(20, 63, 74, .25); }
#apiHomeView #apiLibraryStart:hover, #apiHomeView #apiLibraryStart:focus { background: #0d2c35; }
.steps3-watch { background: #1f2a46; color: #fff; border-color: #1f2a46; }
.steps3-watch:hover, .steps3-watch:focus { background: #0d2c35; }

/* friendly mascot beside the headline */
#apiHomeView .home-hero { background: linear-gradient(135deg, #fffaf0 0%, #f6eefb 100%); min-height: 150px; padding-right: 130px; position: relative; }
#apiHomeView .home-hero::after { content: ''; position: absolute; right: 18px; bottom: 0; width: 100px; height: 112px; background: url(images/Speak/speakpanda.png) center bottom / contain no-repeat; }
#apiHomeView .home-hero .en-title { font-size: clamp(24px, 2.6vw, 32px); }

/* readable text in the "Welcome back" card (it was pale-on-pale) */
#apiLastActivity *:not(h2):not(h3):not(strong):not(button):not([class*="eyebrow"]):not(svg) { color: #3f5c63 !important; }

/* wide screens: headline, steps and video on the left; the story builder on the right */
@media (min-width: 1100px) {
  #apiHomeView { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 24px; row-gap: 18px; align-items: start; grid-template-rows: repeat(5, min-content) 1fr; }
  #apiHomeView > .en-grid { display: contents; }
  #apiHomeView > .en-grid > .en-card:first-child { grid-column: 1; grid-row: 1 / span 6; margin: 0; }
  #apiHomeView > .home-hero { grid-column: 2; grid-row: 1; }
  #apiHomeView > .content-notice { grid-column: 2; grid-row: 2; }
  #apiHomeView > #apiGettingStarted { grid-column: 2; grid-row: 3; margin: 0; }
  #apiHomeView > #apiHowTo { grid-column: 2; grid-row: 4; margin: 0 !important; }
  #apiHomeView > .en-grid > aside { grid-column: 2; grid-row: 5; margin: 0; }
  #apiHomeView > :not(.home-hero):not(.content-notice):not(#apiGettingStarted):not(#apiHowTo):not(.en-grid) { grid-column: 1 / -1; }
  #apiHomeView .steps3-grid { grid-template-columns: 1fr; }
  #apiHomeView .steps3-tile { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
  #apiHomeView .steps3-text { flex-basis: 100%; }
}

/* how-to video: a slim bar on the page, a large pop-up player when clicked */
.howto-bar { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer; border: 1px solid #e3d3b8; background: #fff; border-radius: 16px; padding: 14px 18px; box-shadow: 0 10px 25px -5px rgba(33, 53, 60, .10); font-family: Nunito, Arial, sans-serif; color: #1f2a46; }
.howto-bar:hover, .howto-bar:focus { background: #fff8ee; }
.howto-play { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #d94431; color: #fff; font-size: 16px; padding-left: 3px; }
.howto-text { flex: 1; display: flex; flex-direction: column; }
.howto-text strong { font: 800 17px Nunito, Arial, sans-serif; }
.howto-text small { font: 600 13px Nunito, Arial, sans-serif; color: #5b6580; }
.howto-go { font: 800 14px Nunito, Arial, sans-serif; color: #b3321f; text-decoration: underline; }
.howto-modal { position: fixed; inset: 0; z-index: 3000; background: rgba(10, 24, 28, .82); display: grid; place-items: center; padding: 18px; }
.howto-modal-card { position: relative; width: min(1100px, 100%); }
.howto-modal-card video { display: block; width: 100%; max-height: 86vh; border-radius: 14px; background: #0e2429; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
.howto-modal-close { position: absolute; top: -14px; right: -6px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 0; background: #fff; color: #1f2a46; font: 700 26px/1 Arial, sans-serif; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }


/* ================= Kid-friendly theme: PreK to 8th grade =================
   Palette from the logo (navy, red, gold) plus sky blue, lavender and mint. Bright but calm; text stays dark navy for easy reading. */
:root {
  --navy: #1f2a46; --ink: #1f2a46; --ink2: #2b3556; --muted: #5b6580; --muted2: #6b7592;
  --coral: #e0533a; --coral-dark: #c43f29; --orange: #e0533a; --red: #c43f29;
  --pine: #23895a; --leaf: #2ea36a; --leaf-soft: #d9f3e5; --mint: #d9f3e5;
  --sky: #dff1ff; --gold: #ffc83d; --line: #e6dff2; --line2: #e6dff2;
  --paper: #fbf8ff; --cream: #fffaf2; --sand: #f1ecfa;
}
body, .enterprise {
  background:
    radial-gradient(900px 520px at 100% -5%, #e6f2ff 0%, transparent 62%),
    radial-gradient(800px 520px at -5% 8%, #f6e9ff 0%, transparent 60%),
    radial-gradient(900px 600px at 50% 110%, #fff1d6 0%, transparent 60%),
    #fffaf4 !important;
  background-attachment: fixed;
}
/* a few soft sparkles in the background (never over the text) */
.enterprise::before, .landing::before, body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .55;
  background-image:
    radial-gradient(circle, rgba(255, 200, 61, .55) 0 2.5px, transparent 3.5px),
    radial-gradient(circle, rgba(125, 127, 196, .35) 0 2px, transparent 3px),
    radial-gradient(circle, rgba(224, 83, 58, .25) 0 2px, transparent 3px);
  background-size: 260px 260px, 340px 340px, 420px 420px;
  background-position: 30px 40px, 170px 120px, 90px 230px;
}
.enterprise > *, .app > * { position: relative; z-index: 1; }

/* friendlier headings and navigation */
.en-title, .en-card h2, .home-hero h1 { color: #1f2a46; }
.en-nav button.is-active, .en-nav button[aria-current], .en-tab.is-active { background: #ece8ff; color: #1f2a46; }
.en-eyebrow { color: #7b6cf0; letter-spacing: .12em; }
.content-notice { background: #fff6e0 !important; border-left-color: #ffc83d !important; }

/* colourful step tiles */
.steps3-tile:nth-child(1) .steps3-num { background: #e0533a; }
.steps3-tile:nth-child(2) .steps3-num { background: #f2a900; color: #1f2a46; }
.steps3-tile:nth-child(3) .steps3-num { background: #2e90fa; }
.steps3-tile:nth-child(1) { border-top: 4px solid #e0533a; }
.steps3-tile:nth-child(2) { border-top: 4px solid #f2a900; }
.steps3-tile:nth-child(3) { border-top: 4px solid #2e90fa; }
.steps3-tile.is-done { border-top-color: #2ea36a; }
.steps3-tile.is-done .steps3-num { background: #2ea36a; color: #fff; }
#apiHomeView .home-hero { background: linear-gradient(135deg, #fff6e6 0%, #efe9ff 55%, #e3f2ff 100%); }
.steps3-card { background: linear-gradient(135deg, #fffaf0 0%, #eef6ff 100%); border-color: #e0e6f5; }

/* story builder: a coloured stripe on top makes it the star of the page */
#apiHomeView .story-window { border-top: 6px solid #ffc83d; border-radius: 18px; }
#apiHomeView .en-eyebrow { color: #7b6cf0; }
.en-button, .marketing-cta { transition: transform .12s, box-shadow .12s, background .12s; }
.en-button:hover, .marketing-cta:hover { transform: translateY(-1px); }

/* landing page: a brighter, storybook-sky hero */
.landing-hero {
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 200, 61, .30), transparent 38%),
    radial-gradient(circle at 100% 100%, rgba(238, 106, 78, .34), transparent 46%),
    radial-gradient(circle at 60% 20%, rgba(125, 127, 196, .35), transparent 50%),
    linear-gradient(135deg, #1f2a46 0%, #34357f 55%, #5a46b0 100%) !important;
}
.landing-hero .eyebrow, .landing-hero [class*="eyebrow"] { color: #ffd45e; }

/* ================= Buttons: chunky, colourful, friendly (PreK to 8th) =================
   One look everywhere: bold coral for the main action, soft lavender for the rest, small colour hints for Share / Delete / Child Mode. */
button.en-button, a.en-button, button.marketing-cta {
  background: linear-gradient(180deg, #ff7f5c 0%, #e8503a 100%) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 14px !important;
  padding: 12px 20px !important;
  min-height: 44px;
  font: 800 15px Nunito, Arial, sans-serif !important;
  letter-spacing: .1px;
  text-shadow: 0 1px 0 rgba(120, 30, 15, .30);
  box-shadow: 0 4px 0 #b9361f, 0 10px 18px rgba(224, 83, 58, .26) !important;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
button.en-button:hover, a.en-button:hover, button.marketing-cta:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 6px 0 #b9361f, 0 14px 22px rgba(224, 83, 58, .32) !important; }
button.en-button:active, a.en-button:active, button.marketing-cta:active { transform: translateY(3px); box-shadow: 0 1px 0 #b9361f, 0 3px 6px rgba(224, 83, 58, .2) !important; }
button.en-button:disabled { filter: grayscale(.55) opacity(.7); transform: none; cursor: not-allowed; }

button.en-outline, a.en-outline, button.marketing-link, button.landing-cta-secondary, a.landing-cta-secondary {
  background: linear-gradient(180deg, #ffffff 0%, #f1eeff 100%) !important;
  color: #2b2a6e !important;
  border: 2px solid #c9c2f5 !important;
  border-radius: 14px !important;
  padding: 10px 16px !important;
  min-height: 42px;
  font: 800 14px Nunito, Arial, sans-serif !important;
  box-shadow: 0 3px 0 #c9c2f5 !important;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
button.en-outline:hover, a.en-outline:hover, button.marketing-link:hover { transform: translateY(-2px); background: linear-gradient(180deg, #ffffff 0%, #e6e0ff 100%) !important; border-color: #a99df0 !important; box-shadow: 0 5px 0 #a99df0 !important; }
button.en-outline:active, a.en-outline:active { transform: translateY(2px); box-shadow: 0 1px 0 #a99df0 !important; }
button.en-outline:disabled { opacity: .55; transform: none; }

/* colour hints by job */
button.share-story { background: linear-gradient(180deg, #ffffff 0%, #e6f8ee 100%) !important; border-color: #9fdcbd !important; color: #12673f !important; box-shadow: 0 3px 0 #9fdcbd !important; }
button.share-story:hover { border-color: #5cc592 !important; box-shadow: 0 5px 0 #5cc592 !important; }
button.delete-story, button.apiRemove { background: linear-gradient(180deg, #ffffff 0%, #ffecea 100%) !important; border-color: #f2b5ab !important; color: #b3321f !important; box-shadow: 0 3px 0 #f2b5ab !important; }
button.delete-story:hover, button.apiRemove:hover { border-color: #e98a7b !important; box-shadow: 0 5px 0 #e98a7b !important; }
button.apiPlan.en-button, button.apiCheckout { background: linear-gradient(180deg, #ffd45e 0%, #f2a900 100%) !important; color: #3a2a00 !important; text-shadow: none; border: 0 !important; box-shadow: 0 4px 0 #b27800, 0 10px 18px rgba(242, 169, 0, .3) !important; }

/* top-right account buttons */
button.en-family {
  background: linear-gradient(180deg, #34406a 0%, #1f2a46 100%) !important; color: #fff !important; border: 0 !important;
  border-radius: 12px !important; padding: 8px 11px !important; font: 800 12.5px Nunito, Arial, sans-serif !important; white-space: nowrap;
  box-shadow: 0 3px 0 #0f1730 !important; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease;
}
button.en-family:hover { transform: translateY(-2px); box-shadow: 0 5px 0 #0f1730 !important; }
button.en-family:active { transform: translateY(2px); box-shadow: 0 1px 0 #0f1730 !important; }
#apiChildMode { background: linear-gradient(180deg, #9a8cff 0%, #6a5cf0 100%) !important; box-shadow: 0 3px 0 #4235b8 !important; }
#apiChildMode:hover { box-shadow: 0 5px 0 #4235b8 !important; }
button.privacy-trigger { background: #fff !important; color: #2b2a6e !important; border: 2px solid #c9c2f5 !important; border-radius: 12px !important; padding: 7px 10px !important; white-space: nowrap; font: 800 12.5px Nunito, Arial, sans-serif !important; box-shadow: 0 3px 0 #c9c2f5 !important; }

/* navigation tabs: friendly pills */
.en-nav button, nav.en-nav button { border-radius: 999px !important; padding: 7px 10px !important; font: 800 13px Nunito, Arial, sans-serif !important; white-space: nowrap; color: #3a4470 !important; transition: background .12s, transform .12s; }
.en-nav button:hover { background: #efeaff !important; transform: translateY(-1px); }
.en-nav button.active, .en-nav .active { background: linear-gradient(180deg, #ffe08a 0%, #ffc83d 100%) !important; color: #3a2a00 !important; box-shadow: 0 3px 0 #c58f00 !important; }

/* tap-a-word in stories: a friendly highlight */
.apiStoryWord { border-radius: 6px; transition: background .12s; }
.apiStoryWord:hover, .apiStoryWord:focus { background: #fff0b8; }

/* clear keyboard focus for everyone */
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid #7b6cf0 !important; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { button, a { transition: none !important; } button:hover, button:active { transform: none !important; } }

/* the reader's toolbar: slightly smaller buttons so they fit on one line */
#apiStoryModal button.en-outline, #apiStoryModal button.en-button { padding: 8px 13px !important; min-height: 38px; font-size: 13.5px !important; }

/* the Privacy / Terms links also live in the footer, so drop the header copy when the screen is tight */
@media (max-width: 1599px) { .legal-header-links { display: none !important; } }

/* "Read to me" on questions: big, friendly and easy to find for early readers */
button.apiSpeakQuestion { background: linear-gradient(180deg, #5aa9ff 0%, #2e7be8 100%) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; padding: 10px 20px !important; min-height: 44px; font: 800 15px Nunito, Arial, sans-serif !important; box-shadow: 0 4px 0 #1b56a8, 0 8px 16px rgba(46, 123, 232, .25) !important; text-shadow: 0 1px 0 rgba(0, 40, 100, .3); }
button.apiSpeakQuestion:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #1b56a8, 0 12px 20px rgba(46, 123, 232, .3) !important; }
button.apiSpeakQuestion:active { transform: translateY(3px); box-shadow: 0 1px 0 #1b56a8 !important; }

/* ================= Landing page + sign-in polish =================
   Friendly enough for PreK-5, polished enough for middle school: flat rounded pills with a soft glow
   (no chunky 3D ledge), calmer type, one consistent look. Scoped to the landing page and the sign-in
   window only; the signed-in app buttons are untouched. */
.landing-header button.marketing-cta,
#landingView button.landing-cta-primary {
  background: linear-gradient(135deg, #f46f50 0%, #e24f37 100%) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 12px 26px !important;
  min-height: 46px;
  font: 800 15px Nunito, Arial, sans-serif !important;
  text-shadow: none !important;
  letter-spacing: .1px;
  box-shadow: 0 8px 20px rgba(226, 79, 55, .28) !important;
  filter: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.landing-header button.marketing-cta:hover,
#landingView button.landing-cta-primary:hover { transform: translateY(-1px); filter: none; box-shadow: 0 12px 26px rgba(226, 79, 55, .36) !important; }
.landing-header button.marketing-cta:active,
#landingView button.landing-cta-primary:active { transform: translateY(0); box-shadow: 0 5px 12px rgba(226, 79, 55, .3) !important; }

.landing-header button.marketing-link,
#landingView button.landing-cta-secondary {
  background: #fff !important;
  color: #2b2a6e !important;
  border: 1.5px solid #d6d0f3 !important;
  border-radius: 999px !important;
  padding: 11px 24px !important;
  min-height: 46px;
  font: 800 15px Nunito, Arial, sans-serif !important;
  box-shadow: 0 2px 8px rgba(43, 42, 110, .08) !important;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.landing-header button.marketing-link:hover,
#landingView button.landing-cta-secondary:hover { transform: translateY(-1px); background: #f7f5ff !important; border-color: #a99df0 !important; box-shadow: 0 6px 16px rgba(43, 42, 110, .14) !important; }
.landing-header button.marketing-link:active,
#landingView button.landing-cta-secondary:active { transform: translateY(0); }
/* on the dark hero and the dark closing banner the second button is a soft glass pill */
.landing-hero button.landing-cta-secondary,
.landing-final-cta button.landing-cta-secondary {
  background: rgba(255, 255, 255, .12) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .5) !important;
  box-shadow: none !important;
}
.landing-hero button.landing-cta-secondary:hover,
.landing-final-cta button.landing-cta-secondary:hover { background: rgba(255, 255, 255, .22) !important; border-color: #fff !important; }

/* sign-in / create-account window */
.auth-gate .auth-card { border: 0; border-radius: 22px; box-shadow: 0 26px 70px rgba(26, 30, 70, .28); font-family: Nunito, Arial, sans-serif; }
.auth-gate .auth-card h1 { font: 600 clamp(26px, 5.5vw, 34px)/1.15 Fredoka, Nunito, Arial, sans-serif; color: #1f2a46; margin: 22px 0 10px; }
.auth-gate .auth-card p { font: 400 15px/1.55 Nunito, Arial, sans-serif; color: #55607f; }
.auth-gate .auth-close { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border-radius: 50%; font: 400 22px/1 Nunito, Arial, sans-serif; color: #55607f; }
.auth-gate .auth-close:hover { background: #f1eefb; color: #1f2a46; }
.auth-gate .auth-visual { border-radius: 16px; }
.auth-gate .auth-tabs { gap: 4px; padding: 4px; margin: 22px 0 16px; border: 0; border-radius: 999px; background: #f1eefb; }
.auth-gate .auth-tab { flex: 1; border: 0; border-radius: 999px; padding: 9px 6px; font: 800 13px Nunito, Arial, sans-serif; color: #4a4f7a; cursor: pointer; transition: background .15s ease, color .15s ease, box-shadow .15s ease; }
.auth-gate .auth-tab:hover { color: #1f2a46; }
.auth-gate .auth-tab.active { background: #fff; color: #1f2a46; border: 0; box-shadow: 0 2px 8px rgba(31, 42, 70, .14); }
.auth-gate .auth-field label { font: 800 13px Nunito, Arial, sans-serif; color: #2b3556; margin-bottom: 6px; }
.auth-gate .auth-field input, .auth-gate .auth-field select { font: 400 16px Nunito, Arial, sans-serif; color: #1f2a46; border: 1.5px solid #d6d0f3; border-radius: 12px; padding: 12px 14px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.auth-gate .auth-field input:focus, .auth-gate .auth-field select:focus { border-color: #7b6cf0; box-shadow: 0 0 0 3px rgba(123, 108, 240, .2); }
.auth-gate .auth-field input::placeholder { color: #8d93ad; font-family: Nunito, Arial, sans-serif; }
.auth-gate .auth-help, .auth-gate .auth-field small { font: 400 12.5px/1.4 Nunito, Arial, sans-serif; color: #6b7592; }
.auth-gate .auth-card .auth-consent { border-radius: 12px; border-color: #e6dff2; font-family: Nunito, Arial, sans-serif; }
.auth-gate .auth-card .auth-consent span { font: 400 13px/1.45 Nunito, Arial, sans-serif; }
.auth-gate button.auth-submit {
  width: 100%; min-height: 48px; border: 0; border-radius: 999px; padding: 12px 20px;
  background: linear-gradient(135deg, #f46f50 0%, #e24f37 100%); color: #fff;
  font: 800 15px Nunito, Arial, sans-serif; letter-spacing: .1px; cursor: pointer;
  box-shadow: 0 8px 20px rgba(226, 79, 55, .28); transition: transform .15s ease, box-shadow .15s ease;
}
.auth-gate button.auth-submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(226, 79, 55, .36); }
.auth-gate button.auth-submit:active:not(:disabled) { transform: translateY(0); }
.auth-gate button.auth-submit:disabled { opacity: .5; box-shadow: none; cursor: not-allowed; }
.auth-gate .auth-error { font: 600 13px/1.4 Nunito, Arial, sans-serif; }
.auth-gate .auth-link, .auth-gate .auth-demo { font: 800 13px Nunito, Arial, sans-serif; }
.auth-gate .auth-foot { font: 400 12.5px/1.5 Nunito, Arial, sans-serif; }
.auth-gate .auth-consent-group { gap: 8px; margin: 14px 0 8px; }
.auth-gate .auth-card .auth-consent-group .auth-consent { margin: 0; padding: 10px 12px; }
.auth-gate .auth-consent-group legend { font: 800 13px Nunito, Arial, sans-serif; color: #2b3556; padding: 0; }
.auth-gate .auth-consent a { color: #1f6f78; font-weight: 700; text-decoration: underline; }
@media (max-width: 480px) { .auth-gate .auth-tab { font-size: 12px; padding: 8px 4px; line-height: 1.2; } }
@media (max-width: 650px) {
  .landing-header button.marketing-cta, .landing-header button.marketing-link { padding: 8px 14px !important; min-height: 38px; font-size: 13px !important; white-space: nowrap; }
  .landing-header .top-actions, .landing-header .marketing-nav { gap: 6px; }
}
@media (max-width: 480px) {
  .landing-header .brand-name { font-size: 20px; }
  .landing-header .brand-tag { display: none; }
  .landing-header .sprout { transform: scale(.75); }
}
@media (max-width: 480px) {
  .landing-header { padding: 0 12px; }
  .landing-header .brand { gap: 0; }
  .landing-header .brand-name { font-size: 17px; }
  .landing-header .sprout { margin-right: -6px; }
  .landing-header button.marketing-cta, .landing-header button.marketing-link { padding: 8px 11px !important; font-size: 12.5px !important; }
  .landing-header .top-actions, .landing-header .marketing-nav { gap: 4px; }
}

/* Adventure picture picker for early readers (PreK-1): big tap cards instead of typing */
#apiAdventurePicker { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin: 6px 0 12px; }
#apiAdventurePicker.hidden { display: none !important; }
#apiAdventurePicker .adventure-card { display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 110px; padding: 12px 8px; background: #fff; color: #2b2a6e; border: 2px solid #d6d0f3; border-radius: 18px; font: 800 14px/1.2 Nunito, Arial, sans-serif; text-align: center; cursor: pointer; box-shadow: 0 2px 8px rgba(43, 42, 110, .08); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease; }
#apiAdventurePicker .adventure-card:hover { transform: translateY(-2px); border-color: #a99df0; box-shadow: 0 8px 18px rgba(43, 42, 110, .14); }
#apiAdventurePicker .adventure-card[aria-pressed="true"] { background: #fff4d6; border-color: #f2a900; box-shadow: 0 0 0 3px rgba(242, 169, 0, .25); }
#apiAdventurePicker .adventure-icon { font-size: 40px; line-height: 1; }
#apiAdventurePicker .adventure-own { border-style: dashed; }

/* ================= Warm palette: cream, peach, amber (landing page, sign-in, adventure picker) ================= */
.landing-hero {
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 213, 120, .38), transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(255, 140, 90, .55), transparent 52%),
    radial-gradient(circle at 62% 18%, rgba(214, 112, 140, .35), transparent 50%),
    linear-gradient(135deg, #4a2a4f 0%, #8a3f5c 52%, #d8694a 100%) !important;
}
.landing-header button.marketing-link, #landingView button.landing-cta-secondary { border-color: #efd9c0 !important; background: #fffaf2 !important; color: #5a2d3a !important; box-shadow: 0 2px 8px rgba(120, 70, 40, .10) !important; }
.landing-header button.marketing-link:hover, #landingView button.landing-cta-secondary:hover { background: #fff3e0 !important; border-color: #e8b987 !important; box-shadow: 0 6px 16px rgba(120, 70, 40, .16) !important; }
.landing-hero button.landing-cta-secondary, .landing-final-cta button.landing-cta-secondary { background: rgba(255, 255, 255, .14) !important; color: #fff !important; border-color: rgba(255, 255, 255, .55) !important; box-shadow: none !important; }
.landing-hero button.landing-cta-secondary:hover, .landing-final-cta button.landing-cta-secondary:hover { background: rgba(255, 255, 255, .24) !important; border-color: #fff !important; }
.landing-header button.marketing-cta, #landingView button.landing-cta-primary { background: linear-gradient(135deg, #ffa24d 0%, #ef6a45 100%) !important; box-shadow: 0 8px 20px rgba(239, 106, 69, .32) !important; }
.landing-header button.marketing-cta:hover, #landingView button.landing-cta-primary:hover { box-shadow: 0 12px 26px rgba(239, 106, 69, .4) !important; }

.auth-gate { background: rgba(70, 38, 30, .5); }
.auth-gate .auth-card { background: #fffaf3; box-shadow: 0 26px 70px rgba(90, 45, 30, .3); }
.auth-gate .auth-card h1 { color: #4a2a35; }
.auth-gate .auth-card p { color: #6b5a5a; }
.auth-gate .auth-tabs { background: #fbeedb; }
.auth-gate .auth-tab { color: #7a5a4a; }
.auth-gate .auth-tab:hover { color: #4a2a35; }
.auth-gate .auth-tab.active { color: #4a2a35; }
.auth-gate .auth-field label { color: #4a2a35; }
.auth-gate .auth-field input, .auth-gate .auth-field select { border-color: #ecd9c3; background: #fffdf9; }
.auth-gate .auth-field input:focus, .auth-gate .auth-field select:focus { border-color: #f0a24d; box-shadow: 0 0 0 3px rgba(240, 162, 77, .28); }
.auth-gate .auth-help, .auth-gate .auth-field small, .auth-gate .auth-foot { color: #85706a; }
.auth-gate .auth-card .auth-consent { background: #fff5e4; border-color: #f0dcc0; }
.auth-gate button.auth-submit { background: linear-gradient(135deg, #ffa24d 0%, #ef6a45 100%); box-shadow: 0 8px 20px rgba(239, 106, 69, .32); }
.auth-gate .auth-close:hover { background: #fbeedb; color: #4a2a35; }

#apiAdventurePicker .adventure-card { background: #fffaf2; color: #5a2d3a; border-color: #efd9c0; box-shadow: 0 2px 8px rgba(120, 70, 40, .1); }
#apiAdventurePicker .adventure-card:hover { border-color: #e8b987; box-shadow: 0 8px 18px rgba(120, 70, 40, .16); }
#apiAdventurePicker .adventure-card[aria-pressed="true"] { background: #fff1cc; border-color: #f0a24d; box-shadow: 0 0 0 3px rgba(240, 162, 77, .3); }

#apiAdventureChosen { margin: 6px 0 10px; padding: 10px 14px; background: #fff1cc; border: 2px solid #f0a24d; border-radius: 14px; color: #5a2d3a; font: 800 15px Nunito, Arial, sans-serif; }
#apiAdventureChosen.hidden { display: none !important; }

/* Adventure picker v2: 3 x 3 grid, "More adventures" swaps in the next nine */
#apiAdventurePicker { display: block; margin: 6px 0 12px; }
#apiAdventurePicker .adventure-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#apiAdventurePicker .adventure-card { min-height: 104px; padding: 10px 6px; font-size: 13.5px; }
#apiAdventurePicker .adventure-more { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 12px; min-height: 46px; padding: 10px 18px; background: #fff; color: #5a2d3a; border: 2px dashed #e8b987; border-radius: 999px; font: 800 15px Nunito, Arial, sans-serif; cursor: pointer; transition: background .15s ease, transform .15s ease; }
#apiAdventurePicker .adventure-more:hover { background: #fff3e0; transform: translateY(-1px); }
#apiAdventurePicker .adventure-more small { font: 700 12px Nunito, Arial, sans-serif; color: #85706a; }
@media (max-width: 420px) { #apiAdventurePicker .adventure-icon { font-size: 32px; } #apiAdventurePicker .adventure-card { font-size: 12.5px; } }