/* Home page. */

/* Hero -------------------------------------------------------------------- */
/* A painting in two layers: the farm, and the avocado branch that frames it. The plate
   covers the hero like object-fit: cover, held at a focus point (--fx, --fy), and hero.js
   paints the same pictures, animated, on a canvas over the top when it can. On very wide
   screens it runs a little past the sides (--over): the wide painting's washes stop just
   short of its edges. */
.hero { position: relative; height: 100svh; min-height: 620px; max-height: 1180px; overflow: hidden; background: #e9dfc2; isolation: isolate; container-type: size; }
.hero__scene { position: absolute; inset: 0; overflow: hidden; }
.hero__plate {
  --ar: 3200 / 1358; --arn: 2.3564; --fx: 0.85; --fy: 0.5; --over: 1.12;
  --bx: 64.594%; --by: 0%; --bw: 35.406%; --bh: 91.384%;
  position: absolute; aspect-ratio: var(--ar); width: max(100cqw * var(--over), 100cqh * var(--arn));
  left: calc(var(--fx) * 100cqw); top: calc(var(--fy) * 100cqh);
  translate: calc(var(--fx) * -100%) calc(var(--fy) * -100%);
  background: #e9dfc2 url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv/2wBDAQoLCw4NDhwQEBw7KCIoOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozv/wAARCAAUADADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD0wwtv61ItvnrmuCHxBu4oFvJI4ZoXOM4+7+VSxfE9JImlEShEO07RkVq6y6EqmjvFtgKcsIXOMk4rhl+JlrJu+QYQ4JAPHFT6b43nvjcKkSsY+AIwSV9CT/8AWrlnWmbRpxLGrtcRxyLLfOh6fvQFA9On51iNK1m0bzM0t00ixYVuRhsk8fxYPU+tS67qj37fOsioSTs2fMM9qybPUpLi9jubiFSzKIlikh4OCPmPOc8D8zWEHNathUSuW49Lsre3EYgDoeCjE4/TFQ2mkWMTMscARXbBUE4P50UVzc0rbnavjZppo+nxuClrGueoC4zVoW1vaZkgt40PsuM0UVk5O+4R1RWvb+VJWRUjwAp5XJqi10V1pJFiiWRiqbgvQdeB0HQUUVtR1epnW0Wh/9k=") center / 100% 100% no-repeat;
}
.hero__plate img { position: absolute; display: block; max-width: none; }
.hero__bg { inset: 0; width: 100%; height: 100%; }
.hero__branch { left: var(--bx); top: var(--by); width: var(--bw); height: var(--bh); transform-origin: 100% 0; }
/* On squarer screens slide the painting so the farmhouse clears the buttons. */
@media (max-aspect-ratio: 17/10) { .hero__plate { --fx: 0.78; } }
@media (max-aspect-ratio: 3/2) { .hero__plate { --fx: 0.74; } }
@media (max-aspect-ratio: 4/5) {
  .hero__plate {
    --ar: 1440 / 2580; --arn: 0.5581; --fx: 0.8; --fy: 0.62; --over: 1;
    --bx: 50%; --by: 35.698%; --bw: 50%; --bh: 56.705%;
    background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv/2wBDAQoLCw4NDhwQEBw7KCIoOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozv/wAARCAAwABsDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD0owEHrxThER1q55ftSmM/3R+ddDqGSgVPK4pwtzjrVlVyOf1pwjGOoqPaor2ZRTWrCVyFnZcdyuBUr6naJH5hmG0dT2rh7nXIUG6ztow2MHJJAP6VPO76lZwF4JFRFLOynaG/z1rjq1adro6IxfU7jzEaFnVucZGRmua/4SG8QlfOthgnhxz/ADrLudakuI4YIgYE+Xy9r/Ocde1Yst3eTyvIiKyljgsmTwcda5FJt3KlaOhlf2gGufszOqSqg2d0Y5zn6GrNpqGpathI/OweHOflXB/Xiks9D/0mIzh5mjAXao4/lXRxuttGI2eOBV6L3/IVFSUVsCj8zHuXXT7OSWaIOy/ICV5D9uP89adbaeVt0Dvcl8fN5LAID3AHtVwvpM7+ZOzTGOQyA9Bn6URtpATi3kfJJ3GRsnJz61KmrC9nK/Q//9k=");
  }
  .hero__branch { transform-origin: 100% 15%; }
}
.hero__gl { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s ease; }
.hero.is-gl .hero__gl { opacity: 1; }
/* Without WebGL the branch still stirs a little. */
@keyframes branch-sway { from { rotate: -0.3deg; } to { rotate: 0.4deg; } }
.js:not(.no-motion) .hero:not(.is-gl) .hero__branch { animation: branch-sway 6.5s ease-in-out infinite alternate; }
.hero__scene::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); background-size: 260px; mix-blend-mode: multiply; opacity: 0.35; pointer-events: none; z-index: 2; }
/* The pause button sits clear of the torn edge below. */
.hero__pause { position: absolute; z-index: 6; bottom: calc(clamp(14px, 2.2vw, 30px) + 0.8rem); }
.hero__pause {
  right: 1rem; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.8rem 0.3rem 0.6rem;
  border: 1px solid rgba(30, 43, 34, 0.28); border-radius: 999px; background: rgba(250, 244, 226, 0.86);
  color: var(--ink); font: inherit; font-size: 0.8rem; line-height: 1.4; cursor: pointer;
}
.hero__pause:hover { background: #faf4e2; }
.hero__pause svg { width: 0.95rem; height: 0.95rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hero__pause-play { display: none; fill: currentColor; stroke-width: 1.4; }
.hero__pause.is-paused .hero__pause-bars { display: none; }
.hero__pause.is-paused .hero__pause-play { display: inline; }
@media (max-width: 520px) {
  .hero__pause { padding: 0.45rem; }
  .hero__pause span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

.hero__content { position: relative; z-index: 5; padding-top: clamp(5.8rem, 13vh, 9.5rem); will-change: transform, opacity; }
.hero__content h1 { font-size: clamp(2.5rem, min(5.2vw, 8.4vh), 5.4rem); max-width: 12.5ch; margin-top: 0.85rem; }
.hero__content .eyebrow, .hero__content .lede { text-shadow: 0 0 16px rgba(250, 244, 226, 0.9), 0 0 3px rgba(250, 244, 226, 0.8); }
.hero__content .lede { margin-top: 1.05rem; max-width: 34rem; color: var(--ink); }
.hero__cta { margin-top: 1.6rem; }
/* the free program builder, a quiet link beside the buttons (under them on a phone), so it's there on
   the first screen without a third button (Adam, 3 October 2026: hard to find, "I don't want to
   overcompensate") */
.hero__free { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.75rem; padding: 0.35rem 0.95rem; border-radius: 999px; background: rgba(250, 244, 226, 0.9); box-shadow: 0 1px 6px rgba(30, 43, 34, 0.12); font-weight: 700; font-size: 0.95rem; color: var(--ink); text-decoration-color: var(--wattle); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.hero__free:hover { background: var(--paper); }
.hero__free:focus-visible { outline: 3px solid var(--ink); outline-offset: 0; box-shadow: 0 0 0 7px rgba(250, 244, 226, 0.97); background: var(--paper); }
.hero__free svg { flex: none; width: 1.15rem; height: 1.15rem; color: var(--earth); }
.hero .mark { --mark-w: 8; }
@media (max-width: 520px) {
  .hero__content .lede { font-size: 1.08rem; max-width: 22rem; }
  .hero__cta .btn { padding: 0.72rem 1.1rem; }
}

/* Meet Steve -------------------------------------------------------------- */
.manifesto__grid { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(2.5rem, 6vw, 6.5rem); align-items: start; }
.manifesto__photo { position: relative; width: min(100%, 25rem); justify-self: center; margin-top: 1.5rem; }
/* hung from the photo's foot by its top, where it always sat (3.6rem down to its foot, less its two lines), so
   with a reader's own text spacing it grows down into the space below, not up over the caption */
.manifesto__note { position: absolute; right: -1.4rem; top: calc(100% + 3.6rem - 2em); flex-direction: row-reverse; }
.manifesto__note svg { transform: translateY(-1.4rem); }
.manifesto__text h2 { margin-top: 1rem; max-width: 15ch; }
.manifesto__text .lede { margin-top: 1.4rem; }

.principles { list-style: none; margin: 2.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem 2.2rem; }
.principles li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.principles__ico { width: 3.1rem; height: 3.1rem; display: grid; place-items: center; }
.principles__ico svg { width: 2.2rem; height: 2.2rem; }
.principles h3 { font-size: var(--step-1); font-weight: 620; }
.principles p { margin-top: 0.35rem; font-size: 0.98rem; color: var(--ink-2); }

@media (max-width: 900px) {
  .manifesto__grid { grid-template-columns: 1fr; }
  .manifesto__photo { width: min(78%, 20rem); margin-bottom: 2.5rem; }
  /* hung off the photo's right side, but never closer than 0.9rem to the window's edge */
  .manifesto__note { right: calc(-1 * min(3.2rem, (100vw - 100%) / 2 - 0.9rem)); }
}
@media (max-width: 620px) { .principles { grid-template-columns: 1fr; } }

/* The course -------------------------------------------------------------- */
.course { padding-top: calc(var(--section) * 0.7); }
.course__head { max-width: 46rem; }
.course__head .lede { max-width: 40rem; }
.course__grid { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(2rem, 5vw, 5rem); margin-top: clamp(2.5rem, 5vw, 4rem); align-items: start; }
.course__stage { position: sticky; top: calc(4.8rem + 2vh); }
/* a short screen (an iPhone SE, a phone on its side) hasn't the room to keep it beside the episodes */
@media (max-height: 600px) { .course__stage { position: static; } }

.specimen-card { height: min(80vh, 48rem); }
.specimen-card__stage [data-stage-no] { color: var(--earth); font-variant-numeric: tabular-nums; margin-right: 0.2rem; }
/* The bean: all eight stages in the card, one showing at a time. home.js grows each one up out of the
   soil as its episode comes up, and the one before fades away (on the blended layers themselves, so
   the multiply still reaches the card). Without script, it's the seed. */
.course__stage .specimen[data-grow] { transition-duration: 1.9s; }
.course__stage .specimen__top, .course__stage .specimen__roots { transition: opacity 0.7s ease; }
.js .course__stage .specimen:not(.is-on) :is(.specimen__top, .specimen__roots) { opacity: 0; }
html:not(.js) .course__stage .specimen + .specimen { display: none; }

.episodes { list-style: none; margin: 0; padding: 4vh 0 12vh; display: grid; gap: clamp(3rem, 16vh, 11rem); }
.episode {
  position: relative; padding: 1.6rem 1.7rem 1.7rem 5.6rem; background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow-paper); display: grid; gap: 0.55rem;
  transition: box-shadow 0.5s ease, translate 0.5s var(--ease-grow);
}
.episode.is-active, .episode:hover { box-shadow: var(--shadow-paper), 0 0 0 2px var(--c); translate: -6px 0; }
.episode:has(a:focus-visible) { outline: 3px solid var(--ink); outline-offset: 4px; }
.episode__num {
  position: absolute; left: 1.3rem; top: 1.55rem; width: 3rem; height: 3rem; display: grid; place-items: center;
  background: var(--c); border-radius: 6px; box-shadow: inset 0 0 0 2px rgba(30, 43, 34, 0.9); rotate: -4deg;
  font-family: var(--f-display); font-weight: 700; font-size: 1.5rem; color: var(--on, #fff8ea); transition: rotate 0.5s var(--ease-grow), scale 0.5s var(--ease-grow);
}
.episode.is-active .episode__num { rotate: 3deg; scale: 1.08; }
.episode__stage { font-family: var(--f-hand); font-weight: 600; font-size: 1.45rem; line-height: 1; color: var(--earth); }
.episode h3 { font-size: var(--step-2); }
/* the whole card opens the episode */
.episode h3 a { color: inherit; text-decoration: none; outline: none; }
.episode h3 a::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.episode__go { justify-self: start; margin-top: 0.2rem; color: var(--canopy); }
.episode:hover .episode__go::after { transform: translateX(4px); }
.episode blockquote { margin: 0.2rem 0 0.1rem; font-family: var(--f-display); font-style: italic; font-size: 1.15rem; line-height: 1.35; font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--canopy-2); }
.episode p:not(.episode__stage) { color: var(--ink-2); }

.course__parts { margin: clamp(2rem, 4vw, 3rem) 0 clamp(1.5rem, 3vw, 2rem); }
.course__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.9rem 1rem; margin-top: 1rem; }
.course__aside { flex-basis: 100%; text-align: center; rotate: -2deg; margin-top: 0.4rem; }

@media (max-width: 860px) {
  .course__grid { display: block; }
  .course__stage {
    top: 3.6rem; z-index: 3; margin-inline: calc(-1 * var(--gutter)); padding: 0.6rem var(--gutter) 1.4rem;
    background: linear-gradient(var(--paper) 78%, rgba(246, 239, 224, 0));
  }
  .specimen-card { height: max(15.5rem, 34svh); grid-template-areas: "plant head" "plant foot"; grid-template-columns: 42% 1fr; grid-template-rows: auto 1fr; padding: 0.7rem 0.9rem; column-gap: 0.8rem; }
  .specimen-card__head { flex-direction: column; font-size: 0.64rem; gap: 0.15rem; }
  .specimen-card__foot { align-content: start; border-top: 0; padding-top: 0.3rem; }
  .specimen-card__note { font-size: 1.2rem; }
  .specimen-card__stage { font-size: 1.05rem; }
  .strip--lg.specimen-card__strip i { width: 0.95rem; height: 0.95rem; }
  .episodes { padding-top: 1rem; gap: 18vh; }
  /* the plant's card stays at the top while the episodes pass under it, so one the keyboard moves up to
     stops below the card, not under it */
  .episode h3 a { scroll-margin-top: calc(max(15.5rem, 34svh) + 4rem); }
  .episode { padding: 1.3rem 1.2rem 1.4rem 4.5rem; }
  .episode__num { left: 1rem; top: 1.3rem; width: 2.5rem; height: 2.5rem; font-size: 1.2rem; }
  .episode.is-active { translate: 0 0; }
}

/* Try it free: the builder and the audit, as doors; on a device that's started either, where it was left */
.free__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); max-width: 54rem; margin: clamp(2.2rem, 4.5vw, 3.2rem) auto 0; }
.door__mine { margin: 0; padding: 0.45rem 0.7rem; border-left: 3px solid var(--wattle); background: rgba(247, 210, 106, 0.18); font-size: 0.92rem; font-weight: 650; color: var(--ink); }
@media (max-width: 760px) { .free__grid { grid-template-columns: 1fr; } }
/* where the audit's off (sign-in off on a live build, base.css), or a first visit waits to hear, the builder's
   door alone, in the middle (qag-1nk1j) */
.sign-in-off .free__grid, .sign-in-wait .free__grid { grid-template-columns: minmax(0, 27rem); justify-content: center; }

/* Three ways in ------------------------------------------------------------ */
.doors__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); margin-top: clamp(2.5rem, 5vw, 3.6rem); }
.door { display: grid; align-content: start; gap: 0.65rem; padding: 1.8rem 1.8rem 1.9rem; text-decoration: none; color: inherit; rotate: var(--tilt, 0deg); transition: rotate 0.35s var(--ease-grow), translate 0.35s var(--ease-grow), box-shadow 0.35s ease; }
.door:hover { rotate: 0deg; translate: 0 -6px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 34px 50px -30px rgba(74, 46, 16, 0.55), 0 2px 6px -2px rgba(74, 46, 16, 0.18); }
.door__ico { width: 4.4rem; height: 4.4rem; display: grid; place-items: center; margin-bottom: 0.4rem; }
.door__ico svg { width: 2.7rem; height: 2.7rem; }
.door h3 { font-size: var(--step-2); }
.door p:not(.eyebrow) { color: var(--ink-2); }
.door .link-arrow { margin-top: 0.3rem; color: var(--canopy); }
@media (max-width: 860px) { .doors__grid { grid-template-columns: 1fr; } }

/* QuorumAI --------------------------------------------------------------- */
.signal { background-color: #163a24; background-image: var(--grain); color: #efe9d6; overflow-x: clip; margin-top: 2rem; }
.signal__bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.signal__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.signal .eyebrow { color: #cfe0a8; }
.signal .eyebrow .brand-ai { color: var(--wattle-2); }
.signal h2 { color: #fbf3e1; margin-top: 1rem; }
.signal h2 em { color: var(--wattle); }
.signal .lede { color: #d9dcc6; margin-top: 1.3rem; }

.chat__body { display: grid; gap: 0.8rem; align-content: start; }
.chat__msg--me { justify-self: end; }
.chat__reply { position: relative; }
.chat__typing { position: absolute; left: 0; top: 0; opacity: 0; }

.js .chat .chat__msg { opacity: 0; }
.chat.is-live .chat__msg--me { animation: pop 0.5s var(--ease-grow) 0.2s both; }
.chat.is-live .chat__typing { animation: pop 0.35s var(--ease-grow) 0.9s both, fade-out 0.3s ease 2.5s forwards; }
.chat.is-live .chat__msg--ai { animation: pop 0.7s var(--ease-grow) 2.6s both; }
.no-motion .chat .chat__msg { opacity: 1; animation: none; }
.no-motion .chat .chat__typing { display: none; }
@keyframes fade-out { to { opacity: 0; visibility: hidden; } }

@media (max-width: 860px) { .signal__grid { grid-template-columns: 1fr; } }

/* How Steve explains it --------------------------------------------------- */
.analogies__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); margin-top: clamp(2.5rem, 5vw, 3.6rem); align-items: start; }
.analogy { display: grid; align-content: start; gap: 0.6rem; padding: 1.2rem 1.3rem 1.5rem; }
.analogy:nth-child(odd) { rotate: -0.7deg; }
.analogy:nth-child(even) { rotate: 0.6deg; margin-top: 1.4rem; }
.analogy h3 { font-size: var(--step-1); font-weight: 620; }
.analogy p { font-size: 0.98rem; color: var(--ink-2); }
.analogy .art { margin-bottom: 0.5rem; }
@media (max-width: 1100px) { .analogies__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .analogies__grid { grid-template-columns: 1fr; } .analogy:nth-child(even) { margin-top: 0; } }

/* Farming for profit: the grading table, where episode one starts --------- */
.profit { background-color: #7a2f1a; background-image: var(--grain), radial-gradient(ellipse at 15% 0%, rgba(224, 138, 78, 0.35), transparent 60%), radial-gradient(ellipse at 90% 100%, rgba(40, 14, 6, 0.45), transparent 60%); color: #fbeee0; }
.profit::before { background: var(--grain) #7a2f1a; }
.profit__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.profit .eyebrow { color: #fadcc6; }
.profit h2 { color: #fff4e4; margin-top: 1rem; }
.profit h2 em { color: var(--wattle-2); }
.profit .lede { color: #f4dcc8; margin-top: 1.2rem; }
.levers { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: 0.9rem; }
.levers li { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: center; }
.levers__no {
  width: 2.3rem; height: 2.3rem; display: grid; place-items: center; border-radius: 6px; rotate: -4deg;
  background: var(--wattle); color: var(--ink); box-shadow: inset 0 0 0 2px rgba(30, 43, 34, 0.9);
  font-family: var(--f-display); font-weight: 700; font-size: 1.15rem;
}
.levers li + li .levers__no { rotate: 3deg; background: var(--wattle-2); }
.levers p { color: #f4dcc8; }
.levers strong { color: #fff4e4; }
.profit__more { margin-top: 1.6rem; color: #f4dcc8; max-width: 30rem; }
.profit__cta { margin-top: 1.6rem; }
/* the painting multiplies into the card, and its notes run on under it */
.profit__plate { margin: 0; padding: clamp(0.8rem, 2vw, 1.4rem) clamp(0.8rem, 2vw, 1.4rem) 0.9rem; rotate: 0.8deg; color: var(--ink); }
.profit__art { position: relative; aspect-ratio: 300 / 244; }
.profit__art img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.profit__art .art__hand { font-size: 17px; }
@media (max-width: 900px) { .profit__grid { grid-template-columns: 1fr; } .profit__plate { rotate: 0.5deg; } }

/* Consulting --------------------------------------------------------------- */
.consult__grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); grid-template-areas: "text flight" "form flight"; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.consult__text { grid-area: text; }
.consult__text h2 { margin-top: 1rem; }
.consult__text .lede { margin-top: 1.3rem; }
.consult__text .ticks { margin-top: 1.8rem; }

.consult__grid .flight { grid-area: flight; position: sticky; top: 6rem; }
.consult__grid .enquiry { grid-area: form; }
textarea.input { resize: vertical; min-height: 6rem; }

@media (max-width: 900px) {
  .consult__grid { grid-template-columns: 1fr; grid-template-areas: "text" "flight" "form"; }
  .consult__grid .flight { position: relative; top: 0; }
}

/* On a phone (qag-23y): the same page, about a third shorter. The paintings and the course's sayings stay,
   and each thing is said once: an episode's saying is one of those above, the course's and consulting's
   doors are told in full in their own sections (so their words are hide-sm), the levers and the ticks
   say again what's just been said, Steve's pictures show what their lede says (how he teaches: one
   picture, one take-home), and the example flight plan is on the consulting page. */
@media (max-width: 520px) {
  .episode blockquote, .levers, .consult__text .ticks, .analogies .lede, .consult__grid .flight { display: none; }
  .consult__grid { grid-template-areas: "text" "form"; }
  /* the free tools, the three ways in and the episodes: the icon or number beside the name, the words
     the card's full width below */
  .door { grid-template-columns: auto minmax(0, 1fr); column-gap: 0.9rem; row-gap: 0.3rem; padding: 1.15rem 1.15rem 1.25rem; }
  .door__ico { grid-row: span 2; align-self: center; width: 3.1rem; height: 3.1rem; margin: 0; }
  .door__ico svg { width: 1.9rem; height: 1.9rem; }
  .door > :not(.door__ico, .eyebrow, h3) { grid-column: 1 / -1; }
  .door h3 { font-size: var(--step-1); }
  .doors__grid, .free__grid { gap: 0.9rem; }
  /* one after another under the bean, which still grows as each comes up */
  .episodes { gap: 0.9rem; padding-bottom: 1.5rem; }
  .episode { grid-template-columns: auto minmax(0, 1fr); column-gap: 0.85rem; row-gap: 0.35rem; padding: 1rem 1.1rem 1.1rem; }
  .episode__num { position: static; grid-row: span 2; align-self: center; }
  .episode > :not(.episode__num, .episode__stage, h3) { grid-column: 1 / -1; }
  /* Steve's pictures one to a row, each beside its name and its words the card's full width below: they run
     about 40 characters a line, where two to a row ran 16 at 360 px, and the page is no longer (qag-3th3d) */
  .analogies__grid { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; margin-top: 1.25rem; }
  .analogy { grid-template-columns: 8.5rem minmax(0, 1fr); column-gap: 0.8rem; row-gap: 0.35rem; align-items: center; padding: 0.65rem 0.8rem 0.8rem; }
  .analogy .art { margin: 0; }
  .analogy h3 { font-size: 1.1rem; line-height: 1.2; }
  .analogy p { grid-column: 1 / -1; font-size: 0.9rem; line-height: 1.45; }
}