html[lang="el"],html[lang="uk"]{--serif:'Noto Serif', 'Bevan', Georgia, 'Times New Roman', serif;--display:'Noto Serif', 'Bevan', Georgia, 'Times New Roman', serif;--body:'Noto Sans', 'Jost', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;--sans:'Noto Sans', 'Jost', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;}
html[lang="ja"]{--serif:'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;--display:'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;--body:'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', 'Jost', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;--sans:'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', 'Jost', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;}
html[lang="ko"]{--serif:'Noto Serif KR', 'AppleMyungjo', 'Batang', serif;--display:'Noto Serif KR', 'AppleMyungjo', 'Batang', serif;--body:'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Jost', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;--sans:'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Jost', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;}
html body{background-color:#F6F1E7;background-image:repeating-linear-gradient(0deg,transparent 0,rgba(20, 32, 26,0.014) 2.5px,transparent 5px),radial-gradient(80% 42% at 88% -8%, rgba(6,166,120,.09), transparent 72%),radial-gradient(64% 36% at 6% 14%, rgba(200,215,179,.18), transparent 76%);}
body::after{content:"";display:none;position:fixed;inset:0;z-index:80;pointer-events:none;background:none;}
body .paper{background-color:#F6F1E7;background-image:repeating-linear-gradient(0deg,transparent 0,rgba(20, 32, 26,0.014) 2.5px,transparent 5px);box-shadow:inset 0 1px 0 rgba(255, 252, 246, 0.9);}
body .paper--under-band{border-top:3px solid #0C2017;}
body .site-main :is(.tpl-chapter--forest,.guide-opening--forest,.site-band,.cta-band)+:is(.tpl-chapter--paper,.paper){border-top:3px solid #0C2017!important;}

body header.nav{height:72px;position:relative;z-index:71;padding:0;background:#0C2017;color:#EFE8D6;border-bottom:0;box-shadow:0 16px 44px -38px rgba(15,42,31,.82);}
body .nav-inner{position:relative;width:100%;max-width:none;height:72px;margin:0 auto;padding-inline:var(--site-edge);box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:16px;border-radius:0;background:transparent;box-shadow:none;}
body .nav-logo{min-height:44px;display:flex;align-items:center;gap:10px;color:var(--brand-color-dark);text-decoration:none;flex:none;font-family:var(--brand-font);font-size:clamp(18px,1.7vw,21px);font-weight:var(--brand-weight);letter-spacing:var(--brand-tracking);line-height:1;text-transform:var(--brand-transform);}
body .brand-lockup{display:block;height:clamp(30px,3.2vw,36px);width:auto;flex:none;}
/* Logo colour follows the hero behind the bar (founder rule: the hero being
   dark or light decides the whole bar). CREAM is the base — correct on the
   forest masthead AND on a dark over-art hero (e.g. the forest comparison
   opener). The GREEN wordmark swaps in ONLY over a LIGHT pixel hero, detected
   by :has() on the opener so no page needs to declare it. No gradient props up
   either treatment — the hero's own brightness carries the bar. */
body .brand-lockup--green{display:none;}
body header.nav.nav--over-art:has(~ main :is(.guide-opening--pixel,.site-band--pixel,.blr-hero)) .brand-lockup--white{display:none;}
body header.nav.nav--over-art:has(~ main :is(.guide-opening--pixel,.site-band--pixel,.blr-hero)) .brand-lockup--green{display:block;}
body .skip-link{position:fixed;top:10px;left:50%;z-index:81;min-height:44px;display:flex;align-items:center;justify-content:center;padding:0 18px;border-radius:999px;background:var(--emerald);color:#0F2A1F;font-family:'Jost', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;font-size:14px;font-weight:700;line-height:1;text-decoration:none;transform:translate(-50%,-160%);transition:transform .15s cubic-bezier(.2,.9,.25,1);}
body .skip-link:focus,body .skip-link:focus-visible{transform:translate(-50%,0);outline:2.5px solid var(--focus-ring,var(--emerald-deep,var(--emerald-dark)));outline-offset:3px;}
body .nav-desktop{min-width:0;width:100%;display:none;align-items:center;justify-content:flex-start;gap:clamp(22px,2.6vw,38px);margin:0;}
/* The masthead link states its own line-height, and that is the point. It used
   to declare size, weight and colour but NOT line-height, so it inherited one:
   1.68 from the generated pages' body, 1.55 from the homepage's own root. The
   SHARED component rendered at 21.7px on one press and 23.52px on the other
   while its markup stayed byte-identical — and markup is all the chrome
   auditor could compare, so nothing could see it. Rule for this file: a shared
   component never inherits typography from a page root; if it needs a value it
   declares it. Both presses flex-centre this inside a 44px box, so pinning it
   moves nothing on screen. */
body .nav-link{position:relative;min-height:44px;display:inline-flex;align-items:center;font-size:var(--type-nav-desktop);font-weight:500;line-height:1.2;letter-spacing:.055em;text-transform:uppercase;color:rgba(239,232,214,.92);text-decoration:none;white-space:nowrap;transition:color .2s;}
body .nav-link::after{content:"";position:absolute;right:0;bottom:5px;left:0;height:1.5px;background:#34C99A;transform:scaleX(0);transform-origin:right;transition:transform .28s cubic-bezier(.2,.9,.25,1);}
body .nav-actions{display:flex;align-items:center;gap:8px;margin-left:auto;}
/* The language switcher: a <details> disclosure, not a native <select> — the
   only way to put a real flag beside the code without losing keyboard
   operability or a working no-JS destination. Real flags never appear alone
   (founder rule): every trigger and every list entry pairs the flag with the
   locale code, and the full list also carries the language's own name.
   .nav-actions>.lang-switch is the compact masthead chip (flag + code,
   dropdown overlay); .menu-language below gives the drawer instance a
   full-width inline list instead — there is room to grow there, so it never
   needs to float.
   Sized to content rather than a fixed width on purpose: a select's visible
   text used to force 42px/126px boxes across two breakpoints just to hold
   "EN". Flag(20)+gap(6)+2-letter code(~16)+padding(20) settles near 56px on
   its own, comfortably inside the 390px bar the recent chip-overflow fix
   already had to defend. */
body .nav-actions>.lang-switch{position:relative;flex:none;min-width:0;}
body .lang-trigger{list-style:none;min-height:44px;display:inline-flex;align-items:center;gap:6px;margin:0;padding:0 10px 0 8px;border:1px solid var(--line-soft,var(--hair));border-radius:var(--press-radius);color:var(--emerald-deep,var(--emerald-dark));background-color:transparent;font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.04em;line-height:1.5;cursor:pointer;white-space:nowrap;transition:border-color .2s,background-color .2s;}
body .lang-trigger::-webkit-details-marker{display:none;}
body .lang-trigger::marker{content:"";}
body .lang-trigger::after{content:"";width:6px;height:6px;flex:none;margin-left:1px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .18s ease;}
body .lang-switch[open]>.lang-trigger::after{transform:rotate(-135deg) translateY(1px);}
/* Every flag is a real vendored SVG (public/landing/flags/), never an emoji —
   decorative next to text that already names the language, so alt is always
   empty. Only the trigger's own current flag loads eagerly; the eighteen
   others sit in the closed list and stay loading="lazy", so opening the
   drawer or footer switcher is the only thing that fetches them. */
body .lang-flag{width:20px;height:15px;flex:none;display:block;border-radius:2px;box-shadow:0 0 0 1px rgba(15,42,31,.18);object-fit:cover;}
body .lang-switch__list{list-style:none;margin:0;padding:0;}
body .lang-switch__link{min-height:44px;display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--press-radius);color:inherit;font-size:14px;font-weight:500;line-height:1.3;text-decoration:none;}
body .lang-switch__link[aria-current="true"]{font-weight:700;}
body .lang-trigger__code{font-weight:700;letter-spacing:.04em;}
body .nav-actions>.lang-switch>.lang-trigger{border-color:rgba(239,232,214,.45);color:#EFE8D6;background-color:rgba(12,32,23,.55);}
/* The masthead sits over artwork, so a transparent control has no ground of
   its own and inherits whatever the picture happens to be. Measured on the
   care hub, composited against the real pixels behind it, the label came out
   at 4.39:1 — under the 4.5 floor, on the control a visitor uses to read the
   site in their own language. The "Get the app" button beside it has carried a
   solid ground all along; this one was the odd one out. A forest wash at .55
   takes the same worst point past the floor without turning the bar into a row
   of filled boxes. */
body .nav-actions>.lang-switch .lang-switch__list{position:absolute;top:calc(100% + 8px);right:0;z-index:5;width:max-content;min-width:200px;max-width:min(280px,calc(100vw - 24px));max-height:min(60vh,420px);overflow-y:auto;overscroll-behavior:contain;border:1px solid rgba(239,232,214,.20);border-radius:14px;background:#12291F;box-shadow:0 24px 60px rgba(4,12,8,.45);}
body .nav-actions>.lang-switch .lang-switch__link{color:#EFE8D6;}
body .nav-actions>.lang-switch .lang-switch__label{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
body .nav-download{min-width:142px;min-height:46px;display:inline-flex;align-items:center;justify-content:center;padding:0 18px;border:1px solid rgba(15,42,31,.35);border-radius:var(--press-radius);background:#F6F1E7;color:#0F2A1F;font-size:14px;font-weight:600;line-height:1;text-decoration:none;white-space:nowrap;box-shadow:none;transition:background-color .2s,color .2s,transform .12s ease-out,box-shadow .12s ease-out;}
body .nav-download:active{transform:translate(var(--press-travel-compact),var(--press-travel-compact));box-shadow:0 0 0 rgba(15,42,31,0);}
/* THE MASTHEAD'S APP ACTION IS THE PAIR OF OFFICIAL STORE BADGES.
   A single "Get the app" button cannot name a store, so it needed a router to
   guess one, and the router guessed wrong for every desktop visitor. Two
   badges never guess: the reader sees their own store and clicks it, with no
   JavaScript involved.
   The pair only appears where it measurably fits. The old button was already
   hidden below 1280 (the drawer carries the action there), and at 1280 the bar
   has 291px free in its TIGHTEST locale — English and Finnish; Greek and
   Ukrainian have more, because their nav links are shorter. The badges use the
   same 44px control height as the language switcher; their 289px combined
   width still fits the measured 291px tight-locale allowance. */
body .nav-store-badges{display:none;align-items:center;gap:8px;flex:none;}
body .nav-store-badges .store-badge{position:relative;min-width:0;height:44px;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;padding:0;border:0;border-radius:4px;background:transparent;box-shadow:none;transition:transform .12s ease-out;}
body .nav-store-badges .store-badge img{position:absolute;display:block;width:auto;max-width:none;}
body .nav-store-badges .store-badge--apple{width:132px;}
body .nav-store-badges .store-badge--apple img{top:0;left:0;height:44px;}
body .nav-store-badges .store-badge--play{width:149px;}
body .nav-store-badges .store-badge--play img{top:-10.75px;left:-10.75px;height:65.5px;}
body .nav-store-badges .store-badge:active{transform:translate(1px,1px);}
/* The drawer has vertical room, so it shows the pair at full size. */
body .mobile-menu__badges{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:20px;}
body .mobile-menu__badges .store-badge{position:relative;min-width:0;height:48px;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;padding:0;border:0;border-radius:6px;background:transparent;box-shadow:none;}
body .mobile-menu__badges .store-badge img{position:absolute;display:block;width:auto;max-width:none;}
body .mobile-menu__badges .store-badge--apple{width:144px;}
body .mobile-menu__badges .store-badge--apple img{top:0;left:0;height:48px;}
body .mobile-menu__badges .store-badge--play{width:162px;}
body .mobile-menu__badges .store-badge--play img{top:-11.75px;left:-11.75px;height:71.5px;}
/* Shared hero badge variant. Both stores get the exact same outer frame. The
   Apple SVG keeps its native aspect ratio inside that frame; the overlay masks
   its baked-in rounded edge so only the shared outline remains visible. */
body .store-badges--hero .store-badge{position:relative;min-width:0;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;padding:0;border:0;border-radius:7px;background:#000;color:inherit;box-shadow:inset 0 0 0 1px #a6a6a6;}
body .store-badges--hero .store-badge img{position:absolute;display:block;width:auto;max-width:none;}
body .store-badges--hero .store-badge--apple{width:149px;height:44px;}
body .store-badges--hero .store-badge--apple img{top:0;left:50%;height:44px;transform:translateX(-50%);clip-path:inset(1px round 6px);}
body .store-badges--hero .store-badge--apple::after{content:"";position:absolute;z-index:2;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(#000 0 2px,transparent 2px calc(100% - 2px),#000 calc(100% - 2px)),linear-gradient(90deg,#000 0 19px,transparent 19px calc(100% - 19px),#000 calc(100% - 19px));box-shadow:inset 0 0 0 1px #a6a6a6;}
body .store-badges--hero .store-badge--play{width:149px;height:44px;}
body .store-badges--hero .store-badge--play img{top:-10.75px;left:-10.75px;height:65.5px;}
@media(min-width:768px){
  body .store-badges--hero .store-badge--apple{width:169px;height:50px;}
  body .store-badges--hero .store-badge--apple img{top:0;left:50%;height:50px;}
  body .store-badges--hero .store-badge--apple::after{background:linear-gradient(#000 0 2px,transparent 2px calc(100% - 2px),#000 calc(100% - 2px)),linear-gradient(90deg,#000 0 21px,transparent 21px calc(100% - 21px),#000 calc(100% - 21px));}
  body .store-badges--hero .store-badge--play{width:169px;height:50px;}
  body .store-badges--hero .store-badge--play img{top:-12.25px;left:-12.25px;height:74.5px;}
}
body .menu-toggle{width:44px;height:44px;display:grid;place-content:center;gap:6px;padding:0;border:1px solid rgba(239,232,214,.45);border-radius:var(--press-radius);background:transparent;color:#EFE8D6;cursor:pointer;}
body .menu-toggle span{width:18px;height:1.5px;display:block;background:currentColor;transition:transform 0.2s ease;}
body .menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg);}
body .menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg);}
/* The drawer is the reading page pulled up over itself — an overlay, not the
   shell: cream ground, ink type, hairline dividers, under a forest bar. It
   deliberately does NOT follow the masthead dark, because it is a full-screen
   surface the visitor reads, and the site reads on cream. The canvas draws it
   as an inline panel under the header; the shipped shell keeps the full-screen
   modal dialog (focus trap + inert), so only the surface is translated. */
body .mobile-menu{position:fixed;inset:72px 0 0;z-index:70;display:flex;min-height:calc(100dvh - 72px);flex-direction:column;padding:26px clamp(24px,7vw,44px) max(30px,env(safe-area-inset-bottom));background:#FBF8F1;color:#0F2A1F;opacity:0;visibility:hidden;transform:translateY(-22px);pointer-events:none;overflow-y:auto;transition:opacity .18s ease,transform .42s cubic-bezier(0.22,1,0.36,1);}
body .mobile-menu.open{opacity:1;visibility:visible;transform:none;pointer-events:auto;}
html.site-menu-open body{background-color:#FBF8F1;}
html.site-menu-open body header.nav{position:fixed;inset:0 0 auto;width:100%;}
body .mobile-menu nav{display:grid;}
body nav.mobile-menu__primary a{position:relative;min-height:56px;display:flex;align-items:center;padding:8px 38px 8px 0;border-bottom:1px solid rgba(15,42,31,.075);color:#0F2A1F;font-family:'Bevan', Georgia, 'Times New Roman', serif;font-size:var(--type-nav-mobile);font-weight:500;letter-spacing:-.02em;line-height:1.12;text-decoration:none;}
body nav.mobile-menu__primary a::after{content:"→";position:absolute;right:2px;color:#047857;font-family:'Jost', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;font-weight:500;}
body .mobile-menu__secondary{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px;margin-top:20px;}
body nav.mobile-menu__secondary a{min-height:44px;display:flex;align-items:center;padding:0;border:0;color:#3A4F44;font-family:'Jost', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;font-size:var(--type-nav-utility);font-weight:600;letter-spacing:0;line-height:1.3;text-decoration:none;}
body .mobile-menu__cta{min-height:54px;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:20px;padding:0 18px;border-radius:var(--press-radius);background:#0C2017;color:#FBF8F1;font-size:var(--type-action);font-weight:600;text-decoration:none;box-shadow:var(--press-shadow-compact);}
body .mobile-menu__cta:active{transform:translate(var(--press-travel-compact),var(--press-travel-compact));box-shadow:0 0 0 rgba(15,42,31,0);}
body .mobile-menu__cta span:last-child{font-size:20px;}
body .menu-language{margin-top:24px;padding-top:20px;display:grid;gap:10px;border-top:1px solid rgba(15,42,31,.075);}
body .menu-language__label{color:#3A4F44;font-size:13px;font-weight:600;}
/* The drawer instance has room to grow, so it never floats: the list simply
   opens in place below a full-width trigger, same idiom as the compact chip's
   own <details>/<summary> just without the absolute overlay. */
body .menu-language .lang-switch{width:100%;}
body .menu-language .lang-trigger{width:100%;min-height:50px;justify-content:space-between;padding:9px 14px;border-color:rgba(15,42,31,.30);color:#0F2A1F;font-size:15px;}
body .menu-language .lang-switch__list{margin-top:8px;padding:6px;border:1px solid rgba(15,42,31,.16);border-radius:12px;}
body .menu-language .lang-switch__link{font-size:15px;}
body footer.site-foot-modern{position:relative;display:block;max-width:none;margin:0;padding:0;overflow:hidden;border:0;background:#0C2017;color:#B9C4B4;}
body .site-foot-modern__inner{position:relative;width:100%;max-width:none;margin-inline:auto;padding:0 var(--site-edge) 28px;}
/* The mobile app handoff is fixed to the viewport. When it is visible, leave
   the banner's measured document space below the footer's copyright;
   scroll-padding alone cannot expose
   content at the physical end of the document. */
body:has(.mobile-app-cta.is-visible) .site-foot-modern__inner{padding-bottom:var(--mobile-app-cta-inset,220px);}
body .site-foot-modern__conversion{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin-inline:calc(var(--site-edge) * -1);padding:34px var(--site-edge) 32px;overflow:hidden;border:0;background:#047857;color:#FBF8F1;}
body .site-foot-modern__brand-copy{position:relative;z-index:2;display:grid;gap:14px;max-width:520px;padding-right:0;}
body .site-foot-modern .fbrand{display:inline-flex;width:max-content;max-width:100%;min-height:44px;align-items:center;gap:12px;color:#FBF8F1;font-family:var(--brand-font);font-size:clamp(22px,3vw,30px);font-weight:var(--brand-weight);letter-spacing:var(--brand-tracking);line-height:1;text-transform:var(--brand-transform);text-decoration:none;}
body .site-foot-modern .fbrand .brand-lockup{height:34px;}
body .site-foot-modern__conversion .brand-lockup--green{display:none;}
body .site-foot-modern__conversion .brand-lockup--white{display:block;}
/* 16ch, not 11. At 11ch a 72px display face gets two or three words a
   line, so the footer headline broke into stubs beside a 400px void while its
   own column was 772px wide. 16ch is still a display measure — it is not the
   38ch body measure below it — but it lets the line breathe instead of
   shattering. */
body .site-foot-modern__brand-copy>h2{max-width:15ch;margin:3px 0 0;color:#FBF8F1;font-family:'Bevan', Georgia, 'Times New Roman', serif;font-size:clamp(29px,4.8vw,50px);font-weight:400;letter-spacing:-.035em;line-height:1;text-wrap:balance;}
body .site-foot-modern__brand-copy>p{max-width:38ch;margin:0;color:#FBF8F1;font-size:16px;line-height:1.58;}
body .footer-app-cta__action-group{display:grid;gap:14px;}
body .footer-app-cta__action{width:100%;min-height:52px;display:inline-flex;align-items:center;justify-content:center;margin-top:4px;padding:10px 18px;border:1px solid #0c2017;border-radius:4px;background:#0c2017;color:#FBF8F1;font-family:'Jost', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;font-size:16px;font-weight:700;line-height:1.2;text-align:center;text-decoration:none;}
body .footer-app-cta__availability{display:block;color:#FBF8F1;font-family:'Jost', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;font-size:13px;line-height:1.35;text-align:center;}
body .footer-app-cta__mascot{position:absolute;z-index:1;right:-22px;top:24px;width:264px;height:auto;object-fit:contain;object-position:center;image-rendering:auto;transform:scaleX(-1);pointer-events:none;}
/* On phones, Kitty belongs to the action group. Copy gets a clean column on
   his left, while the sprite's feet stay flush with the action as the copy
   grows in another language. */
@media(max-width:719px){
  body .site-foot-modern__brand-copy{grid-template-columns:minmax(0,1fr) 104px;column-gap:0;max-width:none;}
  body .site-foot-modern .fbrand{grid-column:1/-1;display:flex;margin-bottom:3px;}
  body .site-foot-modern__brand-copy>h2{grid-column:1/-1;max-width:14ch;}
  body .site-foot-modern__brand-copy>p{grid-column:1;max-width:none;}
  body .footer-app-cta__action-group{position:relative;grid-column:1/-1;margin-top:0;}
  body .footer-app-cta__mascot{z-index:1;right:-22px;top:auto;bottom:calc(100% - clamp(10px,3.3vw,14px));width:clamp(130px,41.4vw,171px);transform:scaleX(-1);}
  body .footer-app-cta__action{position:relative;z-index:2;margin-top:0;}
  body .footer-app-cta__availability{position:relative;z-index:2;margin-top:0;}
}
@media(min-width:720px){
  body .site-foot-modern__brand-copy{position:static;}
  body .site-foot-modern__brand-copy>:not(.footer-app-cta__mascot){position:relative;z-index:2;}
}
body .footer-store-badges{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
body .footer-store-badges .store-badge,body .footer-store-badges .official-store-badge{position:relative;min-width:0;min-height:48px;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;padding:0;border:0;border-radius:0;background:transparent;color:inherit;box-shadow:none;}
body .footer-store-badges .store-badge img,body .footer-store-badges .official-store-badge img{position:absolute;display:block;width:auto;max-width:none;}
body .footer-store-badges .store-badge--apple,body .footer-store-badges .official-store-badge--apple{width:144px;height:48px;}
body .footer-store-badges .store-badge--apple img,body .footer-store-badges .official-store-badge--apple img{top:0;left:0;height:48px;}
body .footer-store-badges .store-badge--play,body .footer-store-badges .official-store-badge--play{width:162px;height:48px;}
body .footer-store-badges .store-badge--play img,body .footer-store-badges .official-store-badge--play img{top:-11.75px;left:-11.75px;height:71.5px;}
/* Preserve source and keyboard order while putting the visitor's store first. */
html.site-android body .store-badge--play,
html.site-android body .official-store-badge--play{order:-1;}
body .site-foot-modern__navs{display:grid;grid-template-columns:1fr;gap:34px 24px;padding:clamp(38px,5vw,56px) 0;border-bottom:1px solid rgba(239,232,214,.20);}
body .site-foot-modern__navs>div{display:grid;align-content:start;gap:4px;}
body .site-foot-modern__navs>div:last-child{grid-column:1/-1;}
body .site-foot-modern__navs h3{margin:0 0 12px;color:rgba(239,232,214,.72);font-family:'Jost', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;font-size:15.6px;font-weight:500;letter-spacing:.16em;line-height:1.3;text-transform:uppercase;}
body .site-foot-modern__navs a{position:relative;display:flex;width:max-content;max-width:100%;align-items:center;min-width:44px;min-height:44px;color:rgba(239,232,214,.9);font-size:15px;line-height:1.35;text-decoration:none;overflow-wrap:anywhere;}
body .site-foot-modern__bottom{display:flex;flex-direction:column;gap:18px;padding-top:24px;color:#9DAA9B;font-size:13px;}
@media(hover:hover) and (pointer:fine){
  body .nav-link:hover{color:#EFE8D6;}
  body .nav-link:hover::after{transform:scaleX(1);transform-origin:left;}
  body .mobile-menu a:hover{color:#047857;}
  body .site-foot-modern a:hover{color:#EFE8D6;}
  body .site-foot-modern .fbrand:hover{color:#34C99A;}
  body .footer-app-cta__action:hover{background:#071b14;transform:translateY(-1px);}
  body .mobile-menu__cta:hover{transform:translate(2px,2px);box-shadow:var(--press-shadow-compact-hover);}
  body .nav-download:hover{transform:translate(2px,2px);box-shadow:var(--press-shadow-quiet-hover);}
  body .menu-toggle:hover,body .nav-actions>.lang-switch>.lang-trigger:hover{border-color:#34C99A;background-color:rgba(12,32,23,.7);}
  body .lang-trigger:hover{border-color:var(--emerald);background-color:rgba(6,166,120,0.06);}
  body .lang-switch__link:hover{background-color:rgba(6,166,120,.08);}
  body .nav-actions>.lang-switch .lang-switch__link:hover{background-color:rgba(239,232,214,.1);}
}
@media(min-width:1280px){
  body header.nav{height:88px;}
  body .nav-inner{width:100%;max-width:none;height:88px;padding-inline:var(--site-edge);display:grid;grid-template-columns:minmax(190px,240px) minmax(0,1fr) max-content;column-gap:clamp(24px,3vw,48px);justify-content:initial;border-radius:0;}
  body .nav-logo{min-width:0;font-size:21px;}
  body .nav-desktop{display:flex;gap:clamp(14px,1.5vw,24px);}
  body .nav-link{font-size:14px;font-weight:550;}
  body .nav-actions{gap:clamp(8px,2vw,24px);margin-left:0;}
  body .menu-toggle{display:none;}
  body .mobile-menu{display:none;}
  body .nav-download{min-width:142px;min-height:48px;padding-inline:18px;font-size:15px;}
}
@media(min-width:720px){
  body .site-foot-modern__conversion{min-height:440px;align-items:center;padding-top:54px;padding-bottom:54px;}
  /* The tablet footer has two deliberate lanes: copy on the left and the
     mascot on the right. Keeping their measurements together gives translated
     headlines somewhere honest to grow instead of letting them disappear
     underneath Kitty. */
  body .site-foot-modern__brand-copy{
    --footer-mascot-size:230px;--footer-mascot-right:40px;--footer-mascot-clearance:26px;
    max-width:min(620px,calc(100% - var(--footer-mascot-size) - var(--footer-mascot-right) - var(--footer-mascot-clearance)));padding-right:0;
  }
  /* The action group spans both lanes even though the button itself stays
     compact. Kitty is positioned from this full-width rail, so he can grow
     into the open right side and still travels with the button after longer
     local copy. */
  body .footer-app-cta__action-group{width:calc(100% + var(--footer-mascot-size) + var(--footer-mascot-right) + var(--footer-mascot-clearance));}
  body .footer-app-cta__action{width:min(340px,100%);}
  body .footer-app-cta__availability{width:min(340px,100%);}
  body .footer-app-cta__mascot{right:var(--footer-mascot-right);top:auto;bottom:calc(100% - 12px);width:var(--footer-mascot-size);height:auto;transform:scaleX(-1);}
  body .site-foot-modern__navs{grid-template-columns:repeat(3,minmax(0,1fr));}
  body .site-foot-modern__navs>div:last-child{grid-column:auto;}
  body .site-foot-modern__bottom{flex-direction:row;align-items:center;justify-content:space-between;}
}
@media(min-width:1024px){
  body .site-foot-modern__conversion{min-height:468px;padding-top:62px;padding-bottom:62px;}
  body .site-foot-modern__brand-copy{
    --footer-mascot-size:clamp(260px,25vw,360px);--footer-mascot-right:clamp(72px,14vw,220px);--footer-mascot-clearance:32px;
    max-width:min(640px,calc(100% - var(--footer-mascot-size) - var(--footer-mascot-right) - var(--footer-mascot-clearance)));
  }
  body .footer-app-cta__mascot{
    right:clamp(24px,4vw,64px);top:auto;bottom:-24px;width:var(--footer-mascot-size);
    transform:scaleX(-1);
  }
}
@media(max-width:1279px){
  /* The masthead keeps the page edge below 1280 too. This was a bare 14px,
     which put the wordmark 6px left of the band and the footer on every phone —
     the same class of mismatch as the four desktop axes, just small enough to
     read as sloppy rather than broken. The right side keeps its own tighter
     value: the menu button is an icon, not a text edge. */
  body .nav-inner{padding-inline:var(--site-edge) 10px;}
  body .nav-logo{font-size:18px;}
  body .nav-logo .brand-lockup{height:30px;}
  body .nav-download{display:none;}
}
/* Same threshold the button used, stated as the pair's own opt-IN so a narrow
   bar can never inherit it: below 1280 the drawer carries the action. */
@media(min-width:1280px){body .nav-store-badges{display:flex;}}
@media(max-width:355px){body .nav-inner{gap:8px;}body .nav-logo{min-width:44px;justify-content:flex-start;gap:8px;font-size:15px;letter-spacing:.1em;}body .nav-logo span{display:block;}body .nav-actions{gap:6px;}}
@media(max-width:520px){
  body .footer-store-badges{gap:8px;}
  body .footer-store-badges .store-badge--apple,body .footer-store-badges .official-store-badge--apple{width:126px;height:48px;}
  body .footer-store-badges .store-badge--apple img,body .footer-store-badges .official-store-badge--apple img{top:3px;height:42px;}
  body .footer-store-badges .store-badge--play,body .footer-store-badges .official-store-badge--play{width:142px;height:48px;}
  body .footer-store-badges .store-badge--play img,body .footer-store-badges .official-store-badge--play img{top:-7.25px;left:-10.25px;height:62.5px;}
}
/* The shared mobile handoff is a small pocket-sized version of the Botanicaly
   footer invitation. It follows the opening only on a portrait phone, then
   yields to the final app section. The neutral /get door keeps the destination
   honest for every visitor while the interaction records their own store. */
body .mobile-app-cta{display:none;position:fixed;z-index:69;right:10px;bottom:max(10px,env(safe-area-inset-bottom));left:10px;pointer-events:none;opacity:0;visibility:hidden;transform:translateY(calc(100% + 12px));transition:opacity 200ms ease-out,transform 240ms cubic-bezier(.23,1,.32,1),visibility 0s linear 240ms;}
body .mobile-app-cta.is-visible{pointer-events:auto;opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s;}
body .mobile-app-cta__inner{isolation:isolate;position:relative;width:min(100%,600px);min-height:0;margin:0 auto;overflow:hidden;padding:20px 112px 16px 20px;border:1px solid rgba(239,232,214,.42);border-radius:17px;background:#047857;box-shadow:0 22px 42px -24px rgba(5,60,45,.88),0 2px 0 rgba(255,255,255,.16) inset;}
body .mobile-app-cta__copy{position:relative;z-index:2;display:grid;justify-items:start;gap:9px;min-width:0;}
body .mobile-app-cta__headline{width:100%;max-width:360px;margin:0;color:#FBF8F1;font-family:var(--display,'Bevan', Georgia, 'Times New Roman', serif);font-size:clamp(18px,4.7vw,31px);font-weight:400;letter-spacing:-.025em;line-height:1.02;overflow-wrap:anywhere;}
body .mobile-app-cta__action{width:100%;min-width:0;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:9px 16px;border:0;border-radius:8px;background:#0c2017;color:#FBF8F1!important;font-family:var(--body,'Jost', system-ui, -apple-system, BlinkMacSystemFont, sans-serif);font-size:14px;font-weight:750;line-height:1.15;text-align:center;text-decoration:none;white-space:normal;overflow-wrap:anywhere;box-shadow:none;transition:transform 140ms ease,background-color 140ms ease;}
body .mobile-app-cta__action:active{transform:translateY(1px);}
body .mobile-app-cta__availability{display:block;width:100%;color:rgba(251,248,241,.88);font-family:var(--body,'Jost', system-ui, -apple-system, BlinkMacSystemFont, sans-serif);font-size:11px;font-weight:600;line-height:1.2;text-align:center;}
body .mobile-app-cta__mascot{position:absolute;z-index:1;right:-4px;bottom:-13px;width:162px;height:auto;transform:scaleX(-1);pointer-events:none;}
body .mobile-app-cta__dismiss{position:absolute;z-index:3;top:9px;right:9px;width:34px;height:34px;display:inline-grid;place-items:center;border:0;border-radius:4px;background:transparent;color:#FBF8F1;cursor:pointer;}
body .mobile-app-cta__dismiss::before,body .mobile-app-cta__dismiss::after{content:"";position:absolute;width:15px;height:1.5px;border-radius:1px;background:currentColor;}
body .mobile-app-cta__dismiss::before{transform:rotate(45deg);}
body .mobile-app-cta__dismiss::after{transform:rotate(-45deg);}
@media(max-width:767px) and (min-height:620px) and (orientation:portrait){body .mobile-app-cta{display:block;}}
@media(max-width:359px) and (min-height:620px) and (orientation:portrait){body .mobile-app-cta__inner{padding:16px 16px 14px;}body .mobile-app-cta__mascot{display:none;}body .mobile-app-cta__headline{max-width:24ch;font-size:19px;}body .mobile-app-cta__action{min-width:0;}body .mobile-app-cta__availability{display:none;}}
/* The masthead drawer outranks a secondary app handoff. display:none also
   removes its controls from keyboard navigation. */
html.site-menu-open body .mobile-app-cta{display:none;}
@media(prefers-reduced-motion:reduce){body .skip-link,body .mobile-menu,body .menu-toggle span,body .nav-download,body .lang-trigger,body .lang-trigger::after,body .nav-link,body .nav-link::after,body .nav-store-badges .store-badge,body .mobile-app-cta,body .mobile-app-cta__action{transition:none;}}
/* Over-art masthead: the SAME masthead, minus its ground. Every colour above
   is already the forest treatment, so this modifier carries only the two
   declarations that genuinely differ when a band's art runs under the bar —
   drop the solid ground, and take the bar out of flow so the art starts at the
   top of the document. Pair it with .site-band__scrim--head so the seam under
   the masthead stays dark enough to read against.
   Nothing about the wordmark, links, language control or store button belongs
   here: repeating them is how the article inventory drifted onto a cream bar
   while the homepage and hubs opened dark.
   The two inline offsets are part of taking the bar out of flow, not a second
   opinion about it: an absolutely positioned box with no offsets shrinks to
   its own contents, which parked the language control and the menu button
   ~80px short of the right edge. */
body header.nav.nav--over-art{position:absolute;left:0;right:0;background:transparent;box-shadow:none;}
/* Light-hero bar: the transparent masthead sits on a light pixel scene, so its
   controls flip to dark ink (the wordmark greens via the brand-lockup rule).
   The hero's own brightness carries the bar — there is no gradient behind it. */
body header.nav.nav--over-art:has(~ main :is(.guide-opening--pixel,.site-band--pixel,.blr-hero)) .nav-link{color:rgba(15,42,31,.9);}
@media(hover:hover) and (pointer:fine){
  body header.nav.nav--over-art:has(~ main :is(.guide-opening--pixel,.site-band--pixel,.blr-hero)) .nav-link:hover{color:#0F2A1F;}
}
body header.nav.nav--over-art:has(~ main :is(.guide-opening--pixel,.site-band--pixel,.blr-hero)) .nav-actions>.lang-switch>.lang-trigger{border-color:rgba(15,42,31,.28);color:#0F2A1F;background-color:#FBF8F1;}
body header.nav.nav--over-art:has(~ main :is(.guide-opening--pixel,.site-band--pixel,.blr-hero)) .menu-toggle{border-color:rgba(15,42,31,.32);color:#0F2A1F;background-color:#FBF8F1;}
/* An out-of-flow bar takes no height, so the band it floats over has to reserve
   it — otherwise the first line of the hero runs under the wordmark. The band
   knows nothing about which bar it is under, so the reservation belongs to the
   modifier, here, once. Both numbers are the masthead's own heights above.
   The pixel north-star is the desktop exception: its H1 owns an exact 174px
   anchor, while phone and tablet widths keep this normal bar reservation. */
body header.nav.nav--over-art~main>.site-band:first-child:not(.site-band--pixel.site-band--north-star)>.site-band__copy{padding-top:calc(72px + 40px);}
body header.nav.nav--over-art~main>.guide-opening--editorial-art:first-child>.guide-opening-copy{padding-top:calc(72px + clamp(44px,6vw,72px));}
@media(max-width:1023px){
  body header.nav.nav--over-art~main>.site-band.site-band--pixel.site-band--north-star:first-child>.site-band__copy{padding-top:calc(72px + 40px);}
}
@media(max-width:700px){
  body header.nav.nav--over-art~main>.guide-opening--title-wide-mobile:first-child>.guide-opening-copy{padding-top:74px;}
  body header.nav.nav--over-art:has(~ main.priority100-localized-public) .nav-inner{padding-inline:var(--site-edge);}
  body header.nav.nav--over-art:has(~ main.priority100-localized-public) .nav-actions{gap:8px;}
}
@media(min-width:1280px){
  body header.nav.nav--over-art~main>.site-band:first-child:not(.site-band--pixel.site-band--north-star)>.site-band__copy{padding-top:calc(88px + clamp(72px,7vw,92px));}
  body header.nav.nav--over-art~main>.guide-opening--editorial-art:first-child>.guide-opening-copy{padding-top:calc(88px + clamp(56px,6vw,88px));}
}
/* Pixel editorial openers are the generated press's version of the north-star
   band. On desktop their copy starts on the same exact row; the broader rule
   above remains the masthead-clearance fallback for every non-pixel opener. */
@media(min-width:1024px){
  body header.nav.nav--over-art~main>.guide-opening--editorial-art.guide-opening--pixel:first-child>.guide-opening-copy{padding-top:var(--north-star-copy-top,174px);}
  body header.nav.nav--over-art~main>.guide-opening--editorial-art.guide-opening--pixel.guide-opening--safety:first-child>.guide-opening-copy{padding-top:calc(var(--north-star-copy-top,174px) - 36px);}
}
body .nav-logo:focus-visible,body .nav-link:focus-visible,body .nav-download:focus-visible,body .menu-toggle:focus-visible,body .mobile-menu a:focus-visible,body .mobile-menu__cta:focus-visible,body .site-foot-modern a:focus-visible,body .footer-store-badges a:focus-visible,body .lang-trigger:focus-visible,body .lang-switch__link:focus-visible,body .mobile-app-cta__action:focus-visible,body .mobile-app-cta__dismiss:focus-visible{outline:2.5px solid var(--focus-ring,var(--emerald-deep,var(--emerald-dark)));outline-offset:3px;}
/* 13px floor for functional supporting copy on a phone. Authored at 12px,
   which is right on a desktop canvas, so raise it only where the floor applies. */
@media(max-width:700px){body .site-foot-modern__bottom{font-size:13px;}body .site-foot-modern__navs h3{font-size:15.6px;}}
/* On paper the site's furniture is noise: a skip link, the masthead and a dark
   conversion footer are all screen affordances. This lived in the legal shell,
   so a printed care guide carried the whole footer while a printed privacy
   policy did not — the same chrome behaving two ways because two places
   decided it. It belongs here, where every page family gets it. */
@media print{
  body .skip-link,
  body header.nav,
  body .mobile-menu,
  body .mobile-app-cta,
  body footer.site-foot-modern{display:none!important;}
}


body{--site-anchor-offset:100px;}
/* Full-bleed bands intentionally overhang their padded reading container. Clip
   that page-level overhang at the viewport edge so classic scrollbars do not
   turn the 100vw alignment into a visible horizontal scrollbar. Nested readers
   such as tables keep their own overflow behavior. */
html{overflow-x:clip;}body{overflow-x:clip;}
body [hidden]{display:none!important;}
body :where(main [id]){scroll-margin-top:var(--site-anchor-offset);}
body h1,body h2{font-family:'Bevan', Georgia, 'Times New Roman', serif;}body h3,body h4,body h5,body h6{font-family:'Jost', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;}
body .site-main{width:100%;margin:0 auto;padding:clamp(36px,5vw,56px) var(--site-gutter) clamp(80px,10vw,112px);}
body .site-main--reading{max-width:var(--site-reading);}
body .site-main--medium{max-width:var(--site-medium);}
body .site-main--wide{max-width:var(--site-wide);}
/* Named shared variant for a complete hero-art opener. The masthead sits over
   the same artwork, so the scene starts at the document's first pixel. */
body .site-main--art-open{max-width:none;padding-top:0;}
body .site-section{padding-block:var(--site-section);}
body .site-main h1,body h1.site-hero-title,body h2.site-section-title{font-family:'Bevan', Georgia, 'Times New Roman', serif;font-weight:400;text-wrap:balance;}
body .site-main h1{max-width:18ch;margin:0 0 14px;font-size:var(--type-title);line-height:1.04;letter-spacing:-.03em;}
body .site-main h1 .sci{font-family:'Bevan', Georgia, 'Times New Roman', serif;font-weight:400;letter-spacing:0;}
body h1.site-hero-title{font-size:var(--type-hero);line-height:1.02;letter-spacing:-.035em;}
body .site-main h2,body h2.site-section-title{font-family:'Bevan', Georgia, 'Times New Roman', serif;font-size:var(--type-section);font-weight:400;line-height:1.08;letter-spacing:-.02em;}
/* Shared semantic subhead role: normal website H3s inherit this typography. */
body .site-main h3,body h3.site-subhead{font-family:'Jost', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;font-size:var(--type-subhead);font-weight:600;line-height:1.25;letter-spacing:-.005em;}
body .site-main .lede{max-width:48ch;font-size:var(--type-lede);line-height:1.6;color:var(--ink-soft,var(--muted));}
body .site-main .card,body .site-main .facts,body .site-main .checker,body .site-main .choose-card{border-radius:var(--radius-card);}
body .site-main .hero{overflow:hidden;border:1px solid var(--line-soft,var(--hair));border-radius:var(--radius-media);}
body .site-main .hero img{display:block;width:100%;height:100%;object-fit:cover;}
body .site-artwork{position:relative;display:block;width:100%;min-width:0;margin:0;overflow:hidden;background:var(--field-paper,var(--card));}
body .site-artwork__picture{position:absolute;inset:0;display:block;width:100%;height:100%;}
body .site-artwork__image{display:block;width:100%;height:100%;object-fit:cover;}
body .site-artwork--hero,body .site-artwork--immersive{position:absolute;inset:0;height:100%;border:0;}
body .site-artwork--hero .site-artwork__image{object-position:center bottom;}
body .site-artwork--immersive .site-artwork__image{opacity:.74;object-position:center bottom;filter:saturate(.8) contrast(1.04);}
body .site-artwork--proof{aspect-ratio:4/5;border:1px solid var(--line-soft,var(--hair));background:color-mix(in srgb,var(--field-paper,var(--card)) 82%,var(--sage-wash,#E8EDDF));}
body .site-artwork--proof .site-artwork__image{object-position:center;}
body .site-artwork__content{position:absolute;inset:0;z-index:1;display:grid;place-items:end center;padding:24px 18px 0;}
body .site-artwork__screen{display:block;width:min(100%,var(--proof-screen-mobile));max-width:none;height:auto;max-height:none;border:1px solid var(--media-line);border-bottom:0;border-radius:28px 28px 0 0;background:var(--field-paper,var(--card));box-shadow:0 26px 55px -34px color-mix(in srgb,var(--ink) 52%,transparent);object-fit:contain;}
body .site-artwork--proof[data-has-artwork="true"]::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--field-paper,var(--card)) 86%,transparent),color-mix(in srgb,var(--field-paper,var(--card)) 24%,transparent) 58%,transparent 80%);}
body .site-artwork--proof[data-has-artwork="true"] .site-artwork__content{justify-items:start;}
body .site-artwork--proof[data-has-artwork="true"] .site-artwork__screen{max-width:62%;}
body .site-section-heading{display:grid;gap:18px;width:100%;max-width:720px;}
body .site-eyebrow{margin:0;color:var(--emerald-deep,var(--emerald-dark));font-size:clamp(15px,2vw,18px);font-weight:600;line-height:1.35;}
body .site-section-heading .site-section-title{margin:0;font-family:'Bevan', Georgia, 'Times New Roman', serif;font-size:var(--type-section);font-weight:400;line-height:1.02;letter-spacing:-.035em;text-wrap:balance;}
body .site-section-body{max-width:48ch;margin:0;color:var(--ink-soft,var(--muted));font-size:16px;line-height:1.68;}
body .site-list{display:grid;gap:0;margin:28px 0 0;padding:0;list-style:none;border-top:1px solid var(--line-soft,var(--hair));}
body .site-list li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:8px;min-height:50px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line-soft,var(--hair));font-size:15px;line-height:1.45;}
body .site-list--checks li>span:first-child{color:var(--emerald-deep,var(--emerald-dark));font-weight:700;}
body .site-supporting-links{max-width:58ch;margin:28px 0 0;color:var(--ink-soft,var(--muted));font-size:14px;line-height:1.7;}
body .site-supporting-links a{color:currentColor;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--emerald-deep,var(--emerald-dark)) 55%,transparent);text-underline-offset:4px;}
body .site-supporting-links--expanded{display:none;}
body .site-supporting-action{display:inline-flex;width:max-content;max-width:100%;min-height:44px;align-items:center;gap:18px;margin-top:20px;border-bottom:1px solid color-mix(in srgb,var(--print-ink,var(--ink)) 38%,transparent);color:var(--print-ink,var(--ink));font-size:14px;font-weight:650;line-height:1.35;text-decoration:none;}
body .site-story{display:flex;flex-direction:column;gap:34px;min-width:0;}
body .site-story__copy{display:block;position:relative;width:100%;max-width:560px;padding-top:48px;}
body .site-story__index{position:absolute;top:0;left:0;color:var(--emerald-deep,var(--emerald-dark));font-size:12px;font-weight:700;letter-spacing:.14em;}
body .site-story__copy .site-subhead{max-width:15ch;margin:0;font-family:'Bevan', Georgia, 'Times New Roman', serif;font-size:clamp(32px,8.8vw,48px);font-weight:400;line-height:1;letter-spacing:-.035em;text-wrap:balance;}
body .site-story__copy>p{max-width:42ch;margin:18px 0 0;color:var(--ink-soft,var(--muted));font-size:16px;line-height:1.65;}
body .site-split{width:100%;background:var(--field-paper,var(--cream));color:var(--print-ink,var(--ink));}
body .site-split--sage{background:var(--sage-wash,#E8EDDF);}
body .site-split--forest{background:var(--panel-bg,var(--band-bg));color:var(--panel-fg,var(--band-fg));}
body .site-split__inner{position:relative;isolation:isolate;display:block;width:100%;max-width:none;min-height:max(720px,177.778vw);margin-inline:auto;overflow:hidden;}
body .site-split--with-details .site-split__inner{min-height:max(920px,177.778vw);}
body .site-split__inner::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,var(--field-paper,var(--cream)) 0%,color-mix(in srgb,var(--field-paper,var(--cream)) 96%,transparent) 38%,color-mix(in srgb,var(--field-paper,var(--cream)) 58%,transparent) 55%,color-mix(in srgb,var(--field-paper,var(--cream)) 10%,transparent) 70%,transparent 78%);pointer-events:none;}
body .site-split--sage .site-split__inner::after{background:linear-gradient(180deg,var(--sage-wash,#E8EDDF) 0%,color-mix(in srgb,var(--sage-wash,#E8EDDF) 96%,transparent) 38%,color-mix(in srgb,var(--sage-wash,#E8EDDF) 58%,transparent) 55%,color-mix(in srgb,var(--sage-wash,#E8EDDF) 10%,transparent) 70%,transparent 78%);}
body .site-split__copy{position:relative;z-index:2;display:flex;width:100%;max-width:720px;min-height:inherit;flex-direction:column;justify-content:flex-start;padding:clamp(42px,10vw,72px) var(--site-gutter) clamp(56px,12vw,92px);background:transparent;}
body .site-split__copy>.site-list:first-of-type{margin-top:28px;}
body .site-split--with-details .site-list--checks{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px;margin-top:22px;}
body .site-split--with-details .site-list li{min-height:54px;font-size:13.5px;}
body .site-split--forest .site-eyebrow{color:color-mix(in srgb,var(--panel-fg,var(--band-fg)) 72%,transparent);}
body .site-split--forest .site-section-body{color:color-mix(in srgb,var(--panel-fg,var(--band-fg)) 78%,transparent);}
body .site-cta-band{width:100%;background:var(--field-paper,var(--cream));color:var(--print-ink,var(--ink));}
body .site-cta-band__inner{display:grid;gap:32px;width:100%;max-width:var(--site-max);margin-inline:auto;padding:var(--site-section) var(--site-gutter);}
body .site-actions{display:grid;gap:12px;width:100%;}
body .site-button{display:inline-flex;min-height:52px;align-items:center;justify-content:center;gap:14px;padding:12px 22px;border:1px solid var(--ink);border-radius:999px;background:var(--emerald);color:#0F2A1F;font-size:15px;font-weight:700;line-height:1.25;text-align:center;text-decoration:none;}
body .site-button--secondary{border-color:var(--line,var(--hair));background:transparent;color:currentColor;}
/* ── Letterpress action ───────────────────────────────────────────────────
   A printed block, not a pill: square 2px corner, hard offset shadow, and a
   press-in on interaction (hover moves 2px into the shadow, :active travels
   the full offset and the shadow goes to zero). Sanctioned divergence from the
   pill/10-17px radii of docs/design-system/website.html, recorded there.
   Never put the offset shadow over artwork — on foliage it reads as a
   misprint; use --inverse or --ghost inside a band. */
body .site-press{position:relative;display:inline-flex;min-height:52px;align-items:center;justify-content:center;gap:12px;padding:0 28px;border:0;border-radius:var(--press-radius);background:#0C2017;color:#FBF8F1;font-family:'Jost', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;font-size:17px;font-weight:600;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;box-shadow:var(--press-shadow);transition:transform .12s ease-out,box-shadow .12s ease-out;}
body .site-press:active{transform:translate(var(--press-travel),var(--press-travel));box-shadow:0 0 0 rgba(15,42,31,0);}
body .site-press--compact{min-height:44px;padding:0 18px;font-size:14px;box-shadow:var(--press-shadow-compact);}
body .site-press--compact:active{transform:translate(var(--press-travel-compact),var(--press-travel-compact));box-shadow:0 0 0 rgba(15,42,31,0);}
body .site-press--inverse{border:1px solid rgba(15,42,31,.35);background:#F6F1E7;color:#0F2A1F;box-shadow:none;}
body .site-press--ghost{border:1px solid var(--line,rgba(15,42,31,.30));background:transparent;color:currentColor;box-shadow:none;}
body .site-press--inverse:active,body .site-press--ghost:active{transform:translate(var(--press-travel-compact),var(--press-travel-compact));box-shadow:0 0 0 rgba(6,166,120,0);}
body .site-band .site-press--ghost{border-color:rgba(239,232,214,.45);color:var(--band-fg);}
/* ── Dotted ledger leaders ────────────────────────────────────────────────
   A printed ledger row: label left, value right, a dotted rule carrying the
   eye between them. Sanctioned divergence, recorded in the contract document.
   Values are tabular so a column of numbers lines up. */
body .site-ledger{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;}
body .site-ledger__row{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px dotted var(--leader-dot);}
body a.site-ledger__row{min-height:44px;color:inherit;text-decoration:none;}
body .site-ledger__label{min-width:0;color:var(--ink);font-size:17px;line-height:1.4;overflow-wrap:anywhere;}
body .site-ledger__value{flex:0 0 auto;color:var(--ink-soft,var(--muted));font-family:'Jost', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;font-size:13px;font-weight:500;letter-spacing:.06em;line-height:1.35;font-variant-numeric:tabular-nums;text-align:right;}
body .site-ledger__index{flex:0 0 24px;color:var(--muted);font-family:'Jost', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;font-size:13px;font-weight:500;letter-spacing:.06em;line-height:1.35;font-variant-numeric:tabular-nums;}
body .site-ledger--numbered .site-ledger__row{justify-content:flex-start;gap:16px;}
body .site-ledger--numbered .site-ledger__label{flex:1;line-height:1.45;}
body .site-ledger--grid .site-ledger__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--ledger-value-column,200px));}
body .site-ledger--stacked .site-ledger__row{flex-direction:column;align-items:flex-start;gap:5px;padding:10px 0 0;border-bottom:0;border-top:1px dotted var(--leader-dot);}
body .site-ledger--inverse .site-ledger__row{border-color:var(--leader-dot-inverse);}
body .site-ledger--inverse .site-ledger__label{color:var(--band-fg);}
body .site-ledger--inverse .site-ledger__value,body .site-ledger--inverse .site-ledger__index{color:rgba(239,232,214,.72);}
/* ── Immersive band ───────────────────────────────────────────────────────
   One illustration, one scrim, the words on top. See BAND_SCRIM above for the
   thresholds this implements; every page family consumes THIS, so a band is
   never rebuilt per template. --band-focal is the art's declared focal point
   and must sit outside the copy column at wide widths. */
body .site-band{position:relative;isolation:isolate;display:flex;width:100%;min-height:var(--band-min);flex-direction:column;justify-content:flex-start;overflow:hidden;background:rgb(var(--band-forest));color:var(--band-fg);}
body .site-band--hero{--band-min:720px;}
body .site-band__art{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;margin:0;object-fit:cover;object-position:var(--band-focal,50% 88%);}
body .site-band__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(172deg,rgba(var(--band-forest),.94) 0%,rgba(var(--band-forest),.90) 34%,rgba(var(--band-forest),0.86) 52%,rgba(var(--band-forest),.60) 64%,rgba(var(--band-forest),.28) 74%,rgba(var(--band-forest),.08) 84%,rgba(var(--band-forest),0) 94%);}
body .site-band__scrim--head{background:linear-gradient(to bottom,rgba(var(--band-forest),.55) 0%,rgba(var(--band-forest),0) 22%);}
body .site-band__scrim--foot{background:linear-gradient(to top,rgba(var(--band-forest),.30) 0%,rgba(var(--band-forest),.06) 24%,rgba(var(--band-forest),0) 46%);}
/* A top-canopy variant for artwork that opens into a bright botanical scene.
   Forest begins at the document edge, grounds the over-art masthead and live
   copy, then dissolves DOWN into the illustration. The direction never flips
   sideways on a wide screen: this top-to-scene transition is the brand rule,
   not a device-specific contrast patch. */
body .site-band--hero.site-band--canopy{--band-min:clamp(720px,56.25vw,960px);}
body .site-band--canopy>.site-band__scrim:not(.site-band__scrim--head):not(.site-band__scrim--foot){background:radial-gradient(ellipse 56% 66% at 16% 40%,rgba(var(--band-forest),.24) 0%,rgba(var(--band-forest),.16) 52%,rgba(var(--band-forest),.07) 76%,rgba(var(--band-forest),0) 100%),linear-gradient(180deg,rgba(var(--band-forest),.82) 0%,rgba(var(--band-forest),.76) 12%,rgba(var(--band-forest),.69) 24%,rgba(var(--band-forest),.61) 36%,rgba(var(--band-forest),.53) 48%,rgba(var(--band-forest),.45) 58%,rgba(var(--band-forest),.36) 68%,rgba(var(--band-forest),.28) 77%,rgba(var(--band-forest),.20) 84%,rgba(var(--band-forest),.14) 89%,rgba(var(--band-forest),.08) 93%,rgba(var(--band-forest),.04) 96%,rgba(var(--band-forest),.02) 98%,rgba(var(--band-forest),0) 100%);}

body .site-band--north-star>.site-band__copy{display:flex;flex-direction:column;gap:14px;}
body .site-band--north-star>.site-band__copy .guide-opening-kicker,
body .site-band--north-star>.site-band__copy .blr-eyebrow,
body .site-band--north-star>.site-band__copy h1,
body .site-band--north-star>.site-band__copy .lede,
body .site-band--north-star>.site-band__copy .reference-lede{margin:0;}
body .site-band--north-star>.site-band__copy h1{max-width:12ch;font-size:40px;font-weight:400;letter-spacing:-.03em;line-height:1;text-wrap:pretty;overflow-wrap:normal;word-break:normal;hyphens:none;}
body .site-band--north-star>.site-band__copy .lede,
body .site-band--north-star>.site-band__copy .reference-lede{max-width:300px;color:var(--band-fg-soft);font-size:17px;line-height:1.5;text-wrap:pretty;}
@media(orientation:portrait) and (max-width:639px){body .site-band--north-star{min-height:clamp(680px,80svh,760px);}}
@media(min-width:768px){
  body .site-band--north-star>.site-band__copy{gap:22px;}
  body .site-band--north-star>.site-band__copy h1{font-size:clamp(48px,5.42vw,78px);}
  body .site-band--north-star>.site-band__copy .lede,
  body .site-band--north-star>.site-band__copy .reference-lede{max-width:510px;font-size:19px;line-height:1.5;}
}
@media(orientation:portrait) and (min-width:640px) and (max-width:1023px){
  body .site-band--north-star{min-height:clamp(760px,84svh,900px);}
  body .site-band--north-star>.site-band__copy{gap:14px;}
}
@media(min-width:1024px){body .site-band--north-star{min-height:clamp(680px,50vw,780px);}}
@media(orientation:landscape) and (min-width:640px) and (max-height:600px){body .site-band--north-star{min-height:100svh;}}
/* One light-pixel hero composition for BOTH website presses. The React
   homepage and generated editorial pages have different semantic markup, but
   their artwork, copy lane, veil, type measure and responsive behavior are one
   mechanism here. Families provide only words and the responsive art pair. */
body :is(.site-band--pixel,.guide-opening--editorial-art.guide-opening--pixel){
  --band-fg:var(--ink);--band-fg-soft:var(--ink-soft);--band-focal:50% 18%;
  width:100vw;min-height:clamp(560px,74svh,660px)!important;background:var(--cream);
}
body :is(.site-band--pixel,.guide-opening--editorial-art.guide-opening--pixel) :is(.site-eyebrow,.guide-opening-kicker),
body .site-band--pixel .site-band__copy a{color:#1f6b4a;}
body :is(.site-band--pixel.site-band--north-star,.guide-opening--editorial-art.guide-opening--pixel)>:is(.site-band__copy,.guide-opening-copy){
  width:min(760px,calc(100% - (2 * var(--site-edge))));max-width:none;margin-left:var(--site-edge);
  align-self:start;padding:118px 0 48px;display:flex;flex-direction:column;gap:20px;background:none;
}
@media(min-width:1024px){
  /* Keep every desktop scene full-bleed and unmasked. Readability comes from
     fitting live copy inside the artwork's authored empty left area, never
     from a gradient, veil, panel, or replacement background. */
  body :is(.site-band--pixel.site-band--north-star,.guide-opening--editorial-art.guide-opening--pixel)>:is(.site-band__copy,.guide-opening-copy){
    width:min(580px,40vw);gap:12px;
  }
  body :is(.site-band--pixel.site-band--north-star,.guide-opening--editorial-art.guide-opening--pixel)>:is(.site-band__copy,.guide-opening-copy) h1{
    /* The authored desktop scenes keep their floor around 506px. Let live
       copy use the quiet cream field down to 480px; the older 420px guard
       forced long, truthful headings to shrink before they reached any
       painted object. */
    --hero-heading-min:30px;--hero-copy-safe-bottom:480px;max-width:480px!important;
  }
  body .guide-opening--editorial-art.guide-opening--pixel.guide-opening--symptom>.guide-opening-copy h1{
    --hero-copy-safe-bottom:390px;
  }
  body .guide-opening--editorial-art.guide-opening--pixel.guide-opening--collection>.guide-opening-copy h1{
    --hero-copy-safe-bottom:500px;
  }
  body .guide-opening--editorial-art.guide-opening--pixel.guide-opening--toxicity>.guide-opening-copy h1{
    --hero-copy-safe-bottom:505px;
  }
  body .guide-opening--editorial-art.guide-opening--pixel.guide-opening--collection>.guide-opening-copy .count{width:max-content;}
  body :is(.site-band--pixel.site-band--north-star,.guide-opening--editorial-art.guide-opening--pixel)>:is(.site-band__copy,.guide-opening-copy) :is(.lede,.reference-lede){
    width:100%!important;max-width:480px!important;font-size:17px!important;line-height:1.45!important;
  }
  body .guide-opening--editorial-art.guide-opening--pixel.guide-opening--symptom>.guide-opening-copy :is(.lede,.reference-lede){
    max-width:510px!important;line-height:1.35!important;
  }
  body .guide-opening--editorial-art.guide-opening--pixel .toxicity-symptoms{
    margin:-4px 0 0!important;padding-left:18px!important;
  }
  body .guide-opening--editorial-art.guide-opening--pixel .toxicity-symptoms li{
    margin:1px 0!important;font-size:18px!important;line-height:1.25!important;
  }
  body .site-band--pixel.site-band--north-star>.site-band__copy{padding-top:var(--north-star-copy-top,174px);}
}
body :is(.site-band--pixel.site-band--north-star,.guide-opening--editorial-art.guide-opening--pixel)>:is(.site-band__copy,.guide-opening-copy) h1{
  max-width:none;margin:0;font-size:clamp(40px,4.4vw,64px)!important;line-height:.98;letter-spacing:-.025em;
  text-wrap:balance;overflow-wrap:normal;word-break:normal;hyphens:none;
}
body :is(.site-band--pixel.site-band--north-star,.guide-opening--editorial-art.guide-opening--pixel)>:is(.site-band__copy,.guide-opening-copy) :is(.lede,.reference-lede){
  width:min(510px,80%);max-width:min(510px,80%);margin:0;font-size:19px;line-height:1.5;
}
/* Short landscape tablets are wide enough to expose the full scene but too
   short to use the desktop reading measure. Keep live copy inside the quiet
   left field so headings and ledes do not run into the authored artwork. The
   care hub uses the React band markup; editorial guides use the generated
   opening markup, but both belong to this same responsive contract. */
@media(orientation:landscape) and (min-width:640px) and (max-width:1023px) and (max-height:600px){
  body :is(
    .guide-opening--editorial-art.guide-opening--pixel>.guide-opening-copy,
    .site-band--north-star.guide-opening--care-hub>.site-band__copy
  ){
    width:min(44vw,420px)!important;max-width:min(44vw,420px)!important;
  }
  body :is(
    .guide-opening--editorial-art.guide-opening--pixel>.guide-opening-copy,
    .site-band--north-star.guide-opening--care-hub>.site-band__copy
  ) h1{
    max-width:100%!important;font-size:clamp(34px,4.75vw,44px)!important;
  }
  body :is(
    .guide-opening--editorial-art.guide-opening--pixel>.guide-opening-copy,
    .site-band--north-star.guide-opening--care-hub>.site-band__copy
  ) :is(.lede,.reference-lede){
    width:100%!important;max-width:100%!important;font-size:17px!important;line-height:1.42!important;
  }
}
body .site-band--pixel>.site-band__scrim,
body .guide-opening--editorial-art.guide-opening--pixel::before{
  display:none!important;background:none!important;
}
@media(max-width:700px){
  /* Portrait masters are authored at 9:16. Use that measured canvas as the
     minimum phone height, not a rigid box: ordinary copy stays on the exact
     artwork ratio while a genuinely crowded narrow translation can grow by
     only the space its live text needs. */
  body :is(.site-band--pixel.site-band--north-star,.guide-opening--editorial-art.guide-opening--pixel){width:calc(100% + (2 * var(--site-gutter)));min-height:calc(100vw * 16 / 9)!important;aspect-ratio:auto;}
  body :is(.site-band--pixel.site-band--north-star,.guide-opening--editorial-art.guide-opening--pixel)>:is(.site-band__copy,.guide-opening-copy){
    width:100%;max-width:none;margin:0;padding:112px var(--site-gutter) 44px;gap:8px;background:none;
  }
  body :is(.site-band--pixel.site-band--north-star,.site-band--pixel.site-band--copy-tall-mobile,.guide-opening--editorial-art.guide-opening--pixel)>:is(.site-band__copy,.guide-opening-copy)>*{
    width:72%;max-width:72%;
  }
  body :is(.site-band--pixel.site-band--north-star,.guide-opening--editorial-art.guide-opening--pixel)>:is(.site-band__copy,.guide-opening-copy) h1{
    --hero-heading-min:18px;max-width:none;font-size:clamp(28px,8.75vw,34px)!important;line-height:1;
  }
  body :is(.site-band--pixel.site-band--north-star,.guide-opening--editorial-art.guide-opening--pixel)>:is(.site-band__copy,.guide-opening-copy) :is(.lede,.reference-lede){
    width:80%;max-width:80%;font-size:clamp(16px,4.1vw,17px);line-height:1.35;
  }
  /* Named artwork-safe variants adjust the live copy lane, never the canvas.
     The shared 9:16 portrait is the normal phone height; if a translation
     genuinely needs more room, normal grid min-content sizing may grow the
     opener from its content instead of every page inheriting a fixed slab. */
  body .guide-opening--pixel.guide-opening--copy-tall-mobile>.guide-opening-copy .lede{
    width:92%;max-width:92%;
  }
  body .guide-opening--pixel.guide-opening--copy-narrow-mobile>.guide-opening-copy h1{
    width:72%;max-width:72%;font-size:clamp(27px,7.6vw,34px)!important;
  }
  body .guide-opening--pixel.guide-opening--copy-narrow-mobile>.guide-opening-copy .lede{
    width:68%;max-width:68%;
  }
  /* Every portrait master reserves a quiet upper field for live copy. It is
     therefore shown directly on phones; no family-specific paper panel or
     dark wash is allowed to create a second mobile method. */
  body .site-band--pixel>.site-band__scrim,
  body .guide-opening--editorial-art.guide-opening--pixel::before{background:none!important;}
  body .site-band--pixel.site-band--copy-tall-mobile>.site-band__copy [data-hero-heading-fit]{
    --hero-heading-min:18px;--hero-heading-max-lines:6;
  }
}
/* Named asset-safe reading lane for a mid-page phone scene with long localized
   copy. A single cream reading field and a dedicated artwork row prevent the
   prose or action from covering the subject. The lower row is tall enough to
   show a full paired mascot composition at the source artwork's native scale;
   the whole band may grow with translated copy instead of clipping either
   words or artwork into a fixed-height frame. */
@media(max-width:700px){
  body .site-band--pixel.site-band--mobile-reading-lane{
    display:grid;grid-template-rows:auto clamp(305px,84.5vw,330px);
    min-height:0!important;background:var(--cream);
  }
  body .site-band--pixel.site-band--mobile-reading-lane>picture{
    position:relative;z-index:0;grid-row:2;display:block;width:100%;height:100%;overflow:hidden;
  }
  body .site-band--pixel.site-band--mobile-reading-lane>picture>.site-band__art{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;
  }
  body .site-band--pixel.site-band--mobile-reading-lane>.site-band__copy{
    grid-row:1;width:100%;max-width:none;margin:0;padding:28px var(--site-gutter) 24px;
    gap:10px;background:var(--cream);
  }
  body .site-band--pixel.site-band--mobile-reading-lane>.site-band__copy>*{
    width:100%;max-width:520px;margin-block:0;
  }
  body .site-band--pixel.site-band--mobile-reading-lane>.site-band__copy .site-band__lede{
    padding:0;border:0;background:none;
  }
  body .site-band--pixel.site-band--mobile-reading-lane>.site-band__copy>a{
    width:fit-content!important;max-width:100%!important;min-height:44px;padding:0;
    border:0;background:none;box-shadow:none;
    white-space:normal;text-wrap:balance;overflow-wrap:anywhere;
  }
}
@media(orientation:portrait) and (min-width:701px) and (max-width:1023px){
  body :is(.site-band--pixel.site-band--north-star,.site-band--pixel.site-band--copy-tall-mobile,.guide-opening--editorial-art.guide-opening--pixel){min-height:100svh!important;}
  /* The source portraits are 9:16, but their authored quiet ceiling becomes
     an unhelpful dead field on a portrait tablet. Keep the same live copy and
     image layers, then use a tighter tablet crop; phones retain the native
     portrait slot and desktop keeps its lateral composition. */
  body :is(.site-band--pixel.site-band--north-star,.guide-opening--editorial-art.guide-opening--pixel){
    min-height:0!important;aspect-ratio:4/5;
  }
  body .site-band--pixel.site-band--north-star{--band-focal:50% 100%;}
  /* Some portrait masters deliberately carry removable quiet space above the
     scene. The crop is metadata on the artwork, not a page-family exception:
     keep the image bottom-anchored and shorten only that authored canvas. */
  body .guide-opening--editorial-art.guide-opening--pixel:has(>.guide-opening-photo--mobile-top-crop){min-height:calc(100vw * 1372 / 941)!important;aspect-ratio:941/1372;}
  body :is(.site-band--pixel.site-band--north-star,.site-band--pixel.site-band--copy-tall-mobile,.guide-opening--editorial-art.guide-opening--pixel)>:is(.site-band__copy,.guide-opening-copy)>*{
    width:72%;max-width:72%;
  }
}

body .site-band--seam .site-band__scrim{background:linear-gradient(180deg,rgba(var(--band-forest),0) 0%,rgba(var(--band-forest),0) 30%,rgb(var(--band-forest)) 60%);}
body .site-band--seam .site-band__copy{margin-top:auto;}
body .site-band__copy{position:relative;z-index:2;width:min(100%,calc(var(--band-copy-max) + (2 * var(--site-gutter))));padding:40px var(--site-gutter) 44px;color:var(--band-fg);}
body .site-band__copy>*:last-child{margin-bottom:0;}
body .site-band__lede{max-width:46ch;margin:0 0 18px;color:var(--band-fg-soft);font-size:17px;line-height:1.55;}
body .site-band .lede{color:var(--band-fg-soft);}
body .site-band .site-eyebrow,body .site-band__copy a{color:#34C99A;}
/* Tracked caps eyebrow with its 26px rule. Inherits colour so the same
   component reads on cream and on forest. Authored at 11px on the canvas;
   raised to the website's 13px functional floor. */
body .site-rule-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 14px;color:inherit;font-family:'Jost', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;font-size:13px;font-weight:500;letter-spacing:.16em;line-height:1.3;text-transform:uppercase;}
body .site-rule-eyebrow::before{content:"";width:26px;height:1px;flex:0 0 26px;background:currentColor;}
@media(prefers-reduced-motion:reduce){body .site-press{transition:none;}}
@media(max-width:767px){
  body .site-press{min-height:52px;padding:0 22px;font-size:16px;}
  body .site-ledger--grid .site-ledger__row{display:flex;}
}
@media(min-width:768px){
  body .site-ledger__row{padding:15px 0;}
  /* Wide bands: the copy becomes a ≤700px column and the scrim turns
     directional, holding BAND_SCRIM.wideHold forest to the column's own right
     edge (--band-hold) before it decays into the picture. */
  body .site-band{--band-copy-inset:var(--site-edge);--band-copy-width:min(var(--band-copy-max),58vw);--band-hold:calc(var(--band-copy-inset) + var(--band-copy-width));}
  body .site-band__copy{width:calc(var(--band-copy-inset) + var(--band-copy-width));max-width:100%;padding:clamp(72px,7vw,92px) 56px clamp(64px,6.5vw,84px);padding-left:var(--band-copy-inset);}
  body .site-band__lede{font-size:19px;line-height:1.6;}
  body .site-band__scrim{background:linear-gradient(95deg,rgba(var(--band-forest),.97) 0,rgba(var(--band-forest),.95) calc(var(--band-hold) * .62),rgba(var(--band-forest),.92) var(--band-hold),rgba(var(--band-forest),.45) calc(var(--band-hold) + 190px),rgba(var(--band-forest),.08) calc(var(--band-hold) + 450px),rgba(var(--band-forest),0) calc(var(--band-hold) + 700px));}
  /* Woven bands use an art-matched dark safe zone, so the scrim only steadies
     contrast across locale and tablet reflow. Its curved, low-opacity falloff
     keeps leaf detail present behind and around the copy; it must never become
     the opaque rectangle that manufactures a second, text-only panel. */
  body .site-band--woven>.site-band__scrim:not(.site-band__scrim--head):not(.site-band__scrim--foot){background:radial-gradient(ellipse 70% 90% at 4% 40%,rgba(var(--band-forest),.20) 0%,rgba(var(--band-forest),.12) 60%,rgba(var(--band-forest),.04) 82%,rgba(var(--band-forest),0) 100%);}
  body .site-band--seam .site-band__scrim{background:linear-gradient(180deg,rgba(var(--band-forest),0) 0%,rgba(var(--band-forest),0) 34%,rgb(var(--band-forest)) 64%);}
}
@media(hover:hover) and (pointer:fine){
  body .site-press:hover{transform:translate(2px,2px);box-shadow:var(--press-shadow-hover);}
  body .site-press--compact:hover{box-shadow:var(--press-shadow-compact-hover);}
  body .site-press--inverse:hover,body .site-press--ghost:hover{transform:translate(2px,2px);box-shadow:var(--press-shadow-quiet-hover);}
}
@media(max-width:600px){
  /* Paper pages need breathing room below the solid masthead. Visual openers
     do not: their named ground begins at the document's first pixel while the
     transparent masthead floats over it. Qualify the existing rule here so a
     late generic phone declaration cannot reopen a cream strip above art. */
  body .site-main:not(.site-main--art-open):not(.site-main--forest-open){padding-top:32px;}
  body .site-main h1{font-size:clamp(34px,10vw,44px);}
  body .site-main h2{font-size:clamp(26px,7vw,34px);}
  body .site-split--with-details .site-section-body{display:none;}
  body .site-split--with-details .site-split__inner::after{background:linear-gradient(180deg,var(--field-paper,var(--cream)) 0%,color-mix(in srgb,var(--field-paper,var(--cream)) 96%,transparent) 32%,color-mix(in srgb,var(--field-paper,var(--cream)) 56%,transparent) 43%,color-mix(in srgb,var(--field-paper,var(--cream)) 12%,transparent) 54%,transparent 64%);}
}
@media(min-width:720px){
  body .site-artwork--proof .site-artwork__screen{width:min(100%,var(--proof-screen-desktop));}
  body .site-artwork--proof[data-has-artwork="true"] .site-artwork__screen{width:min(62%,var(--proof-screen-desktop));}
  body .site-story{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.84fr);align-items:center;gap:clamp(58px,8vw,118px);}
  body .site-story[data-reverse="true"]{grid-template-columns:minmax(320px,.84fr) minmax(0,1fr);}
  body .site-story[data-reverse="true"] .site-story__copy{grid-column:2;grid-row:1;}
  body .site-story[data-reverse="true"] .site-artwork{grid-column:1;grid-row:1;}
  body .site-list--checks{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:26px;}
  body .site-cta-band__inner{grid-template-columns:minmax(0,1fr) minmax(300px,.7fr);align-items:end;gap:clamp(48px,8vw,112px);}
  body .site-actions{grid-template-columns:repeat(2,minmax(180px,max-content));justify-content:end;}
}
@media(min-width:1024px){
  body .site-supporting-links--expanded{display:block;}
  body .site-supporting-action{display:none;}
  body .site-split__inner,body .site-split--with-details .site-split__inner{height:clamp(680px,56.25vw,960px);min-height:0;aspect-ratio:auto;}
  body .site-split__inner::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--field-paper,var(--cream)) 0%,color-mix(in srgb,var(--field-paper,var(--cream)) 96%,transparent) 42%,color-mix(in srgb,var(--field-paper,var(--cream)) 34%,transparent) 58%,transparent 72%);pointer-events:none;}
  body .site-split--sage .site-split__inner::after{background:linear-gradient(90deg,var(--sage-wash,#E8EDDF) 0%,color-mix(in srgb,var(--sage-wash,#E8EDDF) 96%,transparent) 42%,color-mix(in srgb,var(--sage-wash,#E8EDDF) 34%,transparent) 58%,transparent 72%);}
  body .site-split__copy{height:100%;width:52%;max-width:none;min-height:0;justify-content:center;padding:clamp(56px,6vw,88px) clamp(48px,6vw,96px) clamp(56px,6vw,88px) max(48px,calc((100vw - 1440px)/2 + 96px));}
  body .site-split--with-details .site-split__copy{width:58%;}
}
@media(min-width:1280px){body{--site-anchor-offset:122px;}}
@media(hover:hover) and (pointer:fine){body .site-button:hover{filter:brightness(.96);}body .site-button--secondary:hover{border-color:var(--emerald-deep,var(--emerald-dark));}}

body .site-main :where(a,button,input,select,summary):focus-visible{outline:2.5px solid var(--focus-ring,var(--emerald-deep,var(--emerald-dark)));outline-offset:3px;}
/* "also called" vernacular-synonym line under the guide lede (audit P2-8) —
   only real, hand-verified second names people actually search. */
.also-called{font-size:13.5px;color:var(--muted);margin:8px 0 20px;font-style:italic;}
/* Display voice — the homepage's register (Homepage.tsx): big, tight tracking,
   and the italic-emerald accent the homepage uses for its ".em" spans, echoed
   here on the binomial subtitle. Bevan ships one static weight (no lighter/
   heavier alternative to choose between, unlike Newsreader's range), so 400
   here is just Bevan's normal face, not a deliberate lightness pick. */
h1{font-weight:400;letter-spacing:-.015em;font-size:clamp(34px,7.5vw,56px);line-height:1.05;}
h1 .sci{color:var(--emerald-dark);font-weight:400;}
h2{font-weight:400;letter-spacing:-.01em;font-size:clamp(24px,5vw,30px);line-height:1.15;}
.lede{color:var(--ink-soft);}
/* Homepage buttons are emerald pills with INK text (Landing .btn --fg:var(--ink))
   — the SEO templates shipped white-on-emerald, a different personality (and
   2.6:1 contrast; ink is ~5:1). The template's own higher-specificity
   .cta-band a:nth-last-child(2) rule keeps the outline secondary cream. */
/* ── Public page-family system ────────────────────────────────────────────
   The homepage established the visual direction; these rules carry it into
   every generated family. They intentionally load last so older template-local
   card treatments cannot become a second design truth. */
body{font-size:16px;line-height:1.68;}
.site-main{padding-block:clamp(28px,4.5vw,54px) clamp(84px,10vw,124px);}
body .site-main--visual:not(.site-main--art-open){padding-top:8px;}
.verify,.byline,.dateline,.count{font-size:14px;line-height:1.55;}
.verify a,.byline a{display:inline-flex;min-height:44px;align-items:center;vertical-align:middle;}
.guide-link,.list-toggle,.country-rank-link{min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
.faq details{padding:6px 0;}
.faq summary{min-height:56px;padding:10px 0;font-size:16px;}
/* One dark, useful footer shared by every generated page. */
/* The generated footer runs on the forest ground, so the wordmark takes the
   dark-surface emerald. Brand emerald #047857 measures 3.1:1 on #0C2017 and
   fails AA — the "never #06A678 as text on cream" rule, mirrored on dark. */

/* Reading rhythm: authored article, not a stack of boxed modules. */
.site-main--reading{max-width:820px;}
.site-main--reading>h2,.chapter-reading>h2{margin-top:54px;padding-top:20px;border-top:1px solid var(--hair);}
.site-main--reading>p,.site-main--reading>ol,.site-main--reading>ul,.chapter-reading>p{font-size:17px;line-height:1.72;}
.site-main--reading>p{max-width:66ch;}
.verify{padding-block:18px;border-block:1px solid var(--hair);background:transparent;border-radius:0;}
.chapter-reading--apps{counter-reset:app-review;}
.chapter-reading--apps>.app{counter-increment:app-review;position:relative;padding:34px 0 42px;border-top:1px solid var(--hair);}
.chapter-reading--apps>.app::before{content:counter(app-review,decimal-leading-zero);display:block;margin-bottom:10px;color:var(--emerald-dark);font-size:12px;font-weight:700;letter-spacing:.18em;}
.chapter-reading--apps>.app h3{font-family:var(--serif);font-size:clamp(28px,4vw,38px);font-weight:400;line-height:1;}
.chapter-reading--apps>.app .best{max-width:56ch;margin-top:10px;font-size:16px;line-height:1.55;}
.chapter-reading--apps>.app .proscons{gap:clamp(28px,5vw,56px);margin-top:24px;}
.chapter-reading--apps>.app .proscons h4{padding-bottom:10px;border-bottom:1px solid var(--hair);}
.chapter-reading--apps>.app p,.chapter-reading--apps>.app li{font-size:16px;line-height:1.65;}
.chapter-reading--apps>.app .src{font-size:13px;line-height:1.5;overflow-wrap:anywhere;}
.chapter-reading--apps .proscons,.chapter-reading--apps .proscons .col{min-width:0;max-width:100%;}
.chapter-reading--apps .proscons ul{overflow-wrap:anywhere;}
.chapter-reading--press .boiler{padding:24px 0;border:0;border-block:1px solid var(--hair);border-radius:0;background:transparent;font-size:16px;line-height:1.65;}
.chapter-reading--press .naming{padding:18px 0;border-bottom:1px solid var(--hair);font-size:16px;line-height:1.6;}
/* Buttons here, so override the base text-link box (no side padding, bottom border only). */
.fallback-link{padding:11px 22px;border:1px solid currentColor;border-radius:14px;}
.fallback-link--primary{border-color:#214329;background:#214329;color:#FBF8F1;}

/* Plant articles use one category-art opener and one species-evidence module.
   The React homepage and static generator may render different content, but
   page-family composition is owned here so late shared CSS cannot recreate an
   older split hero. */
.guide-evidence{
  width:min(1180px,calc(100vw - (2 * var(--site-gutter))));
  margin-left:50%;transform:translateX(-50%);
}

/* Exact-photo opener families keep one real species photograph in that shared
   opening. Care guides are the deliberate exception: their family art opens
   the page and the same shared evidence primitive places the exact photograph
   once beside the first facts. */
.guide-evidence--symptom{
  align-items:stretch;
}
.guide-evidence--symptom .care-essentials{grid-template-columns:minmax(0,1fr);gap:10px;align-content:center;}
.guide-evidence--symptom .care-essential{min-height:0;}
/* Long explanations belong directly after the image-led answer, not over its
   subject. This shared transition is available to any family whose hero needs
   one compact decision followed by supporting prose. It stays on the page's
   paper ground and keeps the same left edge as the hero copy. */
body .site-main .guide-opening:has(+.guide-opening-followup){margin-bottom:0;}
body .site-main .guide-opening-followup{
  width:100vw;max-width:none;margin:0 0 0 50%;transform:translateX(-50%);
  padding:clamp(28px,4vw,44px) 0;border-bottom:1px solid var(--hair);
}
body .site-main .guide-opening-followup__inner{
  width:min(1328px,calc(100vw - (2 * var(--site-gutter))));margin-inline:auto;
}
body .site-main .guide-opening-followup__inner>*{max-width:760px;}
body .site-main .guide-opening-followup__inner>p{margin:0;color:var(--ink-soft);font-size:clamp(17px,1.6vw,20px);line-height:1.65;}
body .site-main .guide-opening-followup__inner>.toxicity-symptoms{margin:18px 0 0;}
.guide-opening-product{max-width:48ch;margin-top:24px;padding-top:20px;border-top:1px solid var(--hair);}
.guide-opening-product-brand{margin:0 0 8px!important;color:var(--emerald-dark)!important;font-size:11px!important;font-weight:760;line-height:1.2!important;letter-spacing:.15em;text-transform:uppercase;}
body .site-main .guide-opening-product .guide-opening-action{margin-top:16px;}
.guide-opening-product--stores{max-width:49ch;margin-top:22px;padding-top:18px;}
.guide-opening-product--stores .guide-opening-product-brand{display:flex;align-items:center;gap:9px;margin-bottom:10px!important;color:var(--brand-color)!important;font-family:var(--brand-font);font-weight:var(--brand-weight);letter-spacing:var(--brand-tracking);text-transform:var(--brand-transform);}
.guide-opening-product--stores .guide-opening-product-brand img{width:28px;height:28px;display:block;flex:none;}
.guide-opening-product-title{margin:0 0 5px!important;color:var(--ink)!important;font-size:16px!important;font-weight:700;line-height:1.35!important;}
.guide-opening-store-actions{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-top:15px;}
.guide-opening-store-actions .store-badge{position:relative;min-width:0;min-height:48px;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;padding:0;border:0;border-radius:0;background:transparent;color:inherit;}
.guide-opening-store-actions .store-badge img{position:absolute;display:block;width:auto;max-width:none;}
.guide-opening-store-actions .store-badge--apple{width:132px;height:48px;}
.guide-opening-store-actions .store-badge--apple img{top:2px;left:0;height:44px;}
.guide-opening-store-actions .store-badge--play{width:148px;height:48px;}
.guide-opening-store-actions .store-badge--play img{top:-8.75px;left:-10.75px;height:65.5px;}
.guide-opening-store-actions .store-badge:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px;}
body .site-main .guide-opening--safety .guide-opening-copy h2{border-color:var(--hair);color:var(--warn);}
.site-main--reading>.guide-intro{max-width:66ch;margin:-20px 0 36px;color:var(--ink-soft);font-size:clamp(17px,1.6vw,20px);line-height:1.65;}
.guide-evidence{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);gap:clamp(28px,4.5vw,58px);align-items:stretch;margin-top:0;margin-bottom:58px;}
.guide-evidence--summary{grid-template-columns:minmax(0,1fr);max-width:1040px;}
body .site-main .guide-evidence .facts{align-content:center;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px;margin:0;padding:10px 0;border-block:1px solid var(--hair);border-radius:0;background:transparent;}
.guide-evidence .fact{min-width:0;padding:15px 0;border:0;border-bottom:1px solid var(--hair);background:transparent;border-radius:0;}
.guide-evidence .fact:nth-last-child(-n+2){border-bottom:0;}
.guide-evidence .fact-label{margin:0 0 3px;color:var(--muted);font-size:13px;font-weight:600;line-height:1.35;letter-spacing:.06em;text-transform:uppercase;overflow-wrap:anywhere;}
.guide-evidence--propagation{align-items:center;}
.guide-evidence--propagation .care-essentials{
  align-content:center;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px;
  border-block:1px solid var(--hair);
}
.guide-evidence--propagation .care-essential{
  min-height:112px;padding:21px 8px 20px 48px;border:0;border-bottom:1px solid var(--hair);border-radius:0;background:transparent;
}
.guide-evidence--propagation .care-essential:nth-last-child(-n+2){border-bottom:0;}
.guide-evidence--propagation .care-symbol{top:20px;left:0;width:34px;height:34px;border-radius:0;background:transparent;}
.guide-evidence--propagation .care-symbol svg{width:23px;height:23px;}
.care-essentials{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) minmax(0,1.18fr) minmax(0,.84fr);
  gap:12px;margin:0;padding:0;
}
.care-essentials--article{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}
.guide-evidence--article{max-width:1040px;margin-top:0;}
.care-essential{
  position:relative;display:block;min-width:0;min-height:128px;padding:19px 18px 19px 73px;
  border:1px solid color-mix(in srgb,var(--emerald) 13%,var(--hair));
  border-radius:16px;background:color-mix(in srgb,var(--sage-wash) 72%,var(--paper));
}
.care-essential.is-warn{border-color:color-mix(in srgb,var(--warn) 24%,var(--hair));background:color-mix(in srgb,var(--warn) 5%,var(--paper));}
.care-symbol{
  position:absolute;top:19px;left:18px;display:grid;width:42px;height:42px;place-items:center;border-radius:50%;
  background:color-mix(in srgb,var(--paper) 82%,white);color:var(--emerald-dark);
}
.care-essential.is-warn .care-symbol{color:var(--warn-deep);}
.care-symbol svg{width:21px;height:21px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;}
.care-symbol svg.is-filled{fill:currentColor;stroke:none;}
.care-essential dt{margin:1px 0 7px;color:var(--muted);font-size:13px;font-weight:650;line-height:1.3;letter-spacing:.025em;overflow-wrap:anywhere;hyphens:auto;}
.care-essential dd{margin:0;color:var(--ink);font-size:16px;font-weight:650;line-height:1.4;overflow-wrap:anywhere;}
.care-essential dd.warn{color:var(--warn-deep);}
.care-essential dd.safe{color:var(--emerald-dark);}
.care-essential--water dd{display:grid;gap:7px;}
.care-season{display:block;font-weight:600;}
.care-season>span{display:block;margin-bottom:2px;color:var(--muted);font-size:13px;font-weight:650;line-height:1.3;letter-spacing:.025em;}

/* Care instruments are explanations, not dashboard charts. Watering has only
   two discrete seasonal values, so it stays a typographic comparison rather
   than inventing a scale. Other diagrams use the same values printed beside
   them, and all words stay in HTML so long locales can wrap. */
.care-water-cadence{max-width:720px;margin:24px 0 28px;}
.care-water-cadence{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,5vw,56px);}
.care-water-cadence__item{min-width:0;}
.care-water-cadence__season{color:var(--muted);font-size:13px;font-weight:650;line-height:1.3;letter-spacing:.025em;overflow-wrap:anywhere;}
.care-water-cadence__value{margin:4px 0 0;color:var(--ink);font-size:17px;font-weight:650;line-height:1.35;overflow-wrap:anywhere;}

/* Decision studies explain the physical setup; the plant-specific numbers and
   instruction remain live beside them. Mobile gets the study at the full
   viewport width so its useful forms survive instead of becoming a thumbnail. */
.care-decision{display:grid;gap:20px;}
.care-decision-study{
  min-width:0;margin:0;overflow:hidden;aspect-ratio:960/534;
  border:1px solid var(--hair);border-radius:20px;background:var(--cream);
}
.care-decision-study__image{display:block;width:100%;height:100%;object-fit:cover;}
.care-decision__copy{min-width:0;}
.care-decision__copy>p:first-child{margin-top:0;}
.care-decision__copy>p:last-child{margin-bottom:0;}
@media(min-width:700px){
  .care-decision--with-study{
    grid-template-columns:minmax(250px,.82fr) minmax(0,1.18fr);
    gap:clamp(22px,3vw,34px);align-items:start;
  }
}

/* Feeding, temperature and humidity are short decisions, not sparse prose
   floating in a wide column. The icons label the live rows without creating a
   decorative illustration or another card stack. */
.care-brief-list{display:grid;gap:0;border-block:1px solid var(--hair);}
.care-brief-note{
  display:grid;grid-template-columns:42px minmax(0,1fr);gap:16px;
  align-items:start;padding:18px 0;
}
.care-brief-note+.care-brief-note{border-top:1px dotted var(--line);}
.care-brief-note__icon{
  display:grid;width:42px;height:42px;place-items:center;border-radius:50%;
  background:color-mix(in srgb,var(--sage-wash) 74%,var(--paper));color:var(--emerald-dark);
}
.care-brief-note__icon svg{
  width:21px;height:21px;overflow:visible;fill:none;stroke:currentColor;
  stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;
}
.care-brief-note p{max-width:68ch;margin:0;color:var(--ink-soft);font-size:16px;line-height:1.65;}

/* Propagation recipes use reusable imagegen-authored field plates rather than
   plant-specific artwork. Numbers, progression, and the water/soil fork remain
   live interface elements; nearby HTML is still the source of truth. */
.prop-recipe{
  display:block;max-width:720px;margin:0 0 26px;overflow:hidden;
  border:1px solid var(--hair);border-radius:24px;background:var(--cream);
}
.prop-recipe__viewport{display:block;overflow:hidden;}
.prop-recipe__plate{
  position:relative;display:block;width:100%;aspect-ratio:1440/529;background:var(--cream);
}
.prop-recipe__image{display:block;width:100%;height:auto;aspect-ratio:1440/529;object-fit:cover;}
.prop-recipe__steps{
  position:absolute;z-index:1;inset:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
}
.prop-recipe__stage{
  position:relative;min-width:0;
}
.prop-recipe__stage::before{
  content:attr(data-step-label);position:absolute;top:10px;left:10px;display:grid;min-width:28px;height:28px;
  place-items:center;padding-inline:7px;border:1px solid color-mix(in srgb,var(--paper) 72%,transparent);
  border-radius:999px;background:var(--emerald-dark);color:var(--paper);
  box-shadow:0 3px 9px color-mix(in srgb,var(--ink) 13%,transparent);
  font-size:10px;font-weight:750;letter-spacing:.02em;line-height:1;white-space:nowrap;
}
.prop-recipe__stage:not(:last-child)::after{
  content:"→";position:absolute;z-index:2;top:54%;right:-11px;display:grid;width:22px;height:22px;
  place-items:center;border:1px solid var(--hair);border-radius:50%;background:var(--paper);color:var(--emerald-dark);
  font-size:13px;line-height:1;transform:translateY(-50%);
}
.prop-recipe__fork{
  position:absolute;z-index:2;top:18%;left:50%;display:block;width:40px;height:24px;
  color:var(--emerald-dark);opacity:.78;transform:translateX(-50%);
}
.prop-recipe__fork::before{
  content:"";position:absolute;top:0;left:19px;width:2px;height:9px;border-radius:99px;background:currentColor;
}
.prop-recipe__fork span::before,.prop-recipe__fork span::after{
  content:"";position:absolute;top:8px;width:22px;height:2px;border-radius:99px;background:currentColor;
}
.prop-recipe__fork span::before{left:19px;transform:rotate(31deg);transform-origin:left center;}
.prop-recipe__fork span::after{right:19px;transform:rotate(-31deg);transform-origin:right center;}
/* A care guide only previews its separate propagation article. The complete
   recipe belongs on that linked page, so this whole card is one quiet action:
   a compact visual premise and a literal invitation, never a second how-to. */
body .site-main .guide-propagation__teaser{
  display:block;max-width:720px;overflow:hidden;border:1px solid var(--hair);
  border-radius:20px;background:var(--card);color:var(--ink);text-decoration:none;
}
body .site-main .guide-propagation__teaser .prop-recipe{
  max-width:none;margin:0;border:0;border-radius:0;background:var(--cream);
}
body .site-main .guide-propagation__teaser .prop-recipe__viewport{
  overflow:hidden;mask-image:none;-webkit-mask-image:none;scroll-snap-type:none;
}
body .site-main .guide-propagation__teaser .prop-recipe__plate{width:100%;}
body .site-main .guide-propagation__action{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;
  min-height:60px;padding:13px 18px;border-top:1px solid var(--hair);
  color:var(--emerald-dark);font-size:16px;font-weight:700;line-height:1.35;
}
body .site-main .guide-propagation__action>span:last-child{font-size:20px;font-weight:400;}
body .site-main .guide-propagation__teaser:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px;}
@media(hover:hover) and (pointer:fine){
  body .site-main .guide-propagation__teaser:hover{border-color:var(--emerald-dark);}
  body .site-main .guide-propagation__teaser:hover .guide-propagation__action{background:color-mix(in srgb,var(--sage-wash) 62%,var(--paper));}
}
.guide-jump-nav{width:100%;margin-top:20px;padding-top:17px;border-top:1px solid var(--hair);}
.guide-jump-nav__label{margin:0 0 9px;color:var(--muted);font-size:11px;font-weight:700;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;}
.guide-jump-nav__links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block:1px solid var(--hair);}
.guide-jump-nav a{
  position:relative;min-width:0;min-height:58px;display:grid;grid-template-columns:24px minmax(0,1fr) 16px;gap:9px;align-items:center;
  padding:8px 14px;border:0;border-right:1px solid var(--hair);border-radius:0;color:var(--emerald-dark);
  font-size:13.5px;font-weight:700;line-height:1.3;text-decoration:none;transition:background-color .18s,color .18s;
}
.guide-jump-nav a:last-child{border-right:0;}
.guide-jump-nav__icon{display:grid;width:24px;height:24px;place-items:center;color:var(--emerald-dark);}
.guide-jump-nav__icon svg{width:19px;height:19px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.guide-jump-nav__icon svg.is-filled{fill:currentColor;stroke:none;}
.guide-jump-nav__text{min-width:0;overflow-wrap:anywhere;}
.guide-jump-nav__arrow{font-size:15px;font-weight:500;text-align:right;transition:transform .18s;}
/* On a phone a fixed 4-up grid gives each chip ~93px, which shatters long
   localized labels character-by-character ("Temperatur & Luftfeuchtigkeit" in
   de, and worse in el/fi/uk). Two columns give each chip room for its whole
   word so nothing breaks mid-word; the internal rules keep the boxed look. */
@media(max-width:640px){
  .guide-jump-nav__links{grid-template-columns:repeat(2,minmax(0,1fr));}
  .guide-jump-nav a{border-right:1px solid var(--hair);grid-template-columns:22px minmax(0,1fr);gap:8px;padding:10px 12px;}
  .guide-jump-nav a:nth-child(2n){border-right:0;}
  .guide-jump-nav a:nth-child(n+3){border-top:1px solid var(--hair);}
  .guide-jump-nav__text{overflow-wrap:break-word;hyphens:auto;}
}
@media(hover:hover) and (pointer:fine){
  .guide-jump-nav a:hover{background:color-mix(in srgb,var(--sage-wash) 72%,transparent);}
  .guide-jump-nav a:hover .guide-jump-nav__arrow{transform:translateY(2px);}
}
.country-rank-link--quiet{min-height:44px;margin:0 0 10px;padding:0;border:0;border-radius:0;background:transparent;text-decoration:underline;text-underline-offset:4px;}

.care-chapter{scroll-margin-top:var(--site-anchor-offset);}
.care-chapter--problems .problems{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;border:0;}
.care-chapter--problems .prob,.care-chapter--problems .prob:last-child{
  min-width:0;overflow:hidden;padding:0;border:1px solid var(--hair);border-radius:24px;background:var(--card);
}
.care-chapter--problems .prob+.prob{padding:0;border:1px solid var(--hair);}
.care-chapter--problems .prob-illustration{
  display:block;overflow:hidden;aspect-ratio:960/534;border-bottom:1px solid var(--hair);
  background:var(--cream);
}
.care-chapter--problems .prob-illustration__image{display:block;width:100%;height:100%;object-fit:cover;}
.care-chapter--problems .prob-content{padding:22px 24px 24px;}
.care-chapter--problems .prob h3{display:flex;align-items:center;gap:10px;margin:0 0 16px;}
.care-chapter--problems .prob-symbol{flex:0 0 auto;display:inline-flex;}
.care-chapter--problems .prob-symbol svg{width:20px;height:20px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.care-chapter--problems .prob p{margin:0 0 12px;font-size:16px;line-height:1.5;}
.care-chapter--problems .prob p.prob-watch{margin:0 0 12px;font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;}
/* "Watch for" signs are facts to scan, not tiles to click — a list of
   FACTS, so it takes the site's existing dotted-rule fact-row idiom (the
   same recipe .tpl-spine's own "prob-signs" quiet line and .tpl-ledger
   already use) instead of the boxed grid this was until 2026-08-07: every
   sign had its own bordered, near-square tile, four to a row, which read as
   a small spreadsheet of one-word cells — the founder's own words for it
   were "boring list, looks like Excel". Restraint and alignment, not boxes. */
.care-chapter--problems .prob-signs{
  display:block;margin:0 0 18px;padding:0;list-style:none;
}
.care-chapter--problems .prob-signs li{
  display:flex;align-items:center;gap:10px;padding:9px 0;
  border:0;border-top:1px dotted var(--hair);font-size:16px;line-height:1.35;
}
.care-chapter--problems .prob-signs li:first-child{border-top:0;padding-top:0;}
.care-chapter--problems .prob-signs li::before{
  content:"";flex:0 0 auto;width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.6;
}
.care-chapter--problems .prob-advice{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--hair);color:var(--ink-soft);}
.care-chapter--pet h2{max-width:18ch;margin:0 0 18px;font-size:clamp(28px,3vw,38px);line-height:1.08;}
.care-chapter--pet .pet-alts{max-width:62ch;margin:0 0 24px;font-size:16px;line-height:1.6;}
.care-chapter--pet .pet-alts__lead{margin:0 0 12px;color:var(--ink-soft);}
.care-chapter--pet .pet-alt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 12px;}
body .site-main .care-chapter--pet .pet-alts .pet-alt{
  position:relative;min-width:0;min-height:72px;display:grid;grid-template-columns:52px minmax(0,1fr);
  gap:10px;align-items:center;padding:9px;border:1px solid var(--hair);border-radius:14px;
  background:var(--card);color:var(--ink);font-weight:650;line-height:1.3;text-decoration:none;
}
.care-chapter--pet .pet-alt::after{content:"→";position:absolute;right:10px;color:var(--emerald-dark);font-size:17px;}
.care-chapter--pet .pet-alt__image{display:block;width:52px;height:52px;object-fit:cover;border-radius:9px;background:var(--sage-wash);}
.care-chapter--pet .pet-alt__name{min-width:0;padding-right:22px;overflow-wrap:anywhere;}
.care-chapter--pet .pet-alt__punctuation{display:none;}
.care-chapter--pet .verify{max-width:66ch;margin:0;padding:20px 0;border-top:1px solid var(--hair);border-bottom:0;font-size:14px;line-height:1.65;}
/* These remain plain editorial links, not pills. Their hit areas are still a
   real 44px high target on touch screens, including the short ASPCA source
   link and each pet-safe alternative. */
body .site-main .care-chapter--pet :is(.pet-alts,.verify) a{
  display:inline-block;box-sizing:border-box;min-height:44px;max-width:100%;
  padding-block:10px;vertical-align:middle;overflow-wrap:anywhere;
}
@media(hover:hover) and (pointer:fine){
  .care-chapter--pet .pet-alt:hover{border-color:var(--emerald-dark);}
}


/* The app decision page may close with one full-width install chapter. Other
   generated pages use the shared footer as their sole generic install ask. */
.cta-band{
  display:flex;flex-direction:column;gap:16px;
  width:100vw;max-width:none;
  margin:64px 0 72px 50%;
  padding:clamp(42px,6vw,72px) clamp(24px,6vw,72px);
  transform:translateX(-50%);
  border:0!important;border-radius:0!important;outline:0!important;
  background:#0C2017;color:#EFE8D6;
}
.cta-band h3{max-width:14ch;margin:0;color:#EFE8D6;font-family:var(--serif);font-size:clamp(34px,5vw,58px);font-weight:400;line-height:1;}
.cta-band p{max-width:52ch;margin:0;color:#B9C4B4;font-size:16px;line-height:1.6;}
.cta-band a{align-self:flex-start;min-height:48px;padding:13px 24px;border-radius:0;background:var(--emerald);color:#0F2A1F;font-weight:600;text-decoration:none;}
/* Explanations and choices use ruled editorial rows instead of card stacks. */
.problems,.choose{gap:0;}
.prob,.choose-card{padding:24px 0;border:0;border-top:1px solid var(--hair);border-radius:0;background:transparent;box-shadow:none;}
.prob:last-child,.choose-card:last-child{border-bottom:1px solid var(--hair);}
.problems .prob h3,.choose-card h3{font-size:24px;}
.choose-thumb{border-radius:0;}
.sym-chips{gap:8px 10px;}

/* Symptom causes are a diagnostic sequence, not a card gallery. Give the
   evidence the same wide editorial measure as the opener and specimen, then
   pair each cause with its signs and remedy in one scannable ruled row. */
.symptom-causes-section{
  width:min(1180px,calc(100vw - (2 * var(--site-gutter))));
  margin:56px 0 0 50%;transform:translateX(-50%);
}
body .site-main .symptom-causes-section>h2{max-width:760px;margin:0 0 18px;}
.problems.sym-causes{
  display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin:0;
  counter-reset:symptom-cause;border-block:1px solid var(--hair);
}
.problems.sym-causes .prob{
  position:relative;display:grid;grid-template-columns:minmax(210px,.72fr) minmax(0,1.28fr);
  gap:clamp(28px,4vw,64px);counter-increment:symptom-cause;
  min-height:0;padding:28px 0 28px 58px;border:0;border-radius:0;background:transparent;box-shadow:none;
}
.problems.sym-causes .prob+.prob{border-top:1px solid var(--hair);}
.problems.sym-causes .prob::before{
  content:counter(symptom-cause,decimal-leading-zero);position:absolute;top:34px;left:0;
  color:var(--emerald-dark);font-size:12px;font-weight:760;letter-spacing:.1em;line-height:1;
}
body .site-main .problems.sym-causes .prob h3{margin:0;font-size:clamp(22px,2.1vw,28px);line-height:1.14;}
body .site-main .problems.sym-causes .prob p{margin:0;color:var(--ink-soft);font-size:16px;line-height:1.65;}
.problems.sym-causes .prob strong{color:var(--ink);font-weight:700;}

/* Tables remain real tables on wide screens and calm labeled ledgers on phone. */
.cmp-wrap,.result-group{border:0;border-radius:0;background:transparent;box-shadow:none;}
.cmp th,.cmp td,.pt th,.pt td{border-color:var(--hair);}
.result-group{margin-top:52px;}

/* Shared chapter primitives: the press photo scene and the reading measure. */
.chapter-visual{border-radius:0;}
.chapter-reading{max-width:840px;margin-inline:auto;}

@media(min-width:701px) and (max-width:900px){
  .care-essentials{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media(max-width:700px){
  /* 13px floor for functional supporting copy on a phone; these labels are
     authored at 11-12px, which reads fine on a desktop canvas but not in a hand. */
  .guide-jump-nav__label,.guide-opening-product-brand{font-size:13px!important;}
  .site-main--reading>h2,.chapter-reading>h2{margin-top:44px;padding-top:16px;}
  .site-main--reading>p,.site-main--reading>ol,.site-main--reading>ul,.chapter-reading>p{font-size:16px;line-height:1.68;}
  .site-main--reading li,.chapter-reading li{font-size:16px;line-height:1.65;}
  .chapter-reading--apps .tablewrap tbody{gap:0;}
  .chapter-reading--apps .tablewrap tr{padding:0 0 18px;border:0;border-top:1px solid var(--hair);border-radius:0;background:transparent;}
  .chapter-reading--apps .tablewrap tr.us{border-color:var(--emerald-dark);background:color-mix(in srgb,var(--emerald) 7%,transparent);}
  .chapter-reading--apps .tablewrap tbody th{padding:18px 0 12px;}
  .chapter-reading--apps>.app{padding:30px 0 38px;}
  /* A paper opener still gets a small breathing space. Art-open pages do not:
     their approved scene begins at the document edge beneath the over-art
     masthead, exactly like the homepage. Keeping the exclusion here prevents
     this late canvas rule from reopening an 8px cream seam. */
  body .site-main--visual:not(.site-main--art-open){padding-top:8px;}
  .guide-opening{width:100vw;max-width:none;margin-left:50%;transform:translateX(-50%);}
  .guide-evidence{width:calc(100% + (2 * var(--site-gutter)));margin-left:calc(0px - var(--site-gutter));transform:none;}
  .guide-opening{min-height:clamp(500px,68vh,560px);min-height:clamp(500px,68svh,560px);height:auto;aspect-ratio:auto;margin-top:0;margin-bottom:32px;align-items:start;border-radius:0;}
  .category-art img{object-position:center 58%;}
  /* Every mobile opener rule that used to live here described the retired split
     hero — a container scrim, a copy block with its own paper gradient, and the
     symptom page's separate art band. The composition is now one band for every
     family (bandOpenerCss), which reserves the subject's own zone instead of
     fading a container, so a family cannot need any of it. */
  .guide-opening-kicker{margin-bottom:14px;}
  body .site-main .guide-opening-copy h1{max-width:calc(100vw - (2 * var(--site-gutter)));margin-bottom:20px;font-size:clamp(36px,9vw,46px);line-height:.98;}
  body .site-main .guide-opening-copy h1>i{display:block;max-width:18ch;margin-top:10px;font-family:'Bevan', Georgia, 'Times New Roman', serif;font-size:20px;font-weight:400;line-height:1.2;letter-spacing:0;}
  body .site-main .guide-opening-copy .lede{max-width:38ch;font-size:17px;line-height:1.55;}
  body .site-main .guide-opening-action{width:100%;max-width:360px;margin-top:22px;}
  .guide-opening-product--stores{max-width:38ch;margin-top:17px;padding-top:15px;}
  .guide-opening-store-actions{flex-wrap:nowrap;gap:7px;margin-top:12px;}
  .guide-opening-store-actions .store-badge--apple{width:124px;height:46px;}
  .guide-opening-store-actions .store-badge--apple img{top:2px;height:42px;}
  .guide-opening-store-actions .store-badge--play{width:139px;height:46px;}
  .guide-opening-store-actions .store-badge--play img{top:-7.5px;left:-10px;height:61px;}
  body .site-main .guide-opening--toxicity .guide-opening-copy h2{max-width:24ch;font-size:19px;}
  .site-main--reading>.guide-intro{margin:-10px 0 30px;font-size:17px;line-height:1.68;}
  .guide-evidence{grid-template-columns:minmax(0,1fr);gap:20px;margin-bottom:48px;}
  .guide-evidence--symptom{gap:18px;}
  .guide-evidence--symptom .care-essentials{width:auto;margin-inline:var(--site-gutter);}
  /* The card keeps two readable facts per row on a normal phone. The
     component container query above moves only truly narrow records to one. */
  body .site-main .guide-facts-card{padding:14px 16px;}
  body .site-main .guide-facts-card__grid{column-gap:16px;}
  body .site-main .guide-facts-card__row{padding:11px 0;}
  body .site-main .guide-facts-card__row dt{margin:0 0 4px;font-size:13px;line-height:1.3;}
  body .site-main .guide-evidence .facts{width:auto;grid-template-columns:minmax(0,1fr);gap:0;margin-inline:var(--site-gutter);padding:0;}
  .guide-evidence .fact,.guide-evidence .fact:nth-last-child(-n+2){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:18px;padding:15px 0;border-bottom:1px solid var(--hair);}
  .guide-evidence .fact:last-child{border-bottom:0;}
  .symptom-causes-section{width:auto;margin-top:50px;margin-left:0;transform:none;}
  body .site-main .symptom-causes-section>h2{margin-bottom:14px;}
  .problems.sym-causes .prob{grid-template-columns:minmax(0,1fr);gap:8px;padding:22px 0 22px 40px;}
  .problems.sym-causes .prob::before{top:28px;left:0;}
  body .site-main .problems.sym-causes .prob h3{font-size:22px;}
  body .site-main .problems.sym-causes .prob p{font-size:16px;line-height:1.65;}
  .guide-evidence .fact-label{margin:0;font-size:13px;line-height:1.35;letter-spacing:.08em;}
  .guide-evidence--propagation{gap:26px;margin-bottom:46px;}
  .guide-evidence--propagation .care-essentials{grid-template-columns:minmax(0,1fr);gap:0;margin-inline:var(--site-gutter);}
  .guide-evidence--propagation .care-essential{min-height:0;padding:17px 4px 17px 46px;border-bottom:1px solid var(--hair);}
  .guide-evidence--propagation .care-essential:last-child{border-bottom:0;}
  .guide-evidence--propagation .care-essential:nth-last-child(2){border-bottom:1px solid var(--hair);}
  .guide-evidence--propagation .care-symbol{top:15px;}
  .care-essentials{grid-template-columns:minmax(0,1fr);gap:9px;margin:0;}
  .care-essential{min-height:0;padding:15px 16px 15px 69px;border-radius:14px;}
  .care-symbol{top:15px;left:16px;width:40px;height:40px;}
  .care-essential dt{margin-bottom:4px;font-size:13px;}
  .care-essential dd{font-size:16px;}
  .care-essential--water dd{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;}
  .guide-jump-nav{margin-top:17px;padding-top:15px;}
  .care-water-cadence{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:20px;}
  body .site-main--care-guide>.tpl-chapter>.tpl-chapter__inner{
    width:calc(100% - (2 * var(--site-gutter)));
  }
  .care-decision-study{
    width:auto;margin-inline:calc(0px - var(--site-gutter));
    border-inline:0;border-radius:0;
  }
  .care-brief-note{grid-template-columns:38px minmax(0,1fr);gap:13px;padding:16px 0;}
  .care-brief-note__icon{width:38px;height:38px;}
  .prop-recipe{border-radius:19px;}
  .prop-recipe__viewport{
    overflow-x:auto;overscroll-behavior-inline:contain;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 42px),transparent 100%);
    mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 42px),transparent 100%);
  }
  .prop-recipe__viewport::-webkit-scrollbar{display:none;}
  /* Keep the studies legible, but deliberately reveal the next numbered stage
     so the continuation reads as a swipeable sequence rather than a crop. */
  .prop-recipe__plate{width:max(640px,calc(100% + 48px));}
  .prop-recipe__stage{scroll-snap-align:start;}
  .prop-recipe__stage::before{top:8px;left:8px;min-width:26px;height:26px;padding-inline:6px;font-size:9.5px;}
  .prop-recipe__fork{top:17%;}
  body .site-main .guide-propagation__teaser{border-radius:16px;}
  body .site-main .guide-propagation__teaser .prop-recipe__viewport{
    overflow:hidden;mask-image:none;-webkit-mask-image:none;scroll-snap-type:none;
  }
  body .site-main .guide-propagation__teaser .prop-recipe__plate{width:100%;}
  body .site-main .guide-propagation__action{min-height:56px;padding:12px 15px;font-size:15px;}
  .care-chapter--problems .problems{grid-template-columns:minmax(0,1fr);gap:0;}
  .care-chapter--problems .prob,.care-chapter--problems .prob:last-child{
    overflow:visible;padding:0;border:0;border-radius:0;background:transparent;
  }
  .care-chapter--problems .prob+.prob{margin-top:2px;padding-top:28px;border:0;border-top:1px solid var(--hair);}
  .care-chapter--problems .prob-illustration{border:0;border-radius:14px;}
  .care-chapter--problems .prob-content{padding:18px 0 30px;}
  .care-chapter--pet h2{font-size:30px;}
  .care-chapter--pet .pet-alt-grid{grid-template-columns:minmax(0,1fr);gap:8px;}
  .care-chapter--pet .pet-alt{min-height:68px;grid-template-columns:50px minmax(0,1fr);padding:8px;}
  .care-chapter--pet .pet-alt__image{width:50px;height:50px;}
  .cta-band{width:100vw;margin:54px 0 62px 50%;padding:42px 24px;}
  .guide-opening-product{margin-top:22px;padding-top:18px;}
  body .site-main .guide-opening-product .guide-opening-action{max-width:none;margin-top:15px;}
  /* The retired phone treatment for the collection index used to live here: one
     column, an 84px square thumbnail beside the copy, "a generous horizontal
     reading row". §7d replaced it with the shared portrait plate, and this
     block was left behind — where it did real damage rather than nothing,
     because the two halves lost to §7d on different specificities. §7d's grid
     rule is (0,2,1) and this one was (0,2,0), so the phone kept §7d's TWO
     columns; but the card rule here was (0,3,0) against §7d's (0,2,1), so the
     card kept THIS design's horizontal split. A 390px phone therefore got a
     row-card built for the full width, folded into a 167px column: an 84px
     photo beside a 68px text column, with a 21px serif name in it.
     overflow-wrap:anywhere then did what it is designed to do and broke the
     words themselves — "Julkaktu/s", "Ampellil/ja", "Chlorophytu/m" — and,
     worse, told the grid the text could shrink to a single character, which is
     how a column ends up 68px wide in the first place. Neither design; the
     collision of two. Deleted so the phone gets §7d, the way every other index
     on the site already does. */
  .site-main--wide .browse{display:inline-flex;align-items:center;min-height:44px;}
  .cmp-wrap,.result-group{margin-inline:0;}
  .cmp tbody tr,.pt tbody tr{margin:0;padding:16px 0;border:0;border-bottom:1px solid var(--hair);border-radius:0;background:transparent;box-shadow:none;}
  .chapter-visual{border-radius:0;}
  .choose-card p{font-size:16px;line-height:1.65;}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
@media print{body{background:#fff!important}}

/* ── 1. The opener ─────────────────────────────────────────────────────── */

/* The top margin is 0 on purpose. It was 2px, left from the retired card-style
   opener that needed clearance from its own border; the opener has been
   transparent and borderless since. On a cream article the 2px was invisible,
   but the guides hub opens with a forest band directly under the forest
   masthead, and a first child's top margin collapses out through the main element — so
   those 2px painted a cream hairline splitting the two dark surfaces. */
body .site-main .guide-opening{
  width:min(1180px,calc(100vw - (2 * var(--site-gutter))));
  margin:0 0 clamp(40px,5vw,64px) 50%;transform:translateX(-50%);
  display:grid;grid-template-columns:minmax(0,1fr);align-items:start;
  gap:clamp(22px,3vw,40px);min-height:0;padding:0;
  border:0;border-radius:0;background:transparent;overflow:visible;isolation:auto;
}
body .site-main .guide-opening>*{grid-column:1;order:1;}
body .site-main .guide-opening .category-art,
body .site-main .guide-opening>.chapter-visual{order:2;}
/* The art is a real block now, not a background layer. */
body .site-main .category-art{
  position:relative;inset:auto;z-index:0;display:block;
  width:calc(100% + (2 * var(--site-gutter)));
  margin-inline:calc(0px - var(--site-gutter));
  aspect-ratio:4/5;overflow:hidden;border-radius:0;background:var(--sage-wash);
}
body .site-main .category-art img{
  position:relative;inset:auto;width:100%;height:100%;
  object-fit:cover;object-position:var(--art-focal-narrow,50% 50%);
}
body .site-main .guide-opening-copy{
  width:auto;min-width:0;align-self:var(--band-copy-anchor,start);padding:0;background:none;
}
/* COPY ANCHOR — where the words sit in the band, as a named variant.
   Every generated family opens the same way: copy at the top, the subject
   reserved below or beside it. A marketing hero is composed the other way —
   the words settle at the foot of the picture — and that is a real editorial
   difference, not drift. Expressing it as one parameter is what lets both
   compositions come out of ONE band mechanism instead of two, which is the
   whole point of the exercise.
   Defaulting to start keeps every existing page byte-identical. The band is
   block at narrow and grid at 1024, so anchoring needs both: flex-end below the
   lateral breakpoint, align-self above it. A band opts in by declaring
   data-band-copy="end"; nothing that omits the attribute can move.
   (No backticks in this comment — the block is a JS template literal and one
   backtick silently truncates the stylesheet. Second time today.) */
body .site-main .guide-opening--forest[data-band-ground][data-band-copy="end"]{
  display:flex;flex-direction:column;justify-content:flex-end;
  --band-copy-anchor:end;
}
/* Opening browline: the homepage hero is the visual source. Keep the tracked
   mint label quiet and unadorned so it introduces the headline instead of
   competing with it. In-article section labels may still use site-rule-eyebrow
   when a rule helps separate content inside the reading flow. */
body .site-main .guide-opening-kicker{
  display:block;margin:0 0 16px;
  color:var(--ink);font-size:13px;font-weight:600;line-height:1.25;
  letter-spacing:.16em;text-transform:uppercase;
}
body .site-main .guide-opening-copy h1{
  max-width:20ch;margin:0 0 16px;font-weight:400;font-size:clamp(34px,8.4vw,44px);
  line-height:1.04;letter-spacing:-.025em;overflow-wrap:break-word;hyphens:auto;
  text-wrap:pretty;
}
/* Japanese has no spaces for the browser to balance around. Keep complete
   phrases such as 育て方 and ガイド together instead of leaving one or two
   katakana characters stranded on a final line. Unsupported browsers keep
   the normal Japanese line-break behavior. */
html:lang(ja) body .site-main .guide-opening-copy h1{word-break:auto-phrase;}
body .site-main .guide-opening-copy h1 .sci,
body .site-main .guide-opening-copy h1>i{
  display:block;max-width:24ch;margin-top:10px;color:var(--emerald-dark);
  font-size:clamp(19px,4.4vw,22px);font-style:italic;font-weight:400;line-height:1.2;
}
body .site-main .guide-opening-copy .lede{
  max-width:46ch;margin:0;color:var(--ink-soft);font-size:17px;line-height:1.55;
}
/* The answer block: an emerald rule down the left, not a boxed card. */
body .site-main .guide-opening-answer{
  max-width:46ch;margin:20px 0 0;padding:2px 0 2px 16px;
  border:0;border-left:3px solid var(--emerald-dark);
  color:var(--ink-soft);font-size:16px;line-height:1.55;
}
body .site-main .guide-opening-answer>span{
  display:block;margin-bottom:6px;color:var(--emerald-dark);font-size:13px;
  font-weight:600;line-height:1.25;letter-spacing:.16em;text-transform:uppercase;
}
body .site-main .guide-opening-answer strong{color:var(--ink);font-weight:600;}
/* A forest-toned opener runs on the forest GROUND, not behind artwork. The
   pet-safe hub is the one template the canvases give an all-dark identity —
   "its own template, not a collection" — so the ground travels the full band
   width and the type takes lane A's dark-surface tokens. The headline is still
   on a solid ground rather than on the illustration, which is the rule; the
   ground is simply forest instead of paper. */
body .site-main .guide-opening--forest{
  width:100vw;max-width:none;margin-inline:0 0;margin-left:50%;transform:translateX(-50%);
  padding:clamp(34px,5vw,64px) var(--site-edge);
  background:#0C2017;color:#EFE8D6;
}
body .site-main .guide-opening--forest h1,
body .site-main .guide-opening--forest .lede,
body .site-main .guide-opening--forest p{color:#EFE8D6;}
body .site-main .guide-opening--forest .lede{color:#B9C4B4;}
body .site-main .guide-opening--forest .guide-opening-copy .guide-opening-kicker{color:#34C99A;}
body .site-main .guide-opening--forest h1 .sci{color:#34C99A;}
body .site-main .guide-opening--forest .category-art{
  width:100%;margin-inline:0;border-radius:20px;
}
/* ── Named variant: the calm editorial opener ─────────────────────────────
   Most public pages need a clear introduction, not a bespoke illustration.
   This variant follows the homepage's restraint on the site's warm paper:
   one readable copy field, a short handoff to the page, and an optional real
   plant photograph. It is shared by hubs, rankings, collections, product and
   press pages; a family cannot restyle it or attach synthetic wallpaper. */
body .site-main .guide-opening--editorial{
  width:min(1180px,calc(100vw - (2 * var(--site-gutter))));
  /* This is the default first-reading moment for every static family. Keep
     the measure and vertical rhythm deliberately short: one heading, one
     useful sentence, then the page's real proof or next decision. A family
     may select a named art or photo variant below, but it may not grow a
     private hero just because its subject differs. */
  --editorial-copy-measure:42ch;
  margin:0 0 clamp(32px,4vw,52px) 50%;transform:translateX(-50%);
  gap:clamp(24px,3vw,44px);
  padding:clamp(24px,3.5vw,44px) 0 clamp(28px,4vw,52px);
  border-bottom:1px solid var(--hair);background:transparent;color:var(--ink);
}
body .site-main .guide-opening--editorial>.guide-opening-copy{max-width:var(--editorial-copy-measure);}
body .site-main .guide-opening--editorial .guide-opening-copy .guide-opening-kicker{color:var(--emerald-dark);}
body .site-main .guide-opening--editorial .guide-opening-copy h1,
body .site-main .guide-opening--editorial .guide-opening-copy p{color:var(--ink);}
body .site-main .guide-opening--editorial .guide-opening-copy .lede{color:var(--ink-soft);}
body .site-main .guide-opening--editorial .guide-opening-copy h1 .sci{color:var(--emerald-dark);}
/* ── Named variant: compact product decision ─────────────────────────────
   A linked product destination should answer the download decision quickly,
   not replay the homepage. This shared cream field keeps one live headline,
   one short explanation, and the official store actions above the fold. It
   contains no decorative art or synthetic product proof and uses the standard
   forest masthead rather than placing navigation over a scene. */
body .site-main .guide-opening--product-decision{
  width:100vw;max-width:none;
  margin:0 0 clamp(32px,4vw,52px) 50%;
  padding:clamp(34px,4vw,48px) var(--site-edge) clamp(38px,4.5vw,52px);
  transform:translateX(-50%);border-bottom:1px solid var(--hair);background:var(--cream);color:var(--ink);
}
body .site-main .guide-opening--product-decision>.guide-opening-copy{width:min(100%,820px);max-width:none;margin-inline:auto;}
/* ── Named variant: exact-photo article opener ────────────────────────────
   The photograph is evidence, not generic wallpaper. Give it a confident
   editorial ground and a broad companion lane while protecting the next real
   decision: at the reference desktop, tablet, and phone canvases the first
   facts start within the first reading pass. The limits below are layout
   budgets, not clipping rules; a long localized title is always allowed to
   expand rather than disappear. */
body .site-main .guide-opening--editorial-photo{
  --photo-opener-cap:480px;--photo-frame-cap:min(31vw,352px);
  gap:clamp(20px,3vw,34px);padding:clamp(20px,2.4vw,30px);
  border:1px solid var(--hair);border-radius:24px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--sage-wash) 64%,var(--field-paper)) 0%,var(--field-paper) 72%);
}
body .site-main .guide-opening--editorial-photo>.guide-opening-copy{max-width:44ch;}
body .site-main .guide-opening--editorial-photo>.guide-opening-copy h1{font-size:clamp(42px,4.7vw,64px);}
body .site-main .guide-opening--editorial-photo>.guide-opening-photo{
  display:block;width:100%;max-width:var(--photo-frame-cap);aspect-ratio:4/3;overflow:hidden;
  margin:0;padding:6px;border:1px solid var(--hair);border-radius:18px;background:var(--cream);
}
body .site-main .guide-opening--editorial-photo>.guide-opening-photo img{
  display:block;width:100%;height:100%;border-radius:15px;object-fit:cover;object-position:50% 48%;
}
/* ── Named variant: editorial art at homepage scale ───────────────────────
   The approved landscape / portrait Mr. Kitty pairs already contain their own quiet
   copy lane. Keep that pair as one large, responsive scene with real HTML on
   top: a pet-safety or rare no-photo opener must not turn it into the
   small 4:3 catalog-photo card above. The shared forest wash is the same
   readability device the homepage uses; it preserves the cream art rather
   than inventing a family-specific panel or a replacement illustration. */
body .site-main .guide-opening--editorial-art{
  position:relative;isolation:isolate;display:grid;align-items:stretch;
  width:100vw;max-width:none;min-height:clamp(620px,min(56.25vw,74vh),860px);
  margin:0 0 clamp(40px,5vw,64px) 50%;padding:0;
  transform:translateX(-50%);overflow:hidden;border:0;background:var(--cream);color:#EFE8D6;
}
body .site-main .guide-opening--editorial-art>.guide-opening-photo{
  position:absolute;inset:0;z-index:0;display:block;width:100%;max-width:none;height:100%;
  padding:0;overflow:hidden;border:0;border-radius:0;background:transparent;
}
body .site-main .guide-opening--editorial-art>.guide-opening-photo img{
  display:block;width:100%;height:100%;border-radius:0;object-fit:cover;object-position:center bottom;
}
body .site-main .guide-opening--editorial-art::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 56% 66% at 16% 40%,rgba(12,32,23,.24) 0%,rgba(12,32,23,.16) 52%,rgba(12,32,23,.07) 76%,rgba(12,32,23,0) 100%),linear-gradient(180deg,rgba(12,32,23,.82) 0%,rgba(12,32,23,.76) 12%,rgba(12,32,23,.69) 24%,rgba(12,32,23,.61) 36%,rgba(12,32,23,.53) 48%,rgba(12,32,23,.45) 58%,rgba(12,32,23,.36) 68%,rgba(12,32,23,.28) 77%,rgba(12,32,23,.20) 84%,rgba(12,32,23,.14) 89%,rgba(12,32,23,.08) 93%,rgba(12,32,23,.04) 96%,rgba(12,32,23,.02) 98%,rgba(12,32,23,0) 100%);
}
body .site-main .guide-opening--editorial-art>.guide-opening-copy{
  position:relative;z-index:2;align-self:center;width:min(700px,calc(100% - (2 * var(--site-edge))));max-width:100%;
  margin-left:var(--site-edge);
  padding-block:clamp(56px,7vw,96px);
}
body .site-main .guide-opening--editorial-art .guide-opening-copy .guide-opening-kicker{color:#34C99A;}
body .site-main .guide-opening--editorial-art .guide-opening-copy h1,
body .site-main .guide-opening--editorial-art .guide-opening-copy p{color:#EFE8D6;}
body .site-main .guide-opening--editorial-art .guide-opening-copy .lede{color:#B9C4B4;}
body .site-main .guide-opening--editorial-art .guide-opening-copy h1>i{color:#34C99A;}
body .site-main .guide-opening--editorial-art .guide-opening-product{border-top-color:rgba(239,232,214,.20);}
body .site-main .guide-opening--editorial-art .guide-opening-product-brand{color:#34C99A!important;}
body .site-main .guide-opening--editorial-art .guide-opening-product-title{color:#EFE8D6!important;}
/* ── Pixel-scene opener variant (2026-08-16) ─────────────────────────────────
   A NAMED variant any page family opts into once its opener art is a LIGHT,
   lush pixel scene. It flips the opener from the dark forest scrim + light
   text to a cream veil + dark text (the same treatment as the homepage hero),
   with a dark-green wash at the very TOP so the over-art nav still reads.
   Families still on the old dark painterly art are untouched. Works for both
   opener mechanisms: the editorial-art opener and the category band. */
body .site-main .guide-opening--editorial-art.guide-opening--pixel::before{display:none;}
body .site-main .guide-opening--editorial-art.guide-opening--pixel>.guide-opening-copy{
  background:none;
}
body .site-main .guide-opening--editorial-art.guide-opening--pixel .guide-opening-copy .guide-opening-kicker{color:#1f6b4a;}
body .site-main .guide-opening--editorial-art.guide-opening--pixel .guide-opening-copy h1,
body .site-main .guide-opening--editorial-art.guide-opening--pixel .guide-opening-copy p{color:var(--ink);}
body .site-main .guide-opening--editorial-art.guide-opening--pixel .guide-opening-copy .lede{color:var(--ink-soft);max-width:42ch;}
body .site-main .guide-opening--editorial-art.guide-opening--pixel .guide-opening-copy .toxicity-symptoms{
  width:100%;max-width:none;padding-left:0;list-style:none;
}
body .site-main .guide-opening--toxicity .guide-opening-copy h2.toxicity-symptoms-heading{
  display:block;margin:14px 0 12px;padding:0;border:0;border-radius:0;background:transparent;
  color:var(--ink);font-family:var(--body);font-size:var(--type-subhead);font-weight:600;line-height:1.25;letter-spacing:-.005em;
}
body .site-main .guide-opening--toxicity .guide-opening-copy h2.toxicity-symptoms-heading::before{content:none;display:none;}
body .site-main .guide-opening--editorial-art.guide-opening--pixel .guide-opening-copy .toxicity-symptoms li{
  display:grid;grid-template-columns:12px minmax(0,1fr);column-gap:10px;color:var(--ink-soft);
}
body .site-main .guide-opening--editorial-art.guide-opening--pixel .guide-opening-copy .toxicity-symptoms li::before{
  content:"";width:10px;height:10px;margin-top:7px;border-radius:50%;background:var(--ink);
}
body .site-main .guide-opening--editorial-art.guide-opening--pixel .guide-opening-copy h1>i{color:var(--emerald-dark);}
body .site-main .guide-opening--editorial-art.guide-opening--pixel.guide-opening--safety.is-toxic .guide-opening-copy .lede{
  display:block;position:relative;box-sizing:border-box;width:fit-content;max-width:100%;
  padding:5px 10px 5px 34px;border-radius:999px;background:var(--warn-deep);color:#fff;
  font-family:var(--body);font-size:13px;font-weight:600;line-height:1.3;
}
body .site-main .guide-opening--editorial-art.guide-opening--pixel.guide-opening--safety.is-toxic .guide-opening-copy .lede::before{
  content:"";position:absolute;left:7px;top:50%;width:21px;height:21px;transform:translateY(-50%);background:url("/pixel/icons/toxic.png") center/contain no-repeat;
  image-rendering:pixelated;
}
body .site-main .guide-opening--editorial-art.guide-opening--pixel .guide-opening-product-brand{color:#1f6b4a!important;}
body .site-main .guide-opening--editorial-art.guide-opening--pixel .guide-opening-product-title{color:var(--ink)!important;}
body .site-main .site-band--pixel{--band-fg:var(--ink);--band-fg-soft:var(--ink-soft);--band-focal:50% 18%;background:var(--cream);}
body .site-main .site-band--pixel .site-eyebrow,body .site-main .site-band--pixel .site-band__copy a{color:#1f6b4a;}
body .site-main .site-band--pixel>.site-band__scrim{display:none!important;background:none!important;}
/* Phone: a veil over the art only works while the copy is short enough to sit
   inside the solid part of it. A hub opener (wrapped H1 + a three-sentence lede
   + an action) fills nearly the whole 620px frame, so ANY fade leaves the last
   lines on the pixels. Rather than fight copy length with a taller fade, the
   opener drops the overlay entirely on a phone and becomes the contract's
   "seam" mode: the words sit on solid cream, the scene gets its OWN full-bleed
   band beneath them. Both are visible; neither is on top of the other. The nav
   is transparent over the cream copy area, so it carries dark controls (the
   over-art light-hero treatment) — no gradient behind the masthead. */
@media (max-width:700px){
/* Phone: the whole copy block (kicker, headline, lede, action) sits ON the
   art's clean top-left zone — the mobile scenes were composed with exactly this
   space reserved. The art is a full-bleed portrait behind it; the copy grows the
   band taller when needed (art keeps covering, scene anchored to the bottom), so
   the text is always on clean cream and never dumped below. */
body .site-main .guide-opening--editorial-art.guide-opening--pixel{
  display:block;position:relative;min-height:clamp(600px,166vw,780px);aspect-ratio:auto;
  background:var(--cream);
}
body .site-main .guide-opening--editorial-art.guide-opening--pixel::before{display:none;}
body .site-main .guide-opening--editorial-art.guide-opening--pixel>.guide-opening-photo{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;margin:0;
}
body .site-main .guide-opening--editorial-art.guide-opening--pixel>.guide-opening-photo img{
  width:100%;height:100%;object-fit:cover;object-position:center bottom;
}
body .site-main .guide-opening--editorial-art.guide-opening--pixel>.guide-opening-copy{
  position:relative;z-index:2;align-self:auto;width:var(--hero-safe-w,62%);max-width:none;
  margin:0;padding:calc(72px + 20px) 0 clamp(28px,8vw,40px) var(--site-gutter);
  display:flex;flex-direction:column;gap:13px;
}
body .site-main .guide-opening--editorial-art.guide-opening--pixel>.guide-opening-copy .guide-opening-kicker{margin:0;}
body .site-main .guide-opening--editorial-art.guide-opening--pixel>.guide-opening-copy h1{
  margin:0;font-size:clamp(28px,8vw,40px);line-height:1.04;letter-spacing:-.01em;
  text-wrap:balance;overflow-wrap:normal;word-break:normal;hyphens:none;
}
body .site-main .guide-opening--editorial-art.guide-opening--pixel>.guide-opening-copy .lede{margin:0;max-width:30ch;font-size:clamp(16px,4.1vw,17px);line-height:1.35;}
body .site-main .guide-opening--editorial-art.guide-opening--pixel>.guide-opening-copy .guide-opening-action{align-self:flex-start;}
/* The mid-page pixel band keeps its overlay veil — its copy is short — but hold
   the cream deeper so a longer localized line still clears the pixels. */
body .site-main .site-band--pixel>.site-band__scrim{display:none!important;background:none!important;}
body .site-main .site-band--pixel .site-band__lede{max-width:30ch;}
}
/* ── Named component: three real photographs, one quiet editorial plane ────
   Some guide openings need more than one truthful photograph, but never a
   wallpaper or an image wall. The cluster gives three existing card
   derivatives a single cream-framed plane: a calm lead image with two smaller
   companions on desktop, then all three in one short strip on a phone. It is
   deliberately a component rather than a page-family treatment, so any guide
   can use the same composition without inventing a new hero. */
body .site-main .guide-opening--photo-cluster{gap:clamp(28px,5vw,72px);}
body .site-main .guide-opening-cluster{
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(8px,1vw,14px);
  width:100%;max-width:560px;aspect-ratio:4/3;padding:7px;overflow:hidden;
  border:1px solid var(--hair);border-radius:22px;background:var(--cream);
}
body .site-main .guide-opening-cluster>:first-child{grid-column:1;grid-row:1 / span 2;}
body .site-main .guide-opening-cluster>:nth-child(2){grid-column:2;grid-row:1;}
body .site-main .guide-opening-cluster>:nth-child(3){grid-column:2;grid-row:2;}
body .site-main .guide-opening-cluster>:is(img,picture){min-width:0;min-height:0;overflow:hidden;border-radius:15px;}
body .site-main .guide-opening-cluster :is(img,picture>img){display:block;width:100%;height:100%;object-fit:cover;object-position:center;}
body .site-main .guide-opening-cluster picture{display:block;}
@media(min-width:701px){
  body .site-main .guide-opening--editorial-photo{
    --photo-opener-cap:520px;--photo-frame-cap:min(37vw,330px);
    grid-template-columns:minmax(0,1.12fr) minmax(250px,.88fr);align-items:center;
  }
  body .site-main .guide-opening--editorial-photo>.guide-opening-copy{grid-column:1;grid-row:1;}
  body .site-main .guide-opening--editorial-photo>.guide-opening-photo{grid-column:2;grid-row:1;justify-self:end;}
}
@media(min-width:900px){
  body .site-main .guide-opening--editorial-photo{
    --photo-opener-cap:480px;--photo-frame-cap:min(31vw,352px);
    grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr);
  }
  body .site-main .guide-opening--photo-cluster{
    grid-template-columns:minmax(0,.96fr) minmax(340px,.72fr);align-items:center;
  }
  body .site-main .guide-opening--photo-cluster>.guide-opening-copy{grid-column:1;grid-row:1;}
  body .site-main .guide-opening--photo-cluster>.guide-opening-cluster{grid-column:2;grid-row:1;}
}
/* ── Named variant: an opener whose picture is the SUBJECT, not the backdrop ──
   Some pages exist to put two real things next to each other. Family artwork
   cannot do that job: a synthetic scene says "plants" in general while the page
   is about these two specimens in particular, and a reader comparing a pothos
   to a philodendron needs to see the actual leaves.

   So this variant swaps the full-bleed illustration for framed catalog
   photographs with visible labels, on the artless ("quiet") ground. The photos
   are evidence, so they carry real alt text and real captions rather than
   sitting behind the copy.

   It is deliberately not comparison-only: any family that opens by showing two
   (or one) identified specimens can use it — a genus pair, a look-alike
   warning, a before/after. Two is the design centre; one is the honest fallback
   when only one species has photography, and the grid collapses to a single
   column rather than inventing a second picture.

   The pair stays side by side at every width, including 320px. Stacking them
   would destroy the one thing the layout is for — you cannot compare two leaves
   that are never on screen together.

   The band's own vertical composition — min-height, padding-block, the
   stacking context its children sit in — is carried by
   .guide-opening--forest[data-band-ground], and this variant KEEPS it: the
   opener still declares the artless "quiet" ground, because a band without a
   ground collapses its padding and the headline lands under the masthead.

   The opener stays ONE column at every width, like every other band: the
   shared rule pins openers' children to column 1 and reveals the subject below
   the copy. A two-lane hero was tried and removed — it would have made this
   the only family with a different composition, which is the thing the shared
   system exists to prevent. Copy, then the specimens beneath it. */
body .site-main .guide-opening--forest.guide-opening--photo-pair[data-band-ground]{
  display:grid;gap:clamp(22px,3vw,40px);
}
/* The specimens are evidence at a readable size, not a backdrop. Without a cap
   the pair grows with the full-bleed band and prints two 800px squares on a
   3344px display, which turns a reference photograph into a poster. */
body .site-main .guide-opening-pair{
  max-width:640px;
  display:grid;grid-template-columns:repeat(var(--pair-count,2),minmax(0,1fr));
  gap:clamp(10px,1.8vw,20px);margin:0;
}
body .site-main .guide-opening-pair figure{margin:0;display:flex;flex-direction:column;gap:10px;}
body .site-main .guide-opening-pair img{
  display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  border-radius:16px;border:1px solid rgba(239,232,214,.20);background:#12291F;
}
/* The label is the picture's caption, so it reads as part of the evidence
   rather than as a floating chip. Left-aligned under its own photograph. */
body .site-main .guide-opening-pair figcaption{
  color:#EFE8D6;font-family:'Jost', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;font-size:clamp(13px,1.35vw,15px);
  font-weight:600;line-height:1.3;letter-spacing:-0.005em;
}
body .site-main .guide-opening--photo-pair .lede{max-width:52ch;}
body .site-main .guide-opening--forest .guide-opening-action{
  background:#FBF8F1;color:#0F2A1F;box-shadow:none;
  border:1px solid rgba(239,232,214,.20);
}
/* Anything the hub renders on that ground inherits the dark surface. */
body .site-main .guide-opening--forest .tpl-panel{
  border-color:rgba(239,232,214,.20);background:#12291F;color:#EFE8D6;
}
body .site-main .guide-opening--forest .tpl-ledger>*{border-bottom-color:rgba(239,232,214,.20);}
body .site-main .guide-opening--forest .tpl-ledger>*:first-child{border-top-color:rgba(239,232,214,.20);}
body .site-main .guide-opening--forest .tpl-ledger dt{color:#EFE8D6;}
body .site-main .guide-opening--forest .tpl-ledger dd{color:#B9C4B4;}
/* The store block the app page carries into the band. Its hairline and its
   three type colours were authored for cream and are set with !important there,
   so the dark surface has to answer at the same weight. Brand emerald #047857
   measures 3.1:1 on the forest and fails AA; the dark twin #34C99A is the same
   rule the footer wordmark already follows. */
body .site-main .guide-opening--forest .guide-opening-product{border-top-color:rgba(239,232,214,.20);}
body .site-main .guide-opening--forest .guide-opening-product-brand{color:#34C99A!important;}
body .site-main .guide-opening--forest .guide-opening-product-title{color:#EFE8D6!important;}
/* Supporting counts and notes are the band's tertiary voice, not its body. */
body .site-main .guide-opening--forest .count,
body .site-main .guide-opening--forest .dateline{color:#B9C4B4;}
/* A forest opener starts directly under the masthead. The shared main variant
   removes the paper padding without giving the page family its own chrome. */
body .site-main--forest-open{position:relative;padding-top:0;}
/* A first child's top margin must not reopen a paper seam below the masthead. */
body .site-main--forest-open>.guide-opening--forest{margin-top:0;}
/* The band's own type scale above 768. It lives with the opening rather than in
   the responsive block further down, because the opening is now a shared
   mechanism and a consumer that emits only these two functions must still get a
   display headline on a laptop. */
@media(min-width:768px){
  body .site-main .guide-opening-copy h1{font-size:clamp(46px,5.4vw,72px);line-height:.98;letter-spacing:-.035em;}
  body .site-main .guide-opening-copy .lede{font-size:19px;line-height:1.6;}
  body .site-main .guide-opening-answer{padding-left:20px;font-size:17px;line-height:1.6;}
}
@media(min-width:701px) and (max-width:899px){
  body .site-main .guide-opening--editorial-art>.guide-opening-photo img{object-position:68% bottom;}
}
/* Portrait tablets use the portrait master and its own 9:16 composition. The
   landscape hero budget (a 620px minimum at 834px wide) is what let Mr. Kitty
   climb into long localized copy: the source and the slot disagreed about the
   frame. Keep the copy in the upper-left safe lane, then let the scene carry
   the lower field at its intended scale. This is a shared geometry rule, not a
   care, symptom, toxicity, ranking, or collection exception. */
@media(orientation:portrait) and (min-width:701px) and (max-width:899px){
  body .site-main .guide-opening--editorial-art.guide-opening--pixel{
    display:block;width:100vw;min-height:0;aspect-ratio:9/16;
    margin:0 0 clamp(40px,5vw,64px) 50%;padding:0;
  }
  body .site-main .guide-opening--editorial-art.guide-opening--pixel:has(>.guide-opening-photo--mobile-top-crop){aspect-ratio:941/1372;}
  body .site-main .guide-opening--editorial-art.guide-opening--pixel>.guide-opening-copy{
    align-self:start;display:flex;flex-direction:column;gap:13px;
    width:min(55%,480px);max-width:none;margin:0;
    padding:clamp(88px,11vw,120px) 0 clamp(44px,7vw,72px) var(--site-gutter);
  }
  body .site-main .guide-opening--editorial-art.guide-opening--pixel>.guide-opening-copy .lede{
    max-width:34ch;font-size:17px;line-height:1.45;
  }
  body .site-main .guide-opening--editorial-art.guide-opening--pixel>.guide-opening-copy .guide-opening-action{
    align-self:flex-start;
  }
}
@media(max-width:700px){
  body .site-main .guide-opening--editorial{
    width:100%;min-height:0;margin:0 0 32px;transform:none;
    padding:22px 0 30px;gap:22px;
  }
  body .site-main .guide-opening--product-decision{
    width:100vw;margin:0 0 32px 50%;padding:30px var(--site-gutter) 34px;
    transform:translateX(-50%);
  }
  body .site-main .guide-opening--editorial-photo{
    --photo-opener-cap:460px;--photo-frame-cap:none;
    min-height:0;padding:18px var(--site-gutter) 20px;gap:16px;border-radius:0;border-inline:0;
  }
  body .site-main .guide-opening--editorial-photo>.guide-opening-copy h1{font-size:clamp(36px,8.6vw,44px);}
  body .site-main .guide-opening--editorial-photo>.guide-opening-photo{
    max-width:none;aspect-ratio:21/10;border-radius:14px;
  }
  body .site-main .guide-opening--editorial-art{
    width:100vw;min-height:calc(100vw * 16 / 9);margin:0 0 32px 50%;padding:0;
    transform:translateX(-50%);aspect-ratio:9/16;
  }
  body .site-main .guide-opening--editorial-art>.guide-opening-copy{
    align-self:start;width:min(calc(100% - (2 * var(--site-gutter))),38ch);
    margin-left:var(--site-gutter);padding-block:clamp(44px,12vw,64px) clamp(220px,52vw,340px);
  }
  body .site-main .guide-opening-cluster{
    grid-template-columns:minmax(0,1.16fr) repeat(2,minmax(0,.92fr));grid-template-rows:minmax(0,1fr);
    width:100%;max-width:none;aspect-ratio:16/7;border-radius:18px;
  }
  body .site-main .guide-opening-cluster>:first-child,
  body .site-main .guide-opening-cluster>:nth-child(2),
  body .site-main .guide-opening-cluster>:nth-child(3){grid-row:1;}
  body .site-main .guide-opening-cluster>:first-child{grid-column:1;}
  body .site-main .guide-opening-cluster>:nth-child(2){grid-column:2;}
  body .site-main .guide-opening-cluster>:nth-child(3){grid-column:3;}
}
/* Named mobile variant for editorial art openers where the title can use the
   full quiet upper field while supporting copy remains in a reading lane. */
@media(max-width:700px){
  body .site-main .guide-opening--title-wide-mobile.guide-opening--editorial-art.guide-opening--pixel>.guide-opening-copy{
    width:100%;max-width:none;margin:0;padding:calc(72px + 2px) var(--site-gutter) 32px;gap:8px;
    background:none;
  }
  body .site-main .guide-opening--title-wide-mobile.guide-opening--editorial-art.guide-opening--pixel>.guide-opening-copy h1{
    width:100%;max-width:none;margin:0;font-size:clamp(30.4px,8.48vw,35.2px);line-height:.98;
    letter-spacing:-.025em;text-wrap:wrap;
  }
  body .site-main .guide-opening--title-wide-mobile.guide-opening--editorial-art.guide-opening--pixel>.guide-opening-copy .lede{
    width:100%;max-width:none;margin:0;
  }
  body .site-main .site-band--pixel.site-band--north-star>.site-band__copy{
    width:100%;max-width:none;
  }
  body .site-main .site-band--pixel.site-band--north-star>.site-band__copy h1{max-width:none;}
  body .site-main .site-band--pixel.site-band--north-star>.site-band__copy :is(.lede,.reference-lede){width:80%;max-width:80%;}
}

/* ── 2. Chapters: heading left, content right, alternating grounds ─────── */
body .site-main .tpl-chapter{
  width:100vw;max-width:none;margin:0 0 0 50%;transform:translateX(-50%);
  padding-block:clamp(28px,3.5vw,48px);
}
body .site-main .tpl-chapter__inner{
  width:min(1180px,calc(100vw - (2 * var(--site-gutter))));margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start;
}
/* A full-bleed light chapter paints its own opaque fill, so it would otherwise
   cover the ground's ruling with a flat tone. It takes the shared sheet. */
body .site-main .tpl-chapter--paper{
  background-color:#F6F1E7;background-image:repeating-linear-gradient(0deg,transparent 0,rgba(20, 32, 26,0.014) 2.5px,transparent 5px);box-shadow:inset 0 1px 0 rgba(255, 252, 246, 0.9);border-block:1px solid var(--line);
}
body .site-main .tpl-chapter--forest{background:#0C2017;color:#EFE8D6;}
body .site-main .tpl-chapter--forest h2{color:#EFE8D6;}
body .site-main .tpl-chapter--forest p{color:#B9C4B4;}
body .site-main .tpl-chapter>h2,
body .site-main .tpl-chapter__head h2{
  margin:0;padding:0;border:0;font-weight:400;letter-spacing:-.025em;
  font-size:clamp(30px,7.4vw,34px);line-height:1.06;text-wrap:pretty;
}
body .site-main .tpl-chapter__head{min-width:0;}
body .site-main .tpl-chapter__body{min-width:0;}
body .site-main .tpl-chapter__body>p{max-width:68ch;}
body .site-main .tpl-chapter__body>p:last-child{margin-bottom:0;}
body .site-main .tpl-chapter__lede{
  margin:10px 0 0;color:var(--ink-soft);font-size:17px;line-height:1.55;
}
body .site-main .tpl-chapter--forest .tpl-chapter__lede{color:#B9C4B4;}
@media(min-width:1024px){
  body .site-main .tpl-chapter--brief{padding-block:36px;}
}

/* ── 3. Dotted ledger leaders ──────────────────────────────────────────── */
/* The families emit their own dl/div rows, so the leader is applied to those
   rows rather than duplicating lane A's .site-ledger markup contract. */
body .site-main .tpl-ledger{
  display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin:0;padding:0;
  border:0;background:transparent;
}
body .site-main .tpl-ledger>*{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;
  gap:16px;min-height:0;padding:13px 0;
  border:0;border-bottom:1px dotted var(--line);border-radius:0;background:transparent;
}
body .site-main .tpl-ledger>*:first-child{border-top:1px dotted var(--line);}
body .site-main .tpl-ledger dt,body .site-main .tpl-ledger .tpl-ledger__label{
  margin:0;color:var(--ink);font-size:16px;font-weight:400;line-height:1.4;
  letter-spacing:0;text-transform:none;
}
body .site-main .tpl-ledger dd,body .site-main .tpl-ledger .tpl-ledger__value{
  margin:0;color:var(--ink-soft);font-size:13px;font-weight:600;line-height:1.4;
  letter-spacing:.02em;text-align:right;font-variant-numeric:tabular-nums;
}
body .site-main .tpl-ledger dd.warn{color:var(--warn-deep);}
body .site-main .tpl-ledger dd.safe{color:var(--emerald-dark);}
body .site-main .tpl-ledger .care-symbol{
  position:static;display:inline-grid;width:19px;height:19px;margin-right:9px;
  vertical-align:-3px;background:transparent;
}
body .site-main .tpl-ledger .care-symbol svg{width:17px;height:17px;}
/* A fact with seasonal values is not one label and one value — it is a small
   ledger of its own. Left as a single row it squeezed the label to one letter
   per line on a phone. The label takes its own line; each season becomes its
   own leader beneath it. */
body .site-main .tpl-ledger .care-essential--water{grid-template-columns:minmax(0,1fr);gap:6px;}
body .site-main .tpl-ledger .care-essential--water dd{display:block;text-align:left;}
body .site-main .tpl-ledger .care-season{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:14px;
  padding:5px 0;color:var(--ink-soft);font-size:13px;font-weight:600;text-align:right;
}
body .site-main .tpl-ledger .care-season+.care-season{border-top:1px dotted var(--line);}
body .site-main .tpl-ledger .care-season>span{
  display:block;margin:0;color:var(--ink);font-size:16px;font-weight:400;
  letter-spacing:0;line-height:1.4;text-align:left;overflow-wrap:anywhere;
}
body .site-main .tpl-ledger dt,body .site-main .tpl-ledger dd{min-width:0;overflow-wrap:anywhere;}
/* A ledger inside a lifted card is the canvases' "Read the leaves" panel. */
body .site-main .tpl-panel{
  padding:20px;border:1px solid var(--line);border-radius:20px;background:var(--card);
}
body .site-main .tpl-panel .tpl-ledger>*:last-child{border-bottom:0;padding-bottom:0;}

/* ── 4. The numbered spine ─────────────────────────────────────────────── */
/* The spine is a rail plus a disc per row. The disc is a grid cell, not an
   absolutely-positioned pseudo-element hanging off a negative offset — that
   version drifted on top of the heading the moment a row gained a third
   child. */
body .site-main .tpl-spine{
  position:relative;display:block;margin:0;padding:0;border:0;counter-reset:tpl-step;
}
body .site-main .tpl-spine::before{
  content:"";position:absolute;top:10px;bottom:10px;left:16px;width:1px;
  background:linear-gradient(180deg,rgba(6,166,120,.5),rgba(6,166,120,.12));
}
body .site-main .tpl-spine>*{
  position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);
  column-gap:14px;row-gap:8px;align-items:start;
  min-height:0;margin:0;padding:0 0 26px;border:0;border-radius:0;background:transparent;
}
body .site-main .tpl-spine>*>*{grid-column:2;}
body .site-main .tpl-spine>*::before{
  content:counter(tpl-step,decimal-leading-zero);counter-increment:tpl-step;
  grid-column:1;grid-row:1;align-self:start;z-index:1;display:grid;width:34px;height:34px;
  place-items:center;border:1px solid rgba(6,166,120,.45);border-radius:50%;
  background:var(--paper,#F6F1E7);color:var(--emerald-dark);
  font-family:var(--serif);font-size:14px;font-weight:600;line-height:1;
}
body .site-main .tpl-spine>:first-child::before{
  border-color:var(--emerald-dark);background:var(--emerald-dark);color:var(--cream,#F6F1E7);
}
body .site-main .tpl-spine>* h3{
  margin:0;font-family:'Jost', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;font-size:16px;font-weight:700;line-height:1.3;
}
body .site-main .tpl-spine>* p{
  margin:0;color:var(--ink-soft);font-size:16px;line-height:1.6;
}
body .site-main .tpl-spine>* p strong{color:var(--ink);font-weight:700;}
/* Two tiers per cause, as the canvas draws them: the body, then a quieter
   line behind a dotted rule. The canvas's second tier is "signs"; ours is the
   remedy, because those are the two strings the generator actually has. */
/* The symptom causes had a two-column .prob grid before the spine existed; it
   out-specifies the spine's own child rule, so a third child (the second tier)
   landed in the wrong column. The spine owns the row now — stated once, at a
   specificity that wins, rather than by unpicking the predecessor. */
body .site-main .problems.sym-causes.tpl-spine>.prob{
  display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:14px;row-gap:8px;
  min-height:0;padding:0 0 26px;
}
/* The predecessor also absolutely-positioned its own numeral at top:34px;left:0,
   which out-specified the spine's disc and parked it beside the second line. */
body .site-main .problems.sym-causes.tpl-spine>.prob::before{
  position:static;top:auto;left:auto;grid-column:1;grid-row:1;align-self:start;
}
/* Supported broadleaf symptom pages get one field plate, not five illustrated
   cards. HTML markers follow each locale's real cause order and double as 44px
   anchor links, while the article remains a calm reading column. Unsupported
   plant morphologies deliberately keep the text-only cause list. */
.symptom-causes-layout{min-width:0;}
.symptom-causes-flow{min-width:0;}
.symptom-causes-layout--with-plate{
  display:grid;grid-template-columns:minmax(280px,.82fr) minmax(0,1.18fr);
  gap:clamp(38px,6vw,76px);align-items:start;
}
.diagnostic-plate{
  position:sticky;top:calc(var(--site-anchor-offset) + 20px);isolation:isolate;
  width:100%;max-width:520px;margin:0;
  overflow:hidden;border-radius:14px;background:var(--paper);
  box-shadow:0 22px 46px -34px color-mix(in srgb,var(--ink) 52%,transparent);
}
.diagnostic-plate>img{display:block;width:100%;height:auto;aspect-ratio:1122/1402;object-fit:cover;}
.diagnostic-plate__marker{
  position:absolute;z-index:1;left:var(--marker-x);top:var(--marker-y);
  display:grid;width:44px;height:44px;place-items:center;
  color:var(--paper);text-decoration:none;transform:translate(-50%,-50%);
}
.diagnostic-plate__marker>span{
  display:grid;width:32px;height:32px;place-items:center;border-radius:50%;
  background:var(--emerald-dark);font-size:11px;font-weight:750;letter-spacing:.07em;
  box-shadow:0 8px 18px -11px color-mix(in srgb,var(--ink) 68%,transparent);
}
.diagnostic-plate__marker:focus-visible{outline:3px solid var(--focus-ring);outline-offset:1px;border-radius:50%;}
body .site-main .tpl-spine>* .prob-signs{
  margin-top:2px;padding-top:8px;border-top:1px dotted var(--line);
  color:var(--muted);font-size:15px;line-height:1.5;
}
body .site-main .tpl-spine>* .prob-signs strong{color:var(--emerald-dark);font-weight:600;}
body .site-main .tpl-chapter--forest .tpl-spine>* .prob-signs{border-top-color:rgba(239,232,214,.20);}

@media(max-width:900px){
  .symptom-causes-layout--with-plate{display:block;}
  .diagnostic-plate{position:relative;top:auto;width:min(100%,520px);margin:0 auto 44px;}
}
/* On a phone the numbered field plate becomes a long illustration that delays
   the actual diagnosis. The cause rows immediately below already contain the
   accessible, localized "how to tell" and "what to do" decision path, so lead
   with that working content on the narrow surface. Desktop keeps the linked
   plate as a useful overview beside the complete cause list. */
@media(max-width:700px){
  .symptom-causes-layout--with-plate>.diagnostic-plate{display:none;}
}
@media(hover:hover) and (pointer:fine){
  .diagnostic-plate__marker:hover>span{background:var(--emerald);color:var(--ink);}
}

/* ── 5. Questions on forest ────────────────────────────────────────────── */
body .site-main .tpl-chapter--forest .faq{margin:0;}
body .site-main .tpl-chapter--forest .faq details{
  padding:0;border:0;border-top:1px solid rgba(239,232,214,.20);
}
body .site-main .tpl-chapter--forest .faq details:last-of-type{
  border-bottom:1px solid rgba(239,232,214,.20);
}
body .site-main .tpl-chapter--forest .faq summary{
  min-height:56px;padding:16px 0;gap:20px;color:#EFE8D6;
  font-family:var(--serif);font-size:21px;font-weight:500;line-height:1.2;
}
body .site-main .tpl-chapter--forest .faq summary::after{
  color:#34C99A;font-size:22px;
}
body .site-main .tpl-chapter--forest .faq details p{
  margin:-4px 0 18px;color:#B9C4B4;font-size:16px;line-height:1.6;
}

/* ── 6. Sibling and index rows ─────────────────────────────────────────── */
body .site-main .siblings-grid{
  display:grid;grid-template-columns:minmax(0,1fr);gap:0;border:0;
}
body .site-main .siblings-grid a{
  display:flex;align-items:flex-start;gap:14px;min-height:56px;padding:14px 0;
  border:0;border-bottom:1px dotted var(--line);border-radius:0;background:transparent;
  color:var(--ink);font-family:var(--body);font-size:18px;font-weight:600;line-height:1.3;
  -webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere;text-decoration:none;
}
body .site-main .siblings-grid a:first-child{border-top:1px dotted var(--line);}
body .site-main .siblings-grid .sib-txt{
  min-width:0;display:flex;flex-direction:column;gap:3px;
}
body .site-main .siblings-grid .sib-sci{
  margin:0;color:var(--muted);font-family:'Jost', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;font-size:14px;
  font-style:italic;font-weight:400;line-height:1.45;
}
/* THE TWO THUMBNAIL ROLES (2026-08-07). Every plant photograph on the site
   plays one of two roles: this RAIL thumbnail — a small square identifying a
   linked plant inside a row of text, always .sib-thumb, on every family that
   uses .siblings-grid — or the CARD PLATE, the 4:5 portrait that leads a
   discovery card in a hub grid (.card-photo, a different rule, unchanged
   here). A rail thumbnail used to be sized three different, disagreeing ways
   in this codebase — a 48px/10px-radius base and a 42px/8px-radius mobile
   override in the generator's own per-template stylesheet, plus this file's
   38px — and only the last one ever painted, because it is the only one
   scoped under body .site-main. --thumb-rail is now the one number every
   .sib-thumb consumer reads, at both sizes: do not size a new rail thumbnail
   with a literal pixel value, change this token instead (mobile here, 701px
   override below). Recorded at docs/design-system/website.html
   #rail-contract-title. */
body .site-main .siblings-grid .sib-thumb{
  flex:0 0 var(--thumb-rail);width:var(--thumb-rail);height:var(--thumb-rail);
  border-radius:var(--press-radius);object-fit:cover;background:var(--sage-wash);
}
body .site-main span.sib-thumb{
  display:grid;place-items:center;border:1px solid var(--line);font-size:15px;
}
@media(min-width:701px){
  :root{--thumb-rail:72px;}
}
/* A comparison row links TWO plants, so it shows both of their thumbnails as a
   small overlapping pair. It previously borrowed the single-photo plant-row
   shape with a "↔" glyph in the photo box, which read as a failed image.
   Both the offset (0.53) and the pair's total width (1.53) are the same
   ratio to --thumb-rail that the fixed 20px/58px pair kept to 38px, so the
   overlap looks identical at both rail sizes instead of needing its own
   tuning. */
body .site-main .sib-pair{
  position:relative;flex:0 0 calc(var(--thumb-rail) * 1.53);
  width:calc(var(--thumb-rail) * 1.53);height:var(--thumb-rail);
}
body .site-main .sib-pair .sib-thumb{
  position:absolute;top:0;flex:none;width:var(--thumb-rail);height:var(--thumb-rail);
  box-shadow:0 0 0 2px var(--cream);
}
body .site-main .sib-pair .sib-thumb:first-child{left:0;z-index:1;}
body .site-main .sib-pair .sib-thumb:last-child{left:calc(var(--thumb-rail) * 0.53);z-index:2;}

/* Related destinations form one editorial continuation, not a narrow rail
   of mismatched rows. The comparison is a distinct preface; the plant links
   reuse the site's established discovery-card primitive. */
body .site-main .tpl-chapter--related .tpl-chapter__inner{display:block;}
body .site-main .tpl-chapter--related .tpl-chapter__head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
}
body .site-main .tpl-chapter--related .tpl-chapter__head h2{max-width:18ch;}
body .site-main .tpl-chapter--related .tpl-chapter__body{margin-top:24px;}
body .site-main .siblings-comparisons{display:grid;gap:12px;margin:0 0 22px;}
body .site-main .siblings-comparisons .sib-compare{
  display:grid;grid-template-columns:auto minmax(0,1fr) 24px;align-items:center;gap:18px;
  min-height:108px;padding:16px 20px;border:1px solid var(--line);border-radius:16px;
  background:color-mix(in srgb,var(--sage-wash) 64%,var(--paper));
  color:var(--ink);font-family:var(--serif);font-size:clamp(20px,2vw,25px);
  font-weight:500;line-height:1.15;text-decoration:none;
}
body .site-main .siblings-comparisons .sib-txt{min-width:0;}
body .site-main .siblings-comparisons__arrow{color:var(--emerald-dark);font-size:20px;text-align:right;}
body .site-main .related-plant-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,24px);
}
body .site-main .related-plant-card{text-decoration:none;}
body .site-main .related-plant-card .card-photo{display:block;}
body .site-main .related-plant-card .card-body{display:block;}
body .site-main .related-plant-card .card-name,
body .site-main .related-plant-card .card-sci{display:block;}
body .site-main .tpl-chapter--related .siblings-more{margin-top:20px;}
body .site-main .tpl-chapter--related .siblings-more>summary{
  width:max-content;max-width:100%;min-height:44px;display:inline-flex;
  align-items:center;justify-content:center;gap:10px;padding:0 20px;margin:0;
  border:1px solid var(--line);border-radius:2px;background:transparent;
  color:var(--ink);font-family:var(--body);font-size:15px;font-weight:600;
  list-style:none;cursor:pointer;
}
body .site-main .tpl-chapter--related .siblings-more>summary::-webkit-details-marker{display:none;}
body .site-main .tpl-chapter--related .siblings-more>summary span{
  font-size:18px;font-weight:400;color:var(--emerald-dark);
  transition:transform .2s cubic-bezier(.2,.9,.25,1);
}
body .site-main .tpl-chapter--related .siblings-more[open]>summary span{transform:rotate(45deg);}
body .site-main .tpl-chapter--related .siblings-more .related-plant-grid{margin-top:22px;}
@media(hover:hover) and (pointer:fine){
  body .site-main .tpl-chapter--related .siblings-more>summary:hover{
    border-color:var(--emerald-dark);color:var(--emerald-dark);
  }
}
@media(max-width:900px){
  body .site-main .related-plant-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:560px){
  body .site-main .related-plant-grid{grid-template-columns:minmax(0,1fr);}
  body .site-main .tpl-chapter--related .tpl-chapter__head{display:block;}
  body .site-main .tpl-chapter--related .country-rank-link--quiet{margin-top:12px;}
  body .site-main .siblings-comparisons .sib-compare{
    grid-template-columns:auto minmax(0,1fr) 18px;gap:12px;min-height:92px;padding:14px 16px;
  }
}

/* ── 7. Letterpress conversion, never over artwork ─────────────────────── */
body .site-main .guide-opening-action,body .site-main .fallback-link{
  width:max-content;max-width:100%;min-height:52px;display:inline-flex;
  align-items:center;justify-content:center;gap:14px;margin-top:24px;padding:0 22px;
  border:0;border-radius:var(--press-radius,2px);
  background:#0F2A1F;color:#FBF8F1;
  box-shadow:var(--press-shadow,6px 6px 0 rgba(15,42,31,.18));
  font-size:17px;font-weight:600;line-height:1.2;text-decoration:none;
  transition:transform .12s cubic-bezier(.2,.9,.25,1),box-shadow .12s cubic-bezier(.2,.9,.25,1);
}
body .site-main .guide-opening-action:active,body .site-main .fallback-link:active{
  transform:translate(var(--press-travel,6px),var(--press-travel,6px));
  box-shadow:0 0 0 rgba(15,42,31,.18);
}
@media(hover:hover) and (pointer:fine){
  body .site-main .guide-opening-action:hover,body .site-main .fallback-link:hover{
    transform:translate(2px,2px);filter:none;
    box-shadow:var(--press-shadow-hover,4px 4px 0 rgba(15,42,31,.18));
  }
  body .site-main .siblings-grid a:hover{color:var(--emerald-dark);}
}
@media(prefers-reduced-motion:reduce){
  body .site-main .guide-opening-action,body .site-main .fallback-link{transition:none;}
}

/* ── 7b. Species evidence and the care guide's vitals ──────────────────── */
/* Care guides open with their approved family scene. The exact named plant
   then appears once, immediately below, as evidence beside the one-glance
   facts. Photo-less pages keep their former fallback text only for freshness
   continuity; no lookalike photograph is ever substituted. */
body .site-main .guide-opening-specimen[hidden]{display:none!important;}
body .site-main .guide-evidence--care{
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(22px,3vw,40px);
  width:min(1180px,calc(100vw - (2 * var(--site-gutter))));max-width:none;
  margin:0 0 clamp(40px,5vw,64px) 50%;transform:translateX(-50%);align-items:start;
}
body .site-main .guide-evidence-photo{
  display:block;width:100%;max-width:420px;margin:0;
}
body .site-main .guide-evidence-photo__frame{
  display:block;width:100%;aspect-ratio:auto;padding:6px;
  overflow:hidden;border:1px solid var(--hair);border-radius:20px;background:var(--cream);
}
body .site-main .guide-evidence-photo img{
  display:block;width:100%;height:auto;border-radius:16px;object-fit:contain;object-position:center;
}
body .site-main .guide-evidence-photo figcaption{
  margin:12px 6px 0;color:var(--muted);font-size:14px;font-style:italic;line-height:1.5;
}
/* The exact plant photo and record stay side by side only while both have
   enough room to read naturally. Below that point the whole evidence module
   stacks; no intermediate width is allowed to squeeze either half. */
@media(min-width:960px){
  body .site-main .guide-evidence--care.guide-evidence--with-photo{
    grid-template-columns:minmax(300px,420px) minmax(0,1fr);
  }
}
@media(max-width:959px){
  body .site-main .guide-evidence--care{
    width:auto;margin:0 0 30px;transform:none;
  }
  body .site-main .guide-evidence--care.guide-evidence--with-photo{
    grid-template-columns:minmax(0,1fr);
  }
  body .site-main .guide-evidence-photo{
    max-width:none;
  }
  body .site-main .guide-evidence-photo__frame{aspect-ratio:auto;padding:5px;border-radius:16px;}
  body .site-main .guide-evidence-photo img{height:auto;border-radius:12px;object-fit:contain;}
}
body .site-main .guide-evidence__record{
  min-width:0;container:care-evidence / inline-size;
}
/* The vitals are eight self-contained facts, not a spreadsheet. Each label
   stays above its own value so resizing cannot pull related words to opposite
   edges or make long translations collide. The record's own width, rather
   than the browser width, decides whether it has four, two or one columns. */
body .site-main .guide-facts-card{
  max-width:1040px;padding:20px 22px;border:1px solid var(--hair);
  border-radius:20px;background:var(--card);
}
body .site-main .guide-facts-card__grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(16px,3vw,28px);
  margin:0;
}
body .site-main .guide-facts-card__row{
  display:grid;grid-template-columns:minmax(0,1fr);gap:5px;min-width:0;
  padding:14px 0;border-bottom:1px dotted var(--hair);
}
body .site-main .guide-facts-card__row:nth-last-child(-n+2){border-bottom:0;}
body .site-main .guide-facts-card__row dt{
  margin:0;min-width:0;color:var(--muted);font-size:13px;font-weight:650;
  line-height:1.3;letter-spacing:.02em;overflow-wrap:anywhere;
}
body .site-main .guide-facts-card__row dd{
  margin:0;min-width:0;color:var(--ink);font-size:16px;font-weight:600;
  line-height:1.38;text-align:left;overflow-wrap:anywhere;
}
body .site-main .guide-facts-card__row dd.is-italic{font-style:italic;}
body .site-main .guide-facts-card__row.is-warn dd{color:var(--warn-deep);}
body .site-main .guide-facts-card__row.is-safe dd{color:var(--emerald-dark);}
body .site-main .guide-facts-card__icon{
  display:inline-block;width:14px;height:14px;margin-right:7px;
  vertical-align:-2px;color:inherit;
}
body .site-main .guide-facts-card__icon svg{
  display:block;width:100%;height:100%;overflow:visible;fill:none;
  stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
body .site-main .guide-facts-card__icon svg.is-filled{fill:currentColor;stroke:none;}
@container care-evidence (min-width:680px){
  body .site-main .guide-facts-card__grid{grid-template-columns:repeat(4,minmax(0,1fr));}
  body .site-main .guide-facts-card__row:nth-last-child(-n+4){border-bottom:0;}
}
@container care-evidence (max-width:339px){
  body .site-main .guide-facts-card__grid{grid-template-columns:minmax(0,1fr);}
  body .site-main .guide-facts-card__row:nth-last-child(-n+2){border-bottom:1px dotted var(--hair);}
  body .site-main .guide-facts-card__row:last-child{border-bottom:0;}
}
/* Notable detail. Replaces .plant-record, which was a wrapping run of tiny
   label:value pairs plus a separate late "Something worth knowing" chapter.
   Both said the same kind of thing — what this plant IS, rather than how to
   care for it — so they are one dotted ledger beside the vitals card, and the
   ledger is the shared .site-ledger primitive rather than a bespoke list. */
body .site-main .guide-fieldnotes{
  margin:18px 0 0;padding:16px 0 0;border-top:1px dotted var(--line);
}
body .site-main .guide-fieldnotes__note{
  margin:0 0 12px;color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.55;
}
body .site-main .guide-fieldnotes .site-ledger__row{padding:10px 0;}
body .site-main .guide-fieldnotes .site-ledger__row:last-child{border-bottom:0;}
body .site-main .guide-fieldnotes .site-ledger__label{font-size:15px;}
body .site-main .guide-jump-nav{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);}
body .site-main .guide-jump-nav__label{
  margin:0 0 10px;color:var(--muted);font-size:13px;font-weight:500;line-height:1.25;
  letter-spacing:.16em;text-transform:uppercase;
}
/* Desktop-only: the mobile treatment below 700px is the single-column grid
   declared in the narrow block — this rule previously matched at every width
   (higher specificity than the narrow override) and made that mobile
   treatment dead CSS (verifier find, 2026-08-04). */
@media (min-width:701px){
body .site-main .guide-jump-nav__links{
  display:flex;flex-wrap:wrap;gap:8px;border:0;grid-template-columns:none;
}
}
body .site-main .guide-jump-nav a{
  min-height:44px;display:inline-flex;align-items:center;gap:9px;padding:0 14px;
  border:1px solid var(--line);border-right:1px solid var(--line);border-radius:2px;
  background:transparent;color:var(--ink);font-size:15px;font-weight:600;line-height:1.3;
  grid-template-columns:none;
  /* This is the rule that actually wins the cascade for every locale (highest
     specificity of the three ".guide-jump-nav a" declarations in this file),
     so it is where a width cap belongs. On the mobile chip-scroller strip the
     row is meant to scroll — a later chip sitting past the initial viewport
     is the strip working as designed, not a defect (measured 2026-08-08:
     de/el/fi/uk's widest single chip is 272-287px, comfortably inside the
     350px strip, across all 19 locales on this plant — the row's cumulative
     reach, not any one label, is what a naive position check flags). But
     nothing DEFENDS against a single chip's own unbroken label (a longer
     German compound, a name this site doesn't carry yet) ever growing wider
     than the phone screen. min-width:0 lets the item shrink below its own
     text's natural width; max-width:100% then clamps it to the strip's own
     box, forcing the label (already overflow-wrap:anywhere via
     .guide-jump-nav__text) to wrap onto a second line instead of running off
     the right edge, if that ever happens. */
  min-width:0;max-width:100%;
}
body .site-main .guide-jump-nav__arrow{display:none;}
body .site-main .guide-jump-nav__icon{color:var(--emerald-dark);}
/* A guide index may sit in the quiet copy field of any dark editorial opener.
   It keeps the existing semantic nav and chip behavior; this modifier only
   adapts the shared component's surface colors and measure for artwork. */
body .site-main .guide-jump-nav--hero{
  width:min(100%,680px);margin-top:24px;padding-top:18px;border-top-color:rgba(239,232,214,.20);
}
body .site-main .guide-jump-nav--hero .guide-jump-nav__label{color:#B9C4B4;}
body .site-main .guide-jump-nav--hero .guide-jump-nav__links{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;overflow:visible;
  padding:0;border-block:1px solid rgba(239,232,214,.20);-webkit-mask-image:none;mask-image:none;
}
body .site-main .guide-jump-nav--hero a{
  width:auto;min-height:44px;display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;
  padding:8px 10px;border:0;border-right:1px solid rgba(239,232,214,.20);border-bottom:1px solid rgba(239,232,214,.20);
  border-radius:0;background:color-mix(in srgb,#0C2017 28%,transparent);color:#EFE8D6;
}
body .site-main .guide-jump-nav--hero .guide-jump-nav__icon{color:#34C99A;}
@media(hover:hover) and (pointer:fine){
  body .site-main .guide-jump-nav a:hover{background:transparent;border-color:var(--emerald-dark);}
  body .site-main .guide-jump-nav--hero a:hover{
    background:color-mix(in srgb,#0C2017 58%,transparent);border-color:#34C99A;
  }
}
@media (max-width:700px){
  body .site-main .guide-jump-nav--hero{margin-top:20px;padding-top:14px;}
  body .site-main .guide-jump-nav--hero .guide-jump-nav__links{
    grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;padding:0;
    -webkit-mask-image:none;mask-image:none;
  }
  body .site-main .guide-jump-nav--hero a{
    flex:initial;grid-template-columns:19px minmax(0,1fr);gap:6px;min-width:0;max-width:none;
    min-height:44px;padding:6px 8px;white-space:normal;scroll-snap-align:none;
    font-size:13px;line-height:1.25;
  }
  body .site-main .guide-jump-nav--hero .guide-jump-nav__icon{width:19px;height:19px;}
  body .site-main .guide-jump-nav--hero .guide-jump-nav__icon svg{width:16px;height:16px;}
}
/* Symptom chips inside the forest problems chapter read on the dark ground.
   The chip itself has no border to retint any more — see "Index chips"
   below — only its text colour is a dark-surface concern. */
body .site-main .tpl-chapter--forest .sym-chips a{color:#34C99A;}
body .site-main .tpl-chapter--forest .problems .prob{
  border-color:rgba(239,232,214,.20);color:#EFE8D6;
}
body .site-main .tpl-chapter--forest .problems .prob h3{color:#EFE8D6;}
body .site-main .tpl-chapter--forest .problems .prob p,
body .site-main .tpl-chapter--forest .problems .prob li{color:#B9C4B4;}
body .site-main .tpl-chapter--forest .problems .prob strong{color:#EFE8D6;}
body .site-main .tpl-chapter--forest .problems .prob-signs li{border-top-color:rgba(239,232,214,.20);}
body .site-main .tpl-chapter--forest .verify,
body .site-main .tpl-chapter--forest .verify a{color:#B9C4B4;}
body .site-main .pet-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:2px;}
body .site-main .pet-action{
  min-height:44px;display:inline-flex;align-items:center;justify-content:space-between;gap:12px;padding:0;
  border:0;border-radius:0;background:transparent;box-shadow:none;
  color:var(--emerald-dark);font-size:15px;font-weight:700;line-height:1.35;text-decoration:none;
}
body .site-main .pet-action--primary{
  min-height:52px;padding:10px 18px;border-radius:999px;background:var(--emerald-dark);color:var(--cream);
}
body .site-main .pet-action--primary::after{content:"→";font-size:17px;font-weight:500;}
body .site-main .pet-action--primary:active{transform:scale(.98);box-shadow:none;}
@media(hover:hover) and (pointer:fine){
  body .site-main .pet-action:not(.pet-action--primary):hover{text-decoration:underline;}
  body .site-main .pet-action--primary:hover{filter:brightness(1.06);}
}
@media(max-width:700px){
  body .site-main .pet-actions{align-items:stretch;gap:8px;margin-top:4px;}
  body .site-main .pet-action{width:100%;min-height:48px;padding:2px 0;}
  body .site-main .pet-action--primary{min-height:56px;padding:12px 18px;}
}

/* ── 7c. Toxicity and propagation ──────────────────────────────────────── */
/* The verdict is the answer this page exists to give: display type with a
   tone dot, not a bordered sub-heading. */
body .site-main .guide-opening--toxicity .guide-opening-copy h2{
  display:flex;align-items:baseline;gap:12px;margin:14px 0 12px;padding:0;
  border:0;border-radius:0;background:transparent;
  font-family:var(--serif);font-size:clamp(24px,3vw,28px);font-weight:500;line-height:1.15;
  letter-spacing:-.01em;color:var(--warn);
}
body .site-main .guide-opening--toxicity .guide-opening-copy h2::before{
  content:"";flex:0 0 10px;width:10px;height:10px;border-radius:999px;background:var(--warn);
}
/* Safe is emerald, toxic is clay. The tone class must sit on the SECTION, not
   on a nested fact card — a selector that reached for it deeper in the tree
   silently never matched, and every non-toxic plant announced itself in alarm
   red. Guarded by assertToxicityPageMarkup. */
body .site-main .guide-opening--safety.is-safe .guide-opening-copy h2{color:var(--emerald-dark);}
body .site-main .guide-opening--safety.is-safe .guide-opening-copy h2::before{background:var(--emerald-dark);}
/* The verdict chip. It moved here from the toxicity template when the opening
   became a band, because a component that rides ON the picture needs BOTH
   grounds designed in one place — a family cannot own half a contrast decision.
   Two cues, not one: the toxic verdict is FILLED with a solid dot, the safe
   verdict is OUTLINED with a ring, so a squint or a colour-blind reader still
   gets the answer. Both survive the ground change; only the pigments move. */
body .site-main .guide-opening--toxicity.guide-opening--safety .guide-opening-copy h2.tox-verdict{
  display:inline-flex;align-items:baseline;gap:13px;max-width:100%;
  margin:16px 0 18px;padding:13px 22px 15px;
  border:1.5px solid transparent;border-radius:20px;
  font-size:clamp(29px,3.5vw,44px);line-height:1.1;letter-spacing:-.015em;text-wrap:balance;
}
body .site-main .guide-opening--toxicity.guide-opening--safety .guide-opening-copy h2.tox-verdict::before{
  flex:0 0 12px;width:12px;height:12px;
}
body .site-main .guide-opening--toxicity.guide-opening--safety.is-toxic .guide-opening-copy h2.tox-verdict{
  border-color:color-mix(in srgb,var(--warn) 34%,transparent);
  background:color-mix(in srgb,var(--warn) 9%,var(--paper));
}
body .site-main .guide-opening--toxicity.guide-opening--safety.is-safe .guide-opening-copy h2.tox-verdict{
  border-color:color-mix(in srgb,var(--emerald-dark) 38%,transparent);background:transparent;
}
body .site-main .guide-opening--toxicity.guide-opening--safety.is-safe .guide-opening-copy h2.tox-verdict::before{
  background:transparent;box-shadow:inset 0 0 0 3px var(--emerald-dark);
}
/* On the forest ground both pigments change and nothing else does. Clay #C7553B
   measures 3.88:1 on flat forest and 4.29:1 against its own tinted chip once the
   scrim's 8% of parchment is composited in — under AA either way — so the dark
   surface gets clay's twin the way emerald already has one. #F0947A measures
   5.32:1 on the tinted chip at the scrim's worst point and 7.46:1 on flat
   forest; #34C99A outlined measures 6.62:1. The fill drops to a tint of the
   twin because a paper-mixed fill is a cream card floating on a night scene. */
/* The forest selectors carry the cream ones' full class list plus the ground,
   because the two states are decided at six classes deep and a shorter dark
   rule loses to them — measured: the safe verdict's ring stayed brand emerald
   at 2.60:1 on the band until this matched them class for class. */
body .site-main .guide-opening--toxicity.guide-opening--safety.guide-opening--forest .guide-opening-copy h2.tox-verdict{color:#F0947A;}
body .site-main .guide-opening--toxicity.guide-opening--safety.guide-opening--forest .guide-opening-copy h2.tox-verdict::before{background:#F0947A;}
body .site-main .guide-opening--toxicity.guide-opening--safety.guide-opening--forest.is-toxic .guide-opening-copy h2.tox-verdict{
  border-color:color-mix(in srgb,#F0947A 40%,transparent);
  background:color-mix(in srgb,#F0947A 15%,transparent);
}
body .site-main .guide-opening--toxicity.guide-opening--safety.guide-opening--forest.is-safe .guide-opening-copy h2.tox-verdict{
  color:#34C99A;
  border-color:color-mix(in srgb,#34C99A 44%,transparent);background:transparent;
}
body .site-main .guide-opening--toxicity.guide-opening--safety.guide-opening--forest.is-safe .guide-opening-copy h2.tox-verdict::before{
  background:transparent;box-shadow:inset 0 0 0 3px #34C99A;
}
@media(max-width:700px){
  body .site-main .guide-opening--toxicity.guide-opening--safety .guide-opening-copy h2.tox-verdict{
    max-width:100%;padding:12px 18px 14px;font-size:clamp(27px,8vw,34px);
  }
}
/* When an answer rides on forest, its emerald rule and fact use the dark
   surface twins. Symptom answers now sit on the paper transition below the art,
   but the shared style remains available to another image-led answer. */
body .site-main .guide-opening--forest .guide-opening-answer{
  border-left-color:#34C99A;color:#B9C4B4;
}
body .site-main .guide-opening--forest .guide-opening-answer>span{color:#34C99A;}
body .site-main .guide-opening--forest .guide-opening-answer strong{color:#EFE8D6;}
body .site-main .toxicity-symptoms{margin:0 0 18px;padding-left:20px;}
body .site-main .toxicity-symptoms li{margin:7px 0;font-size:16px;line-height:1.55;}
body .site-main .pet-alts{font-size:16px;line-height:1.6;color:var(--ink-soft);}
/* Propagation: a method is a titled block, and its steps are the spine. */
body .site-main .tpl-standalone-heading{
  width:min(1180px,calc(100vw - (2 * var(--site-gutter))));max-width:none;
  margin:clamp(40px,5vw,64px) 0 18px 50%;transform:translateX(-50%);
  padding:0;border:0;font-weight:400;font-size:clamp(30px,4vw,40px);line-height:1.06;
  letter-spacing:-.025em;
}
body .site-main .tpl-method{
  width:min(1180px,calc(100vw - (2 * var(--site-gutter))));max-width:none;
  margin:0 0 clamp(28px,4vw,44px) 50%;transform:translateX(-50%);
  padding-top:20px;border-top:1px solid var(--line);
}
body .site-main .tpl-method h3{
  margin:0 0 8px;font-family:var(--body);font-size:clamp(21px,2.4vw,26px);
  font-weight:600;line-height:1.2;
}
body .site-main .tpl-method>p{margin:0 0 18px;color:var(--ink-soft);font-size:17px;line-height:1.6;}
body .site-main .how-to-steps.tpl-spine{border:0;}
body .site-main .how-to-steps.tpl-spine li{
  font-size:17px;line-height:1.6;color:var(--ink-soft);
}
/* The paper-band repaint must not reach the first disc: it outweighs the
   :first-child active rule on background but not on color, which left a cream
   digit on a card-tone fill — 1.07:1, an invisible step 01 on every spine
   inside a paper chapter. The active disc keeps its dark emerald fill. */
body .site-main .tpl-chapter--paper .how-to-steps.tpl-spine>li:not(:first-child)::before{background:var(--card);}

/* ── 7d. The discovery families: hubs, collections, ranking ────────────── */
/* Pet-safety results are data sections, not hero moments. Separate their
   status and derived count from the title's display treatment, then use the
   body face for a calm, highly legible table heading. */
body main#site-main .result-group h2{
  display:block;max-width:24ch;margin:0 0 9px;color:var(--ink);font-family:var(--body);
  font-size:clamp(32px,3.1vw,44px);font-weight:700;letter-spacing:-.035em;line-height:1.08;
  text-transform:none;text-wrap:balance;
}
body main#site-main .result-group__title{display:block;}
body main#site-main .result-group__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:10px;color:var(--muted);
  font-family:var(--body);font-size:13.5px;font-weight:600;letter-spacing:0;line-height:1.35;text-transform:none;
}
body main#site-main .result-group__meta .tag{
  display:inline-flex;align-items:center;gap:7px;padding:0;border:0;border-radius:0;background:transparent;
  color:inherit;font:inherit;
}
body main#site-main .result-group__meta .tag::before{
  content:"";width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:currentColor;
}
body main#site-main .result-group__meta .tag.safe{color:var(--emerald-dark);background:transparent;}
body main#site-main .result-group__meta .tag.toxic{color:var(--verdict-warn);background:transparent;}
body main#site-main .result-group__meta .count{
  color:var(--muted);font:inherit;letter-spacing:0;text-transform:none;
}
body main#site-main .result-group .sec-intro{
  max-width:62ch;margin:1px 0 0;color:var(--ink-soft);font-size:16px;line-height:1.55;
}
@media(max-width:600px){
  body main#site-main .result-group h2{font-size:clamp(28px,8vw,34px);letter-spacing:-.03em;}
  body main#site-main .result-group__meta{font-size:13px;}
}
/* Templates A and B draw every index the same way: a portrait plate at 4:5
   with a 20px corner, the name in the display face beneath it, the latin name and
   any verdict under that, and square 2px facet chips. One set of rules, so the
   guide hub, the pet-safe hub, the six collections and the country ranking
   cannot drift into four different card systems. */
/* Two across on a phone, per README-site ("the plant index goes 4-across →
   2-across"), then as many as the measure allows. auto-fill alone gave one
   column at 390, because a 190px minimum cannot fit twice inside 350px. */
body .site-main--wide>.grid,body .site-main .hub-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px;
}
@media(min-width:640px){
  body .site-main--wide>.grid,body .site-main .hub-grid{
    grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:32px 24px;
  }
}
body .site-main .card,body .site-main--wide>.grid .card{
  overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none;
}
/* A discovery card is one destination, not a photograph followed by two
   browser-default text links. The whole plate owns colour, focus and hover;
   its common and scientific names remain editorial metadata inside it. */
body .site-main a.card,body .site-main--wide>.grid a.card{
  display:block;color:var(--ink);text-decoration:none;
}
body .site-main a.card:visited,body .site-main--wide>.grid a.card:visited{
  color:var(--ink);
}
body .site-main a.card:focus-visible,body .site-main--wide>.grid a.card:focus-visible{
  border-radius:20px;outline:3px solid var(--emerald);outline-offset:5px;
}
body .site-main .card-photo,body .site-main--wide>.grid .card-photo{
  overflow:hidden;aspect-ratio:4/5;border-radius:20px;background:var(--sage-wash);
}
body .site-main .card-photo img{
  width:100%;height:100%;display:block;object-fit:cover;
  transition:transform .18s cubic-bezier(.2,.9,.25,1);
}
body .site-main .card-photo .ph,body .site-main--wide>.grid .card-photo .ph{
  width:100%;height:100%;display:grid;place-items:center;color:var(--emerald-dark);
}
body .site-main .card-photo .ph svg,body .site-main--wide>.grid .card-photo .ph svg{
  width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}
body .site-main .card-body,body .site-main--wide>.grid .card-body{padding:12px 0 0;}
body .site-main .card-name,body .site-main--wide>.grid .card-name{
  color:var(--ink);font-family:var(--body);font-size:18px;font-weight:600;
  line-height:1.25;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere;
  text-decoration:none;transition:color .18s cubic-bezier(.2,.9,.25,1);
}
body .site-main .card-sci{margin-top:3px;color:var(--muted);font-size:14px;font-style:italic;line-height:1.4;overflow-wrap:anywhere;}
@media(hover:hover) and (pointer:fine){
  body .site-main a.card:hover .card-name,body .site-main--wide>.grid a.card:hover .card-name{
    color:var(--emerald-dark);
  }
  body .site-main a.card:hover .card-photo img,body .site-main--wide>.grid a.card:hover .card-photo img{
    transform:scale(1.018);
  }
}
@media(prefers-reduced-motion:reduce){
  body .site-main a.card .card-name,body .site-main a.card .card-photo img,
  body .site-main--wide>.grid a.card .card-name,body .site-main--wide>.grid a.card .card-photo img{
    transition:none;
  }
}
body .site-main .card-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px;}
body .site-main .chip{
  min-height:0;display:inline-flex;align-items:center;padding:0;
  border:0;border-radius:0;background:transparent;color:var(--muted);
  font-size:14px;font-weight:600;line-height:1.4;
}
body .site-main .chip.safe{color:var(--emerald-dark);}
body .site-main .chip+.chip::before{content:"·";padding-right:8px;color:var(--muted);font-weight:400;}
/* Single controls only — Show more/Show all/Browse all/the ranking back
   link — square, hairline, 44px. A REPEATED list of destination links is
   not a control and does not belong in this group; see "Index chips". */
body .site-main .hub-more,
body .site-main .list-toggle,body .site-main .ranking-back,body .site-main .browse a{
  min-height:44px;display:inline-flex;align-items:center;padding:0 14px;
  border:1px solid var(--line);border-radius:2px;background:transparent;
  color:var(--ink);font-size:15px;font-weight:600;line-height:1.3;text-decoration:none;
}
/* ── Editorial discovery links ───────────────────────────────────────────
   The plant-care hub is a doorway, not a sitemap. Its collection destinations
   use real plant photography and one asymmetric shared grid; high-interest
   article links use the quieter story-row variant beneath it. Both patterns
   are whole-card anchors with the same focus, radius and image behaviour, so
   another page can reuse them without creating family-specific CSS. */
body .site-main .hub-pathways{margin:0 0 clamp(46px,6vw,72px);}
body .site-main .hub-pathways__heading{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  margin:0 0 20px;
}
body .site-main .hub-pathways__heading h2{
  max-width:none;margin:0;font-family:var(--serif);font-size:clamp(30px,3.4vw,44px);
  font-weight:400;line-height:1.02;letter-spacing:-.025em;color:var(--ink);
}
body .site-main .hub-pathways__grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
}
body .site-main .hub-pathway-card{
  min-width:0;display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--hair);border-radius:18px;background:var(--field-paper);
  color:var(--ink);text-decoration:none;
}
body .site-main .hub-pathway-card--featured{grid-column:1/-1;}
body .site-main .hub-pathway-card__media{
  display:block;overflow:hidden;aspect-ratio:16/10;background:var(--sage-wash);
}
body .site-main .hub-pathway-card__media img{
  width:100%;height:100%;display:block;object-fit:cover;
  transition:transform .28s cubic-bezier(.2,.9,.25,1);
}
body .site-main .hub-pathway-card__body{
  min-width:0;min-height:74px;display:grid;grid-template-columns:minmax(0,1fr) 22px;
  align-items:center;gap:12px;padding:14px 16px;
}
body .site-main .hub-pathway-card__title{
  min-width:0;font-family:var(--serif);font-size:clamp(17px,2vw,22px);
  font-weight:500;line-height:1.13;overflow-wrap:break-word;word-break:normal;
}
body .site-main .hub-pathway-card__arrow,
body .site-main .hub-story-card__arrow{
  color:var(--emerald-dark);font-size:20px;line-height:1;text-align:right;
  transition:transform .2s cubic-bezier(.2,.9,.25,1);
}
body .site-main .hub-stories{margin:0 0 clamp(46px,6vw,72px);}
body .site-main .hub-stories__grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;
}
body .site-main .hub-story-card{
  min-width:0;min-height:118px;display:grid;
  grid-template-columns:112px minmax(0,1fr) 24px;align-items:center;gap:18px;
  padding:12px;border:1px solid var(--hair);border-radius:18px;
  background:color-mix(in srgb,var(--sage-wash) 68%,var(--field-paper));
  color:var(--ink);text-decoration:none;
}
body .site-main .hub-story-card__media{
  width:112px;aspect-ratio:1;display:block;overflow:hidden;border-radius:12px;
  background:var(--field-paper);
}
body .site-main .hub-story-card__media img{
  width:100%;height:100%;display:block;object-fit:cover;
  transition:transform .28s cubic-bezier(.2,.9,.25,1);
}
body .site-main .hub-story-card__title{
  min-width:0;font-family:var(--serif);font-size:clamp(19px,2vw,24px);
  font-weight:500;line-height:1.16;overflow-wrap:anywhere;
}
body .site-main .hub-pathway-card:focus-visible,
body .site-main .hub-story-card:focus-visible{
  outline:3px solid var(--emerald-dark);outline-offset:3px;
}
@media(min-width:1024px){
  body .site-main .hub-pathways__grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-template-rows:repeat(3,minmax(0,1fr));gap:16px;
  }
  body .site-main .hub-pathway-card--featured{grid-column:span 2;grid-row:span 3;}
  body .site-main .hub-pathway-card--featured .hub-pathway-card__media{
    flex:1 1 auto;min-height:0;aspect-ratio:auto;
  }
  body .site-main .hub-pathway-card:not(.hub-pathway-card--featured) .hub-pathway-card__media{
    aspect-ratio:16/8;
  }
  body .site-main .hub-pathway-card--featured .hub-pathway-card__body{min-height:88px;padding:18px 20px;}
  body .site-main .hub-pathway-card--featured .hub-pathway-card__title{font-size:clamp(25px,2.3vw,32px);}
  body .site-main .hub-pathway-card:not(.hub-pathway-card--featured) .hub-pathway-card__body{
    min-height:70px;padding:12px 14px;
  }
}
@media(max-width:639px){
  body .site-main .hub-pathways__heading{margin-bottom:16px;}
  body .site-main .hub-pathways__heading h2{font-size:32px;}
  body .site-main .hub-pathway-card__body{min-height:68px;padding:12px;gap:8px;}
  body .site-main .hub-pathway-card__title{font-size:15px;}
  body .site-main .hub-stories__grid{grid-template-columns:minmax(0,1fr);}
  body .site-main .hub-story-card{
    min-height:100px;grid-template-columns:82px minmax(0,1fr) 20px;gap:12px;padding:9px;
  }
  body .site-main .hub-story-card__media{width:82px;border-radius:10px;}
  body .site-main .hub-story-card__title{font-size:18px;}
}
@media(hover:hover) and (pointer:fine){
  body .site-main .hub-pathway-card:hover,
  body .site-main .hub-story-card:hover{border-color:var(--emerald-dark);}
  body .site-main .hub-pathway-card:hover img,
  body .site-main .hub-story-card:hover img{transform:scale(1.025);}
  body .site-main .hub-pathway-card:hover .hub-pathway-card__arrow,
  body .site-main .hub-story-card:hover .hub-story-card__arrow{transform:translateX(3px);}
}

/* A collection page's sibling destinations are a compact directory, not an
   inline index chip. The same collection imagery already leads the hub, so a
   small repeated thumbnail keeps the relationship visible without repeating
   the large opener artwork or inventing new editorial copy. */
body .site-main .related-collections{margin-top:42px;}
body .site-main--collection>h2,
body .site-main--collection .related-collections h2{
  font-family:var(--display);font-size:clamp(30px,3.4vw,44px);font-weight:400;
  line-height:1.02;letter-spacing:-.025em;
}
body .site-main--collection .related-collections h2{margin:0 0 16px;
}
body .site-main .related-collection-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
}
body .site-main .related-collection-card{
  min-width:0;min-height:92px;display:grid;
  grid-template-columns:64px minmax(0,1fr) 22px;align-items:center;gap:12px;
  padding:10px;border:1px solid var(--hair);border-radius:16px;
  background:color-mix(in srgb,var(--sage-wash) 68%,var(--field-paper));
  color:var(--ink);text-decoration:none;
}
body .site-main .related-collection-card__media{
  width:64px;height:64px;display:block;overflow:hidden;border-radius:10px;
  background:var(--field-paper);
}
body .site-main .related-collection-card__media img{
  width:100%;height:100%;display:block;object-fit:cover;
  transition:transform .22s cubic-bezier(.2,.9,.25,1);
}
body .site-main .related-collection-card__title{
  min-width:0;font-family:var(--body);font-size:clamp(17px,1.6vw,19px);
  font-weight:650;line-height:1.2;letter-spacing:-.005em;overflow-wrap:anywhere;
}
body .site-main .related-collection-card::after{
  content:"→";grid-column:3;grid-row:1;color:var(--emerald-dark);
  font-size:20px;line-height:1;text-align:right;
  transition:transform .2s cubic-bezier(.2,.9,.25,1);
}
body .site-main .related-collection-card:focus-visible{
  outline:3px solid var(--emerald-dark);outline-offset:3px;
}
@media(min-width:1000px){
  body .site-main .related-collection-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(min-width:640px) and (max-width:999px){
  body .site-main .related-collection-card:last-child:nth-child(odd){grid-column:1/-1;}
}
@media(max-width:639px){
  body .site-main--collection>h2,
  body .site-main--collection .related-collections h2{font-size:32px;}
  body .site-main .related-collection-grid{grid-template-columns:minmax(0,1fr);gap:10px;}
  body .site-main .related-collection-card{min-height:84px;padding:9px;}
  body .site-main .related-collection-card__media{width:64px;height:64px;}
  body .site-main .related-collection-card__title{font-size:17px;}
}
body .site-main .hub-result-count,
body .site-main .rank-guide-label,body .site-main .ranking-meta,body .site-main .count{
  color:var(--muted);font-size:13px;font-weight:500;line-height:1.3;
  letter-spacing:.16em;text-transform:uppercase;
}
body .site-main .hub-directory-heading{
  font-family:var(--serif);font-size:clamp(28px,3.4vw,34px);font-weight:400;
  line-height:1.06;letter-spacing:-.02em;
}
/* Country ranking keeps its own list geometry — it is the one family whose
   rows are already a measured two-column reading list, and imposing the card
   grid on it collapsed every name to one letter per line. Only the surface
   treatment is shared: dotted separators, a display numeral, square corners. */
body .site-main .rank-card{
  border:0;border-bottom:1px dotted var(--line);border-radius:0;background:transparent;
  box-shadow:none;
}
body .site-main .rank-card-photo,body .site-main .rank-card-placeholder{
  overflow:hidden;border-radius:2px;background:var(--sage-wash);
}
body .site-main .rank-scientific{color:var(--muted);font-size:14px;font-style:italic;}
@media(hover:hover) and (pointer:fine){
  body .site-main .hub-more:hover,body .site-main .list-toggle:hover,
  body .site-main .ranking-back:hover,body .site-main .browse a:hover{border-color:var(--emerald-dark);}
  body .site-main .related-collection-card:hover{border-color:var(--emerald-dark);}
  body .site-main .related-collection-card:hover .related-collection-card__media img{transform:scale(1.025);}
  body .site-main .related-collection-card:hover::after{transform:translateX(3px);}
}
@media(prefers-reduced-motion:reduce){
  body .site-main .related-collection-card__media img,
  body .site-main .related-collection-card::after{transition:none;}
}

/* A list of symptoms is a small diagnostic index, not a cloud of arrows.
   One ruled column keeps five uneven labels ordered and calm at every width;
   counter marks provide rhythm without inventing cards or another icon set. */
body .site-main .problems-diagnose{
  padding:18px 20px 16px;border-left:3px solid var(--emerald);
  background:color-mix(in srgb,var(--sage-wash) 64%,transparent);
}
body .site-main .problems-diagnose__lead{
  margin:0 0 8px;color:var(--ink);font-size:15px;font-weight:600;line-height:1.4;
}
body .site-main .problems-diagnose .sym-chips{
  display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin:0;counter-reset:symptom-index;
}
body .site-main .problems-diagnose .sym-chips a{
  counter-increment:symptom-index;display:grid;
  grid-template-columns:28px minmax(0,1fr) 16px;gap:10px;align-items:center;
  min-height:44px;padding:7px 0;border:0;border-bottom:1px dotted var(--line);
  color:var(--ink);font-size:15px;font-weight:600;line-height:1.35;text-decoration:none;
}
body .site-main .problems-diagnose .sym-chips a:last-child{border-bottom:0;}
body .site-main .problems-diagnose .sym-chips a::before{
  content:counter(symptom-index,decimal-leading-zero);color:var(--muted);
  font-size:12px;font-weight:600;letter-spacing:.08em;
}
body .site-main .problems-diagnose .sym-chips a::after{
  content:"→";color:var(--emerald-dark);font-size:14px;font-weight:500;text-align:right;
}
@media(hover:hover) and (pointer:fine){
  body .site-main .problems-diagnose .sym-chips a:hover{color:var(--emerald-dark);}
}

/* ── 8. Functional-copy floor ──────────────────────────────────────────── */
/* The site's floor for functional supporting copy is 13px, and lane A already
   rejected the canvases' 11px eyebrow for exactly this reason. These labels
   were authored at 11-12px and were only lifted below 700px; they are the same
   labels at 1440. */
body .site-main .guide-opening-product-brand,
body .site-main .guide-jump-nav__label,

/* ── Wide ─────────────────────────────────────────────────────────────── */
@media(min-width:768px){
  /* The opening's own scale moved into bandOpenerBaseCss(), beside the rules it
     overrides, so a consumer that emits only the opening still gets it. */
  body .site-main .tpl-chapter>h2,body .site-main .tpl-chapter__head h2{font-size:clamp(34px,4vw,46px);}
  body .site-main .tpl-chapter__lede{font-size:19px;}
  body .site-main .tpl-spine::before{left:18px;}
  body .site-main .tpl-spine>*,
  body .site-main .problems.sym-causes.tpl-spine>.prob{
    grid-template-columns:38px minmax(0,1fr);column-gap:18px;padding-bottom:32px;
  }
  body .site-main .tpl-spine>*::before{width:38px;height:38px;font-size:15px;}
  body .site-main .tpl-spine>* h3{font-size:17px;}
  body .site-main .tpl-spine>* p{font-size:17px;}
  body .site-main .tpl-ledger>*{grid-template-columns:minmax(0,1fr) var(--tpl-ledger-value,200px);gap:0;}
  body .site-main .tpl-ledger dt,body .site-main .tpl-ledger .tpl-ledger__label{padding-right:24px;font-size:17px;}
  body .site-main .tpl-panel{padding:24px 26px;}
  body .site-main .tpl-chapter--forest .faq summary{font-size:26px;padding:22px 0;}
  body .site-main .tpl-chapter--forest .faq details p{font-size:18px;margin-bottom:24px;}
  body .site-main .siblings-grid a{font-size:21px;}
  body .site-main .category-art{width:100%;margin-inline:0;border-radius:28px;}
  body .site-main .guide-jump-nav a{font-size:14px;}
}
@media(min-width:1024px){
  body .site-main .category-art img{object-position:var(--art-focal,50% 50%);}
  body .site-main .tpl-chapter__inner{
    grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(40px,5vw,64px);
  }
  /* Common problems: the head column held a heading, a one-line lede and then
     a tall empty gutter beside two problem cards. The diagnose chips move into
     it (column 1, row 2). They stay LAST in the DOM so the single-column phone
     layout keeps its existing order — cards, then chips — which is why this is
     an explicit placement rather than a source-order change. */
  body .site-main .care-chapter--problems .tpl-chapter__inner{align-content:start;}
  body .site-main .care-chapter--problems .tpl-chapter__head{grid-column:1;grid-row:1;}
  body .site-main .care-chapter--problems .tpl-chapter__body{grid-column:2;grid-row:1 / span 2;}
  body .site-main .care-chapter--problems .problems-diagnose{grid-column:1;grid-row:2;margin-top:32px;}
}

body .site-main .guide-opening--forest[data-band-ground]{
  /* A band that somehow arrives without its measurements still composes:
     a 9:16 cut with the subject in the bottom half is what every tall cut
     in the registry is, so the fallback is the shape, not a guess at zero.
     The generator refuses to write a band opener whose art has no measured
     subject, so this should never be the value that renders. */
  --band-art-ratio:1.7778;--band-subject:.5;--band-subject-x:.62;
  --band-art-h:calc(100vw * var(--band-art-ratio));
  --band-subject-reserve:calc(var(--band-art-h) * var(--band-subject));
  position:relative;z-index:0;isolation:isolate;display:block;overflow:visible;
  padding-top:clamp(34px,5vw,64px);
  padding-bottom:calc(clamp(34px,5vw,64px) + var(--band-subject-reserve));
  background:rgb(var(--band-forest));
}
/* The artless band. A legal document has no family illustration and must not
   borrow one — a mascot is the wrong voice over terms of service, and inventing
   art for a contract is worse. What it keeps is everything else: the same
   full-bleed forest ground, the same masthead running over it, the same
   eyebrow/headline/lede on the same measure. The subject reserve is zero
   because there is no subject, so the band is exactly as tall as its words.
   Any family that has no picture yet can open on this and lose nothing but the
   picture. */
body .site-main .guide-opening--forest[data-band-ground="quiet"]{
  --band-subject:0;--band-art-ratio:0;--band-subject-x:1;
}
body .site-main .guide-opening--forest[data-band-ground="quiet"]::before,
body .site-main .guide-opening--forest[data-band-ground="quiet"]::after{display:none;}
body .site-main .guide-opening--forest[data-band-ground]>*{position:relative;z-index:2;}
/* The picture stops being a block and becomes the band's ground layer. Its
   height is capped at the tall cut's own width-filling height, so the crop is
   horizontal-fit only and the subject zone is exactly --band-subject-reserve
   whatever the copy does above it. */
body .site-main .guide-opening--forest[data-band-ground]>.category-art{
  position:absolute;z-index:0;top:0;right:0;bottom:0;left:0;
  /* The art FILLS the band, the way the homepage hero does.
     It used to be capped at min(100%,var(--band-art-h)), which left the top of
     the band bare — a flat slab of ground with the scrim over it, then the
     picture starting on a hard line (+11 luma on a phone, +40 on desktop,
     running straight through the lede). Capping the height and then trying to
     hide the resulting edge with a mask only moved the problem: the plateau of
     flat colour above the art stayed, and that flat zone reads as an overlay
     laid on top rather than one continuous image.
     Letting the art fill means there is no edge and no bare zone — the scrim
     grades from near-opaque behind the copy to clear at the subject, and the
     texture is faintly present the whole way up. Same composition the homepage
     gets by baking the falloff into a 9:16 master; here the scrim does it,
     because the family crops are 4:5 and shared across 19 locales.
     The --band-art-h variable still drives --band-subject-reserve, which is
     what keeps the copy off the subject; only the art's own height cap is
     lifted. (No backticks in this comment: the whole block is a JS template
     literal, and one backtick silently truncates the stylesheet.) */
  /* height:auto, NOT 100%. Both top and bottom are set now, so a height would
     over-constrain the box and the browser would drop the bottom offset —
     the art would keep its old height and simply slide up, leaving bare ground
     at the foot of the band. Auto lets the two offsets define the height, which
     is the band plus its overhang. */
  width:100%;height:auto;
  margin:0;padding:0;border:0;border-radius:0;
  aspect-ratio:auto;background:none;overflow:hidden;
}
body .site-main .guide-opening--forest[data-band-ground]>.category-art img{
  width:100%;height:100%;object-fit:cover;object-position:50% 100%;
  /* The art's own measured average tone (--art-tone, declared by the picture
     from the registry) holds the zone while the file loads, so a slow
     connection sees a quiet tinted block under the scrim instead of a bare
     void. Painted on the img, it vanishes the moment pixels cover it. */
  background-color:var(--art-tone,transparent);
}
/* Family artwork owns its reading lane. A large shared veil would erase the
   leaf texture and recreate a text panel, so the composition adds no body wash;
   only the short masthead/back-link wash below remains. */
body .site-main .guide-opening--forest[data-band-ground]::before{
  content:"";position:absolute;z-index:1;
  top:0;right:0;bottom:0;left:0;pointer-events:none;
  background:none;
}
/* The masthead runs over the composition rather than above it, so the scene
   starts at the document's first pixel. The bar is out of flow, which is what
   .nav--over-art does. The head wash below gives the masthead a stable ground. */
body .site-main--forest-open{--band-nav-h:72px;}
@media(min-width:1280px){body .site-main--forest-open{--band-nav-h:88px;}}
body .site-main--forest-open>.guide-opening--forest:first-child{
  padding-top:calc(var(--band-nav-h) + clamp(34px,5vw,64px));
}
/* The head wash is deliberately short. It protects masthead contrast, then
   clears before the headline so the artwork keeps its own reading lane. */
body .site-main--forest-open>.guide-opening--forest[data-band-ground]::after{
  content:"";display:block;position:absolute;z-index:1;top:0;right:0;left:0;
  height:calc(var(--band-nav-h) + 116px);pointer-events:none;
  background:linear-gradient(180deg,
    rgba(var(--band-forest),.92) 0,
    rgba(var(--band-forest),.86) var(--band-nav-h),
    rgba(var(--band-forest),.52) calc(var(--band-nav-h) + 44px),
    rgba(var(--band-forest),.16) calc(var(--band-nav-h) + 84px),
    rgba(var(--band-forest),0) 100%);
}
/* ── 10b. Lateral: copy left, subject right ─────────────────────────────── */
@media(min-width:1024px){
  body .site-main .guide-opening--forest[data-band-ground]{
    display:block;align-items:stretch;
    /* Width-filling holds while the band stays under 42vw of height, which is
       what keeps --band-subject-x an exact fraction of the viewport. */
    min-height:clamp(440px,42vw,620px);
    padding-bottom:clamp(56px,6vw,88px);
    --band-copy-inset:var(--site-edge);
    --band-copy-gap:clamp(48px,6vw,104px);
    --band-copy-width:min(
      var(--band-copy-max),
      calc((var(--band-subject-x) * 100vw) - var(--band-copy-inset) - var(--band-copy-gap))
    );
    --band-hold:calc(var(--band-copy-inset) + var(--band-copy-width));
  }
  body .site-main:not(.site-main--forest-open)>.guide-opening--forest[data-band-ground]:first-child{
    padding-top:clamp(56px,6vw,88px);
  }
  body .site-main .guide-opening--forest[data-band-ground]>.guide-opening-copy{
    width:var(--band-copy-width);max-width:100%;
  }
  /* The lateral min-height exists to give a picture room. An artless band has
     no picture, so it is exactly as tall as its words plus the bar's clearance
     — anything else is a field of empty forest above the reading page. */
  body .site-main .guide-opening--forest[data-band-ground="quiet"]{min-height:0;}
  /* A photo pair must stay large enough for leaf comparison without turning
     the opener into the whole first screen. Keep the shared one-column rhythm,
     but cap the evidence and tighten its lower handoff so the answer begins in
     the initial desktop view. */
  body .site-main .guide-opening--forest.guide-opening--photo-pair[data-band-ground]{
    gap:28px;padding-bottom:clamp(40px,3vw,48px);
  }
  body .site-main .guide-opening--photo-pair .guide-opening-pair{
    max-width:clamp(480px,38vw,560px);
  }
  /* auto for the same reason as the base rule: top and bottom are both set, so
     a height silently drops the bottom offset and the art stops short of the
     band's foot. Measured at 1024 and up before this line existed. */
  body .site-main .guide-opening--forest[data-band-ground]>.category-art{height:auto;}
  body .site-main .guide-opening--forest[data-band-ground]>.category-art img{
    object-position:var(--art-focal,50% 50%);
  }
  /* Wide artwork also carries its own dark copy lane; no lateral wash. */
  body .site-main .guide-opening--forest[data-band-ground]::before{
    background:none;
  }
}



body .site-main .site-band--north-star>.site-band__copy{display:flex;flex-direction:column;gap:14px;}
body .site-main .site-band--north-star>.site-band__copy .guide-opening-kicker,
body .site-main .site-band--north-star>.site-band__copy .blr-eyebrow,
body .site-main .site-band--north-star>.site-band__copy h1,
body .site-main .site-band--north-star>.site-band__copy .lede,
body .site-main .site-band--north-star>.site-band__copy .reference-lede{margin:0;}
body .site-main .site-band--north-star>.site-band__copy h1{max-width:12ch;font-size:40px;font-weight:400;letter-spacing:-.03em;line-height:1;text-wrap:pretty;overflow-wrap:normal;word-break:normal;hyphens:none;}
body .site-main .site-band--north-star>.site-band__copy .lede,
body .site-main .site-band--north-star>.site-band__copy .reference-lede{max-width:300px;color:var(--band-fg-soft);font-size:17px;line-height:1.5;text-wrap:pretty;}
@media(orientation:portrait) and (max-width:639px){body .site-main .site-band--north-star{min-height:clamp(680px,80svh,760px);}}
@media(min-width:768px){
  body .site-main .site-band--north-star>.site-band__copy{gap:22px;}
  body .site-main .site-band--north-star>.site-band__copy h1{font-size:clamp(48px,5.42vw,78px);}
  body .site-main .site-band--north-star>.site-band__copy .lede,
  body .site-main .site-band--north-star>.site-band__copy .reference-lede{max-width:510px;font-size:19px;line-height:1.5;}
}
@media(orientation:portrait) and (min-width:640px) and (max-width:1023px){
  body .site-main .site-band--north-star{min-height:clamp(760px,84svh,900px);}
  body .site-main .site-band--north-star>.site-band__copy{gap:14px;}
}
@media(min-width:1024px){body .site-main .site-band--north-star{min-height:clamp(680px,50vw,780px);}}
@media(orientation:landscape) and (min-width:640px) and (max-height:600px){body .site-main .site-band--north-star{min-height:100svh;}}
/* One light-pixel hero composition for BOTH website presses. The React
   homepage and generated editorial pages have different semantic markup, but
   their artwork, copy lane, veil, type measure and responsive behavior are one
   mechanism here. Families provide only words and the responsive art pair. */
body .site-main :is(.site-band--pixel,.guide-opening--editorial-art.guide-opening--pixel){
  --band-fg:var(--ink);--band-fg-soft:var(--ink-soft);--band-focal:50% 18%;
  width:100vw;min-height:clamp(560px,74svh,660px)!important;background:var(--cream);
}
body .site-main :is(.site-band--pixel,.guide-opening--editorial-art.guide-opening--pixel) :is(.site-eyebrow,.guide-opening-kicker),
body .site-main .site-band--pixel .site-band__copy a{color:#1f6b4a;}
body .site-main :is(.site-band--pixel.site-band--north-star,.guide-opening--editorial-art.guide-opening--pixel)>:is(.site-band__copy,.guide-opening-copy){
  width:min(760px,calc(100% - (2 * var(--site-edge))));max-width:none;margin-left:var(--site-edge);
  align-self:start;padding:118px 0 48px;display:flex;flex-direction:column;gap:20px;background:none;
}
@media(min-width:1024px){
  /* Keep every desktop scene full-bleed and unmasked. Readability comes from
     fitting live copy inside the artwork's authored empty left area, never
     from a gradient, veil, panel, or replacement background. */
  body .site-main :is(.site-band--pixel.site-band--north-star,.guide-opening--editorial-art.guide-opening--pixel)>:is(.site-band__copy,.guide-opening-copy){
    width:min(580px,40vw);gap:12px;
  }
  body .site-main :is(.site-band--pixel.site-band--north-star,.guide-opening--editorial-art.guide-opening--pixel)>:is(.site-band__copy,.guide-opening-copy) h1{
    /* The authored desktop scenes keep their floor around 506px. Let live
       copy use the quiet cream field down to 480px; the older 420px guard
       forced long, truthful headings to shrink before they reached any
       painted object. */
    --hero-heading-min:30px;--hero-copy-safe-bottom:480px;max-width:480px!important;
  }
  body .site-main .guide-opening--editorial-art.guide-opening--pixel.guide-opening--symptom>.guide-opening-copy h1{
    --hero-copy-safe-bottom:390px;
  }
  body .site-main .guide-opening--editorial-art.guide-opening--pixel.guide-opening--collection>.guide-opening-copy h1{
    --hero-copy-safe-bottom:500px;
  }
  body .site-main .guide-opening--editorial-art.guide-opening--pixel.guide-opening--toxicity>.guide-opening-copy h1{
    --hero-copy-safe-bottom:505px;
  }
  body .site-main .guide-opening--editorial-art.guide-opening--pixel.guide-opening--collection>.guide-opening-copy .count{width:max-content;}
  body .site-main :is(.site-band--pixel.site-band--north-star,.guide-opening--editorial-art.guide-opening--pixel)>:is(.site-band__copy,.guide-opening-copy) :is(.lede,.reference-lede){
    width:100%!important;max-width:480px!important;font-size:17px!important;line-height:1.45!important;
  }
  body .site-main .guide-opening--editorial-art.guide-opening--pixel.guide-opening--symptom>.guide-opening-copy :is(.lede,.reference-lede){
    max-width:510px!important;line-height:1.35!important;
  }
  body .site-main .guide-opening--editorial-art.guide-opening--pixel .toxicity-symptoms{
    margin:-4px 0 0!important;padding-left:18px!important;
  }
  body .site-main .guide-opening--editorial-art.guide-opening--pixel .toxicity-symptoms li{
    margin:1px 0!important;font-size:18px!important;line-height:1.25!important;
  }
  body .site-main .site-band--pixel.site-band--north-star>.site-band__copy{padding-top:var(--north-star-copy-top,174px);}
}
body .site-main :is(.site-band--pixel.site-band--north-star,.guide-opening--editorial-art.guide-opening--pixel)>:is(.site-band__copy,.guide-opening-copy) h1{
  max-width:none;margin:0;font-size:clamp(40px,4.4vw,64px)!important;line-height:.98;letter-spacing:-.025em;
  text-wrap:balance;overflow-wrap:normal;word-break:normal;hyphens:none;
}
body .site-main :is(.site-band--pixel.site-band--north-star,.guide-opening--editorial-art.guide-opening--pixel)>:is(.site-band__copy,.guide-opening-copy) :is(.lede,.reference-lede){
  width:min(510px,80%);max-width:min(510px,80%);margin:0;font-size:19px;line-height:1.5;
}
/* Short landscape tablets are wide enough to expose the full scene but too
   short to use the desktop reading measure. Keep live copy inside the quiet
   left field so headings and ledes do not run into the authored artwork. The
   care hub uses the React band markup; editorial guides use the generated
   opening markup, but both belong to this same responsive contract. */
@media(orientation:landscape) and (min-width:640px) and (max-width:1023px) and (max-height:600px){
  body .site-main :is(
    .guide-opening--editorial-art.guide-opening--pixel>.guide-opening-copy,
    .site-band--north-star.guide-opening--care-hub>.site-band__copy
  ){
    width:min(44vw,420px)!important;max-width:min(44vw,420px)!important;
  }
  body .site-main :is(
    .guide-opening--editorial-art.guide-opening--pixel>.guide-opening-copy,
    .site-band--north-star.guide-opening--care-hub>.site-band__copy
  ) h1{
    max-width:100%!important;font-size:clamp(34px,4.75vw,44px)!important;
  }
  body .site-main :is(
    .guide-opening--editorial-art.guide-opening--pixel>.guide-opening-copy,
    .site-band--north-star.guide-opening--care-hub>.site-band__copy
  ) :is(.lede,.reference-lede){
    width:100%!important;max-width:100%!important;font-size:17px!important;line-height:1.42!important;
  }
}
body .site-main .site-band--pixel>.site-band__scrim,
body .site-main .guide-opening--editorial-art.guide-opening--pixel::before{
  display:none!important;background:none!important;
}
@media(max-width:700px){
  /* Portrait masters are authored at 9:16. Use that measured canvas as the
     minimum phone height, not a rigid box: ordinary copy stays on the exact
     artwork ratio while a genuinely crowded narrow translation can grow by
     only the space its live text needs. */
  body .site-main :is(.site-band--pixel.site-band--north-star,.guide-opening--editorial-art.guide-opening--pixel){width:calc(100% + (2 * var(--site-gutter)));min-height:calc(100vw * 16 / 9)!important;aspect-ratio:auto;}
  body .site-main :is(.site-band--pixel.site-band--north-star,.guide-opening--editorial-art.guide-opening--pixel)>:is(.site-band__copy,.guide-opening-copy){
    width:100%;max-width:none;margin:0;padding:112px var(--site-gutter) 44px;gap:8px;background:none;
  }
  body .site-main :is(.site-band--pixel.site-band--north-star,.site-band--pixel.site-band--copy-tall-mobile,.guide-opening--editorial-art.guide-opening--pixel)>:is(.site-band__copy,.guide-opening-copy)>*{
    width:72%;max-width:72%;
  }
  body .site-main :is(.site-band--pixel.site-band--north-star,.guide-opening--editorial-art.guide-opening--pixel)>:is(.site-band__copy,.guide-opening-copy) h1{
    --hero-heading-min:18px;max-width:none;font-size:clamp(28px,8.75vw,34px)!important;line-height:1;
  }
  body .site-main :is(.site-band--pixel.site-band--north-star,.guide-opening--editorial-art.guide-opening--pixel)>:is(.site-band__copy,.guide-opening-copy) :is(.lede,.reference-lede){
    width:80%;max-width:80%;font-size:clamp(16px,4.1vw,17px);line-height:1.35;
  }
  /* Named artwork-safe variants adjust the live copy lane, never the canvas.
     The shared 9:16 portrait is the normal phone height; if a translation
     genuinely needs more room, normal grid min-content sizing may grow the
     opener from its content instead of every page inheriting a fixed slab. */
  body .site-main .guide-opening--pixel.guide-opening--copy-tall-mobile>.guide-opening-copy .lede{
    width:92%;max-width:92%;
  }
  body .site-main .guide-opening--pixel.guide-opening--copy-narrow-mobile>.guide-opening-copy h1{
    width:72%;max-width:72%;font-size:clamp(27px,7.6vw,34px)!important;
  }
  body .site-main .guide-opening--pixel.guide-opening--copy-narrow-mobile>.guide-opening-copy .lede{
    width:68%;max-width:68%;
  }
  /* Every portrait master reserves a quiet upper field for live copy. It is
     therefore shown directly on phones; no family-specific paper panel or
     dark wash is allowed to create a second mobile method. */
  body .site-main .site-band--pixel>.site-band__scrim,
  body .site-main .guide-opening--editorial-art.guide-opening--pixel::before{background:none!important;}
  body .site-main .site-band--pixel.site-band--copy-tall-mobile>.site-band__copy [data-hero-heading-fit]{
    --hero-heading-min:18px;--hero-heading-max-lines:6;
  }
}
/* Named asset-safe reading lane for a mid-page phone scene with long localized
   copy. A single cream reading field and a dedicated artwork row prevent the
   prose or action from covering the subject. The lower row is tall enough to
   show a full paired mascot composition at the source artwork's native scale;
   the whole band may grow with translated copy instead of clipping either
   words or artwork into a fixed-height frame. */
@media(max-width:700px){
  body .site-main .site-band--pixel.site-band--mobile-reading-lane{
    display:grid;grid-template-rows:auto clamp(305px,84.5vw,330px);
    min-height:0!important;background:var(--cream);
  }
  body .site-main .site-band--pixel.site-band--mobile-reading-lane>picture{
    position:relative;z-index:0;grid-row:2;display:block;width:100%;height:100%;overflow:hidden;
  }
  body .site-main .site-band--pixel.site-band--mobile-reading-lane>picture>.site-band__art{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;
  }
  body .site-main .site-band--pixel.site-band--mobile-reading-lane>.site-band__copy{
    grid-row:1;width:100%;max-width:none;margin:0;padding:28px var(--site-gutter) 24px;
    gap:10px;background:var(--cream);
  }
  body .site-main .site-band--pixel.site-band--mobile-reading-lane>.site-band__copy>*{
    width:100%;max-width:520px;margin-block:0;
  }
  body .site-main .site-band--pixel.site-band--mobile-reading-lane>.site-band__copy .site-band__lede{
    padding:0;border:0;background:none;
  }
  body .site-main .site-band--pixel.site-band--mobile-reading-lane>.site-band__copy>a{
    width:fit-content!important;max-width:100%!important;min-height:44px;padding:0;
    border:0;background:none;box-shadow:none;
    white-space:normal;text-wrap:balance;overflow-wrap:anywhere;
  }
}
@media(orientation:portrait) and (min-width:701px) and (max-width:1023px){
  body .site-main :is(.site-band--pixel.site-band--north-star,.site-band--pixel.site-band--copy-tall-mobile,.guide-opening--editorial-art.guide-opening--pixel){min-height:100svh!important;}
  /* The source portraits are 9:16, but their authored quiet ceiling becomes
     an unhelpful dead field on a portrait tablet. Keep the same live copy and
     image layers, then use a tighter tablet crop; phones retain the native
     portrait slot and desktop keeps its lateral composition. */
  body .site-main :is(.site-band--pixel.site-band--north-star,.guide-opening--editorial-art.guide-opening--pixel){
    min-height:0!important;aspect-ratio:4/5;
  }
  body .site-main .site-band--pixel.site-band--north-star{--band-focal:50% 100%;}
  /* Some portrait masters deliberately carry removable quiet space above the
     scene. The crop is metadata on the artwork, not a page-family exception:
     keep the image bottom-anchored and shorten only that authored canvas. */
  body .site-main .guide-opening--editorial-art.guide-opening--pixel:has(>.guide-opening-photo--mobile-top-crop){min-height:calc(100vw * 1372 / 941)!important;aspect-ratio:941/1372;}
  body .site-main :is(.site-band--pixel.site-band--north-star,.site-band--pixel.site-band--copy-tall-mobile,.guide-opening--editorial-art.guide-opening--pixel)>:is(.site-band__copy,.guide-opening-copy)>*{
    width:72%;max-width:72%;
  }
}

/* A category doorway can carry both the article opener's typography class and
   the immersive band's composition class. The band owns geometry and colour
   when those roles meet; the article rules continue to own every non-band
   opener. The north-star already owns a fixed desktop lane and is excluded
   from this generic fallback. Keep this after canvasFamilyCss so the shared
   roles cannot collide. */
body .site-main .site-band:not(.site-band--north-star)>.site-band__copy.guide-opening-copy{
  position:relative;z-index:2;width:min(100%,calc(var(--band-copy-max) + (2 * var(--site-gutter))));
  max-width:100%;padding:40px var(--site-gutter) 44px;color:var(--band-fg);
}
body .site-main .site-band>.site-band__copy.guide-opening-copy h1{color:var(--band-fg);}
body .site-main .site-band>.site-band__copy.guide-opening-copy .lede{color:var(--band-fg-soft);}
body .site-main .site-band .guide-opening-kicker{color:#34C99A;}
/* Pixel band opens on a cream veil: the mint kicker (tuned for the dark forest
   band) would sit near-invisible, so recolour it to the deep emerald the
   homepage hero eyebrow uses on cream. h1/lede already flip via --band-fg. */
body .site-main .site-band--pixel .guide-opening-kicker{color:#1f6b4a;}
/* Portrait copy-safe rule: long localized hub headlines get the full safe
   width. The artwork's mobile crop and cream scrim preserve the scene without
   forcing long words into narrow, hyphenated columns. */
@media(max-width:767px){
  body .site-main .site-band--pixel.site-band--north-star>.site-band__copy{
    width:100%;
    max-width:none;
  }
}
/* Pixel opener is a cream field, so its "In this guide" jump-nav takes the LIGHT
   treatment — dark ink text, emerald icons, frosted-cream chips — instead of the
   dark-opener colors .guide-jump-nav--hero carries (which read as muddy grey over
   the cream veil and the art). Readable on both the veil and the scene. */
body .site-main .guide-opening--pixel .guide-jump-nav--hero .guide-jump-nav__label{color:var(--muted);}
body .site-main .guide-opening--pixel .guide-jump-nav--hero .guide-jump-nav__links{border-color:var(--line);}
body .site-main .guide-opening--pixel .guide-jump-nav--hero a{background:color-mix(in srgb,var(--paper) 80%,transparent);color:var(--ink);border-right-color:var(--line);border-bottom-color:var(--line);}
body .site-main .guide-opening--pixel .guide-jump-nav--hero .guide-jump-nav__icon{color:var(--emerald-dark);}
@media(hover:hover) and (pointer:fine){
  body .site-main .guide-opening--pixel .guide-jump-nav--hero a:hover{background:color-mix(in srgb,var(--paper) 93%,transparent);border-color:var(--emerald-dark);}
}
@media(min-width:768px){
  body .site-main .site-band:not(.site-band--north-star)>.site-band__copy.guide-opening-copy{
    width:calc(var(--band-copy-inset) + var(--band-copy-width));
    padding:clamp(72px,7vw,92px) 56px clamp(64px,6.5vw,84px);
    padding-left:var(--band-copy-inset);
  }
}
/* Contextual app handoff. The page subject is live copy, the exact plant photo
   supplies atmosphere, and a current localized capture supplies product proof.
   The frame stays compact on a phone and never becomes a second page hero. */
body .site-main .context-app-cta{
  grid-column:1/-1;position:relative;isolation:isolate;width:min(760px,100%);margin:32px 0;
  border:1px solid color-mix(in srgb,var(--forest-cta) 52%,transparent);border-radius:28px;
  color:var(--ink);background:linear-gradient(145deg,var(--sage-wash),var(--cream) 62%,#d7eee8);
  box-shadow:8px 8px 0 color-mix(in srgb,var(--forest-cta) 90%,transparent);
}
body .site-main .context-app-cta--card{
  --app-card-scene:url("/landing/hero-pixel-discovery-mobile-v2.webp");
  min-height:430px;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(240px,.92fr);
  gap:18px;align-items:stretch;overflow:hidden;padding:20px;
}
body .site-main .context-app-cta--card[data-app-proof="care"]{--app-card-scene:url("/landing/hero-pixel-care-mobile-v2.webp");}
body .site-main .context-app-cta--card[data-app-proof="doctor"]{--app-card-scene:url("/landing/hero-pixel-symptom-mobile-v2.webp");}
body .site-main .context-app-cta--card[data-app-proof="early-care"]{--app-card-scene:url("/landing/hero-pixel-propagation-mobile-v1.webp");}
body .site-main .context-app-cta--card[data-app-proof^="shop-scan"]{--app-card-scene:url("/landing/hero-pixel-safety-mobile-v2.webp");}
body .site-main .context-app-cta--card::before{
  content:"";position:absolute;z-index:-2;inset:0;background-image:var(--app-card-scene);
  background-size:cover;background-position:center;image-rendering:auto;
}
body .site-main .context-app-cta__store-photo{position:absolute;z-index:-1;inset:0;overflow:hidden;}
body .site-main .context-app-cta__store-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,color-mix(in srgb,var(--sage-wash) 86%,transparent) 0 45%,color-mix(in srgb,var(--cream) 48%,transparent) 72%,transparent);
}
body .site-main .context-app-cta__store-photo img{
  width:100%;height:100%;display:block;object-fit:cover;object-position:center;
  opacity:.26;filter:saturate(.78) contrast(.9) blur(1px);transform:scale(1.02);
}
body .site-main .context-app-cta__store-copy{
  position:relative;z-index:2;min-width:0;display:flex;flex-direction:column;align-items:flex-start;
  padding:clamp(24px,4vw,34px);border:1px solid color-mix(in srgb,var(--cream) 72%,transparent);
  border-radius:22px;background:color-mix(in srgb,var(--field-paper) 95%,transparent);
  box-shadow:0 18px 40px -34px var(--forest-cta);
}
body .site-main .context-app-cta__identity{
  display:flex;align-items:center;gap:11px;margin:0 0 12px;
}
body .site-main .context-app-cta__store-icon{
  flex:none;width:48px;height:48px;display:block;border-radius:11px;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--forest-cta) 14%,transparent);
}
body .site-main .context-app-cta__label{
  margin:0;color:var(--emerald-dark);font-family:var(--body);font-size:12px;font-weight:700;
  letter-spacing:.11em;line-height:1.35;text-transform:uppercase;white-space:nowrap;
}
body .site-main .context-app-cta--card .context-app-cta__headline{
  max-width:18ch;margin:0;color:var(--ink);font-family:var(--body);font-size:clamp(32px,4.8vw,44px);
  font-weight:750;letter-spacing:-.035em;line-height:1.02;overflow-wrap:break-word;
}
body .site-main .context-app-cta--card .app-card__promise{
  max-width:30ch;margin:11px 0 0;color:var(--ink);font-family:var(--body);font-size:17px;
  font-weight:650;line-height:1.38;
}
body .site-main .context-app-cta--card .app-card__checks{
  width:100%;max-width:38ch;margin:18px 0 20px;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;
}
body .site-main .context-app-cta--card .app-card__checks li{
  position:relative;min-height:44px;display:flex;align-items:center;padding:4px 0 4px 54px;
  color:var(--ink-soft);font-family:var(--body);font-size:15.5px;line-height:1.42;
}
body .site-main .context-app-cta--card .app-card__checks li:last-child{
  border-bottom:0;
}
body .site-main .context-app-cta--card .app-card__checks li::before{
  content:"";position:absolute;left:0;top:50%;width:38px;height:38px;border-radius:50%;
  background:var(--forest-cta);transform:translateY(-50%);
}
body .site-main .context-app-cta--card .app-card__checks li::after{
  content:"";position:absolute;left:11px;top:50%;width:13px;height:7px;
  border-left:3px solid var(--cream);border-bottom:3px solid var(--cream);
  transform:translateY(-68%) rotate(-45deg);
}
body .site-main .context-app-cta__stores{
  position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:auto;
}
body .site-main .context-app-cta__stores .store-badge{
  position:relative;min-width:0;height:44px;display:inline-flex;align-items:center;justify-content:center;
  overflow:hidden;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;
}
body .site-main .context-app-cta__stores .store-badge img{position:absolute;display:block;width:auto;max-width:none;}
body .site-main .context-app-cta__stores .store-badge--apple{width:132px;}
body .site-main .context-app-cta__stores .store-badge--apple img{top:0;left:0;height:44px;}
body .site-main .context-app-cta__stores .store-badge--play{width:149px;}
body .site-main .context-app-cta__stores .store-badge--play img{top:-10.75px;left:-10.75px;height:65.5px;}
body .site-main .context-app-cta .app-card__proof{
  position:relative;z-index:2;align-self:end;height:390px;margin:36px 0 -20px;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--forest-cta) 16%,transparent);border-bottom:0;
  border-radius:24px 24px 0 0;background:var(--field-paper);box-shadow:0 22px 50px -30px var(--forest-cta);
}
body .site-main .context-app-cta .app-card__proof figcaption{
  position:absolute;z-index:2;top:12px;left:12px;max-width:calc(100% - 24px);margin:0;padding:7px 9px;
  border:1px solid color-mix(in srgb,var(--forest-cta) 13%,transparent);border-radius:8px;
  color:var(--ink-soft);background:color-mix(in srgb,var(--field-paper) 94%,transparent);
  font-family:var(--body);font-size:11px;font-weight:650;letter-spacing:.03em;line-height:1.3;
}
body .site-main .context-app-cta .app-card__proof-placeholder{
  width:100%;height:100%;background:linear-gradient(180deg,var(--field-paper),color-mix(in srgb,var(--sage-wash) 82%,var(--field-paper)));
}
body .site-main .context-app-cta :is(.store-badge):focus-visible{
  outline:3px solid var(--focus-ring,var(--emerald-dark));outline-offset:4px;
}
body .site-main .symptom-causes-flow>.context-app-cta{margin-top:14px;}
@media(hover:hover) and (pointer:fine){
  body .site-main .context-app-cta__stores .store-badge:hover{transform:translate(1px,1px);}
}
@media(max-width:700px){
  body .site-main .context-app-cta{margin:26px 0;border-radius:24px;box-shadow:5px 5px 0 var(--forest-cta);}
  body .site-main .context-app-cta--card{
    min-height:0;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 112px;gap:0;padding:10px;
  }
  body .site-main .context-app-cta__store-photo::after{
    background:linear-gradient(180deg,color-mix(in srgb,var(--sage-wash) 84%,transparent) 0 62%,color-mix(in srgb,var(--cream) 54%,transparent) 82%,transparent);
  }
  body .site-main .context-app-cta__store-photo{display:none;}
  body .site-main .context-app-cta__store-copy{padding:18px 18px 17px;border-radius:19px;}
  body .site-main .context-app-cta__identity{gap:9px;margin-bottom:10px;}
  body .site-main .context-app-cta__store-icon{width:42px;height:42px;border-radius:9px;}
  body .site-main .context-app-cta__label{font-size:12px;}
  body .site-main .context-app-cta--card .context-app-cta__headline{max-width:13ch;font-size:clamp(34px,9.8vw,40px);line-height:1.02;}
  body .site-main .context-app-cta--card .app-card__promise{margin-top:8px;font-size:15px;line-height:1.35;}
  body .site-main .context-app-cta--card .app-card__checks{margin:14px 0 15px;gap:7px;}
  body .site-main .context-app-cta--card .app-card__checks li{min-height:42px;padding:3px 0 3px 50px;font-size:15px;}
  body .site-main .context-app-cta--card .app-card__checks li::before{width:36px;height:36px;}
  body .site-main .context-app-cta--card .app-card__checks li::after{left:10px;}
  body .site-main .context-app-cta__stores{width:100%;flex-direction:column;align-items:stretch;gap:7px;}
  body .site-main .context-app-cta__stores .store-badge{
    width:100%;height:46px;border:2px solid var(--ink);border-radius:11px;background:color-mix(in srgb,var(--field-paper) 86%,transparent);
  }
  body .site-main .context-app-cta__stores .store-badge--apple img{top:3px;left:50%;height:38px;transform:translateX(-50%);}
  body .site-main .context-app-cta__stores .store-badge--play img{top:-6.75px;left:50%;height:57.5px;transform:translateX(-50%);}
  body .site-main .context-app-cta .app-card__proof{
    width:calc(100% - 28px);height:96px;margin:-3px auto -10px;border-radius:20px 20px 0 0;
  }
  body .site-main .context-app-cta .app-card__proof figcaption{top:9px;left:9px;padding:5px 7px;font-size:10px;}
}
@media(max-width:359px){
  body .site-main .context-app-cta--card{padding:8px;grid-template-rows:auto 104px;}
  body .site-main .context-app-cta__store-copy{padding:18px 16px 16px;}
  body .site-main .context-app-cta--card .context-app-cta__headline{font-size:32px;}
  body .site-main .context-app-cta__stores{gap:6px;}
  body .site-main .context-app-cta .app-card__proof{height:96px;}
}

/* Contextual app handoff. One quiet landscape, one real localized app screen,
   and live copy share the same compact portrait. The phone is a CSS frame, not
   a synthetic screenshot, so the product proof stays current and translatable. */
body .site-main .context-app-promo{
  width:min(430px,100%);margin:46px auto 38px;container-name:app-card;container-type:inline-size;
}
body .site-main .context-app-promo__heading{
  display:grid;grid-template-columns:minmax(22px,1fr) auto minmax(22px,1fr);align-items:center;gap:12px;margin:0 0 13px;
}
body .site-main .context-app-promo__rule,
body .site-main .context-app-promo__end span{height:2px;display:block;background:var(--forest-cta);}
body .site-main .context-app-promo__title{
  margin:0;color:var(--forest-cta);font-family:var(--display);font-size:clamp(22px,6vw,27px);font-weight:750;
  letter-spacing:-.02em;line-height:1;text-align:center;
}
body .site-main .context-app-promo__end{
  display:grid;grid-template-columns:minmax(0,1fr) 8px minmax(0,1fr);align-items:center;gap:10px;margin:14px 0 0;
}
body .site-main .context-app-promo__end i{width:8px;height:8px;display:block;background:var(--emerald-dark);transform:rotate(45deg);}
body .site-main .context-app-promo>.context-app-cta{width:100%;margin:0;}
body .site-main .context-app-cta{
  width:min(430px,100%);margin:30px auto;border:1px solid rgba(5,60,45,.34);border-radius:28px;
  color:var(--ink);background:#dfeacb;box-shadow:0 20px 42px -30px rgba(5,60,45,.82);
}
body .site-main .context-app-cta--card{
  position:relative;min-height:0;aspect-ratio:3/4;display:block;overflow:hidden;padding:0;
}
body .site-main .context-app-cta--card::before{content:none;}
body .site-main .context-app-cta .app-card__proof{
  position:absolute;z-index:0;inset:0;width:100%;height:100%;margin:0;overflow:hidden;
  border:0;border-radius:0;background:#dfeacb;box-shadow:none;
}
body .site-main .app-card__scene{
  position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center;
}
body .site-main .context-app-cta .app-card__proof figcaption{
  z-index:5;top:12px;right:12px;left:auto;max-width:47%;padding:6px 8px;border:0;border-radius:6px;
  color:var(--field-paper);background:var(--forest-cta);box-shadow:0 3px 0 rgba(5,60,45,.18);
  font-size:9px;font-weight:750;letter-spacing:.035em;line-height:1.15;text-align:center;
}
body .site-main .app-card__device{
  position:absolute;z-index:3;right:4.4%;bottom:-4%;width:36.1%;display:block;
  padding:4px;border:1px solid #071b14;border-radius:clamp(20px,5.5vw,26px);
  background:linear-gradient(145deg,#17392e,#071b14 62%,#24483d);box-shadow:0 18px 30px -16px rgba(3,23,16,.78),0 2px 0 rgba(255,255,255,.22) inset;
  transform:perspective(900px) rotateY(-4deg) rotateZ(2.2deg);transform-origin:92% 100%;
}
body .site-main .app-card__device--care{aspect-ratio:9/20;}
body .site-main .app-card__device--today{aspect-ratio:720/1559;}
body .site-main .app-card__device-screen{
  position:absolute;inset:4px;display:block;overflow:hidden;border-radius:clamp(17px,4.8vw,22px);background:var(--field-paper);
}
body .site-main .app-card__device-screen img{
  width:100%;height:100%;display:block;object-fit:cover;object-position:top center;
}
body .site-main .context-app-cta__store-copy{
  --app-card-copy-wash:rgba(251,248,241,.78);
  position:absolute;z-index:4;inset:0 auto 0 0;width:64%;min-width:0;display:flex;flex-direction:column;align-items:flex-start;
  padding:clamp(56px,13.5vw,68px) 12px 18px clamp(18px,5vw,24px);border:0;border-radius:0;background:transparent;box-shadow:none;
}
body .site-main .context-app-cta__store-copy::before{
  content:none;
}
body .site-main .context-app-cta--card .context-app-cta__headline{
  width:fit-content;max-width:11ch;margin:0;padding:5px 7px 6px;border-radius:0;color:var(--forest-cta);
  background:var(--app-card-copy-wash);font-family:var(--body);font-size:clamp(28px,7.75vw,32px);
  font-weight:780;letter-spacing:-.045em;line-height:1;text-wrap:balance;overflow-wrap:normal;
}
body .site-main .context-app-cta--card:is([data-app-card-family="symptom"],[data-app-card-family="toxicity"],[data-app-card-family="product"]) .context-app-cta__headline{
  font-size:clamp(25px,6.8vw,29px);line-height:1.02;
}
body .site-main .context-app-cta--card .app-card__checks{
  width:100%;max-width:none;margin:12px 0 14px;padding:4px 8px;display:grid;gap:0;border-top:1px solid rgba(5,60,45,.18);
  border-radius:0;background:var(--app-card-copy-wash);
}
body .site-main .context-app-cta--card .app-card__checks li{
  min-height:40px;display:grid;grid-template-columns:10px minmax(0,1fr);align-items:center;gap:8px;
  padding:7px 0;border-bottom:1px solid rgba(5,60,45,.18);color:var(--ink-soft);font-family:var(--body);
  font-size:clamp(12px,3.15vw,13.5px);line-height:1.28;
}
body .site-main .context-app-cta--card .app-card__checks li::before,
body .site-main .context-app-cta--card .app-card__checks li::after{content:none;}
body .site-main .context-app-cta--card .app-card__bullet-mark{
  width:6px;height:6px;display:block;background:var(--emerald-dark);box-shadow:2px 2px 0 rgba(5,60,45,.18);
}
body .site-main .context-app-cta--card .app-card__availability{
  width:100%;min-height:22px;display:flex;align-items:center;gap:6px;margin-top:auto;
}
body .site-main .context-app-cta--card .app-card__availability-badge{
  position:relative;height:22px;display:block;overflow:hidden;border-radius:3px;background:#000;
  box-shadow:2px 2px 0 rgba(5,60,45,.28);
}
body .site-main .context-app-cta--card .app-card__availability-badge img{
  position:absolute;display:block;width:auto;max-width:none;
}
body .site-main .context-app-cta--card .app-card__availability-badge--apple{width:66px;}
body .site-main .context-app-cta--card .app-card__availability-badge--apple img{top:0;left:0;height:22px;}
body .site-main .context-app-cta--card .app-card__availability-badge--play{width:74px;}
body .site-main .context-app-cta--card .app-card__availability-badge--play img{top:-5px;left:-5px;height:32px;}
body .site-main .context-app-cta__action{
  position:relative;z-index:6;width:100%;min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:2px;
  margin-top:10px;padding:9px 4px 9px 10px;border:1px solid var(--forest-cta);border-radius:10px;color:var(--field-paper);
  background:var(--forest-cta);box-shadow:0 4px 0 #07372b;font-family:var(--body);font-size:clamp(14px,3.5vw,15.5px);
  font-weight:800;letter-spacing:0;line-height:1.15;text-align:left;text-decoration:none;white-space:nowrap;
}
body .site-main .context-app-cta__action::after{
  content:"→";flex:none;width:18px;height:30px;display:grid;place-items:center;border:1px solid rgba(255,250,240,.52);
  border-radius:6px;background:rgba(255,250,240,.12);font-size:18px;font-weight:650;line-height:1;
}
body .site-main .context-app-cta__action:focus-visible{
  outline:3px solid var(--focus-ring,var(--emerald-dark));outline-offset:3px;
}
body .site-main .symptom-causes-flow>.context-app-cta{margin-top:18px;}
@media(hover:hover) and (pointer:fine){
  body .site-main .context-app-cta__action:hover{background:var(--emerald-dark);transform:translateY(-1px);box-shadow:0 5px 0 #07372b;}
}
@media(max-width:700px){
  body .site-main .context-app-promo{margin:38px auto 32px;}
  body .site-main .context-app-cta{margin:24px auto;border-radius:24px;}
  body .site-main .context-app-promo>.context-app-cta{margin:0;}
}
@media(max-width:359px){
  body .site-main .context-app-cta__store-copy{width:58%;padding:36px 9px 10px 14px;}
  body .site-main .context-app-promo__heading{gap:9px;margin-bottom:10px;}
  body .site-main .context-app-promo__title{font-size:20px;}
  body .site-main .context-app-cta--card .context-app-cta__headline{padding:4px 6px 5px;font-size:22px;}
  body .site-main .context-app-cta--card .app-card__checks{margin:8px 0 4px;padding:3px 6px;}
  body .site-main .context-app-cta--card .app-card__checks li{min-height:35px;gap:7px;padding:5px 0;font-size:11.25px;}
  body .site-main .context-app-cta--card .app-card__availability{min-height:16px;gap:4px;}
  body .site-main .context-app-cta--card .app-card__availability-badge{height:16px;border-radius:2px;box-shadow:1px 1px 0 rgba(5,60,45,.28);}
  body .site-main .context-app-cta--card .app-card__availability-badge--apple{width:48px;}
  body .site-main .context-app-cta--card .app-card__availability-badge--apple img{height:16px;}
  body .site-main .context-app-cta--card .app-card__availability-badge--play{width:54px;}
  body .site-main .context-app-cta--card .app-card__availability-badge--play img{top:-4px;left:-4px;height:24px;}
  body .site-main .context-app-cta__action{min-height:48px;justify-content:center;margin-top:6px;padding:7px;font-size:12px;}
  body .site-main .context-app-cta__action::after{display:none;}
}

body .site-main--care-guide{
  width:100%;max-width:none;padding-inline:0;
}
body .site-main.site-main--care-guide>.guide-opening.guide-opening--care{
  width:100%!important;margin-left:0!important;transform:none!important;
}
body .site-main--care-guide>.tpl-chapter{
  width:100%;margin-left:0;transform:none;
}
body .site-main--care-guide>.guide-opening--care{margin-bottom:0;}
body .site-main--care-guide>.guide-jump-nav--below,
body .site-main--care-guide>.guide-evidence--care{
  width:min(1180px,calc(100% - (2 * var(--site-gutter))));max-width:none;
  margin-inline:auto;transform:none;
}
body .site-main--care-guide>.verify,
body .site-main--care-guide>.byline{
  width:min(760px,calc(100% - (2 * var(--site-gutter))));margin-inline:auto;
}

/* Contents read as an editorial index rather than a row of unrelated chips. */
body .site-main--care-guide>.guide-jump-nav--below{
  margin-top:0;margin-bottom:clamp(38px,5vw,62px);padding-top:0;
  border-top:0;border-bottom:1px solid var(--line);
}
body .site-main--care-guide .guide-jump-nav--below .guide-jump-nav__label{
  margin:0;padding:17px 18px;color:var(--emerald-dark);font-size:13px;font-weight:700;
  letter-spacing:.15em;
}
body .site-main--care-guide .guide-jump-nav--below .guide-jump-nav__links{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:0;
  overflow:visible;border:0;-webkit-mask-image:none;mask-image:none;
}
body .site-main--care-guide .guide-jump-nav--below a{
  min-height:56px;display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;
  padding:9px 16px;border:0;border-top:1px solid var(--line);border-right:1px solid var(--line);
  border-radius:0;color:var(--ink);font-size:14px;font-weight:650;line-height:1.25;
}
body .site-main--care-guide .guide-jump-nav--below a:nth-child(3n){border-right:0;}
body .site-main--care-guide .guide-jump-nav--below .guide-jump-nav__text{
  overflow-wrap:normal;word-break:normal;hyphens:none;
}
@media(min-width:960px){
  body .site-main--care-guide>.guide-jump-nav--below{
    display:grid;grid-template-columns:210px minmax(0,1fr);align-items:stretch;
    border-top:1px solid var(--line);
  }
  body .site-main--care-guide .guide-jump-nav--below .guide-jump-nav__label{
    display:flex;align-items:center;border-right:1px solid var(--line);
  }
  body .site-main--care-guide .guide-jump-nav--below a:nth-child(-n+3){border-top:0;}
}
@media(max-width:640px){
  body .site-main--care-guide .guide-jump-nav--below .guide-jump-nav__links{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  body .site-main--care-guide .guide-jump-nav--below a{
    min-height:58px;grid-template-columns:20px minmax(0,1fr);gap:8px;padding:9px 10px;
    font-size:13px;
  }
  body .site-main--care-guide .guide-jump-nav--below a:nth-child(3n){border-right:1px solid var(--line);}
  body .site-main--care-guide .guide-jump-nav--below a:nth-child(2n){border-right:0;}
}

/* The named plant is evidence, followed by a compact botanical record. */
body .site-main--care-guide>.guide-evidence--care{
  margin-bottom:clamp(52px,6vw,76px);
}
body .site-main--care-guide .guide-facts-card{
  max-width:none;padding:7px 0;border:0;border-block:1px solid var(--line);
  border-radius:0;background:transparent;
}
body .site-main--care-guide .guide-facts-card__grid{
  grid-template-columns:repeat(2,minmax(0,1fr));column-gap:0;
}
body .site-main--care-guide .guide-facts-card__row{
  min-height:74px;padding:13px clamp(12px,2vw,22px);border-bottom:1px dotted var(--line);
}
body .site-main--care-guide .guide-facts-card__row:nth-child(odd){padding-left:0;}
body .site-main--care-guide .guide-facts-card__row:nth-child(even){border-left:1px solid var(--line);}
body .site-main--care-guide .guide-facts-card__row dt{overflow-wrap:normal;word-break:normal;}
body .site-main--care-guide .guide-facts-card__row dd{font-size:15px;overflow-wrap:normal;word-break:normal;}
body .site-main--care-guide .guide-fieldnotes{
  margin:24px 0 0;padding:4px 0 4px 20px;border:0;border-left:3px solid var(--emerald-dark);
}
body .site-main--care-guide .guide-fieldnotes__eyebrow{margin-bottom:8px;}
body .site-main--care-guide .guide-fieldnotes__note{max-width:58ch;margin:0;font-size:17px;}
@media(max-width:959px){
  body .site-main--care-guide>.guide-evidence--care{
    width:min(760px,calc(100% - (2 * var(--site-gutter))));margin-inline:auto;
  }
}
@media(max-width:359px){
  body .site-main--care-guide .guide-facts-card__grid{grid-template-columns:minmax(0,1fr);}
  body .site-main--care-guide .guide-facts-card__row,
  body .site-main--care-guide .guide-facts-card__row:nth-child(odd){padding-inline:0;}
  body .site-main--care-guide .guide-facts-card__row:nth-child(even){border-left:0;}
  body .site-main--care-guide .guide-facts-card__row:nth-last-child(-n+2){border-bottom:1px dotted var(--line);}
  body .site-main--care-guide .guide-facts-card__row:last-child{border-bottom:0;}
}

/* Chapters share one calm heading rail instead of alternating between wide,
   sparsely occupied columns. The content column remains generous enough for
   the existing decision studies, cards and localized prose. */
@media(min-width:1024px){
  body .site-main--care-guide .tpl-chapter__inner{
    grid-template-columns:minmax(230px,270px) minmax(0,1fr);gap:clamp(64px,7vw,96px);
  }
}
body .site-main--care-guide .tpl-chapter__head h2{max-width:13ch;}
body .site-main--care-guide .tpl-chapter--brief{padding-block:clamp(28px,3vw,38px);}

/* The shared contextual app card owns its visual system. The care decision
   only positions it at the next useful step in the reading flow. */
body .site-main--care-guide .care-decision__copy>.context-app-cta--card{
  width:min(760px,100%);margin:30px 0 8px;
}

/* Approved contextual app-card design. The landscape and real localized app
   capture share one measured grid: live copy owns the left column, while the
   phone rises from the bottom-right without entering the reading lane. */
body .site-main .context-app-promo{
  width:min(430px,100%);margin:44px auto 36px;
}
body .site-main .context-app-promo__heading--english{
  display:block;margin:0 0 13px;padding:0 2px;
}
body .site-main .context-app-promo__heading--english .context-app-promo__title{
  margin:0;color:var(--forest-cta);font-family:var(--display);font-size:clamp(22px,5.8vw,26px);font-weight:750;
  letter-spacing:-.025em;line-height:1.08;text-align:left;
}
body .site-main .context-app-promo__separator{
  width:100%;height:1px;margin:18px 0 0;background:var(--line);
}
body .site-main .context-app-cta--card[data-app-card-design="approved-shared"]{
  min-height:0;aspect-ratio:3/4;display:grid;grid-template-columns:minmax(0,62fr) minmax(0,38fr);
  grid-template-rows:minmax(0,1fr);gap:0;overflow:hidden;padding:0;border:1px solid rgba(5,60,45,.28);
  border-radius:20px;background:#dfeacb;box-shadow:0 18px 38px -30px rgba(5,60,45,.82);
}
body .site-main [data-app-card-design="approved-shared"] .app-card__proof{
  position:relative;z-index:0;grid-area:1/1/2/-1;align-self:stretch;width:100%;height:100%;margin:0;
  overflow:hidden;border:0;border-radius:0;background:#dfeacb;box-shadow:none;
}
body .site-main [data-app-card-design="approved-shared"] .app-card__scene{
  position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center;
}
body .site-main [data-app-card-design="approved-shared"] .app-card__device{
  position:absolute;z-index:2;right:1.5%;bottom:-3.5%;width:37%;padding:4px;border:1px solid #071b14;
  border-radius:clamp(19px,5vw,24px);background:linear-gradient(145deg,#17392e,#071b14 62%,#24483d);
  box-shadow:0 18px 30px -18px rgba(3,23,16,.8),0 2px 0 rgba(255,255,255,.2) inset;
  transform:none;transform-origin:100% 100%;
}
body .site-main [data-app-card-design="approved-shared"] .app-card__device-screen{
  inset:4px;border-radius:clamp(16px,4.4vw,20px);
}
body .site-main [data-app-card-design="approved-shared"] .context-app-cta__store-copy{
  position:relative;z-index:3;inset:auto;grid-area:1/1/2/2;align-self:start;width:auto;min-width:0;
  margin:18px 11px 0 16px;padding:16px 14px 14px;border:1px solid rgba(255,255,255,.52);
  border-radius:16px;background:rgba(251,248,241,.76);box-shadow:0 14px 34px -28px rgba(5,60,45,.68);
  -webkit-backdrop-filter:blur(10px) saturate(.82);backdrop-filter:blur(10px) saturate(.82);
}
body .site-main [data-app-card-design="approved-shared"] .context-app-cta__identity{
  display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:8px;margin:0 0 11px;
}
body .site-main [data-app-card-design="approved-shared"] .context-app-cta__store-icon{
  width:28px;height:28px;border-radius:7px;box-shadow:0 0 0 1px rgba(5,60,45,.12);image-rendering:pixelated;
}
body .site-main [data-app-card-design="approved-shared"] .context-app-cta__label{
  margin:0;color:var(--forest-cta);font-family:var(--body);font-size:11px;font-weight:750;
  letter-spacing:.075em;line-height:1.2;text-transform:uppercase;white-space:normal;
}
body .site-main [data-app-card-design="approved-shared"] h3,
body .site-main [data-app-card-design="approved-shared"]:is([data-app-card-family="symptom"],[data-app-card-family="toxicity"],[data-app-card-family="product"]) h3{
  width:auto;max-width:none;margin:0;padding:0;border:0;border-radius:0;color:var(--forest-cta);background:transparent;
  font-family:var(--body);font-size:clamp(24px,6.55vw,28px);font-weight:780;letter-spacing:-.042em;
  line-height:1.04;text-wrap:balance;overflow-wrap:normal;
}
body .site-main [data-app-card-design="approved-shared"] .app-card__checks{
  width:100%;max-width:none;margin:13px 0 12px;padding:0;display:grid;gap:9px;border:0;background:transparent;
}
body .site-main [data-app-card-design="approved-shared"] .app-card__checks li{
  min-height:0;display:grid;grid-template-columns:18px minmax(0,1fr);align-items:center;gap:8px;padding:0;border:0;
  color:var(--ink-soft);font-family:var(--body);font-size:12.25px;line-height:1.32;
}
body .site-main [data-app-card-design="approved-shared"] .app-card__bullet-mark{
  width:18px;height:18px;margin-top:0;background:url("/landing/context-app-leaf.png") center/contain no-repeat;
  image-rendering:pixelated;box-shadow:none;
}
body .site-main [data-app-card-design="approved-shared"] .context-app-cta__download{
  width:100%;display:grid;gap:6px;margin:0;padding:0;border:0;
}
body .site-main [data-app-card-design="approved-shared"] .context-app-cta__download>.app-card__availability{
  width:100%;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:6px;margin:0;
}
body .site-main [data-app-card-design="approved-shared"] .context-app-cta__download .app-card__availability-badge{
  width:100%;height:auto;aspect-ratio:3/1;overflow:hidden;border:0;border-radius:4px;background:transparent;box-shadow:none;
}
body .site-main [data-app-card-design="approved-shared"] .context-app-cta__download .app-card__availability-badge img{
  position:static;width:100%;height:100%;max-width:100%;object-fit:contain;
}
body .site-main [data-app-card-design="approved-shared"] .context-app-cta__action{
  width:100%;min-height:44px;display:flex;align-items:center;justify-content:center;
  margin:0;padding:7px 8px;
  border:1px solid var(--ink);border-radius:2px;color:#fff;background:var(--emerald-dark);
  box-shadow:none;font-family:var(--body);font-size:12.25px;font-weight:800;
  line-height:1.15;text-align:center;text-decoration:none;white-space:nowrap;
}
body .site-main [data-app-card-design="approved-shared"] .context-app-cta__action-label{min-width:0;white-space:nowrap;}
body .site-main [data-app-card-design="approved-shared"] .context-app-cta__action::after{display:none;}
body .site-main [data-app-card-design="approved-shared"] .context-app-cta__action:active{
  transform:translateY(1px);
}
@media(min-width:1024px){
  body .site-main .context-app-promo{
    width:min(814px,100%);margin:48px auto 38px;
  }
}
@container app-card (min-width:560px){
  body .site-main .context-app-cta--card[data-app-card-design="approved-shared"]{
    aspect-ratio:4/3;grid-template-columns:minmax(0,55fr) minmax(0,45fr);
  }
  body .site-main [data-app-card-design="approved-shared"] .app-card__device{
    right:2.5%;bottom:-3.5%;width:27%;
  }
  body .site-main [data-app-card-design="approved-shared"] .context-app-cta__store-copy{
    margin:24px 12px 0 24px;padding:18px 18px 15px;border-radius:18px;
  }
  body .site-main [data-app-card-design="approved-shared"] .context-app-cta__identity{
    grid-template-columns:32px minmax(0,1fr);gap:9px;margin-bottom:8px;
  }
  body .site-main [data-app-card-design="approved-shared"] .context-app-cta__store-icon{
    width:32px;height:32px;border-radius:8px;
  }
  body .site-main [data-app-card-design="approved-shared"] .context-app-cta__label{font-size:11px;}
  body .site-main [data-app-card-design="approved-shared"] h3,
  body .site-main [data-app-card-design="approved-shared"]:is([data-app-card-family="symptom"],[data-app-card-family="toxicity"],[data-app-card-family="product"]) h3{
    font-size:clamp(28px,2.35vw,33px);line-height:1.02;
  }
  body .site-main [data-app-card-design="approved-shared"] .app-card__checks{
    margin:10px 0 9px;gap:8px;
  }
  body .site-main [data-app-card-design="approved-shared"] .app-card__checks li{
    grid-template-columns:19px minmax(0,1fr);gap:8px;font-size:13.25px;line-height:1.28;
  }
  body .site-main [data-app-card-design="approved-shared"] .app-card__bullet-mark{width:19px;height:19px;}
  body .site-main [data-app-card-design="approved-shared"] .context-app-cta__action{
    min-height:44px;font-size:13.25px;
  }
  body .site-main [data-app-card-design="approved-shared"] .context-app-cta__download>.app-card__availability{
    width:100%;max-width:260px;justify-self:center;
  }
}
@media(hover:hover) and (pointer:fine){
  body .site-main [data-app-card-design="approved-shared"] .context-app-cta__action:hover{
    background:color-mix(in srgb,var(--emerald-dark) 88%,var(--ink));box-shadow:none;transform:translateY(-1px);
  }
}
@media(prefers-reduced-transparency:reduce){
  body .site-main [data-app-card-design="approved-shared"] .context-app-cta__store-copy{
    background:rgba(251,248,241,.96);-webkit-backdrop-filter:none;backdrop-filter:none;
  }
}
@media(max-width:359px){
  body .site-main .context-app-promo{margin:36px auto 30px;}
  body .site-main .context-app-promo__heading--english{margin-bottom:10px;}
  body .site-main .context-app-promo__heading--english .context-app-promo__title{font-size:20px;}
  body .site-main .context-app-promo__separator{margin-top:14px;}
  body .site-main .context-app-cta--card[data-app-card-design="approved-shared"]{
    grid-template-columns:minmax(0,64fr) minmax(0,36fr);border-radius:18px;
  }
  body .site-main [data-app-card-design="approved-shared"] .app-card__device{right:1.5%;bottom:-3%;width:31%;}
  body .site-main [data-app-card-design="approved-shared"] .context-app-cta__store-copy{
    margin:12px 9px 0 10px;padding:12px 10px 10px;border-radius:13px;
  }
  body .site-main [data-app-card-design="approved-shared"] .context-app-cta__identity{
    grid-template-columns:24px minmax(0,1fr);gap:7px;margin-bottom:7px;
  }
  body .site-main [data-app-card-design="approved-shared"] .context-app-cta__store-icon{width:24px;height:24px;border-radius:6px;}
  body .site-main [data-app-card-design="approved-shared"] .context-app-cta__label{font-size:9.5px;}
  body .site-main [data-app-card-design="approved-shared"] h3,
  body .site-main [data-app-card-design="approved-shared"]:is([data-app-card-family="symptom"],[data-app-card-family="toxicity"],[data-app-card-family="product"]) h3{
    padding:0;font-size:21px;line-height:1.02;
  }
  body .site-main [data-app-card-design="approved-shared"] .app-card__checks{margin:8px 0 9px;gap:6px;padding:0;}
  body .site-main [data-app-card-design="approved-shared"] .app-card__checks li{min-height:0;grid-template-columns:15px minmax(0,1fr);gap:6px;padding:0;font-size:10.5px;line-height:1.23;}
  body .site-main [data-app-card-design="approved-shared"] .app-card__bullet-mark{width:15px;height:15px;}
  body .site-main [data-app-card-design="approved-shared"] .context-app-cta__download{gap:5px;padding:0;}
  body .site-main [data-app-card-design="approved-shared"] .context-app-cta__action{
    width:100%;min-height:44px;margin:0;padding:6px;font-size:10.5px;
  }
  body .site-main [data-app-card-design="approved-shared"] .context-app-cta__download>.app-card__availability{gap:5px;}
}
/* Mobile-first editorial app handoff. The article keeps its paper ground while
   one solid emerald block carries live copy, a context-matched app capture, and
   the real phone-excited Mr Kitty asset. No room scene or store-badge poster. */
body .site-main .context-app-promo{
  width:min(760px,100%);margin:42px auto 34px;container-name:app-card;container-type:inline-size;
}
body .site-main .context-app-promo__separator{
  width:100%;height:1px;margin:20px 0 0;background:var(--line);
}
body .site-main .context-app-cta--card[data-app-card-design="mobile-editorial"]{
  height:auto;min-height:0;aspect-ratio:auto;display:block;overflow:hidden;padding:0;border:0;border-radius:22px;
  color:#fbf8f1;background:#047857;box-shadow:0 18px 38px -31px rgba(4,59,43,.92);
}
body .site-main [data-app-card-design="mobile-editorial"] .context-app-cta__store-copy{
  position:relative;inset:auto;width:100%;min-width:0;display:grid;gap:15px;padding:20px;
  border:0;border-radius:0;background:transparent;box-shadow:none;
}
body .site-main [data-app-card-design="mobile-editorial"] .context-app-cta__identity{
  display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:10px;margin:0;
}
body .site-main [data-app-card-design="mobile-editorial"] .context-app-cta__store-icon{
  width:38px;height:38px;border-radius:9px;box-shadow:0 0 0 1px rgba(251,248,241,.24);
  image-rendering:auto;
}
body .site-main [data-app-card-design="mobile-editorial"] .context-app-cta__label{
  margin:0;color:#fbf8f1;font-family:var(--body);font-size:12px;font-weight:700;
  letter-spacing:.11em;line-height:1.25;text-transform:uppercase;white-space:normal;
}
body .site-main [data-app-card-design="mobile-editorial"] .context-app-cta__headline{
  width:auto;max-width:15ch;margin:2px 0 0;padding:0;border:0;border-radius:0;color:#fbf8f1;
  background:transparent;font-family:var(--display);font-size:clamp(29px,8.2vw,38px);
  font-weight:400;letter-spacing:-.025em;line-height:1.02;text-wrap:balance;overflow-wrap:normal;
}
body .site-main [data-app-card-design="mobile-editorial"] .app-card__summary{
  max-width:54ch;margin:0;color:rgba(251,248,241,.9);font-family:var(--body);font-size:15px;
  line-height:1.5;
}
body .site-main [data-app-card-design="mobile-editorial"] .app-card__proof{
  position:relative;z-index:0;width:100%;height:224px;margin:2px 0 0;overflow:hidden;
  border:1px solid rgba(251,248,241,.28);border-radius:16px;background:#0c2017;box-shadow:0 14px 26px -22px rgba(3,43,32,.9);
}
body .site-main [data-app-card-design="mobile-editorial"] .app-card__capture{
  position:absolute;inset:0;display:block;overflow:hidden;border:0;
  border-radius:0;background:#fbf8f1;box-shadow:none;
}
body .site-main [data-app-card-design="mobile-editorial"] .app-card__capture>img{
  width:100%;height:100%;display:block;object-fit:cover;object-position:center;
}
body .site-main [data-app-card-design="mobile-editorial"] .app-card__mascot{
  position:absolute;z-index:2;right:-5px;bottom:-7px;width:112px;height:auto;display:block;
  object-fit:contain;object-position:center;transform:scaleX(-1);pointer-events:none;
}
body .site-main [data-app-card-design="mobile-editorial"] .context-app-cta__download{
  width:100%;display:block;margin:0;padding:0;border:0;
}
body .site-main [data-app-card-design="mobile-editorial"] .context-app-cta__action{
  width:100%;min-height:52px;display:flex;align-items:center;justify-content:center;margin:0;
  padding:10px 16px;border:1px solid #0c2017;border-radius:4px;color:#fbf8f1;background:#0c2017;
  box-shadow:none;font-family:var(--body);font-size:16px;font-weight:700;line-height:1.2;
  text-align:center;text-decoration:none;white-space:normal;
}
body .site-main [data-app-card-design="mobile-editorial"] .context-app-cta__action::after{display:none;}
body .site-main [data-app-card-design="mobile-editorial"] .context-app-cta__action:active{transform:translateY(1px);}
/* Every locale uses this compact contextual card: a local page-specific
   headline, two useful outcomes, and no faux product screenshot. */
body .site-main [data-app-card-design="footer-contextual"]{
  height:auto;min-height:0;aspect-ratio:auto;display:block;overflow:hidden;padding:0;border:0;border-radius:22px;
  color:#fbf8f1;background:#047857;box-shadow:0 18px 38px -31px rgba(4,59,43,.92);
}
body .site-main [data-app-card-design="footer-contextual"] .context-app-cta__store-copy{
  position:relative;width:100%;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:20px;
}
body .site-main [data-app-card-design="footer-contextual"] .context-app-cta__wordmark{
  width:132px;height:auto;display:block;
}
body .site-main [data-app-card-design="footer-contextual"] .context-app-cta__headline{
  width:auto;max-width:15ch;margin:0;padding:0;border:0;border-radius:0;color:#fbf8f1;background:transparent;font-family:var(--serif);font-size:clamp(27px,7.2vw,34px);
  font-weight:400;letter-spacing:-.025em;line-height:1.02;text-wrap:balance;
}
body .site-main [data-app-card-design="footer-contextual"] .app-card__checks{
  width:calc(100% - 84px);max-width:44ch;display:grid;gap:7px;margin:0;padding:0;border:0;border-radius:0;background:transparent;list-style:none;
}
body .site-main [data-app-card-design="footer-contextual"] .app-card__checks li{
  min-height:0;display:grid;grid-template-columns:16px minmax(0,1fr);align-items:start;gap:7px;padding:0;border:0;
  color:rgba(251,248,241,.92);font-family:var(--body);font-size:13px;line-height:1.32;
}
body .site-main [data-app-card-design="footer-contextual"] .app-card__bullet-mark{
  position:relative;width:14px;height:14px;margin:2px 0 0 1px;border:1px solid rgba(251,248,241,.78);border-radius:50%;background:rgba(251,248,241,.08);
}
body .site-main [data-app-card-design="footer-contextual"] .app-card__bullet-mark::after{
  content:"";position:absolute;left:3px;top:3px;width:5px;height:3px;border-bottom:2px solid #fbf8f1;border-left:2px solid #fbf8f1;transform:rotate(-45deg);
}
body .site-main [data-app-card-design="footer-contextual"] .app-card__proof{
  display:none;
}
body .site-main [data-app-card-design="footer-contextual"] .context-app-cta__download{
  position:relative;width:100%;min-width:0;max-width:100%;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:0;padding:0;
}
body .site-main [data-app-card-design="footer-contextual"] .app-card__mascot{
  position:absolute;z-index:1;right:-5px;bottom:calc(100% - 9px);width:96px;height:auto;display:block;
  object-fit:contain;transform:scaleX(-1);pointer-events:none;
}
body .site-main [data-app-card-design="footer-contextual"] .context-app-cta__action{
  position:relative;z-index:2;width:100%;min-width:0;max-width:100%;min-height:52px;display:flex;align-items:center;justify-content:center;margin:0;
  padding:10px 16px;border:1px solid #0c2017;border-radius:4px;color:#fbf8f1;background:#0c2017;
  box-shadow:none;font-family:var(--body);font-size:16px;font-weight:700;line-height:1.2;text-align:center;text-decoration:none;white-space:normal;overflow-wrap:anywhere;
}
body .site-main [data-app-card-design="footer-contextual"] .context-app-cta__action-label{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;}
body .site-main [data-app-card-design="footer-contextual"] .context-app-cta__action::after{display:none;}
body .site-main [data-app-card-design="footer-contextual"] .app-card__availability{
  position:relative;z-index:2;display:block;color:rgba(251,248,241,.78);font-family:var(--body);font-size:13px;line-height:1.35;text-align:center;
}
@media(hover:hover) and (pointer:fine){
  body .site-main [data-app-card-design="mobile-editorial"] .context-app-cta__action:hover{
    background:#071b14;transform:translateY(-1px);
  }
}
@media(max-width:359px){
  body .site-main .context-app-promo{margin:34px auto 28px;}
  body .site-main .context-app-cta--card[data-app-card-design="mobile-editorial"]{border-radius:18px;}
  body .site-main [data-app-card-design="mobile-editorial"] .context-app-cta__store-copy{gap:13px;padding:17px;}
  body .site-main [data-app-card-design="mobile-editorial"] .context-app-cta__headline{font-size:28px;}
  body .site-main [data-app-card-design="mobile-editorial"] .app-card__summary{font-size:14px;}
  body .site-main [data-app-card-design="mobile-editorial"] .app-card__proof{height:196px;}
  body .site-main [data-app-card-design="mobile-editorial"] .app-card__mascot{right:-8px;bottom:-8px;width:98px;height:auto;}
}
@container app-card (min-width:560px){
  body .site-main .context-app-cta--card[data-app-card-design="mobile-editorial"]{border-radius:24px;}
  body .site-main [data-app-card-design="mobile-editorial"] .context-app-cta__store-copy{
    grid-template-columns:minmax(0,1.06fr) minmax(250px,.94fr);grid-template-rows:auto auto auto 1fr;
    column-gap:34px;row-gap:14px;padding:32px;
  }
  body .site-main [data-app-card-design="mobile-editorial"] .context-app-cta__identity,
  body .site-main [data-app-card-design="mobile-editorial"] .context-app-cta__headline,
  body .site-main [data-app-card-design="mobile-editorial"] .app-card__summary,
  body .site-main [data-app-card-design="mobile-editorial"] .context-app-cta__download{grid-column:1;}
  body .site-main [data-app-card-design="mobile-editorial"] .app-card__proof{
    grid-column:2;grid-row:1/5;align-self:stretch;height:auto;min-height:266px;margin:0;
  }
  body .site-main [data-app-card-design="mobile-editorial"] .app-card__mascot{right:-8px;bottom:-8px;width:126px;height:auto;}
  body .site-main [data-app-card-design="mobile-editorial"] .context-app-cta__headline{font-size:38px;}
  body .site-main [data-app-card-design="mobile-editorial"] .context-app-cta__download{align-self:end;}
  /* The contextual handoff stays compact in the article column, but at tablet
     width it becomes a real editorial composition rather than a phone card
     stretched across empty green. The action group owns Kitty, so both travel
     down together if a local headline or benefit needs more height. */
  body .site-main [data-app-card-design="footer-contextual"]{border-radius:28px;}
  body .site-main [data-app-card-design="footer-contextual"] .context-app-cta__store-copy{
    --contextual-kitty-width:clamp(250px,34cqi,300px);--contextual-kitty-clearance:28px;
    gap:16px;padding:clamp(32px,5.2vw,46px);
  }
  body .site-main [data-app-card-design="footer-contextual"] .context-app-cta__wordmark{width:156px;}
  body .site-main [data-app-card-design="footer-contextual"] .context-app-cta__headline{
    max-width:12ch;font-size:clamp(38px,6cqi,48px);line-height:1;
  }
  body .site-main [data-app-card-design="footer-contextual"] .app-card__checks{
    width:min(38ch,calc(100% - var(--contextual-kitty-width) - var(--contextual-kitty-clearance)));gap:10px;
  }
  body .site-main [data-app-card-design="footer-contextual"] .app-card__checks li{font-size:14px;line-height:1.4;}
  body .site-main [data-app-card-design="footer-contextual"] .context-app-cta__download{
    grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:12px;margin-top:2px;
  }
  body .site-main [data-app-card-design="footer-contextual"] .context-app-cta__action,
  body .site-main [data-app-card-design="footer-contextual"] .app-card__availability{grid-column:1;width:100%;}
  body .site-main [data-app-card-design="footer-contextual"] .context-app-cta__action{min-height:58px;font-size:17px;}
  body .site-main [data-app-card-design="footer-contextual"] .app-card__availability{font-size:14px;}
  body .site-main [data-app-card-design="footer-contextual"] .app-card__mascot{
    right:var(--contextual-kitty-clearance);bottom:calc(100% - 14px);width:var(--contextual-kitty-width);
  }
}
@media(min-width:1024px){
  /* A desktop article has enough breathing room to let this be a complete
     composition. Give the card its own measured canvas instead of magnifying
     a phone-width block in the middle of the page. */
  body .site-main .context-app-promo{width:min(1040px,calc(100% - 96px));}
  body .site-main--propagation .context-app-promo{
    width:min(1180px,calc(100vw - (2 * var(--site-gutter))));max-width:none;
    margin-right:0;margin-left:50%;transform:translateX(-50%);
  }
}
@container app-card (min-width:880px){
  /* Scale the whole editorial set together: wordmark, type, proof points,
     action and Kitty. The visual lane stays clear of copy; a longer locale
     grows the block vertically rather than shrinking or covering anything. */
  body .site-main [data-app-card-design="footer-contextual"]{border-radius:32px;}
  body .site-main [data-app-card-design="footer-contextual"] .context-app-cta__store-copy{
    --contextual-kitty-width:clamp(360px,40cqi,430px);--contextual-kitty-clearance:40px;
    gap:20px;padding:clamp(48px,5.4cqi,58px);
  }
  body .site-main [data-app-card-design="footer-contextual"] .context-app-cta__wordmark{width:204px;}
  body .site-main [data-app-card-design="footer-contextual"] .context-app-cta__headline{
    max-width:12.6ch;font-size:clamp(50px,5.5cqi,62px);line-height:.98;
  }
  body .site-main [data-app-card-design="footer-contextual"] .app-card__checks{
    width:min(46ch,calc(100% - var(--contextual-kitty-width) - var(--contextual-kitty-clearance)));gap:12px;
  }
  body .site-main [data-app-card-design="footer-contextual"] .app-card__checks li{font-size:16px;line-height:1.4;}
  body .site-main [data-app-card-design="footer-contextual"] .context-app-cta__download{
    grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:14px;margin-top:4px;
  }
  body .site-main [data-app-card-design="footer-contextual"] .context-app-cta__action{min-height:68px;font-size:20px;}
  body .site-main [data-app-card-design="footer-contextual"] .app-card__availability{font-size:16px;}
  body .site-main [data-app-card-design="footer-contextual"] .app-card__mascot{
    right:var(--contextual-kitty-clearance);bottom:calc(100% + 8px);width:var(--contextual-kitty-width);
  }
}

/* A method starts with preparation, not step one. The stem-cutting kit is a
   compact working panel: anatomy and tools sit together, before the decorative
   recipe plate and numbered instructions. */
body .site-main .prop-kit{
  display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin:0 0 28px;
  padding:clamp(20px,3vw,28px);border:1px solid var(--line);border-radius:18px;background:var(--card);
}
body .site-main .prop-kit h3{margin:0;font-family:var(--serif);font-size:clamp(24px,3vw,31px);font-weight:500;line-height:1.05;}
body .site-main .prop-kit__node{margin:0;color:var(--ink-soft);font-size:16px;line-height:1.55;}
body .site-main .prop-kit ul{display:grid;gap:10px;margin:0;padding:0;list-style:none;}
body .site-main .prop-kit li{position:relative;min-height:24px;margin:0;padding-left:30px;color:var(--ink);font-size:15px;line-height:1.5;}
body .site-main .prop-kit li::before{
  content:"✓";position:absolute;left:0;top:1px;display:grid;width:21px;height:21px;place-items:center;
  border:1px solid color-mix(in srgb,var(--emerald-dark) 46%,transparent);border-radius:50%;
  color:var(--emerald-dark);font-size:12px;font-weight:800;line-height:1;
}
@media(min-width:760px){
  body .site-main .prop-kit{grid-template-columns:minmax(180px,.78fr) minmax(260px,1.22fr);column-gap:clamp(30px,5vw,58px);align-items:start;}
  body .site-main .prop-kit__node{grid-column:1;}
  body .site-main .prop-kit ul{grid-column:2;grid-row:1/3;padding-top:2px;}
}

/* The care scene has a quiet upper-left field on phone. Reserve 20% of the
   title/lede allowance for the artwork so long localized copy does not drift
   into the plant subject. This is scoped to the care family and its approved
   responsive art pair; other editorial scenes keep their own measured lane. */
@media(max-width:700px){
  body .site-main--care-guide>.guide-opening.guide-opening--editorial-art.guide-opening--pixel.guide-opening--care.guide-opening--title-wide-mobile>.guide-opening-copy :is(h1,.lede){
    width:80%;max-width:80%;
  }
  body .site-main--care-guide>.guide-opening.guide-opening--editorial-art.guide-opening--pixel.guide-opening--care.guide-opening--title-wide-mobile>.guide-opening-copy h1{
    overflow-wrap:anywhere;
  }
  /* The discovery scene's right-hand foliage enters below the heading. Keep
     the longer hub explanation inside the remaining authored cream field. */
  body .site-main.hub-main>.guide-opening--care-hub>.site-band__copy>.lede{
    width:68%;max-width:68%;
  }
}

/* Collections reuse the discovery scene, so their mobile opener must reuse
   its left copy lane too. The title-wide modifier is useful for quiet artwork,
   but this crop puts foliage through the right side of the upper field. Keep
   the live H1 and lede together at the hub's 72% measure; no indexed copy or
   artwork is changed. */
@media(max-width:700px){
  body .site-main .guide-opening--collection.guide-opening--editorial-art.guide-opening--pixel>.guide-opening-copy{
    padding-top:112px!important;
  }
  body .site-main .guide-opening--collection.guide-opening--editorial-art.guide-opening--pixel>.guide-opening-copy>:is(h1,.lede,.count){
    width:72%;max-width:72%;
  }
}

/* The ranking opener reuses the discovery portrait, whose foliage enters the
   right side of the phone crop. Keep its live heading and lede in the same
   measured left lane as the discovery collections; the title-wide variant
   still owns the opener geometry, but must not let copy run under the plant. */
@media(max-width:700px){
  body .site-main .guide-opening--ranking.guide-opening--editorial-art.guide-opening--pixel>.guide-opening-copy>:is(h1,.lede){
    width:72%;max-width:72%;
  }
}

/* The discovery and safety portrait masters bring foreground plants into the
   count's lower edge at the narrowest phone width. Add room to the authored
   canvas so the bottom-anchored scene moves below the live label; the copy,
   count, and artwork remain unchanged. Other collection masters already keep
   their count in a quiet field and do not inherit this extra height. */
@media(max-width:340px){
  body .site-main .guide-opening--collection-copy-reserve-mobile.guide-opening--editorial-art.guide-opening--pixel{
    min-height:calc(100vw * 16 / 9 + 100px)!important;
  }
}

/* Toxicity pages put an actual symptom list in the opener. On short phones
   that list can extend into the foreground cat and shelf even though the DOM
   still fits. Give only openers that contain the list a taller bottom-anchored
   canvas; verdict-only pages use the tighter crop below. */
@media(max-width:390px){
  body .site-main .guide-opening--toxicity.guide-opening--editorial-art.guide-opening--pixel:has(>.guide-opening-copy>.toxicity-symptoms){
    min-height:calc(100vw * 16 / 9 + 220px)!important;
  }
}

/* A short safety verdict does not need the full 9:16 quiet field. Crop the
   bottom-anchored scene to a tighter mobile frame so the subject carries the
   opening after the verdict has been reduced to one clear line. Toxic pages
   with symptom lists keep the taller canvas above. */
@media(max-width:700px){
  body .site-main .guide-opening--toxicity.guide-opening--editorial-art.guide-opening--pixel:not(:has(>.guide-opening-copy>.toxicity-symptoms)){
    min-height:clamp(500px,125vw,620px)!important;aspect-ratio:4/5;
  }
  body .site-main .guide-opening--toxicity.guide-opening--editorial-art.guide-opening--pixel:not(:has(>.guide-opening-copy>.toxicity-symptoms))>.guide-opening-photo img{
    object-position:center 72%;
  }
}

/* A summary is an interactive disclosure label, not a second section title.
   Keep it clearly readable on the forest ground while letting the H2 carry the
   chapter's display hierarchy. */
body .site-main--care-guide .tpl-chapter--forest .faq summary,
body .site-main--symptom .tpl-chapter--forest .faq summary,
body .site-main--propagation .tpl-chapter--forest .faq summary{
  min-height:52px;padding:14px 0;color:#EFE8D6;
  font-family:var(--body);font-size:17px;font-weight:650;line-height:1.45;
}
body .site-main--care-guide .tpl-chapter--forest .faq summary::after,
body .site-main--symptom .tpl-chapter--forest .faq summary::after,
body .site-main--propagation .tpl-chapter--forest .faq summary::after{
  color:#34C99A;font-size:20px;
}
@media(min-width:768px){
  body .site-main--care-guide .tpl-chapter--forest .faq summary,
  body .site-main--symptom .tpl-chapter--forest .faq summary,
  body .site-main--propagation .tpl-chapter--forest .faq summary{
    min-height:54px;padding:15px 0;font-size:18px;
  }
}

/* Propagation facts are four compact, self-contained facts. On normal phones
   two columns shorten the scan without separating a label from its value; a
   truly narrow viewport falls back to the original single-column ledger. */
body .site-main--propagation .guide-evidence--propagation .tpl-ledger{
  grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px;row-gap:0;
}
body .site-main--propagation .guide-evidence--propagation .tpl-ledger>*{
  grid-template-columns:minmax(0,1fr);gap:4px;align-content:start;
  padding:13px 0;
}
body .site-main--propagation .guide-evidence--propagation .tpl-ledger>*:first-child,
body .site-main--propagation .guide-evidence--propagation .tpl-ledger>*:nth-child(2){
  border-top:1px dotted var(--line);
}
body .site-main--propagation .guide-evidence--propagation .tpl-ledger>*:nth-last-child(-n+2){
  border-bottom:0;padding-bottom:0;
}
body .site-main--propagation .guide-evidence--propagation .tpl-ledger dt{
  color:var(--muted);font-size:13px;line-height:1.3;
}
body .site-main--propagation .guide-evidence--propagation .tpl-ledger dd{
  color:var(--ink);font-size:16px;line-height:1.4;text-align:left;
}
body .site-main--propagation .propagation-review-meta{
  margin-top:20px;padding-top:14px;border-top:1px solid var(--hair);
}
body .site-main--propagation .propagation-review-meta>.verify.byline{
  margin:0;padding:0;border:0;color:var(--muted);font-size:12.5px;line-height:1.45;
}
/* Propagation is a linear working guide, not a stack of short editorial
   chapters. The shared desktop canvas gives every chapter a wide heading rail,
   which strands the recipe, steps and app handoff in one narrow column while
   most of the page stays empty. Keep the phone composition untouched; on a
   desktop, give this family a shorter resource opener, balance its evidence,
   let the complete method read down one centred lane, and use the remaining
   width for related destinations. */
@media(min-width:1024px){
  body .site-main--propagation>.guide-opening.guide-opening--editorial-art.guide-opening--pixel{
    min-height:clamp(592px,60svh,620px)!important;margin-bottom:48px;
  }
  body .site-main--propagation>.guide-evidence--propagation{
    width:min(1120px,calc(100vw - (2 * var(--site-gutter))));max-width:none;
    grid-template-columns:minmax(300px,360px) minmax(0,1fr);gap:clamp(34px,4vw,52px);
    align-items:stretch;margin-right:0;margin-bottom:48px;margin-left:50%;transform:translateX(-50%);
  }
  body .site-main--propagation>.guide-evidence--propagation .guide-evidence-photo{
    width:100%!important;min-width:0;height:auto;max-height:none;aspect-ratio:1/1;
  }
  body .site-main--propagation>.guide-evidence--propagation .guide-evidence__record,
  body .site-main--propagation>.guide-evidence--propagation .tpl-panel{
    height:100%;
  }
  body .site-main--propagation>.guide-evidence--propagation .tpl-panel{
    display:grid;align-content:center;
  }
  body .site-main--propagation .tpl-chapter__inner{
    grid-template-columns:minmax(240px,300px) minmax(0,1fr);gap:clamp(44px,5vw,72px);
  }
  body .site-main--propagation>#propagation-primary+.tpl-chapter>.tpl-chapter__inner{
    width:min(1040px,calc(100vw - (2 * var(--site-gutter))));
    grid-template-columns:minmax(0,1fr);gap:28px;
  }
  body .site-main--propagation>#propagation-primary+.tpl-chapter .tpl-chapter__head{
    max-width:760px;
  }
  body .site-main--propagation>#propagation-primary+.tpl-chapter .tpl-chapter__body{
    width:100%;max-width:920px;margin-inline:auto;
  }
  body .site-main--propagation>#propagation-primary+.tpl-chapter .prop-recipe{
    max-width:none;
  }
  body .site-main--propagation>.siblings--cross .siblings-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;
  }
  body .site-main--propagation>.siblings--cross .siblings-grid a:nth-child(2){
    border-top:1px dotted var(--line);
  }
  body .site-main--symptom>.guide-evidence--symptom-photo{
    justify-items:center;margin-bottom:48px;
  }
  body .site-main--toxicity>.guide-evidence--safety.guide-evidence--with-photo{
    grid-template-columns:minmax(300px,360px) minmax(0,1fr);gap:clamp(34px,4vw,52px);
    align-items:stretch;
  }
  body .site-main--toxicity>.guide-evidence--safety.guide-evidence--with-photo .guide-evidence-photo{
    width:100%!important;min-width:0;height:auto;max-height:none;aspect-ratio:1/1;
  }
  body .site-main--toxicity>.guide-evidence--safety.guide-evidence--with-photo .guide-evidence__record,
  body .site-main--toxicity>.guide-evidence--safety.guide-evidence--with-photo .tpl-panel{
    height:100%;
  }
  body .site-main--toxicity>.guide-evidence--safety.guide-evidence--with-photo .tpl-panel{
    display:grid;align-content:center;
  }
  body .site-main--symptom>.siblings .siblings-grid,
  body .site-main--toxicity>.siblings--cross .siblings-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;
  }
  body .site-main--symptom>.siblings .siblings-grid a:nth-child(2),
  body .site-main--toxicity>.siblings--cross .siblings-grid a:nth-child(2){
    border-top:1px dotted var(--line);
  }
}
@media(max-width:359px){
  body .site-main--propagation .guide-evidence--propagation .tpl-ledger{
    grid-template-columns:minmax(0,1fr);
  }
  body .site-main--propagation .guide-evidence--propagation .tpl-ledger>*{
    grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:baseline;
    padding:13px 0;
  }
  body .site-main--propagation .guide-evidence--propagation .tpl-ledger>*:nth-child(2){
    border-top:0;
  }
  body .site-main--propagation .guide-evidence--propagation .tpl-ledger>*:nth-last-child(-n+2){
    border-bottom:1px dotted var(--line);padding-bottom:13px;
  }
  body .site-main--propagation .guide-evidence--propagation .tpl-ledger>*:last-child{
    border-bottom:0;padding-bottom:0;
  }
  body .site-main--propagation .guide-evidence--propagation .tpl-ledger dt{
    color:var(--ink);font-size:16px;line-height:1.4;
  }
  body .site-main--propagation .guide-evidence--propagation .tpl-ledger dd{
    color:var(--ink-soft);font-size:13px;text-align:right;
  }
}

/* The app destination is intentionally text-led. Give its product-decision
   opener a slightly tighter reading measure without borrowing an art lane or
   changing any localized action/copy. */
body .site-main.app-main>.guide-opening--product-decision>.guide-opening-copy{
  width:min(100%,760px);max-width:none;
}
body .site-main.app-main>.guide-opening--product-decision>.guide-opening-copy h1{max-width:18ch;}
body .site-main.app-main>.guide-opening--product-decision>.guide-opening-copy .lede{max-width:48ch;}
@media(max-width:700px){
  body .site-main.app-main>.guide-opening--product-decision>.guide-opening-copy h1{max-width:16ch;}
  body .site-main.app-main>.guide-opening--product-decision>.guide-opening-copy .lede{max-width:36ch;}
}

/* The symptom desktop scene keeps its live-copy field clear until the first
   foreground leaf enters near the midpoint. Let the answer use the full
   authored horizontal lane so it ends above that foliage instead of wrapping
   down into it. */
@media(min-width:1024px){
  /* The symptom master keeps its foreground floor visible, but the default
     bottom crop lifts the left fern into the final lede line. A measured
     25% vertical focal point moves that subject below the copy lane without
     changing the scene, its floor, or any indexed text. */
  body .site-main--symptom>.guide-opening.guide-opening--editorial-art.guide-opening--pixel.guide-opening--symptom>.guide-opening-photo img{
    object-position:center 25%;
  }
  body .site-main--symptom>.guide-opening.guide-opening--editorial-art.guide-opening--pixel.guide-opening--symptom>.guide-opening-copy h1{
    --hero-copy-safe-bottom:390px;
  }
}