/* tool-page.css: the standalone tool pages (Name Ideas, Trouble Maker). Colours, fonts and the footer are the live
   landing's (fox-* tokens); headings in Canela by size (landing/CANELA-CUTS.md: Text <27px, Deck 27–64px, Display 64px+). */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/landing-v110/assets/montserrat-latin-variable-Dk9Pm7OY.woff2") format("woff2"); }
@font-face { font-family: "Canela Deck Web"; src: url("/landing-v110/canela-hero-20261103v/CanelaDeck-Light-Web.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Canela Text Web"; src: url("/landing-v110/canela-hero-20261103v/CanelaText-Light-Web.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Canela Web"; src: url("/landing-v110/canela-hero-20261103v/Canela-Light-Web.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }

:root { --cream: #fcfaf3; --green: #155a45; --ink: #111710; --lavender: #6951a2; --purple: #8268b1; --line: #dfdfd2;
  --budding-forest: #155a45; --budding-sage: #eef1e7; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 400 17px/1.65 "Montserrat", -apple-system, "Segoe UI", Arial, sans-serif; }
a { color: inherit; }
.wrap { width: min(100% - 40px, 760px); margin-inline: auto; }

/* Header: the live landing's (fox-nav, measured 5 Nov): wordmark 118px, one "Log in" link in green Montserrat 500 18px,
   100px tall in a 960px column; phones 82px, wordmark 101px, link 14.5px */
.top { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: min(100% - 48px, 960px); min-height: 100px; margin: env(safe-area-inset-top) auto 0; }
.top img { display: block; width: 118px; height: auto; }
.top nav { display: flex; align-items: center; gap: 34px; }
.top nav a { display: inline-flex; align-items: center; min-height: 44px; font: 500 18px "Montserrat", sans-serif; color: var(--green); text-decoration: none; }
.top nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 700px) { .top { width: calc(100% - 44px); min-height: 82px; } .top img { width: 101px; } .top nav a { font-size: 14.5px; } }

/* Primary: the live landing's closing "Make 3 books for free" (fox-primary-small): green, Montserrat 500 18px, 16px 30px,
   40px corners, a 22px arrow; hover darker green and up 2px, pressed down 3px */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 30px; border-radius: 40px;
  background: var(--green); color: #fff !important; text-decoration: none; font: 500 18px/1 "Montserrat", sans-serif; transition: background .2s, transform .2s; }
.pill svg { width: 22px; height: 22px; flex: none; }
.pill:hover { background: #0d4937; transform: translateY(-2px); }
.pill:active { transform: translateY(3px); }
@media (prefers-reduced-motion: reduce) { .pill:hover { transform: none; } }

.crumbs { font-size: 13px; color: var(--lavender); margin: 18px 0 0; }
.crumbs a { text-decoration: none; }
.crumbs span[aria-hidden] { margin: 0 6px; }

.hero { text-align: center; padding: 28px 0 8px; }
.eyebrow { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lavender); }
/* h1: 38–58px, so Canela Deck Light, tracking -0.005em (CANELA-CUTS) */
h1 { margin: 12px auto 0; max-width: 680px; font: 300 clamp(38px, 6.4vw, 58px)/1.08 "Canela Deck Web", Georgia, serif; letter-spacing: -0.005em; color: var(--green); }
.lead { margin: 16px auto 0; max-width: 560px; font-size: 18px; color: #3b4a42; }

.tool { width: min(100% - 32px, 680px); margin: 30px auto 0; }
.tool-hint { margin: 10px 0 0; text-align: center; font-size: 14px; color: #5d6b63; }
.after-tool { text-align: center; margin-top: 18px; }
/* Secondary buttons: the landing's Story Idea / Protagonist button look (lesson-box, Ali 5 Nov): white, a 1px #d4e1de
   outline, no shadow, green Montserrat 550 15px, 52px, 30px corners, 18px icons 9px from the label in 1.67-unit lines,
   pressed 0.98 */
.sec-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.sec { display: inline-flex; align-items: center; justify-content: center; gap: 9px; box-sizing: border-box; height: 52px; padding: 0 18px;
  border: 1px solid #d4e1de; border-radius: 30px; background: #fff; color: var(--green); font: 550 15px "Montserrat", sans-serif;
  text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .15s; }
.sec svg { width: 18px; height: 18px; flex: none; }
.sec svg[stroke] { stroke-width: 1.67; }
.sec:active { transform: scale(0.98); }
.sec:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
/* phones: the two stack at one shared width instead of wrapping to two different widths */
@media (max-width: 560px) { .sec-row { display: grid; grid-template-columns: minmax(0, 340px); justify-content: center; gap: 8px; } }
.after-tool p { margin: 12px 0 0; font-size: 14px; color: #5d6b63; }

main section { padding: 40px 0 0; }
/* h2: 28–34px, Canela Deck Light, -0.005em */
h2 { margin: 0; font: 300 clamp(28px, 4vw, 34px)/1.15 "Canela Deck Web", Georgia, serif; letter-spacing: -0.005em; color: var(--green); }
/* h3: 21px, Canela Text Light, -0.01em */
h3 { margin: 22px 0 0; font: 300 21px/1.3 "Canela Text Web", Georgia, serif; letter-spacing: -0.01em; color: var(--ink); }
main p, main li { color: #2f3a33; }
main section p { margin: 12px 0 0; }
main ol, main ul { margin: 12px 0 0; padding-left: 22px; }
main li { margin: 6px 0; }
.faq h3 + p { margin-top: 6px; }
.related { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.related a { display: block; padding: 14px 18px; border: 1px solid #d4e1de; border-radius: 18px; background: #fff; text-decoration: none; font-weight: 600; color: var(--green); }
.related a:hover { border-color: #b9c9c4; }
.closing { margin: 48px 0 0; padding: 34px 22px; border-radius: 28px; background: #fff; border: 1px solid #d4e1de; text-align: center; }
.closing h2 { font-size: clamp(28px, 4vw, 34px); }
.closing p { margin: 10px auto 18px; max-width: 460px; }

/* Footer: the live landing's (fox-footer, measured 5 Nov): wordmark, then "Explore Budding" and the footer links in two
   columns of green Montserrat 500 15px, 44px rows; phones put the wordmark centred above the two columns */
.foot { display: grid; grid-template-columns: 152px minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; width: min(100% - 48px, 960px);
  margin: 56px auto 0; padding: 36px 0; border-top: 1px solid var(--line); }
.foot > a { display: block; padding-top: 4px; }
.foot img { display: block; width: 111px; height: auto; }
.foot nav { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.foot nav a { display: flex; align-items: center; min-height: 44px; font: 500 15px/1.5 "Montserrat", sans-serif; color: var(--green); }
.foot a { text-decoration: none; }
@media (min-width: 701px) and (max-width: 1000px) { .foot { grid-template-columns: 128px minmax(0, 1fr) minmax(0, 1fr); gap: 32px; } .foot nav a { font-size: 13px; } }
@media (max-width: 700px) { .foot { width: calc(100% - 32px); grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; padding: 30px 0; }
  .foot > a { grid-column: 1 / -1; justify-self: center; padding: 0; } }
.foot a:hover { text-decoration: underline; text-underline-offset: 5px; }

/* ---- NAME_IDEAS: name-ideas.css as in the app, with the landing's final look (lesson-box.css,
   canela-blocks-20261105zzzzM, Ali 5 Nov). The tool pages keep the labelled lever button (the landing hides it). ---- */
@font-face { font-family: "Canela Text Regular Web"; src: url("/landing-v110/canela-hero-20261103v/CanelaText-Regular-Web.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
.name-ideas {
  position: relative; container: name-box / inline-size;
  width: 100%; background: #ffffff; border-radius: 26px; overflow: hidden; border: 0; /* LANDING: no outline */
}
.name-ideas--open { border-radius: 39px 39px 37px 37px; cursor: pointer; /* LANDING: a click on the card spins all three */ }
.name-ideas__button {
  width: 100%; height: 52px; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: transparent; border: 0; padding: 0; cursor: pointer; white-space: nowrap; color: var(--green);
  font: 550 15px "Montserrat", sans-serif; -webkit-tap-highlight-color: transparent; /* LANDING: the Story Idea label's font */
}
.name-ideas__button svg { width: 17px; height: 17px; flex: none; }
.name-ideas__body { overflow: hidden; }
.name-ideas__reels { display: grid; gap: 8px; padding: 0 15px 15px; } /* LANDING: 15px round the slots */
.name-reel {
  /* LANDING: each wash mixed 35% toward white */
  --name-bg: color-mix(in srgb, var(--name-wash) 65%, #fff);
  position: relative; width: 100%; height: 64px; padding: 0; border: 0; border-radius: 999px; overflow: hidden;
  background: var(--name-bg); cursor: pointer; transition: background-color 200ms linear, box-shadow 150ms linear; container: name-reel / inline-size;
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
}
.name-reel__window {
  height: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24%, #000 76%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 24%, #000 76%, transparent 100%);
}
.name-reel__strip { will-change: transform; }
/* LANDING: Canela Text Regular, 18px; lifted 0.11em to centre Canela optically (Canela only) */
.name-reel__name {
  position: relative; top: -0.11em;
  height: 64px; display: flex; align-items: center; justify-content: center; white-space: nowrap;
  font-family: "Canela Text Regular Web", "Canela Text Web", Georgia, serif; font-weight: 400; letter-spacing: 0;
  font-size: 18px; line-height: 1; color: var(--name-colour);
}
@container name-box (min-width: 340px) {
  .name-ideas__reels { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .name-reel, .name-reel__name { height: 54px; }
  /* LANDING: round ends only at the box's outer corners, 10px corners where slots face each other */
  .name-reel { border-radius: 10px; }
  .name-reel:first-child { border-radius: 27px 10px 10px 27px; }
  .name-reel:last-child { border-radius: 10px 27px 27px 10px; }
}
@container name-reel (max-width: 240px) { .name-reel__name { font-size: min(15.5px, calc((100cqi - 26px) / 6.2)); } }
/* LANDING (zzzzX, Ali 5 Nov): where the box is too narrow for three side by side, the first two share a row and the
   third has its own; all three at 15.5px, round corners (27px) only at the box's outer corners */
@container name-box (max-width: 339.98px) {
  .name-ideas:not(.name-ideas--stacked) .name-ideas__reels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .name-ideas:not(.name-ideas--stacked) .name-reel, .name-ideas:not(.name-ideas--stacked) .name-reel__name { height: 54px; }
  .name-ideas:not(.name-ideas--stacked) .name-reel:nth-child(3) { grid-column: 1 / -1; }
  .name-ideas:not(.name-ideas--stacked) .name-reel:nth-child(1) { border-radius: 27px 10px 10px 10px; }
  .name-ideas:not(.name-ideas--stacked) .name-reel:nth-child(2) { border-radius: 10px 27px 10px 10px; }
  .name-ideas:not(.name-ideas--stacked) .name-reel:nth-child(3) { border-radius: 10px 10px 27px 27px; }
  .name-ideas:not(.name-ideas--stacked) .name-reel__name { font-size: 15.5px !important; }
}
/* Trouble Maker's reels stay one under another at every width, so they read as one sentence. Same slot language as
   Name Ideas (Ali, 5 Nov): 54px slots 5px apart, round corners (27px) only at the box's outer corners, 10px where
   slots face each other */
.name-ideas--stacked .name-ideas__reels { grid-template-columns: 1fr; gap: 5px; }
.name-ideas--stacked .name-reel, .name-ideas--stacked .name-reel__name { height: 54px; }
.name-ideas--stacked .name-reel { border-radius: 10px; }
.name-ideas--stacked .name-reel:first-child { border-radius: 27px 27px 10px 10px; }
.name-ideas--stacked .name-reel:last-child { border-radius: 10px 10px 27px 27px; }
.name-reel__strip--fast .name-reel__name { text-shadow: 0 -12px 3px color-mix(in srgb, var(--name-colour) 16%, transparent), 0 12px 3px color-mix(in srgb, var(--name-colour) 16%, transparent); }
/* LANDING: hover rings a slot in its name's colour (20%); hovering the button or the card rings all three */
@media (hover: hover) and (pointer: fine) {
  .name-reel:hover,
  .name-ideas:has(.name-ideas__button:hover) .name-reel,
  .name-ideas--open:hover:not(:has(.name-reel:hover)) .name-reel { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--name-colour) 20%, var(--name-wash)); }
}
.lb-lever-arm { transform-box: fill-box; transform-origin: 50% 100%; }
.name-ideas--static, .name-ideas--static .name-reel { cursor: default; }