/* Course page: From the Plant’s Perspective. The painted opener, the eight stages of the bean as the index of
   episodes (each opens its own page), a look inside an episode, and the ways in. */

/* Drawing kit: page-only sizes on top of the shared kit ------------------- */
.art__hand--sm { font-size: 16px; }

/* Tighter ticks so the offer cards keep one line per item on phones */
.ticks { margin-top: 0.4rem; gap: 0.65rem; }
.ticks li { gap: 0.7rem; }
.ticks svg { width: 1.4rem; height: 1.4rem; }

/* Opener: the bean seedling on its crate at the edge of the paddock ------------------------------ */
.c-open h1 { font-size: clamp(2.8rem, min(6vw, 10vh), 6rem); }
/* the note by the seedling: it stays on the seedling however the painting is cropped */
.c-open__pin { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; margin: 0; translate: -50% -100%; pointer-events: none; }
.c-open__pin .hand {
  font-size: clamp(1.3rem, 1rem + 0.7vw, 1.75rem); line-height: 1.05; color: var(--earth-2); text-align: center; rotate: -3deg; white-space: nowrap;
  text-shadow: 0 0 10px rgba(250, 244, 226, 0.95), 0 0 3px rgba(250, 244, 226, 0.9);
}
.c-open__pin svg { flex: none; width: 2.4rem; height: auto; overflow: visible; }
.c-open__pin path { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1100px) { .c-open__pin { display: none; } }

/* What's in it: the Course's three parts (components.css), until the second draft brings the episodes back (COURSE-4) */
.parts .head { margin-bottom: clamp(1.5rem, 3vw, 2.2rem); }

/* The episodes: one plant grown through eight stages (off the page until the second draft) ------ */
.eps .head { margin-bottom: clamp(1.5rem, 3vw, 2.2rem); }
.grow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 1.2rem 0.5rem; }
.grow li { display: flex; }
.grow a { flex: 1; display: grid; justify-items: center; align-content: start; padding: 0 0.25rem 0.9rem; border-radius: 14px; color: inherit; text-align: center; text-decoration: none; transition: background-color 0.3s ease; }
.grow a:hover, .grow a:focus-visible { background-color: rgba(251, 247, 238, 0.7); }
.grow .specimen { width: 100%; --d: calc(var(--k) * 0.32s); --sway: calc(6s + var(--k) * 0.4s); --sway-d: calc(var(--k) * -0.9s); }
.grow a:hover .specimen__top, .grow a:focus-visible .specimen__top { --lean: 2.2deg; }
.grow__pad {
  margin-top: 0.4rem; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; background: var(--c); border-radius: 7px;
  box-shadow: inset 0 0 0 2px rgba(30, 43, 34, 0.9), 2px 2px 0 rgba(30, 43, 34, 0.9);
  font-family: var(--f-display); font-weight: 650; font-size: 1.05rem; color: var(--on, #fff8ea); rotate: -4deg; transition: rotate 0.3s var(--ease-grow), translate 0.3s var(--ease-grow);
}
.grow li:nth-child(even) .grow__pad { rotate: 3deg; }
.grow a:hover .grow__pad, .grow a:focus-visible .grow__pad { rotate: 0deg; translate: 0 -4px; }
.grow__stage { margin-top: 0.45rem; font-family: var(--f-hand); font-weight: 600; font-size: 1.35rem; line-height: 1; color: var(--earth); }
.grow__title { margin-top: 0.35rem; font-family: var(--f-display); font-size: 1.02rem; font-weight: 600; line-height: 1.2; color: var(--ink); text-wrap: balance; }
.grow__take { margin-top: 0.4rem; font-size: 0.82rem; line-height: 1.35; color: var(--ink-3); text-wrap: balance; }
.grow a:hover .grow__title, .grow a:focus-visible .grow__title { text-decoration: underline; text-decoration-color: var(--wattle); text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (max-width: 1100px) {
  .grow { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 2rem; }
  .grow .specimen { --d: calc(mod(var(--k), 4) * 0.3s); }
}
@media (max-width: 600px) {
  .grow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grow .specimen { --d: calc(mod(var(--k), 2) * 0.3s); }
}

.facts { list-style: none; margin: clamp(2.2rem, 5vw, 3.4rem) auto 0; padding: 1.3rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; row-gap: 1rem; border-top: 1.5px solid var(--rule); max-width: 48rem; }
.facts li { display: grid; justify-items: center; padding-inline: clamp(1rem, 3vw, 2rem); border-left: 1px solid var(--rule); }
.facts li:first-child { border-left: 0; }
.facts b { font-family: var(--f-display); font-size: var(--step-2); font-weight: 600; line-height: 1.05; white-space: nowrap; }
.facts span { font-size: 0.82rem; font-weight: 650; color: var(--ink-3); }
@media (max-width: 520px) { .facts li { width: 50%; } .facts li:nth-child(3) { border-left: 0; } }

/* Inside an episode: its title card on a dark ground, then what comes with every episode ---------- */
.inside { background-color: #1b2a20; background-image: var(--grain); color: #efe4cc; padding-bottom: calc(var(--section) * 0.7); }
.inside .eyebrow { color: #cdbb95; }
.inside h2 { color: #fbf3e1; }
.inside h2 em { color: var(--wattle-2); }
.inside .lede { color: #d9d0b8; }
.inside__grid { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }

/* the title card, as the lesson's player shows it: its stage of the bean grows in, and it opens the
   sample lesson. The screen is opaque, so the painting multiplies onto it however it's tilted. As on the
   player, the card and the button take turns down the screen, which grows past 16:9 only if the words need
   it (a reader's own text spacing), and the painting keeps its 16:9 size when it does. */
.peek { margin: 0; }
.peek__screen {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 0.6rem;
  aspect-ratio: 16 / 9; overflow: clip; container-type: inline-size; border-radius: 14px 11px 16px 12px; rotate: 0.8deg;
  background-color: color-mix(in srgb, var(--c) 20%, #fbf6e8);
  background-image: radial-gradient(ellipse 55% 75% at 76% 62%, rgba(255, 253, 246, 0.75), transparent 70%), var(--grain);
  background-size: auto, 260px 260px;
  box-shadow: 0 0 0 2px rgba(239, 228, 204, 0.85), 0 50px 80px -40px rgba(0, 0, 0, 0.85), 0 4px 10px -4px rgba(0, 0, 0, 0.5);
  color: var(--ink); text-decoration: none; transition: rotate 0.4s var(--ease-grow);
}
.peek__screen:hover { rotate: 0deg; }
.peek__screen:focus-visible { outline: 3px solid var(--focus); outline-offset: 5px; }
.peek__card { width: 56%; margin: 5.625% 0 0 6%; display: grid; justify-items: start; gap: 0.45rem; }
.peek__series { font-size: clamp(0.66rem, 0.5rem + 0.3vw, 0.76rem); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.peek__title { font-family: var(--f-display); font-weight: 620; font-size: clamp(1.3rem, 0.6rem + 2.1vw, 2.6rem); line-height: 1.04; text-wrap: balance; }
.peek__part {
  margin-top: 0.2rem; font-family: var(--f-hand); font-weight: 700; font-size: clamp(1.1rem, 0.8rem + 0.9vw, 1.6rem); line-height: 1.05;
  color: var(--earth); rotate: -2deg; transition: opacity 0.3s ease, translate 0.3s ease;
}
.peek__part::before { content: "now: "; font-weight: 600; color: var(--ink-3); }
.peek__part.is-out { opacity: 0; translate: 0 0.3rem; }
/* the painting is trimmed of the empty paper above the early stages, so the plant isn't lost in the corner */
.peek__plant { position: absolute; right: 4%; bottom: -3%; height: calc(100cqw * 9 / 16 * 1.06 / (1 - var(--lift, 0) * 0.8)); aspect-ratio: 1157 / 1555; pointer-events: none; }
.peek__plant .specimen { width: 100%; }
.peek__play { display: flex; align-items: center; gap: 0.8rem; margin: 0 0 5.0625% 5.5%; }
.peek__play svg { width: clamp(3rem, 2.2rem + 2.6vw, 4.6rem); height: auto; overflow: visible; transition: scale 0.3s var(--ease-grow), rotate 0.3s var(--ease-grow); }
.peek__ring { fill: var(--wattle); stroke: var(--ink); stroke-width: 2.6; stroke-linejoin: round; }
.peek__tri { fill: var(--ink); }
.peek__verb {
  padding: 0.4rem 0.85rem 0.45rem; border-radius: 999px; background: rgba(255, 253, 246, 0.9); border: 1.5px solid var(--ink);
  font-size: clamp(0.82rem, 0.75rem + 0.3vw, 1rem); font-weight: 800; box-shadow: 0 2px 0 var(--ink);
}
.peek__screen:hover .peek__play svg, .peek__screen:focus-visible .peek__play svg { scale: 1.07; rotate: -6deg; }

/* the four parts: each bar fills while its part is on the card (course.js), like the lesson's player */
.peek__parts { list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem 6px; }
.peek__parts li { display: grid; align-content: start; gap: 0.15rem; }
.peek__parts li::before {
  content: ""; height: 8px; margin-bottom: 0.45rem; border-radius: 3px;
  background: linear-gradient(var(--wattle), var(--wattle)) 0 0 / var(--fill, 0%) 100% no-repeat, rgba(239, 228, 204, 0.16);
  box-shadow: inset 0 0 0 1px rgba(239, 228, 204, 0.4);
}
.peek__parts li.is-done, .no-motion .peek__parts li.is-on { --fill: 100%; }
.js:not(.no-motion) .peek.is-playing .peek__parts li.is-on::before { animation: peek-fill var(--part, 3.8s) linear forwards; }
.peek.is-held .peek__parts li.is-on::before { animation-play-state: paused; }
@keyframes peek-fill { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
.peek__time { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #a99f86; }
.peek__name { font-family: var(--f-display); font-size: 0.98rem; font-weight: 560; line-height: 1.2; color: #d9d0b8; text-wrap: balance; transition: color 0.3s ease; }
.peek__parts li.is-on .peek__name { color: #fbf3e1; }
.peek__cap { margin-top: 1.1rem; font-size: 0.8rem; color: #b8ae96; text-align: right; }
@media (max-width: 900px) {
  .inside__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .peek__card { width: 62%; margin-top: 4.5%; gap: 0.3rem; }
  .peek__play { margin-bottom: 3.9375%; gap: 0.5rem; }
  .peek__verb { padding: 0.3rem 0.65rem 0.35rem; }
  .peek__parts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; row-gap: 1rem; }
  .peek__cap { text-align: left; }
}

.film {
  --holes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='14'%3E%3Crect x='7' y='2' width='16' height='10' rx='3' fill='%23efe4cc'/%3E%3C/svg%3E");
  position: relative; margin-top: clamp(2.5rem, 5vw, 4rem); padding-block: 2.6rem;
}
.film::before, .film::after { content: ""; position: absolute; left: 0; right: 0; height: 14px; background: var(--holes) repeat-x; opacity: 0.8; }
.film::before { top: 0.4rem; }
.film::after { bottom: 0.4rem; }
.film__strip:focus-visible { outline: 3px solid var(--focus); outline-offset: 6px; border-radius: 8px; }
.film__strip {
  list-style: none; margin: 0 auto; padding: 0 var(--gutter); max-width: calc(var(--wide) + 2 * var(--gutter));
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.8rem, 2vw, 1.4rem);
}
/* each frame is its own sheet, so the paintings on white multiply onto it */
.frame { background: #fbf7ee; border-radius: 6px; padding: 0.75rem 0.8rem 1.2rem; color: var(--ink); isolation: isolate; }
.frame:nth-child(odd) { rotate: -0.5deg; }
.frame:nth-child(even) { rotate: 0.5deg; }
.frame__art { position: relative; aspect-ratio: 3 / 2; margin-bottom: 0.85rem; border-radius: 4px; overflow: hidden; display: grid; place-items: center; }
.frame__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.frame__art .frame__multiply { mix-blend-mode: multiply; }
.frame__art .art { width: 100%; height: 100%; }
.frame__wash { opacity: 0.55; }
.frame__art .art__over { overflow: hidden; }
.frame .pen { font-family: var(--f-hand); font-weight: 600; font-size: 15.5px; fill: #28386a; }
.frame .pen__ink { fill: none; stroke: #28386a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.js .frame [data-draw] :is(.pen, .pen__ink) { opacity: 0; transition: opacity 0.5s ease calc(0.5s + var(--i) * 0.35s); }
.js .frame [data-draw].is-in :is(.pen, .pen__ink), .no-motion .frame :is(.pen, .pen__ink) { opacity: 1; }
.frame__tag {
  position: absolute; left: 0.5rem; top: 0.5rem; padding: 0.25rem 0.6rem; border-radius: 999px; background: var(--canopy); color: #f3ecd9;
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
}
.frame h3 { font-size: var(--step-1); font-weight: 620; padding-inline: 0.2rem; }
.frame p { margin-top: 0.35rem; padding-inline: 0.2rem; font-size: 0.95rem; color: var(--ink-2); }
@media (max-width: 960px) {
  .film__strip { grid-template-columns: repeat(4, minmax(15.5rem, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: 0.4rem; }
  .frame { scroll-snap-align: center; }
}

/* Who it's for ---------------------------------------------------------------- */
.who__grid { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.who__photo { width: min(100%, 22rem); justify-self: center; }
.who__text h2 { margin-top: 1rem; max-width: 16ch; }
.who__lede { margin-top: 1rem; max-width: 36rem; }
.who__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin-top: 2rem; }
.who__card { display: grid; gap: 0.5rem; align-content: start; }
.who__card:nth-child(1) { rotate: -0.6deg; }
.who__card:nth-child(2) { rotate: 0.5deg; }
.who__ico { width: 3.4rem; height: 3.4rem; display: grid; place-items: center; margin-bottom: 0.2rem; }
.who__ico svg { width: 2.3rem; height: 2.3rem; }
.who__card h3 { font-size: var(--step-2); }
.who__card p { color: var(--ink-2); }
.who__more { margin-top: 1.4rem; }
@media (max-width: 900px) {
  .who__grid { grid-template-columns: 1fr; }
  .who__photo { width: min(72%, 18rem); margin-bottom: 1rem; }
}
@media (max-width: 600px) { .who__cards { grid-template-columns: 1fr; } }

/* Short cuts: a pale wattle band with torn edges ------------------------------ */
.cuts { --tear: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 1000 40%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M0 40L0 16.5L8 18.4L14 21.4L22 19.5L32 18.3L38 20.2L49 23L54 25.8L61 26.1L69 29.5L82 26.5L90 23.1L97 23L102 20.1L109 20L118 18.8L128 19.1L140 21.3L144 23.4L154 22.7L166 25.4L179 24.1L186 21.7L200 22.1L204 21.9L216 25.4L226 26.6L236 26.3L243 24.2L250 21.1L259 19.1L264 17.7L273 20.8L285 21.8L296 22.6L305 23.4L319 25.3L328 33L341 33L354 33L360 33L368 33L381 33L385 30.6L396 32.4L408 32.1L421 31.5L431 30.4L440 28.6L446 32.3L458 32.9L465 33L473 30.7L480 30.8L493 33L507 33L517 33L525 31.1L530 30.3L537 27.3L545 28.6L554 28.1L566 30L574 31.8L583 31.7L595 31.7L599 30.8L606 30L610 29.3L622 28.3L636 30.8L644 27.3L649 33L660 33L670 30.7L683 27.9L694 30L702 26.6L710 23.9L720 27.4L731 27.1L743 20.2L748 18L757 16.9L761 17.6L770 18.2L783 16.4L796 8.2L800 11.1L807 19.3L820 18.5L829 21.5L838 21.2L852 27.7L859 29.7L867 28L876 26.6L888 27.9L901 26.3L914 24.4L921 25.5L934 22.1L939 22.5L944 19.9L953 20.6L967 21.8L976 22.3L983 25.1L988 28.1L996 30.4L1000 30.4L1000 40Z%27/%3E%3C/svg%3E"); position: relative; background-color: #f5e6bd; background-image: var(--grain); margin-block: 2rem; }
.cuts::before, .cuts::after {
  content: ""; position: absolute; left: 0; right: 0; height: clamp(14px, 2.2vw, 30px); background: inherit; pointer-events: none;
  -webkit-mask: var(--tear) 0 0 / 100% 100% no-repeat; mask: var(--tear) 0 0 / 100% 100% no-repeat;
}
.cuts::before { bottom: calc(100% - 1px); }
.cuts::after { top: calc(100% - 1px); transform: scale(-1, -1); }
.cuts__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); margin-top: clamp(2rem, 4vw, 3rem); }
.cut { position: relative; display: grid; gap: 0.5rem; align-content: start; justify-items: start; padding: 0.75rem 0.75rem 1.3rem; }
.cut:nth-child(1) { rotate: -0.7deg; }
.cut:nth-child(2) { rotate: 0.4deg; margin-top: 1rem; }
.cut:nth-child(3) { rotate: -0.3deg; }
.cut > :not(.cut__thumb) { margin-inline: 0.45rem; }
.cut__thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 9px; overflow: hidden; background: #fbf7ee; isolation: isolate; margin-bottom: 0.4rem; box-shadow: inset 0 0 0 1.5px rgba(30, 43, 34, 0.3); }
.cut__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; transition: scale 0.6s var(--ease-grow); }
.cut:hover .cut__thumb img { scale: 1.04; }
.cut__time { position: absolute; right: 0.6rem; bottom: 0.6rem; padding: 0.2rem 0.5rem; border-radius: 5px; background: rgba(30, 43, 34, 0.86); color: #f6efe0; font-size: 0.78rem; font-weight: 800; }
.cut__from { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.cut h3 { font-size: var(--step-1); font-weight: 620; }
.cut__link { color: inherit; text-decoration: none; }
.cut__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.cut:hover .cut__link, .cut__link:focus-visible { text-decoration: underline; text-decoration-color: var(--wattle); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.cut .chip { margin-top: 0.2rem; }
@media (max-width: 900px) {
  .cuts__grid { grid-template-columns: 1fr; max-width: 30rem; }
  .cut:nth-child(2) { margin-top: 0; }
}

/* Ways in ---------------------------------------------------------------------- */
.ways__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.2rem, 3vw, 2.2rem); max-width: 60rem; margin: clamp(2.2rem, 4vw, 3.2rem) auto 0; align-items: start; }
.offer { position: relative; display: grid; gap: 0.75rem; justify-items: start; padding: clamp(1.5rem, 3vw, 2.2rem); border-top: 8px solid var(--c); rotate: -0.5deg; }
.offer--member { rotate: 0.6deg; background: var(--canopy); color: #f3ecd9; box-shadow: 0 40px 60px -40px rgba(15, 42, 24, 0.8), 0 2px 6px -2px rgba(15, 42, 24, 0.3); border-top-color: var(--wattle); }
.offer__kick { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: color-mix(in oklab, var(--c) 78%, var(--ink)); }
.offer--member .offer__kick { color: var(--wattle-2); }
.offer h3 { font-size: var(--step-3); }
.offer--member h3 { color: #fbf3e1; }
.offer--member .ticks svg { color: var(--sap); }
.offer .btn { margin-top: 0.7rem; }
.offer__note { position: absolute; right: 1.4rem; bottom: 1.6rem; rotate: -4deg; color: var(--wattle-2); font-size: 1.45rem; max-width: 9rem; text-align: right; }
.ways__more { margin-top: clamp(1.8rem, 4vw, 2.6rem); text-align: center; color: var(--ink-2); }
.ways__more a { font-weight: 700; text-decoration-color: var(--wattle); text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .ways__grid { grid-template-columns: 1fr; max-width: 32rem; }
  .offer__note { position: static; text-align: left; max-width: none; margin-top: 0.4rem; }
}

/* After the course: sealed envelopes -------------------------------------------- */
.later { padding-top: calc(var(--section) * 0.7); }
.later__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); margin-top: clamp(2rem, 4vw, 3rem); }
.sealed {
  position: relative; display: grid; gap: 0.5rem; justify-items: start; align-content: start; padding: 3.6rem 1.5rem 1.6rem; overflow: hidden;
  background-color: #ead9b3; background-image: var(--grain); border-radius: 6px; rotate: var(--tilt, 0deg);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 20px 40px -26px rgba(74, 46, 16, 0.55), 0 2px 6px -2px rgba(74, 46, 16, 0.2);
}
.sealed::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3rem; background: #dcc494; clip-path: polygon(0 0, 100% 0, 50% 100%); box-shadow: inset 0 -1px 0 rgba(30, 43, 34, 0.2); }
.sealed__seal {
  position: absolute; left: 50%; top: 1.75rem; translate: -50% 0; z-index: 1; width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
  border-radius: 46% 54% 50% 50% / 52% 48% 52% 48%; background: #a8401f; color: #fbeee0;
  box-shadow: 0 0 0 3px rgba(168, 64, 31, 0.35), 0 3px 6px rgba(0, 0, 0, 0.25);
}
.sealed__seal svg { width: 1.3rem; height: 1.3rem; }
.sealed h3 { margin-top: 1.3rem; font-size: var(--step-2); }
.sealed p { color: var(--ink-2); }
.sealed .stamp { margin-top: 0.5rem; }
@media (max-width: 900px) { .later__grid { grid-template-columns: 1fr; max-width: 30rem; } }

/* Questions ---------------------------------------------------------------------- */
.faq__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.faq__note { margin-top: 1.5rem; }
.faq__list { border-top: 2px solid var(--ink); }
.faq__list details { border-bottom: 1px solid var(--rule); }
.faq__list summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.15rem 0.2rem; cursor: pointer; list-style: none;
  font-family: var(--f-display); font-size: var(--step-1); font-weight: 560; line-height: 1.25;
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after { content: "+"; content: "+" / ""; flex: none; font-family: var(--f-body); font-size: 1.9rem; font-weight: 400; line-height: 1; color: var(--earth); transition: rotate 0.25s ease; }
.faq__list details[open] summary::after { rotate: 45deg; }
.faq__list summary:hover { color: var(--canopy-2); }
.faq__list details p { max-width: 40rem; padding: 0 0.2rem 1.25rem; color: var(--ink-2); }
.faq__list a { font-weight: 700; text-decoration-color: var(--wattle); text-decoration-thickness: 2px; }
@media (max-width: 860px) { .faq__grid { grid-template-columns: 1fr; } }