/* ============================================================
   AI Planter — motion & art direction, 2026-11
   Loaded on the homepage after redesign.css, so it owns the last word.

   Rules this sheet keeps:
   · additive — the page reads exactly the same with this file removed
   · opacity / translate / transform only — never layout, never CLS
   · every loop sits inside prefers-reduced-motion: no-preference
   · palette is inherited from the page; no new hues, no gradients on text,
     no glow. The hero photograph carries the colour.
   ============================================================ */

/* ------------------------------------------------------------
   3. Trust strip
   The three claims were floating loose under the CTAs. A ruled band
   gives them weight and reads as one statement, not three bullets.
   ------------------------------------------------------------ */
.home-page .botanical-hero .hero-trust{gap:0;margin:0 0 40px;padding-block:20px;border-top:1px solid rgba(67,90,70,.16);border-bottom:1px solid rgba(67,90,70,.16);align-items:stretch}
.home-page .botanical-hero .hero-trust li{flex:1 1 0;align-items:flex-start;padding-inline:18px;border-left:1px solid rgba(67,90,70,.13);transition:color var(--t-fast)}
/* The card copy is hand-measured for a 645px column; letting the second
   line wrap is what stops it clipping at 1100px, where the strip is widest. */
.home-page .botanical-hero .hero-trust small{white-space:normal;max-width:26ch}
.home-page .botanical-hero .hero-trust li:last-child small{max-width:22ch}
.home-page .botanical-hero .hero-trust li:first-child{border-left:0;padding-left:0}
.home-page .botanical-hero .hero-trust li:hover{color:#1f4b36}
.home-page .botanical-hero .hero-trust li:hover svg{transform:translateY(-1px)}
.home-page .botanical-hero .hero-trust svg{transition:transform var(--t-base)}
.home-page .botanical-hero .hero-community{margin-bottom:0}

/* ------------------------------------------------------------
   5. Feature index — a ruled list that answers to the pointer
   ------------------------------------------------------------ */
.home-page .feature-row{position:relative;transition:color var(--t-fast)}
.home-page .feature-row::before{content:"";position:absolute;left:-18px;top:18px;bottom:18px;width:2px;background:var(--color-primary);transform:scaleY(0);transform-origin:top;transition:transform .4s cubic-bezier(.22,1,.36,1);border-radius:2px}
.home-page .feature-row:hover::before{transform:scaleY(1)}
.home-page .feature-row-icon{transition:background var(--t-base),color var(--t-base),transform var(--t-base)}
.home-page .feature-row:hover .feature-row-icon{background:var(--color-primary);color:#fff;transform:translateY(-2px)}

/* ------------------------------------------------------------
   6. Start-here rail — internal linking with a beat between hero
      and the sample strip
   ------------------------------------------------------------ */
.mv-rail{background:#fcfdf9}
.mv-rail-inner{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:1280px;margin-inline:auto;padding-inline:24px}
.mv-rail a{display:flex;align-items:flex-start;gap:16px;padding:26px 22px 27px;border-left:1px solid #e3eadd;transition:background var(--t-base)}
.mv-rail a:first-child{border-left:0;padding-left:0}
.mv-rail a:hover{background:#f2f7ee}
.mv-rail a:focus-visible{outline-offset:-3px;border-radius:6px}
.mv-rail svg{width:26px;height:26px;flex-shrink:0;color:var(--color-primary);stroke-width:1.4;margin-top:2px;transition:transform var(--t-base)}
.mv-rail a:hover svg{transform:translateY(-2px)}
.mv-rail-label{display:block;font-weight:600;font-size:15px;line-height:1.35;color:#1d2a24;transition:color var(--t-fast)}
.mv-rail a:hover .mv-rail-label{color:var(--color-primary)}
.mv-rail-note{display:block;font-style:normal;font-size:12.5px;line-height:1.5;color:#6b756c;margin-top:3px}

@media (max-width:1599px){.mv-rail-inner{padding-inline:40px}}
@media (max-width:1023px){
    .mv-rail-inner{padding-inline:28px;grid-template-columns:repeat(2,minmax(0,1fr))}
    .mv-rail a{padding:22px 20px}
    .mv-rail a:nth-child(odd){border-left:0;padding-left:0}
    .mv-rail a:nth-child(n+3){border-top:1px solid #e3eadd}
}
@media (max-width:639px){
    .mv-rail-inner{padding-inline:22px}
    .mv-rail a{gap:12px;padding:20px 14px 21px}
    .mv-rail svg{width:22px;height:22px}
    .mv-rail-label{font-size:14px}
    .mv-rail-note{font-size:11.5px}
}
@media (max-width:374px){.mv-rail-inner{padding-inline:18px}.mv-rail a{padding-inline:10px}}

/* ------------------------------------------------------------
   7. Small-screen art direction for the hero
   The strip becomes a ruled stack instead of three cramped columns,
   which is the only honest way to fit three claims in 375px.
   ------------------------------------------------------------ */
@media (max-width:639px){
    .home-page .botanical-hero .hero-trust{flex-direction:column;gap:0;justify-content:flex-start;margin-bottom:26px;padding-block:0;border-bottom:0}
    .home-page .botanical-hero .hero-trust li{flex-direction:row;align-items:flex-start;gap:11px;width:100%;padding:13px 0;border-left:0;border-top:1px solid rgba(67,90,70,.13);font-size:12px;text-align:left}
    .home-page .botanical-hero .hero-trust li:first-child{border-top:0;padding-top:4px}
    .home-page .botanical-hero .hero-trust li:last-child{padding-bottom:0}
    .home-page .botanical-hero .hero-trust svg{width:26px;height:29px;flex-shrink:0}
    .home-page .botanical-hero .hero-trust strong{white-space:normal;font-size:12.5px}
    .home-page .botanical-hero .hero-trust small{font-size:10.5px;max-width:34ch}
    .home-page .botanical-hero .hero-eyebrow{margin-bottom:18px}
}

/* ------------------------------------------------------------
   8. Dark-scheme safety
   The homepage is a light, photographic composition and stays light
   by design (color-scheme is declared in styles.css). These two rules
   only stop the new elements from glaring if a user forces a dark
   rendering: the rail and motif fall back to the page paper.
   ------------------------------------------------------------ */
@media (prefers-color-scheme: dark){
    .mv-rail{background:#fcfdf9}
    .mv-rail a:hover{background:#eef4e8}
}