/* ============================================================================
   mintyourcraft.com's own layer.

   css/shared-core.css carries the tokens, type, layout, controls and the
   whole archetype experience, and is copied in from the demo by
   build/sync-shared.py. Nothing in this file may redefine a selector that
   lives there, because the two are served as separate stylesheets in that
   order and a collision here would silently win.
   ========================================================================= */

/* ---- the nav ------------------------------------------------------------ */
.nav { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; }
.nav__in { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 22px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand__mark { display: inline-grid; place-items: center; width: 30px; height: 30px;
  border: 1px solid var(--green); color: var(--green-ink);
  font-family: var(--font-head); font-weight: 600; font-size: 14px; }
.brand__name { font-family: var(--font-head); font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; font-size: 13px; color: var(--green-ink); }
.navlinks { display: flex; align-items: center; gap: 22px; }
.navlinks a { font-family: var(--font-head); font-size: 13px; letter-spacing: .04em;
  text-decoration: none; color: var(--gray); }
.navlinks a:hover, .navlinks a.active { color: var(--green-ink); }
.navtoggle { display: none; background: none; border: 1px solid var(--line);
  padding: 9px 11px; min-height: 44px; color: var(--green-ink); }

@media (max-width: 860px) {
  .navtoggle { display: inline-flex; align-items: center; }
  .navlinks { display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch; gap: 0; padding: 8px 22px 18px; }
  .navlinks.open { display: flex; }
  .navlinks a { padding: 13px 0; min-height: 44px; display: flex; align-items: center; }
  .nav__in { position: relative; flex-wrap: wrap; }
}

/* ---- the footer --------------------------------------------------------- */
.foot { background: var(--green-ink); color: #eafff4; padding: 44px 0 36px; margin-top: 60px; }
.foot__brand { font-family: var(--font-head); font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; font-size: 12px; }
.foot__links { margin: 18px 0 0; display: flex; gap: 20px; flex-wrap: wrap; }
.foot__links a { color: #eafff4; font-size: 14px; }
/* Spec section 2, footer (2026-10-09).
 *
 * The focus ring is white on the green, which is 10.4:1, and it is
 * focus-visible so it appears for a keyboard and not for a mouse click.
 * The offset keeps it clear of the text rather than sitting on it.
 *
 * The page you are on is underlined and bold, NOT dimmed. Greying it out
 * is the usual way of saying "you are here" and it reads as disabled to
 * anybody who cannot tell a dimmed link from a dead one, so it keeps the
 * same colour as its neighbours and says so in weight instead. */
.foot__links a:focus-visible,
.foot__ifw a:focus-visible {
  outline: 2px solid #fff; outline-offset: 3px; border-radius: 1px; }
.foot__links a.here {
  color: #eafff4; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px; }
/* The credit line's link carries the same underline, so it reads as a
   link at the size it is. The line sits at .7 over the green, which
   computes to 5.8:1: enough for AA, and the link is not dimmer than the
   words around it. */
.foot__ifw a { color: inherit; text-decoration: underline;
  text-underline-offset: 2px; }
.foot__dis { margin: 18px 0 0; font-size: 14px; opacity: .85; max-width: 60ch; }
.foot__ifw { margin: 14px 0 0; font-size: 12.5px; opacity: .7; }

/* ---- the 17hats scheduler, /book/ only ---------------------------------- *
   Full width, no border, and a min-height that matters: if 17hats' sizing
   script fails to load the frame stays this tall and the calendar is still
   usable, which is the documented fallback rather than a guess. */
.scheduler { display: block; width: 100%; border: 0; min-height: 600px; background: #fff; }
@media (max-width: 700px) { .scheduler { min-height: 760px; } }

/* ---- who it's for, on Home ---------------------------------------------- */
.whofor { max-width: 900px; }
@media (min-width: 720px) { .whofor { columns: 2; column-gap: 40px; } .whofor li { break-inside: avoid; } }
/* .ci-meet lives in the shared core; it is identical here. */

/* ---- forms --------------------------------------------------------------- */
.form label { display: block; font-family: var(--font-head); font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  margin: 18px 0 6px; }
.form input, .form select, .form textarea {
  width: 100%; padding: 12px 13px; border: 1px solid var(--line);
  background: #fff; color: var(--ink); font: inherit; font-size: 15px;
  border-radius: 0; min-height: 44px; }
.form input:focus, .form select:focus, .form textarea:focus {
  outline: 2px solid var(--green); outline-offset: 1px; }
.form textarea { min-height: 120px; resize: vertical; }
.said { font-size: 16px; }

/* The honeypot. Hidden from people without being display:none, which some
   bots check for, and kept out of the tab order and the accessibility tree. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- the legal drafts ---------------------------------------------------- */
.draft-banner { margin-top: 18px; padding: 13px 15px; background: var(--mint-soft);
  border-left: 3px solid var(--green); font-size: 15px; }
.legal h2 { font-size: 22px; margin: 32px 0 10px; }
.legal h3 { font-size: 17px; margin: 24px 0 8px; }
.legal p { margin: 0 0 14px; max-width: 68ch; }
.legal ul { margin: 0 0 18px; }

/* ---- the email capture under the Map ---------------------------------- *
 * It sits below the Map rather than inside it, because the engine rewrites
 * its own root as it moves between views and anything inside would go with
 * it. Same card treatment as the rest of the page so it reads as part of the
 * result rather than as an advert bolted underneath. */
.cap__wrap { max-width: 760px; margin: 28px auto 0; }
.cap { background: #fff; border: 1px solid var(--line); border-radius: 14px;
       padding: 26px 24px; }
.cap h3 { font-family: var(--font-head); font-weight: 500; font-size: 22px;
          line-height: 1.3; margin: 0 0 18px; }
.cap--shut h3 { margin-bottom: 10px; }
.cap--shut p { margin: 0; color: var(--muted); }
.cap__consent { display: flex; align-items: flex-start; gap: 10px;
                margin-top: 20px; }
.cap__consent input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; }
.cap__consent label { font-family: var(--font-body); font-size: 15px;
                      line-height: 1.5; letter-spacing: 0; text-transform: none;
                      color: var(--ink); }
.cap button[disabled] { opacity: .45; cursor: not-allowed; }
@media (max-width: 600px) { .cap { padding: 22px 18px; } }

/* The shared article renderer always emits a review label. That label belongs
   to the mockup these articles came from; here they are published. The text is
   emptied at build time, and :empty takes the leftover element with it
   without redefining a selector the shared half already owns. */
.a-draft:empty { display: none; }

/* ---- Meet Pru, spec 3.1 ------------------------------------------------ *
 * Carried from the demo's own stylesheet. The photo is a plain <img> rather
 * than a background, so it has width and height and cannot shift the page
 * as it loads. */
.pru {
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  border: 1px solid var(--line);
}
.pru__photo { position: relative; min-height: 340px; background: var(--mint-soft); }
.pru__photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center 22%;
  display: block;
}
.pru__panel {
  background: var(--yellow); color: var(--gray);
  padding: clamp(28px, 4vw, 52px);
  display: flex; flex-direction: column; justify-content: center;
}
.pru__hi {
  font-family: var(--font-script); font-size: clamp(54px, 7vw, 86px);
  line-height: .8; color: var(--gray); margin: 0 0 2px;
}
.pru__name {
  font-family: var(--font-head); font-weight: 500; text-transform: uppercase;
  letter-spacing: -0.02em; font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1; color: var(--gray); margin: 0 0 20px;
}
.pru__body { font-size: 16.5px; line-height: 1.65; margin: 0 0 16px; }
.pru__closer {
  font-family: var(--font-read); font-style: italic;
  font-size: clamp(17px, 2vw, 20px); line-height: 1.45; color: var(--ink); margin: 0;
}
@media (max-width: 760px) {
  .pru { grid-template-columns: 1fr; }
  .pru__photo { min-height: 0; aspect-ratio: 3 / 2; }
  .pru__photo img { position: static; height: 100%; }
}

/* ---- the Map as a page, spec 3.2.1 ------------------------------------- *
 * The engine writes the same markup it used to put in the sheet, so the
 * sheet's own styles do the work. These two rules are only about the page
 * around it: the footer row the engine returns separately, and the links
 * underneath. */
.m-page__foot { margin-top: 28px; flex-wrap: wrap; gap: 12px; }
.map-again { margin-top: 32px; font-size: 15px; }
.map-again__sep { margin: 0 10px; color: var(--line); }

/* ---- a shared archetype, /s/<code>, spec 3.2.2 ------------------------- *
 * Deliberately small: a symbol, a sentence and a superpower. Everything
 * else the Map knows about that person stays on the Map. */
.sharecard { border: 1px solid var(--line); border-radius: 14px;
             padding: 32px 26px; text-align: center; background: #fff; }
.sharecard__sym { width: 160px; height: 160px; border-radius: 50%;
                  margin: 0 auto 22px; display: grid; place-items: center; }
.sharecard__sym img { width: 124px; height: 124px; display: block; }
.sharecard__flavor { font-family: var(--font-read); font-size: 19px;
                     line-height: 1.55; color: var(--gray); margin: 0 auto;
                     max-width: 46ch; }
.sharecard__power { margin: 18px auto 0; max-width: 46ch; font-size: 16px; }
@media (max-width: 600px) {
  .sharecard { padding: 26px 18px; }
  .sharecard__sym { width: 132px; height: 132px; }
  .sharecard__sym img { width: 100px; height: 100px; }
}

/* ---- the share pop-up, spec 3.2.2 -------------------------------------- */
.m-arch__share { margin: 0 0 10px; }
.sm { position: fixed; inset: 0; background: rgba(17,17,17,.55);
      display: grid; place-items: center; padding: 20px; z-index: 60;
      overflow-y: auto; }
.sm__box { background: #fff; border-radius: 14px; padding: 30px 26px;
           max-width: 520px; width: 100%; position: relative; }
.sm__x { position: absolute; top: 10px; right: 14px; background: none;
         border: 0; font-size: 28px; line-height: 1; cursor: pointer;
         color: var(--gray); }
.sm__box h3 { font-family: var(--font-head); font-weight: 500; font-size: 22px;
              margin: 0 0 12px; }
.sm__link { font-family: var(--font-head); font-size: 15px; word-break: break-all;
            background: var(--mint-soft); border-radius: 10px; padding: 14px 16px;
            margin: 16px 0 0; }
@media (max-width: 600px) { .sm__box { padding: 26px 18px; } }

/* ---- the 404 tour, spec 3.6 -------------------------------------------- *
 * Four across at desktop, two at phone width. The whole card is the link,
 * so the target is the card and not a line of text inside it. */
.nf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
           margin-top: 30px; }
.nf-card { display: flex; gap: 12px; align-items: center; min-height: 64px;
           padding: 14px; border: 1px solid var(--line); border-radius: 12px;
           background: #fff; text-decoration: none; color: var(--ink); }
.nf-card:hover { border-color: var(--green); }
.nf-card:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.nf-card__sym { flex: none; width: 56px; height: 56px; border-radius: 50%;
                display: grid; place-items: center; }
.nf-card__sym img { width: 44px; height: 44px; display: block; }
.nf-card__body { display: block; min-width: 0; }
.nf-card__name { display: block; font-family: var(--font-head); font-weight: 500;
                 font-size: 15px; line-height: 1.2; }
.nf-card__line { display: block; font-size: 13.5px; color: var(--gray);
                 margin-top: 3px; }
@media (max-width: 900px) { .nf-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) {
  /* Two columns at phone width leaves about 80px beside a 56px symbol,
     which is not enough for "The Rainmaker". Stacked, the same two columns
     give the text the whole card. */
  .nf-card { flex-direction: column; align-items: flex-start; gap: 10px;
             padding: 14px 12px; }
  .nf-card__sym { width: 46px; height: 46px; }
  .nf-card__sym img { width: 36px; height: 36px; }
}

/* ---- Learn, spec 11 ---------------------------------------------------- */
.lx-focus { border: 1px solid var(--green); border-radius: 14px;
            padding: 26px 24px; background: var(--mint-soft); }
.lx-focus__area { font-family: var(--font-head); font-weight: 500;
                  font-size: clamp(24px, 4vw, 32px); margin: 8px 0 10px; }
.lx-rec { background: #fff; border-radius: 12px; padding: 20px; margin-top: 20px; }
.lx-rec__title { font-family: var(--font-head); font-weight: 500; font-size: 21px;
                 margin: 6px 0 8px; }
.lx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
           margin-top: 20px; }
.lx-card { display: flex; flex-direction: column; gap: 6px; padding: 20px;
           border: 1px solid var(--line); border-radius: 12px; background: #fff;
           text-decoration: none; color: var(--ink); position: relative; }
.lx-card:hover { border-color: var(--green); }
.lx-card:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.lx-card--start { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.lx-card__tag { position: absolute; top: -10px; left: 16px; background: var(--yellow);
                color: var(--gray); font-family: var(--font-head); font-size: 11px;
                letter-spacing: .08em; text-transform: uppercase;
                padding: 4px 10px; border-radius: 20px; }
.lx-card__area { font-family: var(--font-head); font-size: 11.5px;
                 letter-spacing: .1em; text-transform: uppercase; color: var(--green-ink); }
.lx-card__title { font-family: var(--font-head); font-weight: 500; font-size: 19px;
                  line-height: 1.25; }
.lx-card__desc { font-size: 15px; color: var(--gray); line-height: 1.5; }
.lx-card__meta { font-size: 13px; color: var(--muted); margin-top: auto; padding-top: 8px; }
.lx-ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
           margin-top: 20px; }
.lx-way { padding: 18px; border: 1px solid var(--line); border-radius: 12px;
          background: #fff; text-decoration: none; color: var(--ink); display: block; }
.lx-way:hover { border-color: var(--green); }
.lx-way__title { display: block; font-family: var(--font-head); font-weight: 500;
                 font-size: 17px; }
.lx-way__desc { display: block; font-size: 14.5px; color: var(--gray); margin-top: 4px; }
@media (max-width: 860px) {
  .lx-grid, .lx-ways { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .lx-grid, .lx-ways { grid-template-columns: 1fr; }
}

/* ---- the quiz intro, spec 3.2 "Quiz intro sizing" (2026-10-08) --------- *
 *
 * The H1 here is a question, not a hero line: at 74px it ran to three
 * lines on a laptop and pushed "Step 1 of 8" below the fold. Around 56px
 * holds it to two. The tracking is loosened further than the site default
 * because this line carries an apostrophe between two capitals, which is
 * where the letters ran together.
 *
 * The gap to the first step is halved: 40px of section padding each side
 * of the join became 20px, which is what puts step 1 on the first screen
 * at 1280 by 720.
 */
.ci-intro h1 {
  font-size: clamp(30px, 4.4vw, 56px);
  letter-spacing: -0.01em;
  word-spacing: 0.14em;
}
/* .ci-head caps the whole block at 62ch, which is right for reading and
   wrong for a 56px question: it wrapped to three lines. The block opens
   up and the prose is capped on its own instead. */
.ci-intro .ci-head { max-width: 80ch; }
.ci-intro .lede, .ci-intro .ci-get, .ci-intro .ci-head__priv { max-width: 62ch; }
/* Half the gap each side of the join, and the intro's own rhythm pulled
   in, so "Step 1 of 8" lands on the first screen at 1280 by 720. */
section.ci-intro { padding-top: 16px; padding-bottom: 14px; }
.ci-intro + .band-cream { padding-top: 14px; }
.ci-get__h { margin: 16px 0 0; font-family: var(--font-head); font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--green-ink); }
.ci-get { margin-top: 8px; }
.ci-get li { margin-top: 6px; }
.ci-get__cta { margin: 16px 0 0; }
.ci-head__priv { margin: 12px 0 0; }

/* ---- the guided list tool --------------------------------------------- *
 *
 * Learn spec, "Guided list layout". Three steps, a running picture beside
 * them on a desktop and along the bottom on a phone. The bars are divs
 * with a percentage width: no chart library, and the policy is unchanged.
 */
/* Learn spec: a tool's H1 is normal case at about 40px on a desktop and
   30px on a phone, not the site's large uppercase display style. A tool
   is a working screen, and the title is a label on it. */
.lt-title { font-size: clamp(30px, 3.2vw, 40px); text-transform: none;
  letter-spacing: -0.01em; font-weight: 300; margin-top: 10px; }

.lt-preview { margin: 0 0 18px; padding: 9px 12px; background: var(--yellow);
  color: #4a3d00; font-size: 14px; }

.lt-steps { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 22px; }
.lt-steps__t { min-height: 44px; padding: 0 14px; background: #fff;
  border: 1px solid var(--line); color: var(--muted); cursor: pointer;
  font-family: var(--font-head); font-size: 13px; letter-spacing: .04em; }
.lt-steps__t.on { background: var(--green-ink); border-color: var(--green-ink);
  color: #eafff4; }
.lt-steps__t[disabled] { opacity: .5; cursor: default; }

.lt-body { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 26px; }
.lt-body.wide { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 860px) { .lt-body { grid-template-columns: minmax(0, 1fr); } }

.lt-h { font-family: var(--font-head); font-weight: 300; font-size: 26px;
  letter-spacing: .01em; text-transform: none; margin: 0; }
.lt-sub { margin: 8px 0 0; color: var(--muted); max-width: 56ch; }
.lt-ps { margin: 0 0 6px; font-family: var(--font-head); font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lt-bar { height: 4px; background: var(--mint-soft); margin-bottom: 16px; }
.lt-bar i { display: block; height: 100%; background: var(--green); }

.lt-craft { border: 0; padding: 0; margin: 22px 0 0; }
.lt-craft legend { padding: 0; font-family: var(--font-head); font-size: 17px; }
.lt-craft__said { margin: 20px 0 0; font-size: 15px; }
.lt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.lt-chip { min-height: 44px; padding: 0 14px; background: #fff;
  border: 1px solid var(--line); cursor: pointer; font: inherit; font-size: 15px; }
.lt-chip.on { background: var(--green-ink); border-color: var(--green-ink);
  color: #eafff4; }
.lt-chip--sug { background: var(--mint-soft); border-color: var(--mint); }
.lt-chip--sug.used { opacity: .45; cursor: default; }
.lt-hint { display: block; font-size: 13px; color: var(--muted); margin-top: 6px; }

.lt-qrows { margin-top: 18px; display: grid; gap: 12px; }
.lt-qrow { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 44px;
  gap: 10px; align-items: end; border: 1px solid var(--line); background: #fff;
  padding: 12px; }
@media (max-width: 560px) { .lt-qrow { grid-template-columns: minmax(0, 1fr) 44px; } }
.lt-field label { display: block; font-size: 13px; margin-bottom: 4px; }
.lt-field input, .lt-field select {
  width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--line);
  background: #fff; color: var(--ink); font: inherit; font-size: 15px;
  /* The running bar is fixed to the bottom on a phone. This is how much
     room the browser leaves when it scrolls a focused field into view, so
     the bar never sits over the thing being typed into. */
  scroll-margin-bottom: 84px; }
.lt-field--money input { text-align: right; }
.lt-x { min-width: 44px; min-height: 44px; background: none;
  border: 1px solid var(--line); color: var(--muted); cursor: pointer;
  font-size: 20px; line-height: 1; }
.lt-warn:not(:empty) { display: block; font-size: 13px; color: #8a2f00;
  margin-top: 5px; }
.lt-link { background: none; border: 0; padding: 6px 0; color: var(--green-ink);
  text-decoration: underline; cursor: pointer; font: inherit; font-size: 15px;
  min-height: 44px; }

.lt-arow { border: 1px solid var(--line); background: #fff; padding: 12px;
  margin-top: 12px; }
.lt-arow__n { font-weight: 500; margin-bottom: 8px; }
.lt-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.lt-opt { min-height: 44px; padding: 0 14px; border: 1px solid var(--line);
  background: #fff; cursor: pointer; font: inherit; font-size: 15px;
  border-radius: 22px; }
.lt-opt.on { background: var(--green); border-color: var(--green); color: #fff; }

.lt-navb { display: flex; gap: 10px; align-items: center; margin-top: 24px;
  flex-wrap: wrap; }

.lt-pic { margin-top: 18px; }
.lt-srow { border-bottom: 1px solid var(--line); padding: 12px 0; }
.lt-srow:last-child { border-bottom: 0; }
.lt-srow__t { display: flex; justify-content: space-between; gap: 12px; }
.lt-share { font-family: var(--font-head); color: var(--green-ink); }
.lt-sbar { height: 10px; background: var(--mint-soft); margin-top: 7px; }
.lt-sbar i { display: block; height: 100%; background: var(--mint); }
.lt-srow.lead .lt-sbar i { background: var(--green-ink); }
.lt-srow.noamt .lt-sbar i { background: repeating-linear-gradient(135deg,
  var(--mint) 0 6px, var(--mint-soft) 6px 12px); }
.lt-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lt-tag { font-size: 12.5px; padding: 3px 9px; border: 1px solid var(--line);
  background: #fff; color: var(--muted); }
.lt-tag.hard { background: #fff6e2; border-color: #e8d49a; color: #6b4e00; }
.lt-tag.more { background: var(--mint-soft); border-color: var(--mint);
  color: var(--green-ink); }
.lt-tag.less { background: #fdeef0; border-color: #e9b8bf; color: #7a2430; }

.lt-obs { list-style: none; padding: 0; margin: 16px 0 0; display: flex;
  flex-wrap: wrap; gap: 8px; }
.lt-obs li { font-size: 13px; padding: 4px 10px; border: 1px solid var(--line);
  background: #fff; }
.lt-result { margin-top: 26px; padding: 18px 20px; border: 1px solid var(--line);
  border-top: 3px solid var(--green); background: #fff; }
.lt-result__t { font-family: var(--font-head); font-weight: 300; font-size: 21px;
  letter-spacing: .01em; text-transform: none; }
.lt-result__h { font-family: var(--font-head); font-size: 11px;
  letter-spacing: .09em; text-transform: uppercase; color: var(--green-ink);
  margin-top: 18px; }
.lt-pru { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }

.lt-side { border: 1px solid var(--line); background: #fff; padding: 14px;
  align-self: start; position: sticky; top: 90px; }
.lt-side__t { margin: 0 0 10px; font-family: var(--font-head); font-size: 19px; }
@media (max-width: 860px) { .lt-side { display: none; } }

.lt-mini { display: none; }
@media (max-width: 860px) {
  .lt-mini { display: flex; gap: 12px; align-items: center; position: fixed;
    left: 0; right: 0; bottom: 0; z-index: 30; padding: 8px 16px;
    background: #fff; border-top: 1px solid var(--line); font-size: 13px; }
  .lt-mini__bar { flex: 1; display: flex; gap: 2px; }
  .lt-mini__bar .lt-srow { border: 0; padding: 0; flex: 1; }
  .lt-mini__bar .lt-srow__t { display: none; }
  /* The bar is fixed, so the page needs room under it or it covers the
     field being typed into. */
  .lt-body { padding-bottom: 72px; }
}

.lt-panel { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.4);
  display: flex; justify-content: flex-end; }
.lt-panel__in { background: #fff; width: min(420px, 100%); overflow-y: auto;
  padding: 22px; }
.lt-opt__m { color: var(--muted); font-weight: 400; }

.lt-acts { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 22px; }
/* The same link, offered from every step rather than only the review, so
   somebody part way through can clear what they typed. Quieter than the
   row under the result, because it is not what the step is for. */
.lt-acts--aside { margin-top: 4px; }
.lt-acts--aside .lt-link { font-size: 13px; color: var(--muted); }
.lt-saved { margin: 22px 0 0; font-size: 13px; color: var(--muted); }
.lt-saved.pulse { animation: ltpulse 1s ease-out 1; }
@keyframes ltpulse { 0% { color: var(--green-ink); } 100% { color: var(--muted); } }
.lt-note { font-size: 13px; color: var(--muted); margin: 4px 0 0; }
.lt-export { width: 100%; margin-top: 10px; font-family: ui-monospace, monospace;
  font-size: 13px; padding: 10px; border: 1px solid var(--line); }

/* ---- the step form ----------------------------------------------------- *
 *
 * Learn spec, "Guided layout for the four other hero tools". The four
 * hero tools and the four checks, rendered by js/learn-step.js. It reuses
 * the guided list tool's vocabulary above (.lt-steps, .lt-field, .lt-opt,
 * .lt-side, .lt-mini, .lt-result) and adds only what those tools need
 * that the row form never did.
 *
 * Every bar here is a div with a percentage width: no chart library, and
 * the content policy is unchanged.
 */
/* A tool on its own page is a working screen, not an article. This has
   to out-rank .lx-body's 72ch prose cap, which is defined further down
   for course and lesson pages. */
.lx-page .lx-body--tool { max-width: 1000px; }

.lt-steps__t.done { border-color: var(--mint); color: var(--green-ink); }

.lt-q { margin-top: 26px; }
.lt-q:first-child { margin-top: 18px; }
.lt-lab { display: block; margin: 0 0 6px; font-family: var(--font-head);
  font-size: 15px; letter-spacing: .01em; }
.lt-q .lt-hint { margin: 0 0 10px; }

/* A money field puts its dollar sign inside the box. */
.lt-field { position: relative; }
.lt-pre { position: absolute; left: 10px; bottom: 11px; color: var(--muted);
  font-size: 15px; pointer-events: none; }
.lt-field--money .lt-pre ~ input { padding-left: 24px; text-align: right; }
.lt-field--add { display: flex; gap: 8px; align-items: stretch;
  max-width: 420px; }
.lt-field--add input { flex: 1; }

.lt-opts--sm { gap: 6px; }
.lt-opt--sm { min-height: 44px; padding: 0 12px; font-size: 14px;
  border-radius: 0; }
.lt-opt.warn.on { background: #8a2f00; border-color: #8a2f00; }

/* Hours: a stepper, because half an hour is the unit and a keyboard is
   not the point. */
.lt-hours { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.lt-hours .lt-step- { min-width: 44px; min-height: 44px;
  border: 1px solid var(--line); background: #fff; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--green-ink); }
.lt-hours__n { font-family: var(--font-head); font-size: 20px;
  min-width: 2.5ch; text-align: center; }
.lt-hours__u { color: var(--muted); font-size: 14px; }
.lt-hours--sm .lt-hours__n { font-size: 16px; }

/* Short items added one at a time, shown as removable tags. */
.lt-items { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.lt-items:empty { margin-bottom: 0; }
.lt-item { display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--mint); background: var(--mint-soft);
  padding: 5px 6px 5px 11px; font-size: 14.5px; }
.lt-item button { min-width: 32px; min-height: 32px; border: 0;
  background: none; color: var(--muted); cursor: pointer; font-size: 17px;
  line-height: 1; }

/* A list row: name and amount on the first line, choice pills under it. */
.lt-rows { display: grid; gap: 12px; margin-top: 4px; }
.lt-row { display: grid; gap: 10px; align-items: end;
  border: 1px solid var(--line); background: #fff; padding: 12px;
  grid-template-columns: minmax(0, 1fr) 150px 44px; }
.lt-row .lt-hours { grid-column: 2; }
.lt-row .lt-pills { grid-column: 1 / -1; display: flex; flex-wrap: wrap;
  gap: 10px; align-items: center; }
@media (max-width: 560px) {
  .lt-row { grid-template-columns: minmax(0, 1fr) 44px; }
  .lt-row .lt-field--money, .lt-row .lt-hours { grid-column: 1 / -1; }
}
.lt-eq { font-size: 13px; color: var(--green-ink); }

/* The checklist and the gut check. */
.lt-pg { margin: 22px 0 8px; font-family: var(--font-head); font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lt-qq { border-top: 1px solid var(--line); padding: 12px 0; }
.lt-qq__t { margin-bottom: 8px; }
.lt-tick { display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; cursor: pointer; }
.lt-tick input { width: 22px; height: 22px; accent-color: var(--green); }

/* The side panel's rows, and the swatches the map uses. */
.lt-side__r { display: flex; justify-content: space-between; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.lt-side__r:last-of-type { border-bottom: 0; }
.lt-side__r b { font-family: var(--font-head); }
.lt-side__r b.neg, .lt-kpi b.neg { color: #8a2f00; }
.lt-sw { display: inline-block; width: 10px; height: 10px; margin-right: 7px;
  background: var(--mint); }
.lt-sw.set { background: var(--green); }
.lt-sw.look { background: #e0a53b; }
.lt-sw.blank { background: #fff; border: 1px dashed var(--line); }
.lt-sw.p0 { background: var(--green-ink); }
.lt-sw.p1 { background: var(--mint); }
.lt-sw.p2 { background: #e0a53b; }
@media (max-width: 860px) {
  .lt-mini { justify-content: space-between; }
  .lt-mini b { font-family: var(--font-head); }
}

/* The review: figures, a part bar, and the lists side by side. */
.lt-kpis { display: grid; gap: 10px; margin: 20px 0;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.lt-kpi { border: 1px solid var(--line); background: #fff; padding: 11px 13px; }
.lt-kpi span { display: block; font-size: 12.5px; color: var(--muted); }
.lt-kpi b { font-family: var(--font-head); font-size: 24px; font-weight: 300; }
.lt-big { font-family: var(--font-head); font-size: clamp(38px, 6vw, 58px);
  font-weight: 300; margin: 10px 0 0; letter-spacing: -0.01em; }
.lt-tbar { margin: 24px 0; }
.lt-tbar .lt-lab { display: flex; gap: 10px; align-items: baseline; }
.lt-stack { display: flex; height: 14px; background: var(--mint-soft);
  overflow: hidden; }
.lt-stack i { display: block; height: 100%; }
.lt-stack .p0 { background: var(--green-ink); }
.lt-stack .p1 { background: var(--mint); }
.lt-stack .p2 { background: #e0a53b; }
.lt-leg { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px;
  font-size: 13.5px; color: var(--muted); }
.lt-leg strong { color: var(--ink); font-family: var(--font-head);
  font-weight: 400; }
.lt-grid { display: grid; gap: 22px; margin-top: 24px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.lt-rl h4 { margin: 0 0 8px; font-family: var(--font-head); font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--green-ink); }
.lt-rl ul { list-style: none; margin: 0; padding: 0; }
.lt-rl li { display: flex; justify-content: space-between; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.lt-rl li span:empty { display: none; }
.lt-rl li em { font-style: normal; font-size: 12.5px; color: var(--muted); }
.lt-edits { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px; }

/* The Financial System Map's backstage. On a phone the flow stacks top
   to bottom, which the spec asks for by name. */
.lt-flow { display: flex; align-items: stretch; gap: 10px;
  margin: 20px 0 14px; }
.lt-fcol { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.lt-arr { align-self: center; color: var(--muted); font-size: 20px; }
.lt-support { display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.lt-node--sm { font-size: 14px; }
.lt-node { border: 1px solid var(--line); background: #fff;
  padding: 10px 12px; border-left: 4px solid var(--line); flex: 1; }
.lt-node.set { border-left-color: var(--green); }
.lt-node.look { border-left-color: #e0a53b; background: #fffaf0; }
.lt-node.blank { border-style: dashed; color: var(--muted); }
.lt-node__l { display: block; font-size: 12px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); }
.lt-node__v { display: block; margin-top: 3px; font-size: 14.5px; }
.lt-down { font-size: 12px; color: var(--muted); text-align: center; }
.lt-down::before { content: "\2193\00a0"; }
.lt-flags { margin-top: 6px; }
.lt-flag { margin: 0 0 7px; font-size: 14.5px; }
@media (max-width: 760px) {
  .lt-flow { flex-direction: column; }
  .lt-arr { transform: rotate(90deg); }
}

/* The Creative Investment Check's card. */
.lt-card { border: 1px solid var(--line); border-top: 3px solid var(--green);
  background: #fff; padding: 20px 22px; }
.lt-crow { display: grid; grid-template-columns: 140px minmax(0, 1fr);
  gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.lt-crow span { font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); }
.lt-crow p { margin: 0; }
@media (max-width: 560px) {
  .lt-crow { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
.lt-deeper { margin-top: 18px; font-size: 14.5px; }

/* Printing a review: the spec asks for at most two pages with the tool
   name, the review, the result and the disclaimer, and no buttons or
   side panel. */
@media print {
  .lt-steps, .lt-side, .lt-mini, .lt-navb, .lt-acts, .lt-edits,
  .lt-preview, #ltExportOut, .lt-saved { display: none !important; }
  .lt-body { display: block; }
  .lt-result, .lt-card, .lt-node, .lt-kpi { break-inside: avoid; }
}

/* ---- course and lesson pages ------------------------------------------ *
 *
 * Learn spec 3.4. The section order is the page's, fixed in course.php;
 * this only makes it readable.
 */
.lx-preview { margin: 0 0 18px; padding: 9px 12px; background: var(--yellow);
  color: #4a3d00; font-size: 14px; }
.lx-title { font-size: clamp(30px, 3.2vw, 40px); text-transform: none;
  letter-spacing: -0.01em; font-weight: 300; margin-top: 10px; }
.lx-head .eyebrow a { color: inherit; }
.lx-of { margin-top: 10px; font-size: 14px; color: var(--muted); }
.lx-body { max-width: 72ch; }
/* THE RHYTHM, Learn spec section 4 "Learn page rhythm".
 *
 * .lx-sec is a <section>, and shared-core gives every section 62px of
 * padding top and bottom to separate the page's bands. Inside an article
 * that is not separation, it is 124px of nothing between a paragraph and
 * the next heading, and with the margin it measured 174px. A section
 * inside a Learn body is a part of one article, not a band. */
/* A Learn page's bands are parts of one article too. shared-core gives
   a section 62px top and bottom, so two bands meeting put 124px between
   their contents; 24 and 24 makes the same 48. .lx-sec is more specific
   and stays at 0, because it is a part within a band, not a band. */
.lx-page section { padding: 24px 0; }
@media (max-width: 760px) { .lx-page section { padding: 16px 0; } }
.lx-page .lx-sec { padding: 0; margin-top: 48px; }
.lx-page .lx-sec:first-child { margin-top: 0; }
@media (max-width: 760px) { .lx-page .lx-sec { margin-top: 32px; } }
/* An absent section is not rendered at all, so it leaves no gap; an
   empty one would, and this makes sure of it. */
.lx-page .lx-sec:empty { display: none; margin: 0; }
.lx-h { font-family: var(--font-head); font-weight: 300; font-size: 21px;
  letter-spacing: .01em; text-transform: none; margin: 0 0 12px; }
/* The last thing in a part should not push the next part further away;
   the 48px above is the whole gap. */
.lx-page .lx-sec > *:last-child { margin-bottom: 0; }
.lx-page .lx-nav { margin-top: 48px; }
/* The disclaimer closes the article; the 48px above it is the gap, and
   whatever sat last should not add its own. */
.lx-page .lx-dis { margin-top: 48px; }
.lx-page .lx-soonbox, .lx-page .lx-slot { margin-bottom: 0; }
.lx-page .lx-soonbox > *:last-child { margin-bottom: 0; }
/* The hub's start line and its button. */
.lx-start { margin: 18px 0 0; }
.lx-start__b { margin: 12px 0 0; }

.lx-lessons { padding-left: 20px; margin: 0; }
.lx-lessons li { margin-bottom: 14px; }
.lx-lessons a { font-size: 17px; }
.lx-teaches { display: block; font-size: 14px; color: var(--muted);
  margin-top: 3px; }
.lx-soon { display: inline-block; margin-top: 4px; font-size: 12.5px;
  padding: 2px 8px; border: 1px solid var(--line); color: var(--muted);
  background: #fff; }
.lx-tools { list-style: none; padding: 0; margin: 0; }
.lx-tools li { margin-bottom: 8px; }
.lx-tool { margin: 0; }
.lx-mm { font-family: var(--font-head); font-size: 18px; margin: 0 0 10px; }

.lx-slot { padding: 14px 16px; border: 1px dashed var(--line);
  background: #fff; }
.lx-note { font-size: 13px; color: var(--muted); margin: 0; }
.lx-soonbox { padding: 16px 18px; border: 1px solid var(--line);
  background: #fff; }
.lx-soonbox h3 { font-family: var(--font-head); font-weight: 400;
  font-size: 17px; text-transform: none; }
.lx-interest label { display: block; margin-top: 12px; font-size: 14px; }
.lx-interest input[type="text"], .lx-interest input[type="email"] {
  width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--line);
  background: #fff; font: inherit; font-size: 15px; }
.lx-dis { margin-top: 36px; }

.lx-video { border: 1px solid var(--line); background: #fff; padding: 22px;
  text-align: center; }
.lx-video--soon { background: var(--mint-soft); border-color: var(--mint); }
.lx-video__t { font-family: var(--font-head); font-size: 17px; margin: 0 0 6px;
  color: var(--green-ink); }

.lx-steps { padding-left: 22px; }
.lx-steps li { margin-bottom: 8px; }

.lx-tablebox { overflow-x: auto; margin: 14px 0; }
.lx-table { width: 100%; border-collapse: collapse; font-size: 14.5px;
  background: #fff; min-width: 420px; }
.lx-table th, .lx-table td { text-align: left; padding: 9px 10px;
  border-bottom: 1px solid var(--line); }
.lx-table th { background: var(--mint-soft); font-family: var(--font-head);
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--green-ink); }

.lx-callout { border-left: 3px solid var(--green); padding-left: 16px; }
.lx-reflect { width: 100%; margin-top: 8px; padding: 10px;
  border: 1px solid var(--line); font: inherit; font-size: 15px; }
.lx-nav { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 34px; }

/* ---- printing a lesson ------------------------------------------------ *
 *
 * Learn spec: c1 lesson 4's Monthly Money Snapshot questions are meant to
 * be printed and kept next to wherever somebody does their review. So the
 * page prints as the lesson, without the furniture.
 */
@media print {
  /* Scoped to a Learn page. body and the band classes belong to the
     shared core, and one selector has one owner: a print override that
     redefined them here would be a second owner. */
  .lx-page .nav, .lx-page .foot, .lx-page .lx-preview, .lx-page .lx-nav,
  .lx-page .lx-slot, .lx-page .lx-video, .lx-page .lx-reflect,
  .lx-page #toolRoot, .lx-page .lx-interest,
  .lx-page .lx-soonbox { display: none !important; }
  body.lx-page { background: #fff; color: #000; }
  .lx-page section { background: #fff !important; }
  .lx-page .lx-body { max-width: none; }
  .lx-page .lx-sec { margin-top: 18px; break-inside: avoid; }
  .lx-page .lx-steps li { margin-bottom: 14px; break-inside: avoid; }
  .lx-page .lx-table { min-width: 0; }
  .lx-page .lx-table th { background: #eee !important; -webkit-print-color-adjust: exact;
    print-color-adjust: exact; }
  /* The one thing a printed page must still say. */
  .lx-page .lx-dis { display: block !important; margin-top: 24px; font-size: 11pt; }
  .lx-page a[href]::after { content: ""; }
}

/* ---- the workshops page and the tools index --------------------------- */
.lx-lede { max-width: 58ch; }
.lx-formats { display: flex; gap: 8px; flex-wrap: wrap; }
.lx-format { min-height: 44px; display: inline-flex; align-items: center;
  padding: 0 16px; border: 1px solid var(--line); background: #fff;
  text-decoration: none; color: var(--muted);
  font-family: var(--font-head); font-size: 14px; }
.lx-format.on { background: var(--green-ink); border-color: var(--green-ink);
  color: #eafff4; }
.lx-dates { font-size: 14px; color: var(--muted); margin: 0; }
.lx-sessions { list-style: none; padding: 0; margin: 18px 0 0; }
.lx-sessions li { display: grid; grid-template-columns: 34px 1fr auto;
  gap: 4px 12px; align-items: center; padding: 14px 0;
  border-bottom: 1px solid var(--line); }
.lx-sessions li:last-child { border-bottom: 0; }
.lx-sessions__n { grid-row: span 3; font-family: var(--font-head);
  font-size: 19px; color: var(--green-ink); }
.lx-sessions__t { font-weight: 500; }
.lx-sessions .btn { grid-row: span 3; }
.lx-sessions .lx-teaches, .lx-sessions .lx-dates { grid-column: 2; }
@media (max-width: 560px) {
  .lx-sessions li { grid-template-columns: 30px 1fr; }
  .lx-sessions .btn { grid-row: auto; grid-column: 2; justify-self: start; }
}
.lx-allsix { display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  margin-top: 20px; }

/* The sliding scale stays in view: it is what people most need before
   they decide. Nothing is charged on this page. */
.lx-tiers { position: sticky; bottom: 0; background: var(--green-ink);
  color: #eafff4; z-index: 20; }
.lx-tiers__in { padding: 12px 22px; display: flex; gap: 10px 26px;
  align-items: center; flex-wrap: wrap; }
.lx-tiers__t { margin: 0; font-size: 14px; }
.lx-tiers__list { list-style: none; display: flex; gap: 18px; flex-wrap: wrap;
  margin: 0; padding: 0; font-size: 14px; }
.lx-tiers__list b { font-family: var(--font-head); font-size: 17px;
  margin-right: 4px; }

.lx-toolrow { display: block; padding: 14px 0;
  border-bottom: 1px solid var(--line); }
.lx-toolrow:last-child { border-bottom: 0; }
.lx-toolrow__t { font-size: 17px; }

/* ── Notes and Guides library, spec 3.4 ────────────────────────────────
   Antonio, 2026-10-10: the first phone look was one long list of cards,
   every one labelled "Note", titles thin and uppercase. The library has
   to read as the same six-part path as the quiz. None of these class
   names appear in shared-core.css. */

.nstart { margin-top: 18px; font-weight: 500; }

/* The jump row. One line that scrolls sideways on a phone rather than
   wrapping to three ragged rows. */
.nchips {
  display: flex; gap: 8px; margin: 0 0 28px;
  overflow-x: auto; flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.nchips::-webkit-scrollbar { display: none; }
.nchip {
  flex: 0 0 auto; display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 16px;           /* 44px touch target */
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--white); color: var(--gray);
  font-family: var(--font-head); font-size: 13px; font-weight: 600;
  text-decoration: none; white-space: nowrap;
}
.nchip:hover { border-color: var(--green); color: var(--green-ink); }
.nchip[aria-current="true"] {
  background: var(--green-ink); border-color: var(--green-ink); color: var(--white);
}

.nstartcard { margin-bottom: 34px; }
.nstartcard .eyebrow { margin-bottom: 10px; }

.narea { margin-top: 38px; scroll-margin-top: 84px; }  /* clears the nav on jump */
.narea h2 { margin-bottom: 8px; }
.narea__d { color: var(--muted); max-width: 70ch; }
.narea__tool { margin-top: 12px; font-weight: 600; }

.ncards { display: grid; gap: 12px; margin-top: 16px; }
@media (min-width: 860px) { .ncards { grid-template-columns: 1fr 1fr; } }

/* The whole card is the link: one target, and a big one. */
.ncard {
  display: block; padding: 16px 18px;
  background: var(--white); border: 1px solid var(--line);
  text-decoration: none; color: inherit;
}
.ncard:hover { border-color: var(--green); box-shadow: var(--shadow); }
.ncard__t {
  display: block; font-family: var(--font-head); font-weight: 700;
  font-size: 17px; line-height: 1.3; color: var(--ink);
  text-transform: none;            /* sentence case, as written */
  letter-spacing: 0;
}
.ncard__d {
  display: block; margin-top: 6px; color: var(--muted); font-size: 15px;
  line-height: 1.45;
}
.ncard__m {
  display: block; margin-top: 10px; font-family: var(--font-head);
  font-size: 12px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--green-ink);
}

/* Phones: trim the dek so about three cards reach the first screen. */
@media (max-width: 560px) {
  .ncard { padding: 13px 14px; }
  .ncard__d {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* Breadcrumbs on an article page, spec 3.4. */
.crumbs {
  font-family: var(--font-head); font-size: 13px; color: var(--muted);
  margin-bottom: 18px; line-height: 1.5;
}
.crumbs a { color: var(--green-ink); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs__sep { margin: 0 7px; color: var(--line); }
.crumbs [aria-current="page"] { color: var(--gray); }