/* Nov 3 copy on the D2 design (Ranya: "i like the current's formatting… but i like the new copy").
   Only what the new copy needs: four facts, the mental load section with its pull quote, wider text,
   the brain dump lines, a fourth story chapter, Why Fern? as text, the plan buttons. */

/* Text runs at the width of its column, never a narrow centered block */
.load-tx .lead, .todo-full .lead, .why-split .lead { max-width: 44em; }
.apps-lead { max-width: 52em; margin-inline: auto; }

/* Facts: four, with the label */
.facts-h { margin: 0 0 12px; }
.facts.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.facts.four b { font-size: clamp(1.05rem, 1.6vw, 1.25rem); }
@media (max-width: 899px) { .facts.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .facts.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The mental load */
.load-split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
@media (max-width: 899px) { .load-split { grid-template-columns: 1fr; } }
.load-cards { display: grid; gap: 12px; justify-items: center; align-content: center; justify-self: center; width: min(100%, 340px); }
.lc { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(12,32,24,.08), 0 14px 30px -14px rgba(12,32,24,.25); font-weight: 600; color: var(--ink); }
.lc .cb { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--green); }
@media (prefers-color-scheme: dark) { .lc { background: #1B1E1C; box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 14px 30px -14px rgba(0,0,0,.6); } }
@media (prefers-reduced-motion: no-preference) {
  .js-motion .load-cards .lc { transition: transform .8s var(--ease), opacity .6s var(--ease); }
  .js-motion .load-cards:not(.in) .lc { opacity: .55; }
  .js-motion .load-cards:not(.in) .lc:nth-child(1) { transform: translate3d(-34px, 18px, 0) rotate(-6deg); }
  .js-motion .load-cards:not(.in) .lc:nth-child(2) { transform: translate3d(40px, -6px, 0) rotate(5deg); }
  .js-motion .load-cards:not(.in) .lc:nth-child(3) { transform: translate3d(-20px, -10px, 0) rotate(4deg); }
  .js-motion .load-cards:not(.in) .lc:nth-child(4) { transform: translate3d(30px, -26px, 0) rotate(-5deg); }
  .js-motion .load-cards.in .lc:nth-child(2) { transition-delay: .12s; } .js-motion .load-cards.in .lc:nth-child(3) { transition-delay: .24s; }
  .js-motion .load-cards.in .lc:nth-child(4) { transition-delay: .36s; }
}

/* Pull quote (round 2): centered, a real quotation, the source under it */
.quote-sec { padding-block: var(--section); }
.pull { margin: 0 auto; max-width: 46em; text-align: center; }
.pull-leaf { display: block; margin: 0 auto 18px; width: 12px; height: 20px; background: var(--amber); border-radius: 12px 0 12px 0; transform: rotate(20deg); }
.pull blockquote { margin: 0; }
.pull blockquote p { margin: 0 auto; font: 500 clamp(1.15rem, 2vw, 1.45rem)/1.45 var(--font-display); letter-spacing: -.005em; color: var(--ink); text-wrap: balance; }
.pull blockquote p { font-weight: 400; }
.pull figcaption { margin-top: 14px; color: var(--ink-2); font-size: .9rem; }
.pull figcaption::before { content: "— "; }
.pull a { color: var(--green-text); }

/* Fern AI Assistant: six lines, then the closing line and the recording */
.asks .ask-in { display: flex; flex-wrap: wrap; gap: 8px; }
.ask-in li { min-height: 2.75em; }
.ask-close { margin: 24px 0 0; }
.ask-link { margin: 14px 0 0; }
.ask-link button { padding: 0; border: 0; background: none; font: 600 1rem var(--font-body); color: #9FE0C8; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; min-height: 44px; }
.ask-link button:hover { color: #fff; }
.n-rec { border: 0; padding: 20px; background: transparent; max-height: 96vh; }
.n-rec::backdrop { background: rgba(10, 20, 16, .7); }
.n-rec .phone { width: min(300px, 70vw, calc((96vh - 120px) / 2.17)); }
.n-rec form { text-align: center; margin-top: 14px; }

/* Story: a fourth chapter (Calendars), and the sharing note */
@media (min-width: 980px) { .story-vis .phone[data-active="3"] .sl[data-i="3"] { opacity: 1; } }
.soon-card { margin-top: 18px; max-width: 30em; padding: 16px 18px; border-radius: 18px; background: var(--surface); border: 1px dashed color-mix(in srgb, var(--green) 45%, transparent); }
.soon-card p { margin: 0; }
.soon-card .soon { font: 600 .8rem/1 var(--font-body); letter-spacing: .02em; color: var(--green-text); margin-bottom: 8px; }
@media (prefers-color-scheme: dark) { .soon-card { background: #1B1E1C; } }

/* To-dos and calendar: centered like the other section headers */
.todo-full .lead { margin: 0 auto; max-width: 44em; }

/* One place: the closing sentence under the moving rows */
.apps-sec .apps-lead:last-child { margin-top: 28px; margin-bottom: 0; }
.apps-sec h2 + .apps-lead { margin-bottom: 8px; }

/* Why Fern? */
.why-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.why-split h2 { margin-bottom: 0; }
@media (max-width: 899px) { .why-split { grid-template-columns: 1fr; } }
.why-close { margin: clamp(40px, 6vw, 72px) 0 0; font: 700 clamp(1.7rem, 4vw, 3rem)/1.1 var(--font-display); letter-spacing: -.025em; color: var(--ink); text-wrap: balance; }

/* Pricing: the words as written, and a button on each plan */
.plan .price .fp { display: block; font: 600 .9rem/1.2 var(--font-body); color: var(--ink-2); margin-bottom: 4px; letter-spacing: 0; }
.plan .plus { margin: 14px 0 6px; font-weight: 600; }
.plan { display: flex; flex-direction: column; }
.plan .ticks { align-content: start; }
.plan-btn { align-self: flex-start; margin-top: auto; }
.plan .ticks { margin-bottom: 20px; }
.plan:not(.pro) .plan-btn { background: transparent; border: 1.5px solid var(--green); color: var(--green-text); }

/* New sections get the same spacing as the others */
.load-sec, #why { padding-block: var(--section); }
.pricing-split { align-items: start; }

/* Moving from Maple? */
.mh-sub { font: 600 clamp(1.25rem, 2.4vw, 1.6rem)/1.3 var(--font-display); color: var(--ink); margin-bottom: 10px; }
.today-sec { padding-block: var(--section); }
.today-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); margin-top: 36px; }
.tg > p { font: 600 1.1rem/1.35 var(--font-display); color: var(--ink); margin: 0 0 18px; max-width: 22em; }
.tg-wide { grid-column: 1 / -1; }
.tg .stage { margin-top: 72px; }
.tg .phone { width: min(240px, 70vw); }
@media (max-width: 899px) { .today-grid { grid-template-columns: 1fr; } }
.maple-card.coming { display: block; }
.maple-card.coming .lead { max-width: 44em; }
.maple-card.coming .lead + .lead { margin-top: 10px; }
.mh-legal { text-align: center; margin-top: 20px; font-size: .86rem; }

/* Round 2: the story sits on amber, so the leaf's ring matches it */
.story-sec .gleaf { box-shadow: 0 0 0 3px var(--t-amber); }
html:not(.tinted) .apps-sec.band { background: var(--t-paper); }
.drag-sec { padding-top: var(--section); }

/* Pricing (round 2): the sign-up sits under the headline, the cards have no buttons */
.price-join { margin-top: 24px; max-width: 30em; }

/* Copy round (Ranya, Nov 3): Why Fern? headline centered, the text under it like the to-dos section */
.why-split.why-center { grid-template-columns: 1fr; gap: 20px; text-align: center; }
.why-center .lead { margin-inline: auto; }
.why-center h2 { max-width: 22em; margin-inline: auto; text-wrap: balance; }

/* Ranya, Nov 3: centered closing line under Why Fern? */
.why-center + .why-close { text-align: center; }

/* Design critic, Nov 3: the closing line's swash stays level under the letters, like the hero's */
.why-close .leaf::before { transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .why-close .leaf::before { transform: scaleX(0); }
  .why-close .in .leaf::before, .why-close .leaf.in::before, .in .why-close .leaf::before { transform: scaleX(1); }
}
.story-sec { overflow-x: clip; }   /* the edge glow never adds sideways scroll */

/* Ranya, Nov 3 (option 2): one amber glow comes in from the left edge and holds for the whole story section.
   It fades out before the phone block and is faint enough to keep text contrast. */
.story-sec { position: relative; }
.story-sec > .wrap { position: relative; z-index: 1; }
.edge-glow { position: sticky; top: 0; height: 100vh; margin-bottom: -100vh; z-index: 0; pointer-events: none;
  background: radial-gradient(38vw 46vh at 0% 55%, rgba(237,170,80,.30), rgba(237,170,80,0)); }
@media (prefers-color-scheme: dark) { .edge-glow { background: radial-gradient(38vw 46vh at 0% 55%, rgba(245,215,170,.08), rgba(245,215,170,0)); } }
@media (max-width: 979px) { .edge-glow { background: radial-gradient(70vw 40vh at 0% 50%, rgba(237,170,80,.36), rgba(237,170,80,0)); }
  @media (prefers-color-scheme: dark) { .edge-glow { background: radial-gradient(70vw 40vh at 0% 50%, rgba(245,215,170,.10), rgba(245,215,170,0)); } } }

/* Fern Assistant demo: the untyped part of each line holds its space, so the card below never moves */
.ask-rest { visibility: hidden; }