/* Public landing only: keep the page canvas and browser safe-area color exact. */
html:has(.fox-landing), body:has(.fox-landing) { background-color: #fcfaf3; }

/* Use the same sans-serif family as the existing landing controls. */
.fox-landing .fox-primary { font-family: Montserrat, sans-serif; }

/* Keep the challenge and audio panels on a shared bottom edge on desktop. */
@media (min-width: 701px) {
  .fox-quiet-storybook .fox-step-one { align-self: end; }
  .fox-quiet-storybook .fox-imagine-and-say .fox-spell-audio { margin-bottom: 0; }
}

/* Smaller CTA labels inside the unchanged published button frames.
   Widths retain the embedded Montserrat label's previous natural footprint;
   max-width still follows the existing parent column on narrow viewports. */
.fox-quiet-storybook .fox-hero-invitation .fox-primary {
  font-size: 20px;
  width: 430.203125px;
  max-width: 100%;
  height: 67px;
}
.fox-quiet-storybook .fox-final-invitation .fox-primary {
  font-size: 20px;
  width: 371.296875px;
  max-width: 100%;
  height: 56px;
}
@media (min-width: 701px) and (max-width: 1000px) {
  .fox-quiet-storybook .fox-hero-invitation .fox-primary { width: 414.203125px; }
  .fox-quiet-storybook .fox-final-invitation .fox-primary { width: 366.65625px; height: 55px; }
}
/* The published footer label wraps below this two-column width. */
@media (min-width: 701px) and (max-width: 845px) {
  .fox-quiet-storybook .fox-final-invitation .fox-primary { height: 78px; }
}
@media (max-width: 700px) {
  .fox-quiet-storybook .fox-hero-invitation .fox-primary { font-size: 18px; width: 349.296875px; height: 60px; }
  .fox-quiet-storybook .fox-final-invitation .fox-primary { font-size: 18px; width: 338.65625px; height: 55px; }
}
@media (max-width: 380px) {
  .fox-quiet-storybook .fox-hero-invitation .fox-primary { width: 317.390625px; height: 58px; }
  .fox-quiet-storybook .fox-final-invitation .fox-primary { width: 328.015625px; height: 54px; }
}
/* Retain the published wrap immediately above the 380px font breakpoint. */
@media (min-width: 381px) and (max-width: 381px) {
  .fox-quiet-storybook .fox-hero-invitation .fox-primary { height: 84px; }
}
/* Keep the original two-line button heights even when the new label fits. */
@media (max-width: 359px) {
  .fox-quiet-storybook .fox-final-invitation .fox-primary { height: 76px; }
}
@media (max-width: 349px) {
  .fox-quiet-storybook .fox-hero-invitation .fox-primary { height: 78px; }
}

/* Give both existing sans-serif CTA labels a modest increase in weight. */
.fox-landing .fox-primary { font-weight: 450; }
/* Match the mobile web badge to the unchanged App Store badge. */
@media (max-width: 700px) {
  .fox-quiet-storybook .fox-web-badge {
    width: 143.59375px;
    height: 48px;
    min-height: 48px;
    padding: 2px 10px;
  }
}

/* Give roomy portrait phones a larger title while preserving narrow and short layouts. */
@media (min-width: 375px) and (max-width: 700px) and (min-height: 740px) and (max-aspect-ratio: 3/5) {
  .fox-quiet-storybook .fox-hero h1 { font-size: clamp(40px, 10.7vw, 68px); }
}

/* Tighten only the space above the mobile hero heading. */
@media (max-width: 700px) {
  .fox-quiet-storybook .fox-hero { padding-top: 24px; }
}

/* Use the existing sans-serif family only for the first two section subtitles. */
.fox-quiet-storybook #how-it-works > .fox-section-heading > p,
.fox-quiet-storybook #stories > .fox-container > .fox-section-heading > p {
  font-family: Montserrat, sans-serif;
  font-size: 22px;
}
@media (max-width: 700px) {
  .fox-quiet-storybook #how-it-works > .fox-section-heading > p,
  .fox-quiet-storybook #stories > .fox-container > .fox-section-heading > p { font-size: 19px; }
}

/* Soften only the measured blank paper rim; retain SVG overflow and subject pixels. */
.fox-quiet-storybook .fox-imagine-art-selected { --fox-art-edge: 2.5%; }

/* Latest landing subtitle contrast and CTA-note typography. */
.fox-quiet-storybook #how-it-works > .fox-section-heading > p,
.fox-quiet-storybook #stories > .fox-container > .fox-section-heading > p {
  font-size: 21px;
}
@media (max-width: 700px) {
  .fox-quiet-storybook #how-it-works > .fox-section-heading > p,
  .fox-quiet-storybook #stories > .fox-container > .fox-section-heading > p { font-size: 18px; }
}
.fox-quiet-storybook .fox-believe .fox-believe-body {
  color: var(--fox-green);
  opacity: 1;
}
.fox-quiet-storybook .fox-account-note,
.fox-quiet-storybook .fox-final-account-note { font-family: Montserrat, sans-serif; }

/* Keep every existing purple CTA note and section description on one token. */
.fox-quiet-storybook .fox-account-note,
.fox-quiet-storybook .fox-final-account-note,
.fox-quiet-storybook .fox-section-heading > p,
.fox-quiet-storybook .fox-ai-choices > p,
.fox-quiet-storybook .fox-apps-copy > p { color: var(--fox-lavender); opacity: 1; }
@media (max-width: 700px) {
  .fox-quiet-storybook .fox-hero { padding-top: 21px; }
}

/* Smaller CTA subtitles inside the existing landing layout. */
.fox-quiet-storybook .fox-account-note,
.fox-quiet-storybook .fox-final-account-note { font-size: 16px; }
@media (max-width: 700px) {
  .fox-quiet-storybook .fox-account-note,
  .fox-quiet-storybook .fox-final-account-note { font-size: 15px; }
}

/* A little more breathing room below the header; keep the existing hero layout. */
.fox-quiet-storybook .fox-hero { padding-top: 42px; }
@media (max-width: 700px) {
  .fox-quiet-storybook .fox-hero { padding-top: 28px; }
  .fox-quiet-storybook .fox-hero h1 { font-size: clamp(34px, 9.5vw, 58px); }
}

/* Remove only the account note below the first landing CTA. */
.fox-quiet-storybook .fox-hero-invitation > .fox-account-note { display: none; }

/* Trim only the outer top gap, retaining the browser safe-area minimum. */
.fox-quiet-storybook { padding-top: max(14px, env(safe-area-inset-top, 0px)); }
@media (max-width: 700px) {
  .fox-quiet-storybook { padding-top: max(8px, env(safe-area-inset-top, 0px)); }
}