/* ============================================================
   pages-content.css — v3 design skin for content + product pages
   (generators, blog, worksheet galleries, library, resources,
   activities). Loads AFTER css/styles.css and any inline page
   styles, so these rules re-skin the legacy chrome.

   Tokens mirror docs/design/homepage-mock-v3.html and
   css/design-system.css. Keep values in sync with the mock.
   ============================================================ */

:root {
  --cream:        #FAF6EF;
  --cream-deep:   #F2EBDE;
  --surface:      #EDE7DC;
  --card:         #FFFFFF;
  --ink:          #2B2B33;
  --ink-soft:     #5C5A61;
  --ink-faint:    #908C93;
  --line:         #E2DACA;

  --coral:        #E8613C;
  --coral-deep:   #D14E2B;
  --mustard:      #F2B84B;
  --sky:          #5FA8E6;
  --sage:         #8FA98F;

  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Nunito Sans", -apple-system, "Segoe UI", sans-serif;
  --font-hand:    "Caveat", cursive;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px;

  --radius: 10px;
  --shadow-soft: 0 1px 2px rgba(43,43,51,.04), 0 10px 28px -12px rgba(43,43,51,.12);
  --shadow-page: 0 2px 4px rgba(43,43,51,.06), 0 22px 44px -20px rgba(43,43,51,.28);
}

/* ============================================================
   Base
   ============================================================ */
body {
  font-family: var(--font-body);
  background-color: var(--cream);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 420;
  line-height: 1.12;
  letter-spacing: -0.005em;
  color: var(--ink);
}

/* ============================================================
   Nav, footer, buttons, chips, kicker/section-head come from
   css/design-system.css (shared components — do not duplicate).
   ============================================================ */

/* styles.css leaks a global `main.container { max-width:100%; padding:0 }`
   (an escaped print rule) — restore the centered editorial column on screen */
@media screen {
  main.container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 var(--s6);
    width: 100%;
  }
}
@media screen and (max-width: 560px) {
  main.container { padding: 0 var(--s5); }
}

/* breadcrumbs (both spellings used across pages) */
.breadcrumb, .breadcrumbs { color: var(--ink-faint); font-size: 0.85rem; }
.breadcrumb a, .breadcrumbs a { color: var(--ink-soft); font-weight: 600; }
.breadcrumb a:hover, .breadcrumbs a:hover { color: var(--ink); text-decoration: none; }

/* ============================================================
   GENERATOR PAGES — form is the hero
   ============================================================ */
.chatgpt-hero-section {
  background: var(--cream);
  min-height: 0;
  padding: var(--s7) 1rem var(--s6);
}
body.coloring-page .chatgpt-hero-section,
body.word-family-page .chatgpt-hero-section {
  background: var(--cream);
}
.chatgpt-container { max-width: 760px; }
.chatgpt-content {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  border-radius: 0;
  padding: 0;
}
.chatgpt-content > h1 {
  font-family: var(--font-display);
  font-weight: 420;
  font-size: clamp(34px, 4.6vw, 52px);
  color: var(--ink);
  margin-bottom: var(--s3);
}
.chatgpt-subtitle {
  color: var(--ink-soft);
  font-size: 17px;
  max-width: 52ch;
  margin: 0 auto var(--s6);
}

/* the generator eyebrow above the h1 */
.gen-eyebrow {
  display: inline-block;
  font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--s4);
}
.gen-eyebrow::after {
  content: ""; display: inline-block; vertical-align: middle;
  width: 34px; height: 1px; background: var(--mustard); margin-left: 14px;
}

/* form card */
.main-input-container {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
  padding: var(--s5);
  text-align: left;
}
.main-input {
  max-width: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
}
.main-input:focus {
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(232, 97, 60, 0.12);
}
.main-input::placeholder { color: var(--ink-faint); }

.main-input-container label,
.learning-type-selector label,
.form-row label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.main-input-container select,
.main-input-container input[type="text"] {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--card);
  border-color: var(--line) !important;
  border-radius: var(--radius) !important;
}
.main-input-container select:focus,
.main-input-container input[type="text"]:focus {
  outline: none;
  border-color: var(--coral) !important;
}
.input-help small { color: var(--ink-faint); }

/* the prompt input — modest, never a giant panel */
.main-input-container .main-input {
  display: block;
  width: 100%;
  min-height: 0;
  padding: 12px 16px;
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: var(--s4);
}
.main-input-container textarea.main-input { min-height: 0; resize: vertical; }

/* options row — small labeled fields sitting side-by-side under the prompt.
   (styles.css turns .input-options into a floating narrow card: kill that.) */
.main-input-container .input-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  width: 100%;
  max-width: none;
  margin: 0 0 var(--s4);
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  justify-content: flex-start;
}
.main-input-container .input-options .form-row {
  flex: 1 1 200px;
  min-width: 0;
  max-width: 320px;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.main-input-container .form-row label { text-align: left; margin-bottom: 0; }
.main-input-container .input-options .custom-select,
.main-input-container .input-options select,
.main-input-container .input-options input[type="text"] {
  width: 100%;
  min-width: 0;
  max-width: none;
}
.main-input-container .input-options select {
  padding: 10px 34px 10px 14px;
  font-size: 15px;
  box-shadow: none;
}
.main-input-container .input-options input[type="text"] {
  padding: 10px 14px;
  font-size: 15px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  box-sizing: border-box;
}
/* small helper note under a field (not shouty like the labels) */
.main-input-container .field-note {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-faint);
  line-height: 1.4;
}
.main-input-container .input-help {
  margin: 0 0 var(--s4);
  text-align: left;
}
/* math generator's 2x2 grid keeps its layout but never overflows */
.main-input-container .form-grid.two-by-two { width: 100%; }
.main-input-container .form-grid.two-by-two .form-row { min-width: 0; max-width: none; }
@media (max-width: 560px) {
  .main-input-container .input-options .form-row { flex-basis: 100%; max-width: none; }
}

/* the generate button — coral pill */
.generate-btn {
  background: var(--coral);
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: .01em;
  padding: 15px 34px;
}
.generate-btn:hover { background: var(--coral-deep); transform: none; }
.generate-btn:disabled { background: var(--ink-faint); }

/* example-prompt chips */
.gen-chips {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  margin-top: var(--s4);
  align-items: center;
}
.gen-chips .lbl {
  font-size: 11px; color: var(--ink-faint); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; margin-right: var(--s2);
}
.gen-chip {
  display: inline-flex; align-items: center;
  background: transparent; border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 15px; font-size: 13px; font-weight: 600; color: var(--ink-soft);
  cursor: pointer; transition: all .15s ease;
  font-family: var(--font-body);
}
.gen-chip:hover { border-color: var(--sky); color: var(--ink); background: rgba(95,168,230,.10); }

/* "what you'll get" hint under the form */
.gen-hint {
  margin-top: var(--s4);
  font-size: 13.5px;
  color: var(--ink-faint);
  text-align: center;
}
.gen-hint strong { color: var(--ink-soft); font-weight: 700; }

/* other-generator nav — quiet chips */
.generator-nav { margin-top: var(--s5); display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; }
.generator-nav-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 13px; font-weight: 600; color: var(--ink-soft);
  text-decoration: none;
  transition: all .15s ease;
  box-shadow: none;
}
.generator-nav-btn:hover {
  border-color: var(--sky); color: var(--ink);
  background: rgba(95,168,230,.10);
  transform: none; box-shadow: none;
}

/* results area — framed printed page on a warm surface */
.main-results-area {
  background: var(--surface);
  border: none;
  border-radius: 18px;
  padding: var(--s6) var(--s5);
  margin-top: var(--s6);
  margin-left: auto;
  margin-right: auto;
  box-shadow: none;
  width: auto;
  max-width: 100%;
}
/* styles.css leaks `#worksheet-section { width:100%; padding:0; margin:0;
   display:block !important }` (escaped print rules) onto the screen — restore
   the results-area framing on the pages whose result card uses that id, and
   keep it hidden until its inline style flips to block. */
@media screen {
  #worksheet-section.main-results-area {
    width: auto;
    max-width: 100%;
    margin: var(--s6) auto 0;
    padding: var(--s6) var(--s5);
  }
  #worksheet-section.main-results-area[style*="display: none"],
  #worksheet-section.main-results-area[style*="display:none"] {
    display: none !important;
  }
}
.results-header { margin-bottom: var(--s4); }
.results-header h3 {
  font-family: var(--font-display);
  font-weight: 480;
  font-size: 21px;
  color: var(--ink);
}
.main-activity-container {
  background: var(--card);
  border: none;
  border-radius: 4px;
  box-shadow: var(--shadow-page);
  padding: var(--s5);
  margin: 0 auto;
  overflow-x: auto;
}
/* generated output is always centered inside the sheet */
.main-activity-container img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
@media screen {
  .main-activity-container .worksheet-page,
  .main-activity-container .math-worksheet-page {
    margin: 0 auto;
    max-width: 100%;
    min-height: 0;
  }
}
#image-container {
  background-color: var(--card);
  border: none;
}

/* one-time "your page is ready" glow — fired by the generators on success */
@keyframes mmw-result-glow {
  0%   { box-shadow: 0 0 0 0 rgba(242, 184, 75, 0.55); }
  100% { box-shadow: 0 0 0 26px rgba(242, 184, 75, 0); }
}
.mmw-result-reveal { animation: mmw-result-glow 1.2s ease-out 1; }
@media (prefers-reduced-motion: reduce) {
  .mmw-result-reveal { animation: none; }
}
.print-results-btn, .activity-print-btn {
  background: var(--coral);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-weight: 700;
  padding: 11px 24px;
  cursor: pointer;
  transition: background .18s ease;
}
.print-results-btn:hover, .activity-print-btn:hover { background: var(--coral-deep); transform: none; }

/* below-the-fold generator sections */
.mmw-section { padding: var(--s7) var(--s5); max-width: 1140px; margin: 0 auto; }
.mmw-band { background: var(--cream-deep); }
.mmw-band-full { background: var(--cream-deep); }

/* what you'll get — framed example shot */
.visual-example-section { background: var(--cream); padding: var(--s7) 1.5rem; }
.visual-example-section .container { max-width: 900px; margin: 0 auto; }
.visual-example-section h2 {
  font-family: var(--font-display); font-weight: 420;
  font-size: clamp(26px, 3.2vw, 36px);
  text-align: center; margin-bottom: var(--s6); color: var(--ink);
}
.example-showcase {
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: var(--s6); align-items: center;
  background: var(--surface);
  border-radius: 18px;
  padding: var(--s6);
}
.example-image-wrapper { margin: 0; }
.example-image {
  display: block; width: 100%;
  background: var(--card);
  border-radius: 4px;
  box-shadow: var(--shadow-page);
  transform: rotate(-.75deg);
}
.example-features h3 {
  font-family: var(--font-display); font-weight: 480;
  font-size: 20px; margin-bottom: var(--s4); color: var(--ink);
}
.example-features ul { list-style: none; padding: 0; margin: 0; }
.example-features li {
  padding: 9px 0 9px 24px; position: relative;
  color: var(--ink-soft); font-size: 15px;
  border-top: 1px solid var(--line);
}
.example-features li:last-child { border-bottom: 1px solid var(--line); }
.example-features li i { position: absolute; left: 0; top: 13px; color: var(--sage); font-size: 12px; }
@media (max-width: 768px) {
  .example-showcase { grid-template-columns: 1fr; padding: var(--s5); }
}

/* browse strip + more-tools re-skin (generator pages) */
.mmw-browse { padding: var(--s7) var(--s5); max-width: 1140px; margin: 0 auto; text-align: center; }
.mmw-browse h2 {
  font-size: clamp(24px, 3vw, 32px);
  margin-bottom: var(--s2);
}
.mmw-browse > p { color: var(--ink-soft); margin-bottom: var(--s5); }
.mmw-browse-links { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; }

/* tips section (activity generator / word search) */
.tips-section h2 {
  font-family: var(--font-display); font-weight: 420;
  text-align: center; color: var(--ink);
  font-size: clamp(24px, 3vw, 32px);
  margin-bottom: var(--s6);
}
.tips-grid { gap: var(--s5); }
.tip {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
}
.tip h3 { font-family: var(--font-display); font-weight: 480; color: var(--ink); }
.tip p { color: var(--ink-soft); }
.tip-icon, .tip .tip-icon i { color: var(--mustard); }

/* ============================================================
   BLOG — editorial index + readable posts
   ============================================================ */
/* --- index (new markup) --- */
.bi-wrap { max-width: 1080px; margin: 0 auto; padding: var(--s7) var(--s5) var(--s8); }
.bi-head { text-align: center; max-width: 620px; margin: 0 auto var(--s7); }
.bi-head h1 { font-size: clamp(32px, 4.4vw, 48px); margin-bottom: var(--s3); }
.bi-head p { color: var(--ink-soft); font-size: 17px; }
.bi-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5);
}
.bi-card {
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s6) var(--s5) var(--s5);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.bi-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.bi-card .bi-tag {
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: var(--s3);
}
.bi-card h2 {
  font-family: var(--font-display); font-weight: 480;
  font-size: 20px; line-height: 1.25; color: var(--ink);
  margin-bottom: var(--s3);
}
.bi-card p { color: var(--ink-soft); font-size: 14.5px; flex: 1; margin-bottom: var(--s4); }
.bi-card .bi-more {
  font-size: 13.5px; font-weight: 700; color: var(--coral); letter-spacing: .02em;
}
@media (max-width: 980px) { .bi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .bi-grid { grid-template-columns: 1fr; } }

/* --- posts (existing .blog-article markup, re-skinned) --- */
.blog-article {
  max-width: 68ch;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: var(--s6) var(--s5) var(--s8);
  margin: 0 auto;
}
.blog-article h1 {
  font-family: var(--font-display); font-weight: 420;
  color: var(--ink);
  font-size: clamp(30px, 4.2vw, 44px);
  line-height: 1.12;
  margin-bottom: var(--s5);
}
.blog-article h2 {
  font-family: var(--font-display); font-weight: 480;
  color: var(--ink);
  font-size: 26px;
  margin-top: var(--s7);
}
.blog-article h3 {
  font-family: var(--font-display); font-weight: 480;
  color: var(--ink);
  font-size: 20px;
}
.blog-article p, .blog-article li { color: var(--ink-soft); font-size: 17px; line-height: 1.75; }
.blog-article a { color: var(--coral); font-weight: 600; }
.blog-article a:hover { color: var(--coral-deep); }
.blog-article .blog-meta { display: none; }

/* post CTA blocks — coral, not the old blue-green gradient */
.blog-cta {
  background: var(--ink);
  border-radius: 14px;
  padding: 2rem;
  text-align: center;
  margin: 2.5rem 0;
}
.blog-cta h3 { color: var(--cream); font-family: var(--font-display); font-weight: 480; }
.blog-cta p { color: rgba(250,246,239,.8); font-size: 15.5px; margin-bottom: 1rem; }
.blog-cta p.blog-cta-lead {
  font-family: var(--font-display);
  font-weight: 480;
  font-size: 20px;
  color: var(--cream);
  margin-bottom: .5rem;
}
.blog-cta a.cta-button {
  display: inline-block;
  background: var(--coral);
  color: #fff;
  border-radius: 999px;
  padding: 12px 28px;
  font-weight: 700;
  text-decoration: none;
  transition: background .18s ease;
}
.blog-cta a.cta-button:hover { background: var(--coral-deep); }
.blog-cta a { color: var(--mustard); }
.blog-cta a.cta-button:hover { background: var(--coral-deep); transform: none; }

/* accent boxes inside posts */
.tip-box {
  background: rgba(242,184,75,.14);
  border-left: 3px solid var(--mustard);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.word-family-example {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.word-family-group strong { color: var(--coral); }
.progression-number { background: var(--coral); }

.blog-article table { border-color: var(--line); }
.blog-article th { background: var(--cream-deep); color: var(--ink); }

/* ============================================================
   WORKSHEET GALLERIES (worksheets/ index + category indexes)
   ============================================================ */
.ws-hero { text-align: center; padding: var(--s7) var(--s5) var(--s6); }
.ws-hero .kicker { margin-bottom: var(--s3); }
.ws-hero h1 { font-size: clamp(32px, 4.4vw, 48px); margin-bottom: var(--s3); }
.ws-hero p { color: var(--ink-soft); font-size: 17px; max-width: 56ch; margin: 0 auto; }

/* category cards on /worksheets */
.ws-cats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5);
  margin: 0 auto var(--s7); max-width: 980px;
}
.ws-cat {
  display: block; text-decoration: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: var(--s6) var(--s5);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ws-cat:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.ws-cat .ws-cat-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  font-family: var(--font-display); font-size: 19px; color: #fff;
  margin-bottom: var(--s4);
}
.ws-cat h2 { font-size: 22px; font-weight: 480; margin-bottom: var(--s2); color: var(--ink); }
.ws-cat p { color: var(--ink-soft); font-size: 14.5px; margin-bottom: var(--s3); }
.ws-cat .ws-cat-link { font-size: 13.5px; font-weight: 700; color: var(--coral); }
@media (max-width: 700px) { .ws-cats { grid-template-columns: 1fr; } }

/* sample cards in category galleries — framed sheet treatment */
.ws-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5);
  margin: 0 auto var(--s7); max-width: 1080px;
}
.ws-card { display: block; text-decoration: none; text-align: center; color: var(--ink); }
.ws-frame {
  background: var(--surface);
  border-radius: 14px;
  padding: var(--s5) var(--s4);
  margin-bottom: var(--s4);
  transition: background .2s ease;
}
.ws-sheet {
  background: var(--card);
  border-radius: 3px;
  box-shadow: var(--shadow-page);
  padding: var(--s2);
  transform: rotate(-.5deg);
  transition: transform .25s ease;
  overflow: hidden;
}
.ws-card:nth-child(even) .ws-sheet { transform: rotate(.5deg); }
.ws-card:hover .ws-sheet { transform: rotate(0) translateY(-4px); }
.ws-card:hover .ws-frame { background: #E7E0D2; }
.ws-sheet img { display: block; width: 100%; height: auto; border-radius: 2px; }
.ws-card h2, .ws-card h3 { font-size: 18px; font-weight: 480; margin-bottom: 2px; font-family: var(--font-display); color: var(--ink); }
.ws-card .ws-age { font-size: 13px; color: var(--ink-faint); font-weight: 600; margin-bottom: var(--s2); }
.ws-card .ws-try { font-size: 13px; font-weight: 700; color: var(--coral); letter-spacing: .02em; }
.ws-grid.ws-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .ws-grid, .ws-grid.ws-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ws-grid, .ws-grid.ws-grid-4 { grid-template-columns: 1fr; max-width: 340px; } }

/* CTA band reused across gallery pages */
.ws-cta {
  background: var(--cream-deep);
  border-radius: 18px;
  padding: var(--s7) var(--s5);
  text-align: center;
  max-width: 980px;
  margin: 0 auto var(--s7);
}
.ws-cta h2 { font-size: clamp(24px, 3vw, 32px); margin-bottom: var(--s3); }
.ws-cta p { color: var(--ink-soft); margin-bottom: var(--s5); max-width: 52ch; margin-left: auto; margin-right: auto; }
.ws-cta .ws-cta-links { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; }

/* --- worksheet DETAIL pages (existing .worksheet-detail markup) --- */
.worksheet-detail {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: var(--s5) 0 var(--s7);
  max-width: 720px;
}
.worksheet-detail h1 {
  font-family: var(--font-display); font-weight: 420;
  color: var(--ink);
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.12;
}
.worksheet-detail h2 {
  font-family: var(--font-display); font-weight: 480;
  color: var(--ink);
  font-size: 24px;
}
.worksheet-detail p, .worksheet-detail li { color: var(--ink-soft); font-size: 16.5px; line-height: 1.7; }
.worksheet-detail a { color: var(--coral); font-weight: 600; }
.age-badge, .grade-badge {
  background: rgba(242,184,75,.2);
  color: var(--ink);
  font-weight: 700;
}

/* preview image gets the framed-sheet product-shot treatment */
.worksheet-detail > img,
.worksheet-preview img {
  background: var(--card);
  border: none !important;
  border-radius: 4px !important;
  box-shadow: var(--shadow-page);
  padding: 10px;
  box-sizing: border-box;
}
.worksheet-detail .mmw-preview-frame {
  background: var(--surface);
  border-radius: 18px;
  padding: var(--s6) var(--s5);
  margin: var(--s5) 0;
  text-align: center;
}
.mmw-preview-frame img {
  display: inline-block;
  width: 100%;
  max-width: 560px;
  height: auto;
  background: var(--card);
  border-radius: 4px;
  box-shadow: var(--shadow-page);
  transform: rotate(-.5deg);
}
.mmw-preview-frame .mmw-preview-caption {
  display: block;
  margin-top: var(--s4);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint);
}

/* the make-your-own conversion CTA */
.mmw-makeown {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: var(--s5);
  margin: var(--s5) 0;
}
.mmw-makeown .mmw-makeown-copy { flex: 1 1 260px; }
.mmw-makeown strong {
  display: block;
  font-family: var(--font-display); font-weight: 480;
  font-size: 19px; color: var(--ink);
  margin-bottom: 2px;
}
.mmw-makeown span { color: var(--ink-soft); font-size: 14px; }
.mmw-makeown .btn-primary { flex: none; }

/* legacy cta-box re-skin */
.cta-box { background: var(--cream-deep); border-radius: 14px; }
.cta-box h3 { font-family: var(--font-display); font-weight: 480; color: var(--ink); }
.cta-box a.button-accent {
  background-color: var(--coral);
  border-radius: 999px;
  font-weight: 700;
}
.cta-box a.button-accent:hover { background-color: var(--coral-deep); }
.related-worksheets { border-top: 1px solid var(--line); }
.related-worksheets h3 { font-family: var(--font-display); font-weight: 480; color: var(--ink); }
.related-worksheets a { color: var(--coral); }

/* ============================================================
   LIBRARY (community library browse + empty state)
   ============================================================ */
.library-hero h1 { font-size: clamp(30px, 4vw, 44px); color: var(--ink); }
.library-hero p { color: var(--ink-soft); }

.filter-bar {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: none;
}
.filter-bar label { color: var(--ink-soft); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.type-pill {
  border: 1px solid var(--line);
  color: var(--ink-soft);
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-body);
  font-weight: 600;
}
.type-pill:hover { border-color: var(--sky); color: var(--ink); background: rgba(95,168,230,.10); }
.type-pill.active { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.filter-select, .filter-search input {
  border: 1px solid var(--line);
  color: var(--ink);
  background: var(--card);
  border-radius: 999px;
  font-family: var(--font-body);
}
.filter-search input:focus { border-color: var(--coral); }

.results-count { color: var(--ink-faint); }
.worksheet-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.worksheet-card:hover { border-color: var(--line); box-shadow: var(--shadow-soft); transform: translateY(-3px); }
.worksheet-card-image { background: var(--surface); }
.worksheet-card-image .type-icon { color: var(--ink-faint); opacity: .8; }
.worksheet-card-type {
  background: rgba(242,184,75,.2);
  color: var(--ink);
}
.worksheet-card-body h3 { font-family: var(--font-display); font-weight: 480; color: var(--ink); }
.view-count { color: var(--ink-faint); }
.btn-view { background: var(--coral); border-radius: 999px; font-weight: 700; }
.btn-view:hover { background: var(--coral-deep); }
.btn-similar {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px;
}
.btn-similar:hover { border-color: var(--ink); background: transparent; color: var(--ink); }
.btn-load-more {
  background: transparent; color: var(--ink);
  border: 1px solid var(--ink); border-radius: 999px; font-weight: 700;
}
.btn-load-more:hover { background: var(--ink); color: var(--cream); }

/* warm empty state */
.empty-state { color: var(--ink-soft); padding: var(--s8) var(--s5); }
.empty-state .mmw-empty-star {
  width: 72px; height: 72px;
  margin: 0 auto var(--s4);
  animation: mmw-star-in .5s ease both;
}
@keyframes mmw-star-in {
  from { transform: scale(.7) rotate(-14deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}
.empty-state h3 {
  font-family: var(--font-display); font-weight: 480;
  font-size: 24px; color: var(--ink);
  margin-bottom: var(--s2);
}
.empty-state p { max-width: 40ch; margin: 0 auto var(--s5); }
.cta-section {
  background: var(--cream-deep);
  border-radius: 18px;
}
.cta-section h2 { font-family: var(--font-display); font-weight: 420; color: var(--ink); }
.cta-section p { color: var(--ink-soft); }
.cta-links a {
  background-color: transparent;
  color: var(--ink);
  border: 1px solid var(--ink) !important;
  border-radius: 999px;
  font-weight: 700;
}
.cta-links a:hover { background-color: var(--ink); color: var(--cream); }

/* library-detail specifics */
.worksheet-detail-type { background: rgba(242,184,75,.2); color: var(--ink); }
.worksheet-detail-header h1 { font-family: var(--font-display); font-weight: 420; color: var(--ink); }
.worksheet-detail-meta { color: var(--ink-faint); }
.print-btn { background: var(--coral); border-radius: 999px; font-weight: 700; }
.print-btn:hover { background: var(--coral-deep); }
.create-similar-btn {
  background: transparent; color: var(--ink);
  border: 1px solid var(--ink); border-radius: 999px; font-weight: 700;
}
.create-similar-btn:hover { background: var(--ink); color: var(--cream); }
.worksheet-cta { background: var(--cream-deep); border-radius: 14px; }
.worksheet-cta h2 { font-family: var(--font-display); font-weight: 480; color: var(--ink); }
.worksheet-cta a { background: var(--coral); border-radius: 999px; font-weight: 700; }
.worksheet-cta a:hover { background: var(--coral-deep); }
.loading-state i { color: var(--coral); }

/* ============================================================
   RESOURCES + ACTIVITIES (new markup)
   ============================================================ */
.res-wrap { max-width: 1080px; margin: 0 auto; padding: var(--s7) var(--s5) var(--s8); }
.res-head { text-align: center; max-width: 640px; margin: 0 auto var(--s7); }
.res-head h1 { font-size: clamp(32px, 4.4vw, 48px); margin-bottom: var(--s3); }
.res-head p { color: var(--ink-soft); font-size: 17px; }

.res-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5);
  margin-bottom: var(--s8);
}
.res-card {
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: var(--s6) var(--s5) var(--s5);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.res-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.res-card.res-featured { border-color: var(--ink); }
.res-card .res-tag {
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: var(--s3);
}
.res-card.res-featured .res-tag { color: var(--coral); }
.res-card h2 {
  font-family: var(--font-display); font-weight: 480;
  font-size: 21px; color: var(--ink); margin-bottom: var(--s2);
}
.res-card p { color: var(--ink-soft); font-size: 14.5px; flex: 1; margin-bottom: var(--s4); }
.res-card .res-link { font-size: 13.5px; font-weight: 700; color: var(--coral); }
@media (max-width: 980px) { .res-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .res-grid { grid-template-columns: 1fr; } }

/* FAQ */
.res-faq { max-width: 720px; margin: 0 auto; }
.res-faq h2 {
  text-align: center;
  font-size: clamp(26px, 3.2vw, 36px);
  margin-bottom: var(--s6);
}
.res-faq details {
  border-top: 1px solid var(--line);
  padding: var(--s4) 0;
}
.res-faq details:last-child { border-bottom: 1px solid var(--line); }
.res-faq summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 480;
  font-size: 18px;
  color: var(--ink);
  position: relative;
  padding-right: 32px;
}
.res-faq summary::-webkit-details-marker { display: none; }
.res-faq summary::after {
  content: "+";
  position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-body);
  font-size: 20px; font-weight: 400; color: var(--coral);
  transition: transform .2s ease;
}
.res-faq details[open] summary::after { content: "–"; }
.res-faq details p {
  color: var(--ink-soft);
  font-size: 15.5px;
  margin-top: var(--s3);
}
.res-faq details a { color: var(--coral); font-weight: 600; text-decoration: none; }

/* activities hub */
.act-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5);
  max-width: 1080px; margin: 0 auto var(--s8);
}
.act-card {
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: var(--s6) var(--s5) var(--s5);
  text-align: left;
  transition: transform .2s ease, box-shadow .2s ease;
}
.act-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.act-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  font-size: 19px; color: #fff;
  margin-bottom: var(--s4);
}
.act-card h3 { font-size: 21px; font-weight: 480; margin-bottom: var(--s2); color: var(--ink); }
.act-card p { color: var(--ink-soft); font-size: 14.5px; flex: 1; margin-bottom: var(--s5); }
.act-card .btn { align-self: flex-start; }
@media (max-width: 980px) { .act-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .act-grid { grid-template-columns: 1fr; } }

/* accent dot colors used by cat marks / act nums */
.mk-coral   { background: var(--coral); }
.mk-mustard { background: var(--mustard); color: var(--ink) !important; }
.mk-sky     { background: var(--sky); }
.mk-sage    { background: var(--sage); }
.mk-ink     { background: var(--ink); }

/* ============================================================
   CRAYON COLORING HOVER (js/crayon.js)
   Any [data-crayon] element gets a crayon cursor and a multiply-
   blended canvas overlay the visitor "colors in" by moving the
   pointer. Kept active under prefers-reduced-motion on purpose:
   strokes only appear where/while the user moves — direct
   manipulation, not autonomous motion.
   ============================================================ */
/* NOTE: no `position` here — the hero's .page targets are already
   position:absolute; js/crayon.js promotes static targets to
   relative just-in-time instead. */
[data-crayon] {
  user-select: none;
  -webkit-user-select: none;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M5.2 21.2 L10.8 26.8 L24.2 13.4 L18.6 7.8 Z' fill='%23E8613C' stroke='%232B2B33' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M3 29 L10.8 26.8 L5.2 21.2 Z' fill='%232B2B33' stroke='%232B2B33' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M18.6 7.8 L24.2 13.4 L28.4 9.2 L22.8 3.6 Z' fill='%23F2B84B' stroke='%232B2B33' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 2 30, auto;
}
[data-crayon] img {
  -webkit-user-drag: none;
  user-select: none;
}
.mmw-crayon-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: multiply;
  border-radius: inherit;
}
/* one-time "✓ colored!" note when >60% of a page is revealed
   (js/crayon.js appends it to the [data-crayon] element) */
.mmw-colored-note {
  position: absolute;
  top: 6px;
  right: 8px;
  font-family: var(--font-hand);
  font-size: 18px;
  color: var(--coral);
  transform: rotate(3deg);
  pointer-events: none;
  animation: mmw-colored-note-pop .35s ease-out both;
}
@keyframes mmw-colored-note-pop {
  from { opacity: 0; transform: rotate(3deg) scale(.6); }
  to   { opacity: 1; transform: rotate(3deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .mmw-colored-note { animation: none; }
}

/* ============================================================
   EXAMPLES WALL — "Made with MakeMyWorksheet" (homepage)
   Real generated pages framed like the v3 product shots, each
   captioned with the typed prompt that made it.
   ============================================================ */
.ex-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
  position: relative;
}
.ex-annotation {
  position: absolute;
  top: -34px;
  right: 2%;
  font-family: var(--font-hand);
  font-size: 20px;
  color: var(--ink-soft);
  transform: rotate(-2deg);
  pointer-events: none;
}
@media (hover: none) { .ex-annotation { display: none; } }
.ex-card {
  display: block;
  color: var(--ink);
  text-align: center;
  text-decoration: none;
}
.ex-frame {
  background: var(--surface);
  border-radius: 14px;
  padding: var(--s5) var(--s4) var(--s4);
  margin-bottom: var(--s4);
  transition: background .2s ease;
}
.ex-card:hover .ex-frame { background: #E7E0D2; }
/* the "printed page" — deliberately NO hover lift: the sheet must
   hold still under the crayon */
.ex-sheet {
  background: var(--card);
  border-radius: 3px;
  box-shadow: var(--shadow-page);
  padding: var(--s2);
  transform: rotate(-.5deg);
  overflow: hidden;
}
.ex-card:nth-child(even) .ex-sheet { transform: rotate(.5deg); }
.ex-art { position: relative; }
.ex-art img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}
/* the prompt, styled like typed input in a quiet chip */
.ex-prompt {
  display: inline-block;
  max-width: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
  margin-bottom: var(--s2);
}
.ex-prompt .q { font-weight: 700; }
.ex-prompt .for { color: var(--ink-faint); font-weight: 600; white-space: nowrap; }
.ex-try {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--coral);
  letter-spacing: .02em;
  opacity: 0;
  transform: translateY(3px);
  transition: all .2s ease;
}
.ex-card:hover .ex-try { opacity: 1; transform: translateY(0); }
@media (hover: none) { .ex-try { opacity: 1; transform: none; } }
@media (max-width: 980px) {
  .ex-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .ex-grid { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; }
}

/* ============================================================
   HERO CTA SHIMMER — slow warm coral→mustard drift, hero
   button only (.btn-shimmer set in index.html markup).
   ============================================================ */
@keyframes mmw-cta-shimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.btn-shimmer {
  background: linear-gradient(115deg,
    var(--coral) 0%,
    var(--coral-deep) 28%,
    var(--coral) 55%,
    #F0A044 74%,   /* warm coral–mustard blend, keeps white text readable */
    var(--coral) 100%);
  background-size: 300% 100%;
  animation: mmw-cta-shimmer 3.2s ease-in-out infinite;
}
.btn-shimmer:hover {
  background: var(--coral-deep);
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .btn-shimmer { animation: none; background: var(--coral); }
}

/* ============================================================
   Print: keep chrome out of printed worksheets
   ============================================================ */
@media print {
  @page { size: Letter; margin: 0.4in; }

  header, footer, .generator-nav, .gen-chips, .gen-hint,
  .mmw-browse, .visual-example-section, .mmw-makeown, .ws-cta {
    display: none !important;
  }
  body { background: #fff; }

  /* generator results fill the printable page — no card chrome */
  .main-results-area,
  .main-activity-container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }
  .main-activity-container img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .mmw-result-reveal { animation: none !important; box-shadow: none !important; }
}


/* Founder pass 2026-07-05: shimmer pops on hover; hover life for the
   how-it-works steps, pricing cards, and testimonial quotes. */
.btn-shimmer:hover {
  animation: mmw-cta-shimmer 1.1s ease-in-out infinite;
  transform: translateY(-2px) scale(1.02);
}
.steps .step, .how-steps .step, .step {
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.step:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(43,43,51,.10);
  background: #fff;
}
.step:hover .step-num, .step:hover .step-number {
  transform: scale(1.15) rotate(-6deg);
  transition: transform .25s ease;
}
.pricing-card, .price-card {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pricing-card:hover, .price-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(43,43,51,.12);
  border-color: var(--coral, #E8613C);
}
.quote { transition: transform .25s ease, box-shadow .25s ease; }
.quote:hover { transform: translateY(-3px) rotate(-0.4deg); box-shadow: 0 12px 26px rgba(43,43,51,.08); }
@media (prefers-reduced-motion: reduce) {
  .step:hover, .pricing-card:hover, .price-card:hover, .quote:hover,
  .btn-shimmer:hover { transform: none; }
}

/* ============================================================
   COMPARISON TABLES (blog conquest/roundup pages)
   ============================================================ */
.cmp-scroll { overflow-x: auto; margin: var(--s5) 0; -webkit-overflow-scrolling: touch; }
.cmp-scroll table {
  width: 100%;
  min-width: 620px;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.cmp-scroll th, .cmp-scroll td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 15px;
  line-height: 1.5;
  vertical-align: top;
}
.cmp-scroll th { font-family: var(--font-body); font-weight: 700; white-space: nowrap; }
.cmp-scroll tr:last-child td { border-bottom: none; }
.cmp-scroll td:first-child { font-weight: 700; color: var(--ink); }
.blog-article .cmp-note { font-size: 13.5px; color: var(--ink-faint); margin-top: -8px; }