/* Extracted verbatim from index.html so the page can drop 'unsafe-inline'
   from style-src. A <style> block is inline CSS: 'self' cannot permit it,
   and a statically served page has no build step to add a nonce, so moving
   it out was the route — the same one the scripts took. */

    /* ═══════════════════════════════════════════════════════════════════
       Bonsai landing — "Botanical Editorial"
       The page is one bound document: a naturalist's field journal about
       a tree, a learner, and the planet. Hairline
       rules, screenshots mounted as captioned plates, footnote honesty.
       Typography is the design.
       ═══════════════════════════════════════════════════════════════════ */
    :root {
      --paper:        #efe6d3;
      --paper-panel:  #f6efdf;
      --paper-edge:   #e7dcc4;
      --ink:          #2b2618;
      --ink-soft:     #5b5340;
      --ink-faint:    #6f6450;
      --line:         #d6c8a8;
      --line-strong:  #c3b290;
      --forest:       #34503a;
      --forest-deep:  #25402b;
      --leaf:         #4c6b46;
      --leaf-light:   #6f8d5a;
      --leaf-warm:    #9a8a4e;
      --leaf-young:   #6f9a52;
      --bark:         #5a4a35;
      --water:        #6d949b;
      --water-deep:   #46707a;
      --water-light:  #a7c6c8;

      --rule-cream:   color-mix(in srgb, #eef1e7 28%, transparent);
      --ink-rule:     color-mix(in srgb, var(--ink) 45%, transparent);

      /* type scale */
      --t-display:  clamp(2.75rem, 6.2vw, 4.5rem);
      --t-h2:       clamp(2.1rem, 4.2vw, 3.1rem);
      --t-hero:     clamp(1.75rem, 3.4vw, 2.75rem);
      --t-h3:       1.4rem;
      --t-lead:     1.1875rem;
      --t-body:     1.0625rem;
      --t-small:    0.9375rem;
      --t-kicker:   0.75rem;
      --t-folio:    0.6875rem;
      --t-footnote: 0.8125rem;
      --t-caveat:   1.25rem;
      --t-stat:     clamp(2.75rem, 5.5vw, 4rem);
      --t-price:    4.25rem;

      /* spacing (4px base) */
      --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem;
      --s6: 2rem; --s7: 3rem; --s8: 4.5rem; --s9: 6rem; --s10: 8rem;

      --maxw: 1152px;
      --maxw-wide: 1320px;
      --measure: 62ch;

      --shadow-plate: 0 1px 2px rgba(43,38,24,0.08), 0 14px 30px -18px rgba(43,38,24,0.35);
      --shadow-nav: 0 1px 0 var(--line), 0 6px 18px -12px rgba(43,38,24,0.25);

      --ease-std: cubic-bezier(.22,.8,.32,1);
      --ease-rule: cubic-bezier(.6,.05,.2,1);
      --ease-hand: cubic-bezier(.34,1.4,.64,1);
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
    html, body { overflow-x: clip; }
    body {
      background-color: var(--paper);
      background-image: repeating-linear-gradient(0deg, rgba(120,100,60,0.018) 0 1px, transparent 1px 3px);
      color: var(--ink);
      font-family: 'Spectral', Georgia, serif;
      font-size: var(--t-body);
      line-height: 1.7;
      font-feature-settings: "kern" 1, "liga" 1;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    ::selection { background: rgba(52,80,58,0.18); }
    .num { font-variant-numeric: tabular-nums lining-nums; }
    .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: clamp(1.25rem, 4vw, 2rem); }
    .wrap-wide { max-width: var(--maxw-wide); }
    section[id] { scroll-margin-top: 4.75rem; }
    h1, h2, h3 { overflow-wrap: break-word; }

    /* ── links ── */
    a { color: inherit; }
    p a, li a, .foot-copy a {
      text-decoration: underline; text-decoration-color: var(--line-strong);
      text-decoration-thickness: 1px; text-underline-offset: 3px;
      transition: color .18s ease, text-decoration-color .18s ease;
    }
    p a:hover, li a:hover { color: var(--forest-deep); text-decoration-color: var(--forest); text-decoration-thickness: 2px; }
    :focus-visible { outline: 2px solid var(--leaf); outline-offset: 3px; }

    /* ── buttons ── */
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
      font-family: inherit; font-size: 1rem; font-weight: 600; letter-spacing: 0.01em;
      cursor: pointer; padding: 0.85rem 1.7rem; border-radius: 2px; text-decoration: none;
      border: 1px solid transparent;
      transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
      white-space: nowrap;
    }
    .btn-primary { background: var(--forest); color: #f4efe4; }
    .btn-primary:hover { background: var(--forest-deep); box-shadow: 0 8px 20px -12px rgba(37,64,43,0.5); }
    .btn-primary:active { background: #1e3423; }
    .btn-ghost { background: transparent; color: var(--forest-deep); border-color: var(--ink-rule); }
    .btn-ghost:hover { background: var(--paper-panel); border-color: var(--ink); }
    .btn-lg { font-size: 1.0625rem; padding: 1rem 2.1rem; }

    /* ── editorial primitives ── */
    .kicker {
      font-size: var(--t-kicker); font-weight: 600; letter-spacing: 0.22em;
      text-transform: uppercase; color: var(--leaf);
    }
    .folio {
      font-size: var(--t-folio); font-weight: 500; letter-spacing: 0.18em;
      text-transform: uppercase; color: var(--ink-faint);
      font-variant-numeric: tabular-nums lining-nums;
    }
    .rule-double { position: relative; border-top: 1px solid var(--line-strong); }
    .rule-double::before {
      content: ""; position: absolute; top: 3px; left: 0; right: 0;
      height: 1px; background: var(--line);
    }
    .chapter { padding-block: clamp(4rem, 9vw, 7rem); }

    .chapter-head { position: relative; padding-top: var(--s4); }
    .chapter-head::before, .chapter-head::after {
      content: ""; position: absolute; left: 0; right: 0; height: 1px;
      transform-origin: left; transition: transform .7s var(--ease-rule);
    }
    .chapter-head::before { top: 0; background: var(--line-strong); }
    .chapter-head::after { top: 3px; background: var(--line); }
    .chapter-head.reveal:not(.in)::before, .chapter-head.reveal:not(.in)::after { transform: scaleX(0); }
    .chapter-meta { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); }
    .chapter-head h2 {
      font-size: var(--t-h2); font-weight: 500; line-height: 1.1; letter-spacing: -0.015em;
      color: var(--forest-deep); margin-top: var(--s5);
    }
    .chapter-head h2 .accent, h1 .accent { color: var(--leaf); font-style: italic; font-weight: 500; }
    .chapter-head .lead { font-size: var(--t-lead); line-height: 1.62; color: var(--ink-soft); max-width: var(--measure); margin-top: var(--s4); }
    .chapter-head .lead + .lead-more { font-size: var(--t-body); color: var(--ink-soft); max-width: var(--measure); margin-top: 0.9rem; }
    .t-display { font-size: var(--t-display); font-weight: 300; line-height: 1.05; letter-spacing: -0.02em; }
    .t-display b { font-weight: 500; font-style: italic; }
    .chapter-gap { margin-top: clamp(2.5rem, 5vw, 4rem); }

    .check-list { list-style: none; }
    .check-list li {
      display: flex; gap: 0.75rem; align-items: flex-start;
      color: var(--ink-soft); font-size: var(--t-small);
      padding-block: var(--s3); border-top: 1px solid var(--line);
    }
    .check-list li:first-child { border-top: none; }
    .check-list li svg { width: 1.1rem; height: 1.1rem; color: var(--leaf); flex: none; margin-top: 0.2rem; }
    .check-list li b { color: var(--ink); font-weight: 600; }

    .trust-line {
      display: inline-flex; align-items: center; gap: 0.45rem;
      font-size: var(--t-footnote); letter-spacing: 0.01em; color: var(--ink-faint);
    }
    .trust-line svg { width: 0.9rem; height: 0.9rem; color: var(--leaf); flex: none; }

    /* ── plates: screenshots as pressed specimens ── */
    .plate {
      position: relative; margin: 0; padding: 0.6rem 0.6rem 0;
      background: linear-gradient(170deg, #faf5ea, var(--paper-panel) 70%);
      border: 1px solid var(--line-strong); border-radius: 3px;
      box-shadow: var(--shadow-plate);
      rotate: var(--tilt, 0deg);
      transition: translate .5s ease, box-shadow .5s ease;
    }
    .plate-img { overflow: hidden; border-radius: 2px; }
    .plate-img img {
      display: block; width: 100%; height: 100%; object-fit: cover;
      border: 1px solid var(--line); border-radius: 2px;
      transition: scale .5s ease;
    }
    .plate-cap {
      display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3);
      border-top: 1px solid var(--line); margin-top: 0.6rem;
      padding: 0.55rem 0.25rem 0.6rem;
    }
    .plate-cap em { font-style: italic; font-weight: 400; font-size: 0.9rem; color: var(--ink-soft); }
    .plate:hover { translate: 0 -3px; box-shadow: 0 2px 3px rgba(43,38,24,0.08), 0 22px 44px -20px rgba(43,38,24,0.4); }
    .plate:hover .plate-img img { scale: 1.02; }

    /* ── nav ── */
    .nav {
      position: sticky; top: 0; z-index: 50;
      background: color-mix(in srgb, var(--paper) 92%, transparent);
      backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
      border-bottom: 1px solid var(--line);
      transition: box-shadow .25s ease;
    }
    .nav.scrolled { box-shadow: var(--shadow-nav); }
    .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 4.25rem; }
    .brand { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1.25rem; font-weight: 600; color: var(--forest-deep); text-decoration: none; }
    .brand-leaf { width: 1.5rem; height: 1.5rem; object-fit: contain; border-radius: 50%; transform-origin: 50% 50%; transition: transform .3s ease; }
    .brand:hover .brand-leaf { transform: rotate(-10deg) scale(1.06); }
    .nav-links { display: flex; align-items: center; gap: 2rem; }
    .nav-links a.link {
      text-decoration: none; color: var(--ink-soft);
      font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
      padding-bottom: 2px;
      background-image: linear-gradient(var(--leaf), var(--leaf));
      background-repeat: no-repeat; background-size: 0% 1px; background-position: 0 100%;
      transition: background-size .25s ease, color .15s ease;
    }
    .nav-links a.link:hover { color: var(--forest-deep); background-size: 100% 1px; }
    .nav-links a.link.is-current { color: var(--forest-deep); background-size: 100% 1px; }
    .nav-cta { display: flex; align-items: center; gap: 1.25rem; }
    .nav-signin {
      text-decoration: none; color: var(--ink-soft);
      font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
    }
    .nav-signin:hover { color: var(--forest-deep); }
    .nav .btn-primary { padding: 0.6rem 1.2rem; font-size: 0.9375rem; }

    /* ── grow hero (mechanics untouched — visual retreatment only) ── */
    .grow-scene { position: relative; height: 300vh; }
    /* Once the opening bloom has finished the tree is fully grown, so the hero no
       longer needs a tall scroll-scene to scrub through — it settles into a single
       screen and the page carries on to the next section. */
    .grow-scene.is-static { height: auto; }
    .grow-scene.is-static .grow-sticky { position: static; }
    .grow-sticky {
      /* pin just BELOW the fixed nav (nav-inner 4.25rem + 1px border) so the
         centred Bonsai lockup at the top of the hero never tucks under it as
         the tree grows; shrink to match so the CTA still meets the fold. */
      position: sticky; top: calc(4.25rem + 1px); height: calc(100vh - 4.25rem - 1px); min-height: 600px; overflow: hidden;
      background:
        radial-gradient(130% 92% at 50% 124%, color-mix(in srgb, var(--leaf) 10%, transparent), transparent 62%),
        linear-gradient(180deg, color-mix(in srgb, var(--paper-panel) 55%, transparent), transparent 45%);
    }
    .grow-tree { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: clamp(8rem, 16vh, 11rem) 1rem clamp(9rem, 19vh, 11rem); }
    .grow-stage { position: relative; width: min(100%, 1100px); height: 100%; }
    #growTree { position: absolute; left: 0; top: 0; display: block; }
    .grow-head {
      position: absolute; top: 0; left: 0; right: 0; z-index: 3; pointer-events: none;
      display: flex; flex-direction: column; align-items: center;
      padding: 1.35rem 1.25rem 0.5rem; text-align: center;
      background: linear-gradient(180deg, var(--paper) 48%, color-mix(in srgb, var(--paper) 78%, transparent) 62%, transparent 78%);
    }
    .grow-brand {
      display: inline-flex; align-items: center; justify-content: center; gap: 0.65rem;
      pointer-events: auto; margin-bottom: 0.9rem;
      font-size: clamp(2.05rem, 5vw, 2.85rem); letter-spacing: 0.01em;
    }
    .grow-brand .brand-leaf { width: clamp(1.95rem, 4.2vw, 2.5rem); height: clamp(1.95rem, 4.2vw, 2.5rem); }
    .grow-head h1 {
      font-size: var(--t-hero); font-weight: 500; line-height: 1.1; letter-spacing: -0.012em;
      color: var(--forest-deep); max-width: 54rem; margin: 0 auto;
    }
    /* the botanist's growth ruler — driven purely by the existing --grow variable */
    .grow-ruler {
      position: absolute; right: clamp(0.5rem, 4vw, 3rem); top: 22%; bottom: 6%;
      width: 1px; background: var(--line-strong); pointer-events: none; z-index: 2;
    }
    .grow-ruler::before {
      content: ""; position: absolute; inset-block: 0; left: -4px; width: 8px;
      background-image: repeating-linear-gradient(0deg, var(--line-strong) 0 1px, transparent 1px 10%);
    }
    .grow-ruler-fill {
      position: absolute; left: -1px; bottom: 0; width: 3px; height: 100%;
      background: var(--leaf); transform: scaleY(var(--grow, 0)); transform-origin: bottom;
    }
    .grow-ruler-tag {
      position: absolute; right: 0.85rem; bottom: calc(var(--grow, 0) * 100%); translate: 0 50%;
      display: flex; flex-direction: column; align-items: flex-end; gap: 0.05rem;
      font-family: 'Caveat', cursive; white-space: nowrap; text-align: right;
      opacity: clamp(0, var(--grow, 0) * 6, 1);
    }
    .grow-ruler-co2-val {
      font-size: 1.45rem; font-weight: 600; line-height: 1; color: var(--leaf);
      font-variant-numeric: tabular-nums;
    }
    .grow-ruler-co2-unit {
      font-size: 1rem; line-height: 1.1; color: var(--bark);
    }
    .grow-foot {
      position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; pointer-events: none;
      padding: 3rem 1.25rem clamp(1.5rem, 3vh, 2rem); text-align: center;
      display: grid; align-items: end; min-height: 5.5rem;
      /* mirror of .grow-head: the scene fades under paper so type never fights the pond */
      background: linear-gradient(0deg, var(--paper) 42%, color-mix(in srgb, var(--paper) 62%, transparent) 72%, transparent);
    }
    .grow-hint, .grow-cta { grid-area: 1 / 1; justify-self: center; align-self: end; }
    .grow-hint {
      display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
      font-family: 'Caveat', cursive; font-size: 1.3rem; font-weight: 600; color: var(--bark);
      line-height: 1.25; padding: 0 0 2px; margin-bottom: 5.5rem;
      opacity: clamp(0, 1 - var(--grow, 0) * 8, 1); transition: opacity .2s ease;
      /* interactive button, styled to look exactly like the old static hint */
      appearance: none; -webkit-appearance: none; background: none; border: 0;
      pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent;
    }
    .grow-hint.is-hidden { pointer-events: none; }
    .grow-hint:focus { outline: none; }
    .grow-hint:focus-visible { outline: 2px solid var(--leaf); outline-offset: 6px; border-radius: 6px; }
    .grow-hint svg { width: 1.3rem; height: 1.3rem; animation: growbob 1.8s ease-in-out infinite; }
    @keyframes growbob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
    .grow-cta {
      max-width: 44rem;
      opacity: clamp(0, (var(--grow, 0) - 0.7) * 4.2, 1);
      transform: translateY(calc((1 - clamp(0, (var(--grow,0) - 0.7) * 4.2, 1)) * 14px));
      pointer-events: none;
      visibility: hidden;   /* keeps the invisible links out of the tab order */
    }
    .is-grown .grow-cta { pointer-events: auto; visibility: visible; }
    .grow-sub {
      font-size: var(--t-lead); line-height: 1.62; color: var(--ink-soft); margin-bottom: 1rem;
      text-shadow: 0 1px 10px var(--paper), 0 0 20px var(--paper);
    }
    .grow-cta .hero-actions { justify-content: center; }
    .grow-cta .trust-line { margin-top: var(--s3); }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }
    @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
    .grow-head .grow-brand { animation: fadeUp .8s var(--ease-std) backwards; }
    .grow-head h1      { animation: fadeUp .8s var(--ease-std) .12s backwards; }

    /* ── chapter 01 — field notes (impact strip, full-bleed forest band) ── */
    #impact-strip { padding-block: 0; }
    .stats {
      position: relative; margin-top: 0;
      background: var(--forest-deep); color: #eef1e7;
      border-block: 1px solid #1c3122;
      padding: clamp(2.5rem, 6vw, 4rem) 0;
    }
    .stats::before, .stats::after {
      content: ""; position: absolute; left: 1rem; right: 1rem; height: 5px;
      border-top: 1px solid var(--rule-cream);
      border-bottom: 1px solid color-mix(in srgb, #eef1e7 14%, transparent);
      pointer-events: none;
    }
    .stats::before { top: 0.9rem; }
    .stats::after { bottom: 0.9rem; }
    .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; text-align: left; }
    .stats-grid > div { padding-inline: clamp(1rem, 3vw, 2.5rem); }
    .stats-grid > div + div { border-left: 1px solid var(--rule-cream); }
    .stat-num {
      font-size: var(--t-stat); font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: #fff;
      font-variant-numeric: tabular-nums lining-nums;
    }
    .stat-num .unit { font-size: 1.25rem; font-weight: 400; font-style: italic; color: #b9c9ac; letter-spacing: 0; }
    .stat-num .unit-x { font-size: 0.45em; font-style: normal; vertical-align: 0.5em; letter-spacing: 0.02em; margin-left: 0.04em; }
    .stat-label { font-size: var(--t-small); line-height: 1.6; color: #b9c9ac; max-width: 22ch; margin-top: var(--s3); }

    /* ── chapter 02 — how it works (ruled ledger entries) ── */
    .entries { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
    .entry { border-top: 1px solid var(--line-strong); padding-top: var(--s5); transition: box-shadow .2s ease; }
    .entry-top { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); }
    .entry-top .folio { transition: color .2s ease; }
    .entry-top svg { width: 1.35rem; height: 1.35rem; color: var(--bark); }
    .entry-top svg * { stroke-width: 1.6; }
    .entry h3 { font-size: var(--t-h3); font-weight: 600; line-height: 1.25; color: var(--forest-deep); margin-top: var(--s3); }
    .entry p { font-size: var(--t-small); color: var(--ink-soft); margin-top: var(--s3); }
    .entry p b, .entry p em { color: var(--ink); }
    .entry:hover { box-shadow: 0 -1px 0 var(--leaf); }
    .entry:hover .entry-top .folio { color: var(--leaf); }

    /* ── chapter 03 — your garden (panel ground + plate spread) ── */
    #grow { background: var(--paper-panel); border-block: 1px solid var(--line); }
    .garden-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
    .garden-monthly {
      position: relative; background: var(--paper);
      border: 1px solid var(--line-strong); border-radius: 2px;
      outline: 1px solid var(--line); outline-offset: -6px;
      padding: 1.25rem 1.4rem;
      box-shadow: 0 1px 1px rgba(43,38,24,0.04), 0 8px 18px -12px rgba(43,38,24,0.18);
      rotate: -0.6deg;
      margin-top: var(--s4);
    }
    .garden-monthly-label { display: block; font-size: var(--t-folio); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--leaf); margin-bottom: var(--s2); }
    .garden-monthly p { font-size: var(--t-small); color: var(--ink-soft); }
    .garden-grid .check-list { margin-top: var(--s6); }

    .plate-live-col { position: relative; }
    .plate-live { --tilt: 0.4deg; }
    .plate-live-stage { position: relative; aspect-ratio: 16 / 10; background: var(--paper); }
    .plate-live-stage canvas, .plate-live-stage img { position: absolute; inset: 0; width: 100%; height: 100%; }
    /* the sky index: editorial tabs, not pills */
    .sky-controls { display: flex; flex-wrap: wrap; gap: 0.25rem 1.4rem; margin-top: var(--s5); border-top: 1px solid var(--line-strong); padding-top: var(--s3); }
    .sky-pill {
      appearance: none; background: none; border: none; cursor: pointer;
      font-family: inherit; font-size: var(--t-folio); font-weight: 600;
      letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
      padding: 0.35rem 0; position: relative;
      background-image: linear-gradient(var(--leaf), var(--leaf));
      background-repeat: no-repeat; background-size: 0% 2px; background-position: 0 100%;
      transition: background-size .25s ease, color .15s ease;
    }
    .sky-pill:hover { color: var(--forest-deep); }
    .sky-pill.is-active { color: var(--forest-deep); background-size: 100% 2px; }

    /* ── chapter 04 — impact deep (manifesto + ruled ledger) ── */
    .impact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
    .impact-grid .chapter-head h2 { max-width: 20ch; }
    .impact-ledger .entry { padding-block: var(--s5); margin-top: 0; }
    .impact-ledger .entry + .entry { border-top: 1px solid var(--line-strong); }
    .impact-ledger .entry-top { justify-content: flex-end; }
    .impact-ledger .entry.solution .entry-top svg { color: var(--leaf); }
    .impact-footnote {
      font-size: var(--t-footnote); color: var(--ink-faint); text-align: left;
      border-top: 1px solid var(--line); padding-top: var(--s4); margin-top: var(--s7);
    }

    /* ── chapter 05 — pricing (the bookplate) ── */
    #pricing { background: var(--paper-panel); border-block: 1px solid var(--line); }
    #pricing .chapter-head { text-align: center; }
    #pricing .chapter-head .lead { margin-inline: auto; }
    /* Two bookplates side by side, free then Pro. They stretch to equal height
       so the two price tags sit on one line however long the feature lists are,
       and stack on narrow screens. */
    /* One column until there is genuinely room for two. This was auto-fit with a
       20rem minimum, which broke at a width nobody could name (~728px, and it
       moved with the gap's own 3vw clamp). The subgrid below has to apply only
       while the plates are side by side, so the threshold is now stated once and
       both rules read from it. */
    .price-duo {
      display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
      grid-template-columns: 1fr;
      align-items: stretch; max-width: 54rem; margin-inline: auto;
    }
    .price-duo .price-card { max-width: none; display: flex; flex-direction: column; }
    /* Push the button and its note to the bottom of whichever plate is taller. */
    .price-duo .price-card .check-list { flex: 1 0 auto; }
    @media (min-width: 48rem) {
      /* minmax(0,…) so a long unbroken feature line can never inflate one
         column past its half. */
      .price-duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
      /* .price-card carries `margin: 0 auto` for when it stands alone, and auto
         inline margins make a grid item shrink-to-fit and centre rather than
         fill its column — so the two plates came out at different widths (373px
         vs 414px), Free being the narrower because its content is. Equal
         columns were never the problem; the cards just weren't using them. */
      .price-duo .price-card { margin-inline: 0; }
      /* Equal card height alone does not line the plates up: Free lists five
         features to Pro's four and its footnote runs one line to Pro's two, so
         bottom-aligning left the two CTAs a line apart. Subgrid hands each of
         the six bands — label, price, caption, features, button, note — its own
         row on the PARENT grid, so every band is as tall as the taller plate
         needs and the two read across. The features row takes up the slack
         (1fr); the rest hug their content.
         row-gap goes to 0 because `gap` now applies down the card as well as
         between the two of them, and the bands already carry their own spacing
         as margins. The column gap is untouched. */
      @supports (grid-template-rows: subgrid) {
        .price-duo { grid-template-rows: auto auto auto 1fr auto auto; row-gap: 0; }
        .price-duo .price-card {
          display: grid; grid-row: span 6; grid-template-rows: subgrid;
        }
        /* The shorter list sits at the top of the shared band rather than
           stretching to fill it, so both lists start on the same line. */
        .price-duo .price-card .check-list { flex: none; align-content: start; }
      }
    }
    .price-card {
      max-width: 26rem; margin: 0 auto; text-align: center;
      background: var(--paper);
      border: 1px solid var(--ink-rule); border-radius: 2px;
      outline: 1px solid var(--line-strong); outline-offset: -7px;
      padding: 2.75rem 2.25rem 2rem;
      box-shadow: var(--shadow-plate);
      transition: box-shadow .25s ease;
    }
    .price-card:hover { box-shadow: 0 2px 3px rgba(43,38,24,0.08), 0 22px 44px -20px rgba(43,38,24,0.4); }
    /* Pro carries the emphasis: a forest rule instead of the ink one. Free is
       still a full plate, not a footnote. */
    .price-card-pro { border-color: var(--forest); }
    .price-card-free .price-tag { color: var(--ink-soft); }
    .price-plate-label { display: block; font-size: var(--t-folio); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--s4); }
    .price-tag { font-size: var(--t-price); font-weight: 300; line-height: 1; letter-spacing: -0.02em; color: var(--forest-deep); font-variant-numeric: tabular-nums lining-nums; }
    .price-tag .per { font-size: 1.05rem; font-weight: 400; font-style: italic; color: var(--ink-faint); letter-spacing: 0; }
    .price-caption {
      font-family: 'Caveat', cursive; font-size: 1.35rem; font-weight: 600; color: var(--bark);
      rotate: -1.5deg; margin-top: var(--s3);
    }
    /* .alloc / .alloc-bar / .alloc-labels removed with the $2-of-$5 split bar. */
    /* One rule under the price block, none between the features. A line per row
       fenced every item into its own cell and made the plate read as a table —
       and it drew the eye straight to the thing that differs for no good reason,
       that Free has five rows and Pro four. Spacing separates them instead. */
    .price-card .check-list {
      text-align: left; display: grid; gap: var(--s4);
      margin-top: var(--s5); padding-top: var(--s5);
      border-top: 1px solid var(--line);
    }
    .price-card .check-list li { border-top: none; padding-block: 0; }
    .price-card .check-list li svg { width: 1.05rem; height: 1.05rem; }
    /* One span per row, so a bolded lead-in ("2×", "Deep Focus") is ordinary
       inline text rather than its own flex item with the row gap wedged after
       it — and a wrapped second line hangs under the words, not the tick. */
    .price-card .check-list li > span { flex: 1; min-width: 0; }
    .price-card .check-list b { color: var(--forest-deep); }
    .price-card .btn { width: 100%; margin-top: var(--s5); }
    .price-note { font-size: var(--t-footnote); color: var(--ink-faint); margin-top: var(--s4); }

    /* ── colophon — closing message ── */
    .colophon { padding-block: clamp(4rem, 9vw, 7rem); }
    .final { text-align: center; }
    .final-leaf { display: inline-flex; align-items: center; gap: 0.9rem; color: var(--leaf); }
    .final-leaf::before, .final-leaf::after { content: ""; width: 40px; height: 1px; background: var(--line-strong); }
    .final-leaf svg, .final-leaf img { width: 2rem; height: 2rem; object-fit: contain; }
    .final h2 { font-size: var(--t-h2); font-weight: 500; line-height: 1.1; letter-spacing: -0.015em; color: var(--forest-deep); margin-top: var(--s5); }
    .final h2 .accent { color: var(--leaf); font-style: italic; font-weight: 500; }
    .final p { font-size: var(--t-lead); line-height: 1.62; color: var(--ink-soft); max-width: var(--measure); margin: var(--s4) auto 0; }

    /* ── footer ── */
    footer { padding-block: var(--s7) var(--s8); }
    .foot-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s5); padding-top: var(--s6); }
    footer .brand { font-size: 1.1rem; }
    .foot-links { display: flex; flex-wrap: wrap; gap: 1.5rem; }
    .foot-links a {
      text-decoration: none; color: var(--ink-soft);
      font-size: var(--t-folio); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
      transition: color .15s ease;
    }
    .foot-links a:hover { color: var(--forest-deep); }
    .foot-copy { font-style: italic; font-size: 0.875rem; color: var(--ink-faint); }

    /* ── motion: scroll-reveals (classes added by JS only — no-JS never hides) ── */
    .reveal { opacity: 0; translate: 0 16px; transition: opacity .55s var(--ease-std), translate .55s var(--ease-std), rotate .7s var(--ease-std); transition-delay: var(--rd, 0s); }
    .reveal.in { opacity: 1; translate: 0 0; }
    .plate.reveal:not(.in) { rotate: 0deg; translate: 0 14px; }
    .plate.reveal.in { rotate: var(--tilt, 0deg); }
    .garden-monthly.reveal:not(.in) { rotate: 0deg; }
    .garden-monthly.reveal.in { rotate: -0.6deg; }

    /* ── responsive ── */
    @media (max-width: 980px) {
      .garden-grid { grid-template-columns: 1fr; }
      .impact-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 859px) {
      .nav-links { display: none; }
      .entries { grid-template-columns: 1fr; }
      .entries .entry { margin-top: 0; padding-block: var(--s6); }
      .stats-grid { grid-template-columns: 1fr; }
      .stats-grid > div { padding-inline: 0; padding-block: var(--s5); }
      .stats-grid > div + div { border-left: none; border-top: 1px solid var(--rule-cream); }
      .plate-live { rotate: 0deg; }
      .plate-live.reveal.in { rotate: 0deg; }
      .plate-live-stage { aspect-ratio: 4 / 3; }
      .sky-controls { gap: 0.25rem 1.1rem; }
    }
    @media (max-width: 640px) {
      .grow-ruler { display: none; }
    }
    @media (max-width: 520px) {
      .nav-cta { gap: 0.75rem; }
      .nav-signin { font-size: 0.6875rem; letter-spacing: 0.12em; }
      .nav .btn-primary { padding: 0.55rem 0.95rem; font-size: 0.8125rem; }
      .hero-actions .btn { flex: 1 1 auto; }
      .price-card { max-width: 100%; padding: 2rem 1.25rem 1.5rem; }
      .colophon { padding-block: 3rem 2.5rem; }
      .foot-links { column-gap: 1.25rem; row-gap: 0.5rem; }
      .foot-inner { gap: var(--s4); }
    }

    /* ── grow hero: structural responsive (mechanics preserved) ── */
    @media (max-width: 640px) {
      .grow-scene { height: 260vh; }
      .grow-sticky { min-height: calc(100vh - 4.25rem - 1px); }
      .grow-head { padding-top: 1rem; }
      .grow-head h1 { font-size: clamp(1.3rem, 5.2vw, 1.9rem); }
      .grow-tree { padding: 10rem 0.75rem 11rem; }
      .grow-sub { display: none; }
      .grow-cta { opacity: clamp(0, (var(--grow, 0) - 0.6) * 4.5, 1); }
    }
    @media (max-width: 480px) {
      .grow-brand { margin-bottom: 0.85rem; }
    }
    /* print: the pinned hero collapses to one page, nothing stays hidden */
    @media print {
      .grow-scene { height: auto; }
      .grow-sticky { position: static; height: auto; min-height: 0; }
      .grow-hint, .grow-ruler { display: none; }
      .grow-cta { opacity: 1; transform: none; visibility: visible; }
    }
    /* reduced motion LAST so it wins over every viewport rule above */
    @media (prefers-reduced-motion: reduce) {
      * { scroll-behavior: auto; transition: none !important; }
      .grow-scene { height: auto; }
      .grow-sticky { position: relative; height: 90vh; }
      .grow-hint { display: none; }
      .grow-cta { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
      .grow-head .grow-brand, .grow-head h1 { animation: none; }
      .reveal { opacity: 1; translate: none; transition: none; }
    }