:root{
--forest-ink:#0F2A1F;
--forest-deep:#0C2017;
--emerald:#06A678;
--emerald-logo:#04684A;
--emerald-wordmark:#047857;
--emerald-bright:#34C99A;
--web-ground:#F6F1E7;
--web-paper-grain:repeating-linear-gradient(0deg,transparent 0,rgba(20,32,26,.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%);
--web-paper:#FBF8F1;
--web-ink:#121510;
--web-card:#FBF8F1;
--web-card-raised:#FFFDF8;
--web-olive-band:#E8EDE6;
--web-olive-band-hover:#DFE6DC;
--web-cream-scene:#F2E9D6;
--web-forest-fill:#0C2017;
--web-forest-fill-hover:#1A3A2A;
--web-on-forest:#F7F2E6;
--web-on-forest-soft:rgba(244,236,224,.84);
--web-body:#2F4036;
--web-body-faq:#33463A;
--web-hairline:rgba(15,42,31,.14);
--web-hairline-strong:rgba(15,42,31,.22);
--web-hairline-dotted:rgba(15,42,31,.18);
--web-toxic-wash:#F6E3DC;
--web-toxic-border:rgba(168,57,31,.25);
--web-pro-tag:#34C99A;
--olive-wash:#DCE2D7;
--text-strong:#0F2A1F;
--text-muted:#526159;
--text-soft:#5D6862;
--text-on-forest:#F4ECD8;
--attention-web:#C7553B;
--attention-web-text:#A8391F;
--caution-ink:#92400E;
--caution-wash:#FEF3C7;
--pet-safe-ink:#047857;
--pet-safe-wash:#E7F4EF;
--feed-wash:#E5EADF;
--font-display:"Bevan", Georgia, "Times New Roman", serif;
--font-body:"Jost", system-ui, -apple-system, sans-serif;
--font-plant:"DM Serif Display", Georgia, serif;
--web-radius-card:18px;
--web-radius-control:10px;
--web-radius-pill:999px;
--web-ad-backdrop:#173C2C;
--web-ad-forest:#073D29;
--web-ad-cream:#FFF7E0;
--web-ad-night:#031E1D;
--web-ad-pink:#F2AAA2;
--web-ad-maroon:#492321;
--web-ad-focus:#F8B337;
--ds-transition:background-color .16s ease-out, color .16s ease-out, border-color .16s ease-out, transform .12s ease-out, box-shadow .16s ease-out, opacity .16s ease-out;
}
body{margin:0;background-color:var(--web-ground);background-image:var(--web-paper-grain);color:var(--forest-ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased;}
[class^="ds-"],[class*=" ds-"],[class^="ds-"] *,[class*=" ds-"] *{box-sizing:border-box;}
.ds-page{max-width:1320px;margin:0 auto;padding:0 40px;}
.ds-section{padding:48px 0 44px;border-bottom:1px solid var(--web-hairline);}
.ds-section--last{border-bottom:none;}
.ds-section--flush{border-bottom:none;}
.ds-split{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:56px;align-items:start;}
/* Reading layout (Step 2, founder decision 15 Sep): prose column left, sticky
   rail right, from 1100px; one column below. The rail holds identity and
   wayfinding; the main column keeps the 760px prose measure and (2026-09-16
   founder decision) the full-width app promo card, moved back out of the
   rail. */
.ds-reading{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;align-items:start;}
.ds-reading__main{min-width:0;}
.ds-reading__rail{position:sticky;top:24px;display:grid;gap:16px;align-self:start;}
/* Tablet (760–1099px, 2026-09-15 mobile plan): the reading layout keeps two
   columns with a 280px rail; below 760px it is one column, rail static. */
@media (max-width:1099px){.ds-reading{grid-template-columns:minmax(0,1fr) 280px;gap:32px;padding-top:28px;}}
@media (max-width:759px){.ds-reading{grid-template-columns:minmax(0,1fr);}.ds-reading__rail{position:static;}}
/* Section grounds (Step 2): a paper band breaks the single cream run. */
.ds-section--paper{background:var(--web-card);box-shadow:0 0 0 100vmax var(--web-card);clip-path:inset(0 -100vmax);border-bottom:none;}
/* Reading rail: identity + wayfinding, shared by every reading family (care
   guide, care topic, symptom, toxicity, propagation, species comparison —
   2026-09-15 mobile audit unification; the app card moved back out of the
   rail 2026-09-16, founder decision). Rail items reuse the DS --compact
   forms; these only strip the full-bleed chrome padding they carried while
   they sat above the main column. */
.ds-reading__rail>.ds-plant-identity{max-width:none;margin:0;padding:0 0 16px;}
.ds-reading__rail>.ds-jump-index--compact{padding:0;}
.ds-reading__rail>.ds-jump-index--compact .ds-jump-index__panel{padding:14px 16px 6px;}
.ds-reading__rail>.ds-topic-aside{margin:0;}
.ds-reading__rail>.ds-topic-aside .ds-glance-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
/* Sticky plate beside propagation's numbered steps: the rail width, not the
   wider .ds-split aside used elsewhere. */
.ds-reading__rail .ds-study-plate{margin:0;}
/* Two plant-identity cards stacked in the compare page's rail. */
.ds-reading__rail .ds-plant-identity--compact+.ds-plant-identity--compact{margin-top:-4px;}
@media (min-width:760px){
/* The templates put the rail FIRST in the DOM (see the collapse note below)
   but it is the RIGHT column, so place both items explicitly — otherwise the
   rail takes the 1fr track and squeezes the prose into 340px. This starts at
   the same 760px boundary the collapse below ends at, so the sticky rail
   (340px from 1100px, 280px in the shared tablet rule above) covers every
   width above phone, not only >=1100px. */
.ds-reading__main{grid-column:1;grid-row:1;}
.ds-reading__rail{grid-column:2;grid-row:1;}
.ds-reading__main>.ds-section:first-child{padding-top:0;}
/* The prose column is ~810px, so a chapter's plate stacks under its prose
   instead of taking a 380px column beside it, and the glance tiles read 2-up. */
.ds-reading__main .ds-split{grid-template-columns:minmax(0,1fr);gap:24px;}
.ds-reading__main .ds-study-plate{max-width:720px;}
.ds-reading__main .ds-split--glance{grid-template-columns:minmax(0,1fr) 240px;gap:28px;}
/* 2026-09-16, symptom opening: the plate + Kitty stack no longer sits in a
   240px side column beside a four-line paragraph (a wall of empty space on
   the left, thumbnail plate, Kitty stranded below). From 1000px the prose
   runs full width and the stack becomes a row: plate at 240-300px, Kitty
   note beside it. Care guides (tiles + photo) keep the side-by-side split. */
.ds-reading__main .ds-split--glance:has(>.ds-stack){grid-template-columns:minmax(0,1fr);gap:4px;}
.ds-reading__main .ds-split--glance>.ds-stack>.ds-study-plate,.ds-reading__main .ds-split--glance>.ds-stack>.ds-kitty-aside{margin:0;}
.ds-reading__main .ds-split--glance>.ds-stack{gap:20px;margin-top:20px;}
.ds-reading__main .ds-split--glance>.ds-stack>.ds-study-plate{max-width:320px;}
@media (min-width:1000px){
.ds-reading__main .ds-split--glance>.ds-stack:has(>.ds-study-plate):has(>.ds-kitty-aside){grid-template-columns:minmax(240px,300px) minmax(0,1fr);gap:28px;align-items:center;}
}
.ds-reading__main .ds-glance-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
/* Below 760px the grid collapses to one column. The rail is NOT a block that
   jumps ahead of or behind the whole article: display:contents dissolves it
   so its items order individually around the main column — identity, then
   wayfinding, then the prose (which carries the app card itself again,
   2026-09-16 founder decision — it is no longer a separate rail item, so
   there is no order:4 for it here). One copy of every item at every width;
   nothing is hidden and nothing is duplicated. Every family's own wayfinding
   item (jump index, topic glance tiles, toxicity verdict card, the
   emergency Kitty aside, propagation's method plate) shares order:2, so it
   keeps its DOM position right after identity. */
@media (max-width:759px){
/* align-items:stretch resets the desktop grid's start alignment: in a
   column flex container that value shrink-wraps every item to its
   content width, which collapsed the aspect-ratio app card to 0x0
   (invisible to readers and to its exposure event, live 15-16 Sep)
   and left the jump index short of the column. */
.ds-reading{display:flex;flex-direction:column;gap:0;align-items:stretch;}
.ds-reading__rail{display:contents;}
.ds-reading__rail>.ds-plant-identity{order:1;padding:16px 0;}
.ds-reading__rail>.ds-jump-index--compact{order:2;}
.ds-reading__rail>.ds-topic-aside{order:2;margin-bottom:24px;}
.ds-reading__rail>.ds-verdict-card{order:2;margin-bottom:16px;}
.ds-reading__rail>.ds-kitty-aside{order:2;margin-bottom:24px;}
.ds-reading__rail>.ds-study-plate{order:2;margin-bottom:24px;}
.ds-reading__main{order:3;}
}
/* The rail's app card is the compact square crop the mobile breakpoint
   already draws for .ds-app-cta--ad — reused unconditionally here so the
   card reads correctly at 340px regardless of viewport width, instead of
   the wide 1672:941 ad crop the full-width placement uses. Used by the
   symptom/toxicity/propagation/compare families, whose rail app card is
   rendered with compact:true. */
.ds-app-cta--compact.ds-app-cta--ad{max-width:none;aspect-ratio:1;}
.ds-app-cta--compact.ds-app-cta--ad .ds-app-cta__screen{left:var(--app-cta-s-left);top:var(--app-cta-s-top);width:var(--app-cta-s-width);height:var(--app-cta-s-height);}
.ds-app-cta--compact.ds-app-cta--ad .ds-app-cta__content{top:7%;left:8%;width:67.2%;height:auto;min-height:36%;}
.ds-app-cta--compact.ds-app-cta--ad .ds-app-cta__headline{font-size:clamp(18px,7.2cqw,32px);line-height:1.12;min-height:4.2em;}
.ds-app-cta--compact.ds-app-cta--ad .ds-app-cta__action{position:static;gap:3.9cqw;margin-top:3.2cqw;padding:2.795cqw 4.68cqw;font-size:clamp(12px,3.38cqw,16px);box-shadow:4px 4px 0 rgba(15,42,31,.18);}
.ds-app-cta--compact.ds-app-cta__action:active,.ds-app-cta--compact.ds-app-cta--ad .ds-app-cta__action:active{transform:translate(4px,4px);}
.ds-app-cta--compact.ds-app-cta--ad .ds-app-cta__action-arrow{font-size:4.03cqw;}
@media (max-width:1099px){
.ds-app-cta--compact.ds-app-cta--ad{max-width:420px;margin-inline:auto;}
}
.ds-split--center{align-items:center;}
.ds-split--glance{grid-template-columns:minmax(0,1fr) 300px;gap:40px;}
.ds-split__column{max-width:640px;}
.ds-plant-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 24px;}
/* M2 directory grid (15 Sep): row cards below 760px, see .ds-plant-card__safety. */
.ds-plant-grid--directory{grid-template-columns:repeat(4,minmax(0,1fr));}
/* 2026-09-16 CH-02/CA-02/CA-04: a curated collection grid, or a short
   "alternatives" list, can hold any count, so the fixed-column grid above
   strands a partial row with a wide empty gap. Flex+wrap centers (collection)
   or simply ends (compact) instead of stretching/stranding; basis matches
   this grid's 4-up/24px gap, with its own basis at ≤900px and 760-1099px. */
.ds-plant-grid--collection{display:flex;flex-wrap:wrap;justify-content:center;}
.ds-plant-grid--collection>*{flex:0 1 calc(25% - 18px);}
.ds-plant-grid--compact{display:flex;flex-wrap:wrap;}
/* 2026-09-16: this reading column runs only 376px at 768px, so a fixed
   220px basis wrapped two cards to two rows; a smaller basis that can grow
   fits 1-2 cards on one line at any width. */
.ds-plant-grid--compact>*{flex:1 1 150px;max-width:220px;}
/* 2026-09-16 CH-03/CH-07: same reasoning as .ds-plant-grid--collection above,
   applied to the pathway-tile grid (only unprotected use is the pet-safe
   hub's 5-item bouquet list; the 404 page's own .ds-not-found-next override
   already wins there regardless). */
.ds-pathway-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;}
.ds-pathway-grid>*{flex:0 1 calc(33.333% - 7px);}
.ds-glance-grid{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.ds-capability-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
.ds-plan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:stretch;}
.ds-stack{display:grid;gap:10px;}
/* Prose.jsx tones (HANDOFF 2026-09-07): body stays the default, unrenamed
   class; lead/note are added as --tone modifiers so the one existing
   ".ds-prose" class every generated paragraph already carries keeps working
   unchanged. */
.ds-prose{margin:0 0 16px;font-size:17px;line-height:1.6;color:var(--web-body);max-width:65ch;text-wrap:pretty;}
.ds-prose:last-child{margin-bottom:0;}
.ds-prose a,.ds-rule-card__body a,.ds-facts-ledger a{color:var(--emerald-wordmark);font-weight:600;text-decoration:none;}
.ds-prose a:focus-visible,.ds-rule-card__body a:focus-visible{outline:2px solid var(--forest-ink);outline-offset:3px;}
.ds-prose--lead{font-size:19px;line-height:1.55;max-width:60ch;}
.ds-prose--lead.ds-prose--compact{font-size:17px;}
.ds-prose--note{font-size:14.5px;line-height:1.5;color:var(--text-muted);max-width:65ch;}
.ds-only-narrow{display:none;}
/* Like .skip-link, not a DS part: the one visually-hidden utility both presses
   already mark labels with. Without it a label meant for assistive tech only
   printed as ordinary body copy above the field it names. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
@media (max-width:900px){
.ds-only-narrow{display:revert;}
.ds-only-wide{display:none;}
.ds-section{padding:36px 0 32px;}
.ds-split,.ds-split--glance{grid-template-columns:minmax(0,1fr);gap:24px;}
.ds-split__column{max-width:none;}
.ds-plant-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px;}
.ds-plant-grid--collection>*{flex-basis:calc(50% - 7px);}
.ds-pathway-grid>*{flex-basis:100%;}
.ds-glance-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.ds-capability-grid,.ds-plan-grid{grid-template-columns:minmax(0,1fr);}
}
/* Tablet 760–1099 (2026-09-15): collections/capability/glance go three-up. */
@media (min-width:760px) and (max-width:1099px){
/* 2026-09-16: fixed 3-up squeezed the thumb tile title; auto-fit instead. */
.ds-pathway-grid>*{flex-basis:calc(50% - 5px);}
.ds-glance-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
.ds-capability-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
/* 2026-09-16 CH-06: three 8-card pet-safe-hub directory grids (safe, toxic,
   unconfirmed) hit the same 8-mod-3 remainder here, stranding the last row's
   two cards beside an empty third column; flex+center closes it without
   touching this class's other breakpoints (4-up desktop, row-style <760px). */
.ds-plant-grid--directory{display:flex;flex-wrap:wrap;justify-content:center;}
.ds-plant-grid--directory>*{flex:0 1 calc(33.333% - 16px);}
.ds-plant-grid--collection>*{flex-basis:calc(33.333% - 16px);}
/* 2026-09-16 CG-01: the reading column's glance split keeps a fixed 240px
   photo aside from 760px up (see the unconditional rule above), which left
   only ~108-116px for the 2-up tiles here and wrapped values one letter per
   line (measured live at 768/900). Stack the photo under the tiles for this
   band only — 1100px+ keeps the side-by-side 240px form unchanged. */
.ds-reading__main .ds-split--glance{grid-template-columns:minmax(0,1fr);gap:24px;}
}
@media (max-width:760px){
.ds-page{max-width:1280px;padding:0 20px;}
.ds-plant-grid--directory{grid-template-columns:minmax(0,1fr);gap:12px;}
.ds-plant-grid--collection{justify-content:flex-start;}
}
.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:var(--web-radius-pill);background:var(--web-forest-fill);color:var(--web-on-forest);font-family:var(--font-body);font-size:14px;font-weight:600;line-height:1;text-decoration:none;transform:translate(-50%,-160%);transition:transform .15s ease-out;}
.skip-link:focus,.skip-link:focus-visible{transform:translate(-50%,0);outline:2px solid var(--web-on-forest);outline-offset:3px;}
.ds-masthead{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:1320px;margin:0 auto;padding:22px 40px;font-family:var(--font-body);font-size:16px;}
.ds-masthead__home{display:block;min-height:44px;align-content:center;}
.ds-masthead__home:focus-visible,.ds-masthead__badge:focus-visible{outline:2px solid var(--forest-ink);outline-offset:3px;}
.ds-masthead__logo{height:34px;width:auto;display:block;}
.ds-masthead--forest .ds-masthead__logo{filter:brightness(0) invert(1);}
.ds-masthead__nav{display:flex;align-items:center;gap:24px;flex-shrink:1;min-width:0;min-height:44px;padding:0 14px;border:1px solid var(--web-hairline);border-radius:4px;background:var(--web-card-raised);}
.ds-masthead__link{font-family:var(--font-body);font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:var(--forest-ink);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;transition:var(--ds-transition);box-shadow:inset 0 -2px 0 transparent;}
.ds-masthead--forest .ds-masthead__link{color:var(--web-on-forest);}
.ds-masthead__link:hover{box-shadow:inset 0 -2px 0 currentColor;}
.ds-masthead__link:focus-visible{outline:2px solid var(--forest-ink);outline-offset:3px;}
.ds-masthead__actions{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.ds-masthead__lang{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--web-hairline);border-radius:4px;background:var(--web-card-raised);font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--forest-ink);cursor:pointer;}
.ds-masthead__lang:focus-visible{outline:2px solid var(--forest-ink);outline-offset:3px;}
.ds-masthead__flag{width:22px;height:16px;object-fit:cover;border-radius:2px;}
.ds-masthead__lang-sheet{position:absolute;right:40px;top:calc(100% - 8px);z-index:31;min-width:260px;max-height:min(70vh,560px);overflow:auto;padding:8px;border-radius:var(--web-radius-card);background:var(--web-card);border:1px solid var(--web-hairline);box-shadow:0 24px 48px rgba(15,42,31,.16);}
.ds-masthead__lang-sheet[hidden]{display:none;}
.ds-masthead__lang-link{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:var(--web-radius-control);font-family:var(--font-body);font-size:15px;color:var(--forest-ink);text-decoration:none;}
.ds-masthead__lang-link:hover{background:var(--web-paper);}
.ds-masthead__lang-link:focus-visible{outline:2px solid var(--forest-ink);outline-offset:-2px;}
.ds-masthead__lang-link[aria-current="true"]{font-weight:700;background:var(--feed-wash);}
.ds-masthead__lang-code{font-weight:600;letter-spacing:.08em;min-width:2.4em;}
.ds-masthead__lang-name{color:var(--web-body);}
.ds-masthead--compact .ds-masthead__lang-sheet{right:20px;left:20px;min-width:0;}
@media (max-width:1100px){.ds-masthead__lang-sheet{right:20px;left:20px;min-width:0;}}
.ds-masthead__badge img{height:40px;display:block;}
.ds-masthead__menu-button{display:none;place-items:center;width:48px;height:44px;border:1px solid var(--web-hairline);border-radius:4px;background:var(--web-card-raised);color:var(--forest-ink);cursor:pointer;}
.ds-masthead__menu-button:focus-visible{outline:2px solid var(--forest-ink);outline-offset:3px;}
.ds-masthead__sheet{position:absolute;left:0;right:0;top:100%;z-index:30;margin:0 12px;padding:8px 8px 12px;border-radius:var(--web-radius-card);background:var(--web-card);border:1px solid var(--web-hairline);box-shadow:0 24px 48px -24px rgba(12,32,23,.45);display:grid;}
.ds-masthead__sheet[hidden]{display:none;}
.ds-masthead__sheet-link{display:flex;align-items:center;min-height:48px;padding:0 14px;border-radius:var(--web-radius-control);font-family:var(--font-body);font-size:16px;font-weight:600;color:var(--forest-ink);text-decoration:none;}
.ds-masthead__sheet-link:focus-visible{outline:2px solid var(--forest-ink);outline-offset:3px;}
.ds-masthead__sheet-badges{display:flex;gap:8px;padding:10px 6px 0;border-top:1px solid var(--web-hairline);margin-top:6px;}
.ds-masthead__sheet-badges img{height:40px;display:block;}
.ds-masthead--compact{padding:16px 20px;}
.ds-masthead--compact .ds-masthead__logo{height:28px;}
.ds-masthead--compact .ds-masthead__nav,.ds-masthead--compact .ds-masthead__badge{display:none;}
.ds-masthead--compact .ds-masthead__menu-button{display:grid;}
@media (max-width:1100px){
.ds-masthead{padding:16px 20px;}
.ds-masthead__logo{height:28px;}
.ds-masthead__nav,.ds-masthead__badge{display:none;}
.ds-masthead__menu-button{display:grid;}
}
@media(max-width:359px){
.ds-masthead{gap:8px;padding-inline:16px;}
.ds-masthead__logo{width:100px;}
.ds-masthead__actions{gap:8px;}
.ds-masthead__lang{padding-inline:10px;}
}

@font-face {
  font-family: "Fraunces Soft";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/brand/fonts/fraunces-soft-latin-ext-900-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: "Fraunces Soft";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/brand/fonts/fraunces-soft-latin-900-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


.ds-opening{position:relative;isolation:isolate;overflow:hidden;height:min(max(var(--ds-opening-min,640px),44.5vw),56.25vw,960px);background:var(--web-cream-scene);}
.ds-opening--forest{background:var(--forest-deep);}
.ds-opening--scene{background:var(--ds-scene-wall,var(--web-cream-scene));}
.ds-opening--scene .ds-opening__title{font-family:"Fraunces Soft",Georgia,serif;font-weight:900;}
.ds-opening__art-frame{display:block;position:absolute;inset:0;z-index:0;}
.ds-opening__art{display:block;width:100%;height:100%;object-fit:cover;object-position:left bottom;}
.ds-opening__wall{position:relative;z-index:2;display:flex;flex-direction:column;height:100%;}
.ds-opening__head{position:relative;z-index:3;}
.ds-opening__copy-wrap{position:relative;z-index:2;max-width:1240px;width:100%;margin:0 auto;padding:clamp(16px, 2vw, 32px) 40px 0;}
/* Default wall = "care"/"plant" (WALLS table, HANDOFF 2026-09-07): 58% desktop,
   78% phone (below). Every other preset gets its own modifier class. */
.ds-opening__copy{width:58%;min-width:min(100%, 260px);}
.ds-opening__eyebrow{margin:0 0 12px;font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--emerald-wordmark);}
.ds-opening--forest .ds-opening__eyebrow{color:var(--emerald-bright);}
/* 2026-09-16 (founder review, round two): no automatic hyphenation, no locale
   override — one rule, every locale. A dictionary-hyphen fallback was tried
   here for 20+ character compounds and removed: it did not rescue the cases
   that still overflowed the type floor in Chromium. The real fix is sizing —
   openingTypeScale (scripts/website-ds.mjs) now shrinks a title below its
   aesthetic floor, down to a hard minimum, whenever its longest word cannot
   fit the wall at that floor; break-word here is the literal last resort,
   per spec, only for a title too long to fit even at the hard minimum — see
   the release notes for which, if any. */
.ds-opening__title{margin:0 0 18px;font-family:var(--font-display);font-weight:400;font-size:var(--ds-opening-h1,68px);line-height:.98;letter-spacing:-.02em;color:var(--forest-ink);text-wrap:balance;hyphens:manual;overflow-wrap:break-word;word-break:normal;}
/* 2026-09-16: the generator sizes every title to its container down to a hard
   minimum; a compound that still cannot fit there (hjärtporslinsblomma at 24px)
   takes a dictionary hyphen rather than a raw break. */
.ds-opening__title:is([lang="de"],[lang="nl"],[lang="sv"],[lang="da"],[lang="nb"],[lang="no"],[lang="fi"],[lang="hu"],[lang="cs"]){hyphens:auto;hyphenate-limit-chars:16 6 6;}

.ds-opening--forest .ds-opening__title{color:var(--web-on-forest);}
.ds-opening__lede{margin:0;font-family:var(--font-body);font-size:var(--ds-opening-lede,19px);line-height:1.5;color:var(--web-body);max-width:46ch;text-wrap:pretty;}
.ds-opening--forest .ds-opening__lede{color:var(--web-on-forest-soft);}
.ds-opening__meta{margin:14px 0 0;font-family:var(--font-body);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--forest-ink);}
.ds-opening--forest .ds-opening__meta{color:var(--web-on-forest);}
.ds-opening__meta a{display:inline-flex;align-items:center;min-height:44px;margin:-16px 0;color:inherit;text-decoration:underline;text-underline-offset:3px;}
.ds-opening__children{margin-top:22px;}
.ds-opening[data-ds-menu-open] .ds-opening__children .ds-store-badges{visibility:hidden;pointer-events:none;}
.ds-opening--compact{height:auto;isolation:isolate;overflow:hidden;}
.ds-opening--compact .ds-opening__art-frame{position:static;width:100%;}
.ds-opening--compact .ds-opening__art{height:auto;aspect-ratio:9 / 16;object-position:center bottom;}
.ds-opening--compact .ds-opening__wall{position:absolute;inset:0;}
.ds-opening--compact .ds-opening__copy-wrap{padding:12px 20px 0;}
.ds-opening--compact .ds-opening__copy{width:78%;}
.ds-opening--compact .ds-opening__eyebrow{font-size:12px;}
.ds-opening--compact .ds-opening__title{margin:0 0 12px;font-size:var(--ds-opening-h1-narrow,40px);line-height:1;}
.ds-opening--compact .ds-opening__lede{font-size:16.5px;}
.ds-opening--compact .ds-opening__children{margin-top:16px;}
/* The rest of the WALLS table (HANDOFF 2026-09-07), desktop widths. wall="room":
   the Pflegewissen room scenes are generated with the whole left half as quiet
   cream wall, so the copy takes that space instead of the care/plant scenes'
   58%. */
.ds-opening--homepage .ds-opening__copy{width:46%;}
.ds-opening--discovery .ds-opening__copy{width:40%;}
.ds-opening--pet-safe .ds-opening__copy{width:54%;}
.ds-opening--symptom .ds-opening__copy{width:50%;}
.ds-opening--propagation .ds-opening__copy{width:52%;}
.ds-opening--room .ds-opening__copy{width:50%;}
@media (max-width:759px){
.ds-opening{height:auto;}
.ds-opening .ds-opening__art-frame{position:static;width:100%;}
.ds-opening .ds-opening__art{height:auto;aspect-ratio:9 / 16;object-position:center bottom;}
.ds-opening .ds-opening__wall{position:absolute;inset:0;}
.ds-opening .ds-opening__copy-wrap{padding:12px 20px 0;}
.ds-opening .ds-opening__copy{width:78%;}
.ds-opening--homepage .ds-opening__copy{width:74%;}
.ds-opening--discovery .ds-opening__copy{width:66%;}
.ds-opening--pet-safe .ds-opening__copy{width:74%;}
.ds-opening--symptom .ds-opening__copy{width:74%;}
.ds-opening--propagation .ds-opening__copy{width:74%;}
/* The room preset keeps the 76% phone wall (not the jsx's 92%): the ten
   delivered scenes carry the plant family's hanging vine in the top-right, so
   a wider wall runs the lede through the foliage. The room geometry it does
   honour is the height — the whole top half is quiet — and that lives in the
   fit measurement. */
.ds-opening--room .ds-opening__copy{width:76%;}
.ds-opening .ds-opening__eyebrow{font-size:12px;}
/* 2026-09-16: the two locale scale-downs (.8/.72) are gone — the var itself
   is now fitted correctly (see openingTypeScale in scripts/website-ds.mjs). */
.ds-opening .ds-opening__title{margin:0 0 12px;font-size:var(--ds-opening-h1-narrow,40px);line-height:1;}
.ds-opening .ds-opening__lede{font-size:16.5px;}
.ds-opening .ds-opening__children{margin-top:16px;}
/* Two 3:1 badges at 48px need 300px; the 76% copy wall on a 390 frame is 266px.
   Home/HomeMobile.dc.html keeps them side by side, so the hero pair drops to
   the 40px StoreBadges height rather than wrapping under the lede. */
.ds-opening .ds-opening__children .ds-store-badges{--ds-badge-height:40px;flex-wrap:nowrap;}
}
@media (max-width:340px){
.ds-opening .ds-opening__children .ds-store-badges{flex-wrap:wrap;row-gap:8px;max-width:100%;}
}
/* Tablet 760–1099 (2026-09-15 mobile plan): the desktop scene, full-bleed,
   cover-cropped like desktop; the phone (portrait) scene only below 760, where
   the <picture> source switches. Copy wall stays at the desktop presets. */
/* Tablet: keep the full scene visible below the copy at the 640px floor. */
@media (min-width:760px) and (max-width:1099px){
.ds-opening{height:max(var(--ds-opening-min,640px),44.5vw);}
.ds-opening__art{object-fit:contain;object-position:right bottom;}
.ds-opening--scene .ds-opening__art{mask-image:linear-gradient(to bottom,transparent calc(100% - 56.25vw),#000 calc(100% - 42vw));}
/* contain (above) stops the crop, but the wall is still 58%: measured
   screenshots at 768-800px put the symptom scene's foliage as close as
   ~55% of image width, so lede lines still reached into painted leaves.
   Every page uses this default wall (no generator page passes another
   preset), so narrow it band-wide. 44% clears every measured scene at
   760-800px; the type ladder's wider wallPx above ~900px already keeps
   lines short of the art. */
.ds-opening__copy{width:44%;}
/* 2026-09-16: own fitted var replaces the borrowed phone var + .85 patch
   (see openingTypeScale, narrow="tablet", in scripts/website-ds.mjs). */
.ds-opening__title{font-size:var(--ds-opening-h1-tablet,40px);}
}
/* Approved portrait scenes reserve the upper half for live copy. */
@media(max-width:759px){
.ds-opening.ds-opening--scene{height:auto;min-height:216.67vw;}
.ds-opening--scene .ds-opening__wall{position:relative;min-height:inherit;height:auto;padding-bottom:105vw;}
.ds-opening--scene .ds-opening__art-frame{position:absolute;inset:0;}
.ds-opening--scene .ds-opening__art{height:107%;aspect-ratio:auto;object-fit:cover;object-position:center top;}
.ds-opening--scene .ds-opening__copy{width:100%;min-width:0;}
.ds-opening--scene .ds-opening__copy-wrap{padding:20px 20px 24px;}
}

.ds-breadcrumb{border-bottom:1px solid var(--web-hairline);background:var(--web-card);}
.ds-breadcrumb__list{margin:0 auto;max-width:1320px;padding:0 40px;list-style:none;display:flex;align-items:center;flex-wrap:wrap;white-space:normal;gap:0 6px;min-height:52px;font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;}
.ds-breadcrumb__item{display:inline-flex;align-items:center;gap:6px;min-width:0;flex:0 0 auto;}
.ds-breadcrumb__item:last-child{flex:1 1 auto;}
.ds-breadcrumb__link{color:var(--emerald-wordmark);text-decoration:none;text-underline-offset:4px;min-height:44px;display:inline-flex;align-items:center;transition:var(--ds-transition);}
.ds-breadcrumb__link:hover{text-decoration:underline;}
.ds-breadcrumb__link:focus-visible{outline:2px solid var(--forest-ink);outline-offset:3px;}
.ds-breadcrumb__current{color:var(--forest-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
/* Phone: one horizontal-scroll row of every entry (DS rule: rows scroll,
   never truncate — the plant name must survive on a subguide). A right-edge
   fade (2026-09-15, founder decision) signals more of the trail is off-screen;
   scroll-padding-inline-end keeps the current crumb clear of that fade when
   the runtime below scrolls it into view on load. */
.ds-breadcrumb--compact .ds-breadcrumb__list{padding:0 20px;flex-wrap:nowrap;white-space:nowrap;min-height:46px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-padding-inline-end:20px;mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);}
.ds-breadcrumb--compact .ds-breadcrumb__list::-webkit-scrollbar{display:none;}
.ds-breadcrumb--compact .ds-breadcrumb__item:last-child{flex:0 0 auto;padding-right:20px;}
.ds-breadcrumb--compact .ds-breadcrumb__current{overflow:visible;text-overflow:clip;}
@media (max-width:760px){
.ds-breadcrumb__list{padding:0 20px;flex-wrap:nowrap;white-space:nowrap;min-height:46px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-padding-inline-end:20px;mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);}
.ds-breadcrumb__list::-webkit-scrollbar{display:none;}
.ds-breadcrumb__item:last-child{flex:0 0 auto;padding-right:20px;}
.ds-breadcrumb__current{overflow:visible;text-overflow:clip;}
}
.ds-jump-index{border-bottom:1px solid var(--web-hairline);font-family:var(--font-body);}
.ds-jump-index__panel{max-width:1320px;margin:0 auto;padding:14px 40px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;}
.ds-jump-index__label{font-family:var(--font-body);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin:0 6px 0 0;white-space:nowrap;}
.ds-jump-index__list{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;}
.ds-jump-index__item{border-top:none;}
.ds-jump-index__link{transition:var(--ds-transition);box-shadow:inset 0 -2px 0 transparent;color:var(--forest-ink);display:inline-flex;align-items:center;gap:8px;min-height:36px;font-family:var(--font-body);font-size:14px;text-decoration:none;font-weight:600;white-space:nowrap;}
.ds-jump-index__link:hover{box-shadow:inset 0 -2px 0 var(--emerald-wordmark);color:var(--emerald-wordmark);}
.ds-jump-index__link:focus-visible{outline:2px solid var(--forest-ink);outline-offset:3px;}
.ds-jump-index__n{font-weight:300;color:var(--emerald-wordmark);}
.ds-jump-index__arrow{display:none;}
.ds-jump-index--compact{border-bottom:none;padding:16px 20px 0;}
.ds-jump-index--compact .ds-jump-index__panel{border-radius:var(--web-radius-card);background:var(--web-card);border:1px solid var(--web-hairline);padding:14px 16px 6px;display:block;}
.ds-jump-index--compact .ds-jump-index__label{margin:0 0 4px;display:block;}
.ds-jump-index--compact .ds-jump-index__list{display:grid;gap:0;}
.ds-jump-index--compact .ds-jump-index__item+.ds-jump-index__item{border-top:1px solid var(--web-hairline);}
.ds-jump-index--compact .ds-jump-index__link{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:46px;font-size:15px;white-space:normal;box-shadow:none;}
.ds-jump-index--compact .ds-jump-index__link:hover{box-shadow:none;color:var(--emerald-wordmark);}
.ds-jump-index--compact .ds-jump-index__n{font-size:16px;}
.ds-jump-index--compact .ds-jump-index__arrow{display:inline-block;color:var(--emerald-wordmark);transition:var(--ds-transition);}
.ds-jump-index--compact .ds-jump-index__link:hover .ds-jump-index__arrow{transform:translateX(4px);}
@media (max-width:760px){
.ds-jump-index{border-bottom:none;padding:16px 20px 0;}
.ds-jump-index .ds-jump-index__panel{border-radius:var(--web-radius-card);background:var(--web-card);border:1px solid var(--web-hairline);padding:14px 16px 6px;display:block;}
.ds-jump-index .ds-jump-index__label{margin:0 0 4px;display:block;}
.ds-jump-index .ds-jump-index__list{display:grid;gap:0;}
.ds-jump-index .ds-jump-index__item+.ds-jump-index__item{border-top:1px solid var(--web-hairline);}
.ds-jump-index .ds-jump-index__link{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:46px;font-size:15px;white-space:normal;box-shadow:none;}
.ds-jump-index .ds-jump-index__link:hover{box-shadow:none;color:var(--emerald-wordmark);}
.ds-jump-index .ds-jump-index__n{font-size:16px;}
.ds-jump-index .ds-jump-index__arrow{display:inline-block;color:var(--emerald-wordmark);transition:var(--ds-transition);}
.ds-jump-index .ds-jump-index__link:hover .ds-jump-index__arrow{transform:translateX(4px);}
}
.ds-intro-band{background:var(--web-olive-band);border-bottom:1px solid var(--web-hairline);}
.ds-intro-band__copy{max-width:1320px;margin:0 auto;padding:28px 40px;font-family:var(--font-body);font-size:19px;line-height:1.6;color:var(--web-body);}
.ds-intro-band--compact .ds-intro-band__copy{padding:22px 20px;font-size:17px;}
@media (max-width:760px){
.ds-intro-band__copy{padding:22px 20px;font-size:17px;}
}
.ds-section-title{margin:0 0 var(--ds-title-after,24px);font-family:var(--font-body);font-weight:500;font-size:var(--ds-title-size,38px);overflow-wrap:anywhere;hyphens:manual;text-wrap:balance;line-height:1.08;letter-spacing:-.02em;color:var(--forest-ink);}
/* SectionTitle.jsx `link`: the section title paired with a quiet "All X" link,
   flush to the title's own baseline instead of a second row. */
.ds-section-title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 var(--ds-title-after,24px);}
.ds-section-title-row .ds-section-title{margin:0;}
.ds-section-title__link{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;font-family:var(--font-body);font-size:15px;font-weight:600;color:var(--emerald-wordmark);text-decoration:none;white-space:nowrap;}
.ds-section-title__link:focus-visible{outline:2px solid var(--forest-ink);outline-offset:3px;}
.ds-eyebrow{margin:0 0 24px;font-family:var(--font-body);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);}
.ds-eyebrow--accent{color:var(--emerald-wordmark);}
.ds-review-line{margin:24px 0 0;padding:0 0 40px;font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);}
.ds-limit-note{margin:0 0 20px;padding:14px 16px;border-radius:var(--web-radius-control);background:var(--caution-wash);color:var(--caution-ink);font-family:var(--font-body);font-size:15px;line-height:1.5;}
.ds-limit-note__title{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px;}
@media (max-width:900px){
.ds-section-title{font-size:var(--ds-title-size-narrow,var(--ds-title-size,26px));margin-bottom:var(--ds-title-after-narrow,var(--ds-title-after,24px));}
.ds-section-title-row{margin-bottom:var(--ds-title-after-narrow,var(--ds-title-after,24px));}
.ds-section-title-row .ds-section-title{font-size:var(--ds-title-size-narrow,var(--ds-title-size,26px));}
}
.ds-glance-tile{display:grid;gap:8px;align-content:start;padding:var(--ds-tile-pad,18px);border-radius:var(--ds-tile-radius,16px);background:var(--web-card);border:1px solid var(--web-hairline);font-family:var(--font-body);}
.ds-glance-tile--toxic{background:var(--web-toxic-wash);border-color:var(--web-toxic-border);}
.ds-glance-tile__icon{width:var(--ds-tile-icon,44px);height:var(--ds-tile-icon,44px);object-fit:contain;}
.ds-glance-tile__mark{display:block;height:var(--ds-tile-icon,44px);font-family:var(--font-display);font-weight:400;font-size:var(--ds-tile-mark,32px);line-height:1;color:var(--emerald-wordmark);}
.ds-glance-tile__label{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);overflow-wrap:normal;word-break:normal;hyphens:manual;}
/* 2026-09-16: uppercase labels never hyphenate, so HAUSTIERSICHERHEIT must fit the
   narrow tile instead of breaking at a letter. */
@media (max-width:1099px){.ds-glance-tile__label{font-size:11px;letter-spacing:.06em;}}
.ds-glance-tile__value{margin:0;font-size:var(--ds-tile-value,17px);font-weight:600;line-height:1.3;color:var(--forest-ink);overflow-wrap:anywhere;hyphens:auto;text-wrap:pretty;}
.ds-glance-tile__value--italic{font-weight:400;font-style:italic;}
.ds-glance-tile__season{font-size:12px;font-weight:500;color:var(--text-muted);}
.ds-glance-tile--toxic .ds-glance-tile__value{color:var(--attention-web-text);}
.ds-glance-tile--compact{--ds-tile-pad:12px;--ds-tile-radius:14px;--ds-tile-icon:36px;--ds-tile-mark:26px;--ds-tile-value:14.5px;}
@media (max-width:760px){
.ds-glance-tile{--ds-tile-pad:12px;--ds-tile-radius:14px;--ds-tile-icon:36px;--ds-tile-mark:26px;--ds-tile-value:14.5px;}
}
.ds-pixel-plate{--ds-plate:var(--ds-plate-size,220px);margin:0;display:grid;justify-items:center;gap:10px;width:max-content;font-family:var(--font-body);}
.ds-pixel-plate__tile{display:grid;place-items:center;width:var(--ds-plate);height:var(--ds-plate);border-radius:20px;background:var(--web-card);border:1px solid var(--web-hairline);}
.ds-pixel-plate--olive .ds-pixel-plate__tile{background:var(--web-olive-band);}
.ds-pixel-plate--forest .ds-pixel-plate__tile{background:var(--web-forest-fill);border:none;}
.ds-pixel-plate__img{width:calc(var(--ds-plate) * .72);height:auto;image-rendering:pixelated;}
.ds-pixel-plate__caption{font-size:13px;font-style:italic;color:var(--text-muted);}
@media (max-width:900px){.ds-pixel-plate{--ds-plate:var(--ds-plate-size-narrow,var(--ds-plate-size,220px));}}
/* StudyPlate.jsx, HANDOFF 2026-09-07. The image keeps its OWN ratio: no forced
   aspect-ratio and no fixed width/height, because the Mr. Kitty set is 1680×945
   while the older study plates are 4:5 and 3:2. --ds-study-plate-ratio is set
   per figure only to reserve the space before load. --inset caps the figure at
   the 720px reading column on desktop for the single-subject Kitty plates; the
   phone is always full width, so the cap never applies below 900px. */
.ds-study-plate{margin:36px 0 28px;font-family:var(--font-body);}
.ds-study-plate__img{display:block;width:100%;height:auto;aspect-ratio:var(--ds-study-plate-ratio,auto);border-radius:20px;border:1px solid var(--web-hairline);}
.ds-study-plate__caption{margin:12px 4px 0;font-size:15px;line-height:1.5;color:var(--text-muted);text-wrap:pretty;}
.ds-study-plate__panels{display:block;margin-top:2px;font-size:14px;}
.ds-study-plate--inset{max-width:720px;}
.ds-study-plate--compact{margin:24px 0 20px;}
.ds-study-plate--compact .ds-study-plate__img{border-radius:14px;}
.ds-study-plate--compact .ds-study-plate__caption{margin:10px 2px 0;font-size:14px;}
.ds-study-plate--compact .ds-study-plate__panels{font-size:13px;}
@media (max-width:760px){
.ds-study-plate{margin:24px 0 20px;max-width:none;}
.ds-study-plate__img{border-radius:14px;}
.ds-study-plate__caption{margin:10px 2px 0;font-size:14px;}
.ds-study-plate__panels{font-size:13px;}
}
/* PhotoFrame.jsx (HANDOFF 2026-09-07): the figure now wraps a ratio-boxed
   media div plus an optional italic caption, instead of forcing the ratio on
   the figure itself. */
.ds-photo-frame{margin:0;min-width:0;}
.ds-photo-frame__media{border-radius:var(--web-radius-card);overflow:hidden;background:var(--olive-wash);aspect-ratio:var(--ds-photo-frame-ratio,4 / 5);}
.ds-photo-frame__media img{width:100%;height:100%;object-fit:cover;display:block;}
.ds-photo-frame__caption{margin:8px 0 0;font-family:var(--font-body);font-size:13px;font-style:italic;line-height:1.4;color:var(--text-muted);}
/* PlantIdentity.jsx (new, HANDOFF 2026-09-07): the plant's identity row —
   photo, common name, scientific name, pet-safety line — directly under the
   breadcrumb on every page about one plant. One markup; `--compact` and the
   899px pair line apply the same smaller sizes. */
.ds-plant-identity{display:grid;grid-template-columns:96px minmax(0,1fr);gap:20px;align-items:center;max-width:1320px;margin:0 auto;padding:22px 40px;border-bottom:1px solid var(--web-hairline);font-family:var(--font-body);}
.ds-plant-identity--no-photo{grid-template-columns:minmax(0,1fr);}
.ds-plant-identity__photo{width:96px;height:125px;object-fit:cover;border-radius:18px;display:block;background:var(--olive-wash);}
.ds-plant-identity__body{min-width:0;display:grid;gap:2px;}
.ds-plant-identity__label{display:block;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);}
.ds-plant-identity__name{display:block;font-size:24px;font-weight:600;line-height:1.15;color:var(--forest-ink);letter-spacing:-.01em;}
.ds-plant-identity__sci{font-weight:400;font-style:italic;color:var(--text-muted);font-size:17px;}
.ds-plant-identity__row{display:flex;flex-wrap:wrap;gap:2px 14px;align-items:center;margin-top:2px;}
.ds-plant-identity__safety{display:inline-flex;align-items:center;gap:7px;font-size:14.5px;font-weight:600;}
.ds-plant-identity__safety .ds-safety-dot{width:7px;height:7px;}
.ds-plant-identity__link{display:inline-flex;align-items:center;min-height:44px;font-size:14.5px;font-weight:600;color:var(--emerald-wordmark);text-decoration:none;}
.ds-plant-identity__link:focus-visible{outline:2px solid var(--forest-ink);outline-offset:3px;}
.ds-plant-identity--compact{grid-template-columns:72px minmax(0,1fr);gap:14px;padding:16px 0;}
.ds-plant-identity--compact .ds-plant-identity__photo{width:72px;height:94px;border-radius:14px;}
.ds-plant-identity--compact .ds-plant-identity__label{font-size:12px;}
.ds-plant-identity--compact .ds-plant-identity__name{font-size:20px;}
.ds-plant-identity--compact .ds-plant-identity__sci{font-size:15px;}
.ds-plant-identity--compact .ds-plant-identity__safety{font-size:13.5px;}
.ds-plant-identity--compact .ds-plant-identity__link{min-height:44px;font-size:13.5px;}
@media (max-width:899px){
.ds-plant-identity{grid-template-columns:72px minmax(0,1fr);gap:14px;padding:16px 40px;}
.ds-plant-identity__photo{width:72px;height:94px;border-radius:14px;}
.ds-plant-identity__label{font-size:12px;}
.ds-plant-identity__name{font-size:20px;}
.ds-plant-identity__sci{font-size:15px;}
.ds-plant-identity__safety{font-size:13.5px;}
.ds-plant-identity__link{min-height:44px;font-size:13.5px;}
}
@media (max-width:760px){
.ds-plant-identity{max-width:1280px;padding:16px 20px;}
}
/* 2026-09-16: the aside is its own size container, so it answers to the width it
   gets (240px glance column, 280-340px rail) and not the viewport. */
.ds-kitty-aside{container-type:inline-size;display:flex;flex-wrap:wrap;align-items:center;margin:28px 0;padding:var(--ds-kitty-pad,8px);border-radius:var(--web-radius-card);background:var(--web-olive-band);font-family:var(--font-body);}
.ds-kitty-aside--caution{background:var(--web-toxic-wash);}
.ds-kitty-aside__img{flex:0 0 auto;width:var(--ds-kitty-col,140px);max-width:100%;height:auto;margin-right:var(--ds-kitty-gap,24px);display:block;image-rendering:pixelated;}
.ds-kitty-aside>div{flex:1 1 var(--ds-kitty-measure,240px);min-width:0;padding-right:var(--ds-kitty-copy-inset,20px);}
.ds-kitty-aside__label{display:block;margin-bottom:6px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--emerald-wordmark);}
.ds-kitty-aside--caution .ds-kitty-aside__label{color:var(--attention-web-text);}
.ds-kitty-aside__copy{margin:0;font-size:var(--ds-kitty-copy,18px);line-height:1.5;color:var(--forest-ink);font-weight:500;text-wrap:pretty;}
.ds-kitty-aside--compact{--ds-kitty-col:96px;--ds-kitty-gap:14px;--ds-kitty-pad:6px;--ds-kitty-copy-inset:12px;--ds-kitty-copy:16px;}
@media (max-width:760px){
.ds-kitty-aside{--ds-kitty-col:96px;--ds-kitty-gap:14px;--ds-kitty-pad:6px;--ds-kitty-copy-inset:12px;--ds-kitty-copy:16px;}
}
/* Under the 140+24+240 two columns need, Kitty goes on top at 96px. */
@container (max-width:403px){
.ds-kitty-aside__img{width:96px;margin-right:0;margin-bottom:12px;}
.ds-kitty-aside>div{flex-basis:100%;padding-right:0;}
.ds-kitty-aside__copy{font-size:16px;}
}
/* S4 product proof: phone frame, app captures (founder decision, 15 Sep 2026:
   product proof is back on the website after the 2026-09-05 rebuild dropped
   it). PhoneFrame.jsx/PhoneFrame.tsx: a plain dark bezel around one locked
   in-app capture from public/app-shots/<lang>/ — no fake status bar, the
   capture's own UI already reads as a phone screen. --ds-phone-frame-width
   lets each placement size itself; the default clamp keeps it inside the
   260–320px range the design calls for without a media query at every call
   site. aspect-ratio is fixed to the capture's own 9:19.5 device ratio so the
   bezel never crops an unexpected slice of the screenshot. */
.ds-phone-frame{display:block;width:var(--ds-phone-frame-width,clamp(260px,26vw,320px));max-width:100%;aspect-ratio:9 / 19.5;padding:10px;border-radius:40px;background:var(--forest-deep);box-shadow:0 18px 40px rgba(15,42,31,.22);}
.ds-phone-frame__screen{display:block;width:100%;height:100%;border-radius:30px;overflow:hidden;background:var(--olive-wash);}
.ds-phone-frame__screen img{display:block;width:100%;height:100%;object-fit:cover;}
.ds-plant-card[hidden]{display:none}
.ds-plant-card{display:block;min-width:0;text-decoration:none;color:var(--forest-ink);border-radius:var(--web-radius-card);transition:var(--ds-transition);}
.ds-plant-card:active{transform:scale(.99);}
.ds-plant-card:focus-visible{outline:2px solid var(--forest-ink);outline-offset:3px;}
.ds-plant-card__photo{display:block;aspect-ratio:var(--ds-card-ratio,1 / 1.22);border-radius:var(--web-radius-card);overflow:hidden;background:var(--olive-wash);}
.ds-plant-card__photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1);transform:scale(1);}
.ds-plant-card:hover .ds-plant-card__photo img{transform:scale(1.04);}
.ds-plant-card__name{display:block;margin-top:14px;font-family:var(--font-body);font-size:clamp(17px, 1.6vw, 22px);font-weight:600;line-height:1.2;letter-spacing:-.01em;overflow-wrap:anywhere;hyphens:manual;transition:var(--ds-transition);color:inherit;}
.ds-plant-card:hover .ds-plant-card__name{color:var(--emerald-wordmark);}
.ds-plant-card__sci{display:block;margin-top:3px;font-family:var(--font-body);font-style:italic;font-size:clamp(13px, 1.2vw, 16px);color:var(--text-muted);line-height:1.35;}
.ds-plant-card__detail{display:block;margin-top:10px;font-family:var(--font-body);font-size:clamp(14px, 1.2vw, 16px);font-weight:600;}
.ds-plant-card__safety{display:flex;align-items:center;gap:8px;margin-top:6px;font-family:var(--font-body);font-size:clamp(13px, 1.1vw, 15px);font-weight:600;}
/* M2 compact directory cards (phone) */
@media (max-width:759px){
/* 2026-09-16: with implicit rows, grid-row:1/-1 is row 1 only, so the photo made
   the name row 90px tall and left a gap above the scientific name. Four explicit
   auto rows and a real span. */
.ds-plant-grid--directory .ds-plant-card:not([data-hub-hidden="true"]):not([hidden]){display:grid;grid-template-columns:72px minmax(0,1fr);grid-template-rows:repeat(4,auto);column-gap:12px;align-content:center;min-height:96px;}
.ds-plant-grid--directory .ds-plant-card__photo{grid-column:1;grid-row:1/5;width:72px;aspect-ratio:1/1.25;margin:0;align-self:center;}
.ds-plant-grid--directory .ds-plant-card__name{grid-column:2;margin-top:0;font-size:16px;font-weight:600;line-height:1.3;}
.ds-plant-grid--directory .ds-plant-card__sci{grid-column:2;margin-top:0;font-size:13px;}
.ds-plant-grid--directory .ds-plant-card__detail{grid-column:2;margin-top:2px;font-size:13px;}
.ds-plant-grid--directory .ds-plant-card__safety{grid-column:2;margin-top:2px;font-size:13px;}
.ds-plant-grid--directory .ds-plant-card:hover .ds-plant-card__photo img,.ds-plant-grid--directory .ds-plant-card:active .ds-plant-card__photo img{transform:none;}
}
.ds-safety-dot{width:7px;height:7px;border-radius:var(--web-radius-pill);background:currentColor;flex:0 0 auto;}
.ds-safety--toxic{color:var(--attention-web-text);}
.ds-safety--safe{color:var(--pet-safe-ink);}
.ds-safety--unknown{color:var(--text-muted);}
.ds-pathway-card[hidden]{display:none}
.ds-pathway-card{transition:var(--ds-transition);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;min-height:72px;padding:14px 14px 14px 20px;border-radius:var(--web-radius-card);border:1px solid var(--web-hairline);background:var(--web-olive-band);color:var(--forest-ink);text-decoration:none;}
.ds-pathway-card--thumb{grid-template-columns:88px minmax(0,1fr) auto;gap:20px;min-height:116px;padding:14px;}
.ds-pathway-card:hover{border-color:var(--forest-ink);background:var(--web-olive-band-hover);}
.ds-pathway-card:active{transform:scale(.99);}
.ds-pathway-card:focus-visible{outline:2px solid var(--forest-ink);outline-offset:3px;}
.ds-pathway-card--forest{background:var(--web-forest-fill);color:var(--web-on-forest);border-color:var(--web-forest-fill);}
.ds-pathway-card--forest:hover{background:var(--web-forest-fill);border-color:var(--web-forest-fill);}
.ds-pathway-card__thumb{display:block;width:88px;height:88px;border-radius:var(--web-radius-control);overflow:hidden;background:var(--olive-wash);}
.ds-pathway-card__thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.ds-pathway-card__thumb--pixel img{object-fit:contain;padding:8px;image-rendering:pixelated;}
.ds-pathway-card__text{display:grid;gap:2px;}
.ds-pathway-card__kicker{font-family:var(--font-body);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);}
.ds-pathway-card--forest .ds-pathway-card__kicker{color:var(--web-on-forest-soft);}
.ds-pathway-card__title{font-family:var(--font-body);font-size:18px;font-weight:700;line-height:1.22;letter-spacing:-.01em;min-width:0;overflow-wrap:break-word;hyphens:manual;}
.ds-pathway-card--thumb .ds-pathway-card__title{font-size:21px;}
.ds-pathway-card__arrow{margin-right:6px;transition:var(--ds-transition);}
.ds-pathway-card:hover .ds-pathway-card__arrow{transform:translateX(4px);}
/* 2026-09-16 "make it amazing" brief: the pet-safe hub's five bouquet-flower
   tiles read too small at the shared 88px tile thumb. Their photos are
   pre-rendered "thumb" derivatives fixed at 144x144 with no larger derivative
   to request, so 144px is the enlargement ceiling that stays crisp (native
   resolution) instead of upscaling a soft image. New modifier, scoped to the
   bouquet row only — the hub Collections/Popular-guides tiles keep 88px. */
.ds-pathway-grid--flower-lg .ds-pathway-card--thumb{grid-template-columns:144px minmax(0,1fr) auto;min-height:172px;}
.ds-pathway-grid--flower-lg .ds-pathway-card__thumb{width:144px;height:144px;}
.ds-pathway-grid--flower-lg .ds-pathway-card__title{overflow-wrap:normal;}
@media (min-width:760px) and (max-width:1099px){.ds-pathway-grid--flower-lg .ds-pathway-card--thumb{grid-template-columns:112px minmax(0,1fr) auto;min-height:140px;}.ds-pathway-grid--flower-lg .ds-pathway-card__thumb{width:112px;height:112px;}}
/* 2026-09-16 CH-05: the plant-care hub's "Popular guides" rail is its own
   inline auto-fit grid (not .ds-plant-grid/.ds-pathway-grid), so a curated
   count that leaves a remainder of one in its three-column row strands the
   last card with two empty tracks beside it. Scoped by the section heading's
   id — stable across locales — rather than a new class, since the grid's own
   column sizing stays untouched. */
/* 2026-09-16 (founder review): a lone last card spans its row instead of
   sitting alone beside empty cells. */
@media (min-width:1100px){
#hub-stories-heading ~ nav .ds-pathway-card:last-child:nth-child(3n+1){grid-column:1/-1;}
.ds-pathway-grid>*:last-child:nth-child(3n+1){flex-basis:100%;}
}
@media (min-width:760px) and (max-width:1099px){
#hub-stories-heading ~ nav .ds-pathway-card:last-child:nth-child(odd){grid-column:1/-1;}
.ds-pathway-grid>*:last-child:nth-child(odd){flex-basis:100%;}
.ds-rule-card:last-child:nth-child(odd){grid-column:1/-1;}
}
/* variant="row" (HANDOFF 2026-09-07): a white card row on --web-card with a
   hairline border and card radius, so every clickable area reads as tappable
   (founder rule: white background on clickable link areas). No arrow; hover
   darkens the border to forest and turns the title emerald with an
   underline. Plant photos (card-plates / plant-photos) are PORTRAIT 64x83;
   other plates and photos cover-crop square; pixel art sits contained. */
.ds-pathway-card--row{grid-template-columns:minmax(0,1fr);gap:16px;min-height:56px;padding:12px 16px;border:1px solid var(--web-hairline);border-radius:var(--web-radius-card);background:var(--web-card);font-family:var(--font-body);}
.ds-pathway-card--row.ds-pathway-card--thumb{grid-template-columns:64px minmax(0,1fr);gap:16px;min-height:84px;padding:10px 14px 10px 10px;}
.ds-pathway-card--row.ds-pathway-card--thumb.ds-pathway-card--portrait{min-height:104px;}
.ds-pathway-card--row:hover{background:var(--web-card);border-color:var(--forest-ink);}
.ds-pathway-card--row:active{transform:none;}
.ds-pathway-card--row .ds-pathway-card__thumb{width:64px;height:64px;border-radius:12px;background:var(--olive-wash);transition:var(--ds-transition);}
.ds-pathway-card--row .ds-pathway-card__thumb--portrait{width:64px;height:83px;border-radius:12px;}
.ds-pathway-card--row .ds-pathway-card__thumb--pixel{background:transparent;}
.ds-pathway-card--row .ds-pathway-card__thumb--pixel img{padding:6px;}
.ds-pathway-card--row:hover .ds-pathway-card__thumb{transform:translateY(-2px);}
.ds-pathway-card--row .ds-pathway-card__text{gap:3px;min-width:0;}
.ds-pathway-card--row .ds-pathway-card__kicker{font-size:11.5px;}
.ds-pathway-card--row .ds-pathway-card__title{font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.005em;hyphens:manual;transition:var(--ds-transition);}
.ds-pathway-card--row:hover .ds-pathway-card__title{color:var(--emerald-wordmark);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px;}
/* The list itself: a grid of white rows, each ruled by its own card border —
   not a hairline-separated list opened by a top rule. */
.ds-pathway-list{display:grid;gap:8px;max-width:65ch;}
.ds-pathway-list--grid{max-width:none}
@media (min-width:900px){.ds-pathway-list--grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}}
/* FA-04: this template's own list, same widen as --grid, phone untouched. */
main[data-website-template="article"] .ds-pathway-list{max-width:none;}
@media (min-width:900px){main[data-website-template="article"] .ds-pathway-list{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;}}
.ds-topic-rail{display:grid;gap:10px;font-family:var(--font-body);}
.ds-topic-rail__siblings{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;}
.ds-topic-rail--compact .ds-topic-rail__siblings{grid-template-columns:1fr;}
@media (max-width:760px){.ds-topic-rail__siblings{grid-template-columns:1fr;}}
/* Desktop: the parent card and its siblings share one three-up row instead of a full-width bar over two small tiles. */
@media (min-width:761px){.ds-topic-rail:not(.ds-topic-rail--compact){grid-template-columns:repeat(3,minmax(0,1fr));}.ds-topic-rail:not(.ds-topic-rail--compact) .ds-topic-rail__siblings{display:contents;}}
.ds-guide-tile{transition:var(--ds-transition);display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 16px;border-radius:var(--web-radius-card);border:1px solid var(--web-hairline);background:var(--web-card);color:var(--forest-ink);text-decoration:none;}
.ds-guide-tile:hover{border-color:var(--forest-ink);background:var(--web-card-raised);}
.ds-guide-tile:active{transform:scale(.99);}
.ds-guide-tile:focus-visible{outline:2px solid var(--forest-ink);outline-offset:3px;}
.ds-guide-tile__icon{width:36px;height:36px;object-fit:contain;flex:0 0 auto;}
.ds-guide-tile__title{flex:1;font-family:var(--font-body);font-size:16px;font-weight:600;line-height:1.25;overflow-wrap:anywhere;hyphens:manual;}
.ds-guide-tile__arrow{color:var(--emerald-wordmark);font-weight:600;display:inline-block;transition:var(--ds-transition);}
.ds-guide-tile:hover .ds-guide-tile__arrow{transform:translateX(4px);}
.ds-guide-tile--compact{min-height:52px;padding:8px 16px;}
.ds-guide-tile--compact .ds-guide-tile__title{font-size:15px;}
@media (max-width:760px){
.ds-guide-tile{min-height:52px;padding:8px 16px;}
.ds-guide-tile__title{font-size:15px;}
}
.ds-guide-chip{transition:var(--ds-transition);display:inline-flex;align-items:center;border-radius:var(--web-radius-pill);font-family:var(--font-body);font-size:14px;font-weight:600;text-decoration:none;max-width:100%;text-align:center;line-height:1.2;padding:0 14px;min-height:40px;white-space:nowrap;border:1px solid var(--web-hairline-strong);background:var(--web-card);color:var(--forest-ink);}
.ds-guide-chip:hover{border-color:var(--web-forest-fill);background:var(--web-forest-fill);color:var(--web-on-forest);}
.ds-guide-chip:active{transform:scale(.97);}
.ds-guide-chip:focus-visible{outline:2px solid var(--forest-ink);outline-offset:3px;}
.ds-guide-chip--current{background:var(--web-forest-fill);color:var(--web-on-forest);border:none;}
/* GuideChip iconSrc: the care pictogram or pixel symptom at 22px, contained
   and pixelated on the chip itself — never in a tile of its own. */
.ds-guide-chip{gap:8px;}
.ds-guide-chip__icon{width:22px;height:22px;object-fit:contain;image-rendering:pixelated;margin-left:-4px;flex:0 0 auto;}
.ds-rank-row{transition:var(--ds-transition);background:transparent;display:grid;grid-template-columns:56px 96px minmax(0,1fr) auto;gap:20px;align-items:center;padding:16px 0;border-bottom:1px solid var(--web-hairline);font-family:var(--font-body);}
.ds-rank-row:hover{background:rgba(6,166,120,.05);}
.ds-rank-row__rank{font-weight:300;font-size:36px;line-height:1;color:var(--emerald-wordmark);}
.ds-rank-row__photo{width:96px;height:96px;border-radius:14px;object-fit:cover;display:block;}
.ds-rank-row__link{display:inline-flex;align-items:center;min-height:44px;max-width:100%;overflow-wrap:anywhere;font-size:22px;font-weight:600;text-decoration:none;transition:var(--ds-transition);color:var(--forest-ink);}
.ds-rank-row__link:hover{color:var(--emerald-wordmark);}
.ds-rank-row__link:focus-visible{outline:2px solid var(--forest-ink);outline-offset:3px;}
.ds-rank-row__sci{display:block;font-style:italic;font-size:15px;color:var(--text-muted);}
.ds-rank-row__safety{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:14px;font-weight:600;}
.ds-rank-row__cadence{text-align:right;font-size:14px;color:var(--text-muted);}
.ds-rank-row__cadence strong{color:var(--forest-ink);font-size:16px;}
.ds-rank-row--compact{grid-template-columns:40px 72px minmax(0,1fr);}
.ds-rank-row--compact .ds-rank-row__photo{width:72px;height:72px;border-radius:12px;}
.ds-rank-row--compact .ds-rank-row__cadence{grid-column:2 / -1;text-align:left;}
.ds-rank-row--compact .ds-rank-row__cadence br{display:none;}
@media (max-width:760px){
.ds-rank-row{grid-template-columns:40px 72px minmax(0,1fr);}
.ds-rank-row__photo{width:72px;height:72px;border-radius:12px;}
.ds-rank-row__cadence{grid-column:2 / -1;text-align:left;}
.ds-rank-row__cadence br{display:none;}
}
.ds-guide-directory{border-radius:var(--web-radius-card);border:1px solid var(--web-hairline);background:var(--web-card);padding:20px 10px 14px;display:grid;grid-template-columns:repeat(var(--ds-directory-groups,3),minmax(0,1fr));gap:24px;font-family:var(--font-body);}
.ds-guide-directory__group{min-width:0;}
.ds-guide-directory__group-title{margin:0 0 6px;padding:0 14px;font-family:var(--font-body);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);}
.ds-guide-directory__list{margin:0;padding:0;list-style:none;display:grid;gap:2px;}
.ds-guide-directory__row,.ds-guide-directory__link{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;min-height:52px;padding:10px 14px;text-decoration:none;font-family:var(--font-body);transition:var(--ds-transition);border-radius:10px;background:transparent;}
.ds-guide-directory__link:hover{background:var(--web-card-raised);}
.ds-guide-directory__link:focus-visible{outline:2px solid var(--forest-ink);outline-offset:3px;}
.ds-guide-directory__row--current{background:var(--web-forest-fill);}
.ds-guide-directory__title{display:block;font-size:16px;font-weight:600;line-height:1.25;color:var(--forest-ink);overflow-wrap:anywhere;hyphens:auto;transition:var(--ds-transition);}
.ds-guide-directory__link:hover .ds-guide-directory__title{color:var(--emerald-wordmark);}
.ds-guide-directory__row--current .ds-guide-directory__title{color:var(--web-on-forest);}
/* GuideDirectory iconSrc: 36px (32px compact), contained and pixelated, on the
   paper. The row gains a third column only when it actually carries one. */
.ds-guide-directory__link--icon,.ds-guide-directory__row--icon{grid-template-columns:auto minmax(0,1fr) auto;}
.ds-guide-directory__icon{width:36px;height:36px;object-fit:contain;image-rendering:pixelated;flex-shrink:0;}
.ds-guide-directory--compact .ds-guide-directory__icon{width:32px;height:32px;}
.ds-guide-directory__here{margin-left:8px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.8;}
.ds-guide-directory__hint{display:block;margin-top:2px;font-size:14px;line-height:1.4;color:var(--text-muted);text-wrap:pretty;}
.ds-guide-directory__row--current .ds-guide-directory__hint{color:rgba(247,242,230,.82);}
.ds-guide-directory__arrow{color:var(--emerald-wordmark);font-weight:600;display:inline-block;transition:var(--ds-transition);}
.ds-guide-directory__link:hover .ds-guide-directory__arrow{transform:translateX(4px);}
.ds-guide-directory--compact{grid-template-columns:1fr;gap:20px;padding:16px 6px 10px;}
.ds-guide-directory--compact .ds-guide-directory__title{font-size:15.5px;}
.ds-guide-directory--compact .ds-guide-directory__hint{font-size:13.5px;}
@media (max-width:760px){
.ds-guide-directory{grid-template-columns:1fr;gap:20px;padding:16px 6px 10px;}
.ds-guide-directory__icon{width:32px;height:32px;}
.ds-guide-directory__title{font-size:15.5px;}
.ds-guide-directory__hint{font-size:13.5px;}
}
[data-ds-region="cta"]{container-type:inline-size;}
.ds-app-cta{position:relative;}
.ds-app-cta--ad{position:relative;width:100%;max-width:1120px;margin-inline:auto;aspect-ratio:1672 / 941;container-type:inline-size;isolation:isolate;overflow:hidden;border-radius:var(--web-radius-card);background:var(--web-ad-backdrop);color:var(--web-ad-forest);font-family:var(--font-body);padding:0;}
.ds-app-cta--ad .ds-app-cta__picture{position:absolute;inset:0;z-index:0;display:block;}
.ds-app-cta--ad .ds-app-cta__background{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;object-fit:cover;}
.ds-app-cta__screen{position:absolute;left:var(--app-cta-d-left);top:var(--app-cta-d-top);width:var(--app-cta-d-width);height:var(--app-cta-d-height);border-radius:6%;pointer-events:none;}
.ds-app-cta--ad::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse 82% 125% at top left,color-mix(in srgb,var(--web-ad-cream) 100%,transparent) 0%,color-mix(in srgb,var(--web-ad-cream) 85%,transparent) 28%,color-mix(in srgb,var(--web-ad-cream) 0%,transparent) 88%);}
.ds-app-cta--ad-dark::before{background:radial-gradient(ellipse 82% 125% at top left,color-mix(in srgb,var(--web-ad-night) 100%,transparent) 0%,color-mix(in srgb,var(--web-ad-night) 85%,transparent) 28%,color-mix(in srgb,var(--web-ad-night) 0%,transparent) 88%);}
.ds-app-cta--ad .ds-app-cta__content{position:absolute;top:17%;left:7%;z-index:3;width:43%;height:68%;padding:0;}
.ds-app-cta--ad .ds-app-cta__headline{max-width:100%;margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(20px,4.4cqw,58px);line-height:1.12;letter-spacing:-.025em;color:var(--web-ad-forest);overflow-wrap:anywhere;text-wrap:balance;hyphens:auto;}
.ds-app-cta--ad-dark .ds-app-cta__headline{color:var(--web-ad-cream);}
.ds-app-cta--ad .ds-app-cta__action{position:absolute;top:55%;left:0;display:inline-flex;max-width:100%;min-height:44px;align-items:center;justify-content:center;gap:2cqw;margin:0;padding:1.35cqw 2.4cqw;border:0;border-radius:2px;background:var(--forest-deep);color:var(--web-on-forest);font-family:var(--font-body);font-size:clamp(12px,1.8cqw,22px);font-weight:600;line-height:1.2;text-decoration:none;white-space:normal;overflow-wrap:anywhere;transition:var(--ds-transition);box-shadow:6px 6px 0 rgba(15,42,31,.18);}
.ds-app-cta--ad .ds-app-cta__action:hover{background:var(--web-forest-fill-hover);}
.ds-app-cta--ad .ds-app-cta__action:active{transform:translate(6px,6px);box-shadow:0 0 0 rgba(15,42,31,.18);}
.ds-app-cta--ad .ds-app-cta__action:focus-visible{outline:2px solid var(--web-on-forest);outline-offset:3px;}
.ds-app-cta--ad .ds-app-cta__action-label{min-width:0;}
.ds-app-cta--ad .ds-app-cta__action-arrow{font-family:var(--font-body);font-size:2.3cqw;line-height:1;}
@media (max-width:650px){
.ds-app-cta--ad{max-width:none;aspect-ratio:1;}
.ds-app-cta--ad .ds-app-cta__screen{left:var(--app-cta-s-left);top:var(--app-cta-s-top);width:var(--app-cta-s-width);height:var(--app-cta-s-height);}
.ds-app-cta--ad .ds-app-cta__content{top:7%;left:8%;width:67.2%;height:auto;min-height:36%;}
.ds-app-cta--ad .ds-app-cta__headline{font-size:clamp(20px,7.2cqw,54px);line-height:1.12;}
.ds-app-cta--ad .ds-app-cta__headline{min-height:4.2em;}
.ds-app-cta--ad .ds-app-cta__action{position:static;gap:3.9cqw;margin-top:3.2cqw;padding:2.795cqw 4.68cqw;font-family:var(--font-body);font-size:clamp(12px,3.38cqw,22px);box-shadow:4px 4px 0 rgba(15,42,31,.18);}
.ds-app-cta--ad .ds-app-cta__action:active{transform:translate(4px,4px);}
.ds-app-cta--ad .ds-app-cta__action-arrow{font-size:4.03cqw;}
}
/* FA-01: same switch, keyed off the card's own width, not the viewport. */
@container (max-width:650px){
.ds-app-cta--ad{max-width:none;aspect-ratio:1;}
.ds-app-cta--ad .ds-app-cta__screen{left:var(--app-cta-s-left);top:var(--app-cta-s-top);width:var(--app-cta-s-width);height:var(--app-cta-s-height);}
.ds-app-cta--ad .ds-app-cta__content{top:7%;left:8%;width:67.2%;height:auto;min-height:36%;}
.ds-app-cta--ad .ds-app-cta__headline{font-size:clamp(20px,7.2cqw,54px);line-height:1.12;}
.ds-app-cta--ad .ds-app-cta__headline{min-height:4.2em;}
.ds-app-cta--ad .ds-app-cta__action{position:static;gap:3.9cqw;margin-top:3.2cqw;padding:2.795cqw 4.68cqw;font-family:var(--font-body);font-size:clamp(12px,3.38cqw,22px);box-shadow:4px 4px 0 rgba(15,42,31,.18);}
.ds-app-cta--ad .ds-app-cta__action:active{transform:translate(4px,4px);}
.ds-app-cta--ad .ds-app-cta__action-arrow{font-size:4.03cqw;}
}
/* SiteFooter.jsx band (HANDOFF 2026-09-07): the forest closing band — brand
   promise, store badges, Mr. Kitty waving — is the footer's own ground, not a
   second emerald article card (that surface is AppCtaCard's, in-article
   only). No logotype in the band (the masthead already carries it); the
   badges replace the download button whenever they are given. One grid with
   named areas serves both widths: "head" spans both columns on a phone so
   the headline sits full width above the copy/badges + Kitty pair. */
.ds-site-footer{background:var(--forest-deep);color:rgba(244,236,224,.72);font-family:var(--font-body);}
.ds-site-footer__band{border-bottom:1px solid rgba(244,236,224,.14);}
.ds-site-footer__band-inner{max-width:1240px;margin:0 auto;padding:40px 40px 0;overflow:hidden;}
.ds-site-footer__grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:14px 32px;align-items:end;grid-template-areas:"head art" "copy art" "badges art";}
.ds-site-footer__headline{grid-area:head;margin:0 0 16px;font-family:var(--font-display);font-weight:400;font-size:clamp(28px,3vw,38px);line-height:1.08;letter-spacing:-.01em;color:var(--web-on-forest);text-wrap:balance;max-width:620px;}
.ds-site-footer__copy{grid-area:copy;margin:0;max-width:48ch;font-size:17px;line-height:1.5;color:rgba(244,236,224,.78);}
.ds-site-footer__badges{grid-area:badges;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:12px;margin:8px 0 24px;}
.ds-site-footer__badges img{height:48px;display:block;}
.ds-site-footer__badges a:focus-visible{outline:2px solid var(--web-on-forest);outline-offset:3px;}
.ds-site-footer__action{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:2px;border:0;background:var(--web-on-forest);color:var(--forest-deep);font-family:var(--font-body);font-size:16px;font-weight:600;text-decoration:none;transition:var(--ds-transition);box-shadow:4px 4px 0 rgba(15,42,31,.18);}
.ds-site-footer__action:hover{background:var(--web-on-forest);opacity:.9;}
.ds-site-footer__action:active{transform:translate(4px,4px);box-shadow:0 0 0 rgba(15,42,31,.18);}
.ds-site-footer__action:focus-visible{outline:2px solid var(--web-on-forest);outline-offset:3px;}
.ds-site-footer__mascot{grid-area:art;display:block;width:100%;max-width:340px;justify-self:end;align-self:end;margin:0;}
.ds-site-footer__columns{max-width:1240px;margin:0 auto;padding:40px 40px 0;display:grid;grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));gap:30px;}
.ds-site-footer__column-title{margin:0 0 10px;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:rgba(244,236,224,.56);}
.ds-site-footer__link{display:flex;align-items:center;min-height:44px;font-size:14px;color:rgba(244,236,224,.72);text-decoration:none;}
.ds-site-footer__link:hover{color:var(--web-on-forest);}
.ds-site-footer__link:focus-visible{outline:2px solid var(--web-on-forest);outline-offset:3px;}
.ds-site-footer__base{max-width:1240px;margin:32px auto 0;padding:22px 40px 36px;border-top:1px solid rgba(244,236,224,.18);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:12px;color:rgba(244,236,224,.55);}
.ds-site-footer--compact .ds-site-footer__band-inner{padding:32px 20px 0;}
.ds-site-footer--compact .ds-site-footer__grid{grid-template-columns:minmax(0,1fr) 168px;gap:8px;grid-template-areas:"head head" "copy art" "badges art";}
.ds-site-footer--compact .ds-site-footer__headline{font-size:28px;margin-bottom:12px;}
.ds-site-footer--compact .ds-site-footer__copy{font-size:15.5px;max-width:none;}
.ds-site-footer--compact .ds-site-footer__badges{display:grid;gap:8px;justify-items:start;margin:6px 0 20px;}
.ds-site-footer--compact .ds-site-footer__badges img{height:44px;}
.ds-site-footer--compact .ds-site-footer__mascot{max-width:168px;margin:0 0 -4px;}
.ds-site-footer--compact .ds-site-footer__columns{padding:40px 20px 0;}
.ds-site-footer--compact .ds-site-footer__base{padding:22px 20px 36px;}
@media (max-width:760px){
.ds-site-footer__band-inner{padding:32px 20px 0;}
.ds-site-footer__grid{grid-template-columns:minmax(0,1fr) 168px;gap:8px;grid-template-areas:"head head" "copy art" "badges art";}
.ds-site-footer__headline{font-size:28px;margin-bottom:12px;}
.ds-site-footer__copy{font-size:15.5px;max-width:none;}
.ds-site-footer__badges{display:grid;gap:8px;justify-items:start;margin:6px 0 20px;}
.ds-site-footer__badges img{height:44px;}
.ds-site-footer__mascot{max-width:168px;margin:0 0 -4px;}
.ds-site-footer__columns{padding:40px 20px 0;}
.ds-site-footer__base{padding:22px 20px 36px;}
}
.ds-legal-footer{border-top:1px solid var(--web-hairline);font-family:var(--font-body);}
.ds-legal-footer__row{max-width:1320px;margin:0 auto;padding:22px 40px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--text-muted);}
.ds-legal-footer__links{display:flex;gap:6px;}
.ds-legal-footer__links a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;margin:-12px -6px;color:var(--text-muted);text-decoration:none;}
.ds-legal-footer__links a:hover{color:var(--emerald-wordmark);}
.ds-legal-footer__links a:focus-visible{outline:2px solid var(--forest-ink);outline-offset:3px;}
.ds-legal-footer--compact .ds-legal-footer__row{padding:18px 20px;}
@media (max-width:760px){.ds-legal-footer__row{padding:18px 20px;}}
.ds-mobile-store-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;pointer-events:none;display:flex;justify-content:center;padding:0 12px calc(12px + env(safe-area-inset-bottom));transform:translateY(120%);transition:transform .36s cubic-bezier(.2,.7,.2,1);}
.ds-mobile-store-bar.is-on{transform:translateY(0);pointer-events:auto;}
/* Restored on 2026-09-16 on Ludvig's word: the bar with Mr Kitty and the
   phone, two lines of copy and the full-width action, exactly as it was
   live through 15 September. The slim 72px form that briefly replaced it
   this morning is retired; the markup (mascot img, subtitle) never
   changed, only these rules did. */
.ds-mobile-store-bar__card{position:relative;box-sizing:border-box;width:100%;max-width:366px;display:grid;grid-template-columns:72px minmax(0,1fr);gap:10px;align-items:center;padding:12px;border-radius:20px;background:var(--emerald);color:var(--web-on-forest);box-shadow:0 22px 44px -20px rgba(12,32,23,.55),0 2px 6px rgba(12,32,23,.12);font-family:var(--font-body);overflow:hidden;}
.ds-mobile-store-bar__mascot{display:block;width:80px;height:80px;object-fit:contain;object-position:center;margin:0 0 0 -4px;align-self:center;}
.ds-mobile-store-bar__copy{min-width:0;display:flow-root;}
.ds-mobile-store-bar__title{min-width:0;margin:0;font-family:var(--font-display);font-weight:400;font-size:15px;line-height:1.15;letter-spacing:-.01em;color:var(--web-on-forest);text-wrap:wrap;overflow-wrap:anywhere;}
html:is([lang="el"],[lang="uk"]) .ds-mobile-store-bar__title{font-family:"Noto Serif",Georgia,serif;}
.ds-mobile-store-bar__subtitle{min-width:0;margin:6px 0 0;font-size:13px;line-height:1.35;color:var(--web-on-forest);white-space:normal;overflow-wrap:anywhere;text-wrap:pretty;}
.ds-mobile-store-bar__platforms{display:block;}
.ds-mobile-store-bar__action{grid-column:1 / -1;box-sizing:border-box;min-width:0;display:flex;align-items:center;justify-content:center;min-height:46px;padding:0 8px;border-radius:var(--web-radius-control);background:var(--web-forest-fill);color:var(--web-on-forest);font-size:15px;font-weight:600;text-decoration:none;text-align:center;transition:var(--ds-transition);}
.ds-mobile-store-bar__action:hover{background:var(--web-forest-fill-hover);}
.ds-mobile-store-bar__action:active{transform:translateY(1px);}
.ds-mobile-store-bar__action:focus-visible{outline:2px solid var(--forest-ink);outline-offset:3px;}
.ds-mobile-store-bar__dismiss{float:right;position:relative;margin:-8px -8px 0 4px;width:44px;height:44px;padding:0;border:0;background:transparent;border-radius:10px;cursor:pointer;color:var(--web-on-forest);display:grid;place-items:center;transition:var(--ds-transition);}
.ds-mobile-store-bar__dismiss:hover{background:rgba(255,255,255,.14);}
.ds-mobile-store-bar__dismiss:focus-visible{outline:2px solid var(--forest-ink);outline-offset:3px;}
@media (max-width:380px){
.ds-mobile-store-bar{padding-left:8px;padding-right:8px;}
.ds-mobile-store-bar__card{grid-template-columns:64px minmax(0,1fr);gap:8px;padding:10px;border-radius:18px;}
.ds-mobile-store-bar__mascot{width:72px;height:72px;}
.ds-mobile-store-bar__title{font-size:14px;line-height:1.15;}
.ds-mobile-store-bar__subtitle{font-size:13px;line-height:1.3;}
.ds-mobile-store-bar__action{min-height:44px;font-size:14px;}
}
@media (min-width:761px){.ds-mobile-store-bar{display:none;}}
html.ds-mobile-store-bar-open{scroll-padding-bottom:var(--ds-mobile-store-bar-h,172px);}
html.ds-mobile-store-bar-open body{padding-bottom:var(--ds-mobile-store-bar-h,172px);}
@media (prefers-reduced-motion:no-preference){html.ds-mobile-store-bar-open body{transition:padding-bottom .36s cubic-bezier(.2,.7,.2,1);}}
@media (min-width:761px){html.ds-mobile-store-bar-open body{padding-bottom:0;}}
.ds-store-badges{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.ds-store-badges img{height:var(--ds-badge-height,48px);display:block;}
.ds-store-badges a:focus-visible{outline:2px solid var(--forest-ink);outline-offset:3px;}
.ds-faq-list{max-width:820px;border-top:1px solid var(--web-hairline);}
.ds-faq-item{border-bottom:1px solid var(--web-hairline);}
.ds-faq-item__summary{transition:var(--ds-transition);color:var(--forest-ink);display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px;padding:18px 0;font-family:var(--font-body);font-size:20px;font-weight:600;line-height:1.35;cursor:pointer;list-style:none;}
.ds-faq-item__summary::-webkit-details-marker{display:none;}
.ds-faq-item__summary:hover{color:var(--emerald-wordmark);}
.ds-faq-item__summary:focus-visible{outline:2px solid var(--forest-ink);outline-offset:3px;}
.ds-faq-item__toggle{font-size:26px;font-weight:300;flex-shrink:0;display:inline-block;transition:transform .2s ease-out;}
.ds-faq-item[open] .ds-faq-item__toggle{transform:rotate(45deg);}
.ds-faq-item__answer{margin:0 0 22px;max-width:68ch;font-family:var(--font-body);font-size:17px;line-height:1.6;color:var(--web-body-faq);}
.ds-sources{padding:24px 0 8px;max-width:820px;font-family:var(--font-body);}
/* A FAQ list already closes with a hairline; the sources disclosure right after it must not draw a second one. */
section:has(.ds-faq-list) + .ds-sources .ds-sources__summary{border-top:0;}
.ds-sources__summary{display:flex;align-items:center;gap:20px;min-height:56px;font-size:20px;font-weight:600;cursor:pointer;list-style:none;border-top:1px solid var(--web-hairline);border-bottom:1px solid var(--web-hairline);color:var(--forest-ink);}
.ds-sources__summary::-webkit-details-marker{display:none;}
.ds-sources__summary:focus-visible{outline:2px solid var(--forest-ink);outline-offset:3px;}
.ds-sources__count{font-size:15px;font-weight:400;color:var(--text-muted);margin-left:auto;}
.ds-sources__toggle{font-size:26px;font-weight:300;}
.ds-sources__list{margin:0;padding:8px 0 0;list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;border-bottom:1px dotted var(--web-hairline-dotted);}
.ds-sources--compact{padding:20px 0 8px;}
.ds-sources--compact .ds-sources__summary{font-size:18px;}
@media (max-width:760px){
.ds-sources{padding:20px 0 8px;}
.ds-sources__summary{font-size:18px;}
}
.ds-source-item{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;padding:12px 0;border-top:1px dotted var(--web-hairline-dotted);font-family:var(--font-body);font-size:15px;}
.ds-source-item__link{display:inline-flex;align-items:center;min-width:0;min-height:44px;font-weight:600;text-decoration:none;text-underline-offset:4px;color:var(--forest-ink);overflow-wrap:anywhere;transition:var(--ds-transition);}
.ds-source-item__link:hover{text-decoration:underline;color:var(--emerald-wordmark);}
.ds-source-item__link:focus-visible{outline:2px solid var(--forest-ink);outline-offset:3px;}
.ds-source-item__covers{color:var(--text-muted);overflow-wrap:anywhere;}
.ds-source-item__note{min-width:0;font-weight:600;line-height:1.5;color:var(--forest-ink);overflow-wrap:anywhere;}
.ds-source-item__note a{color:var(--emerald-wordmark);text-decoration:none;}
.ds-source-item__note a:hover{text-decoration:underline;text-underline-offset:4px;}
.ds-source-item__note a:focus-visible{outline:2px solid var(--forest-ink);outline-offset:3px;}
.ds-numbered-step{display:grid;grid-template-columns:64px minmax(0,1fr);gap:22px;font-family:var(--font-body);}
.ds-numbered-step__n{font-weight:300;font-size:38px;line-height:1;color:var(--emerald-wordmark);}
.ds-numbered-step__title{margin:0 0 12px;font-size:24px;font-weight:600;line-height:1.25;color:var(--forest-ink);display:block;}
.ds-numbered-step__body{font-size:17px;line-height:1.6;color:var(--web-body);}
.ds-numbered-step--compact{display:block;}
.ds-numbered-step--compact .ds-numbered-step__title{display:flex;align-items:baseline;gap:12px;margin:0 0 10px;font-size:22px;}
.ds-numbered-step--compact .ds-numbered-step__n{font-size:28px;flex:0 0 auto;}
@media (max-width:760px){
.ds-numbered-step{display:block;}
.ds-numbered-step .ds-numbered-step__title{display:flex;align-items:baseline;gap:12px;margin:0 0 10px;font-size:22px;}
.ds-numbered-step .ds-numbered-step__n{font-size:28px;flex:0 0 auto;}
}
.ds-observe-list{padding:22px 24px 20px;border-radius:var(--web-radius-card);background:var(--web-card);border:1px solid var(--web-hairline);font-family:var(--font-body);}
.ds-observe-list__label{margin:0 0 12px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--emerald-wordmark);}
.ds-observe-list__list{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px 20px;}
.ds-observe-list__item{display:flex;align-items:baseline;gap:12px;font-size:17px;font-weight:500;line-height:1.35;color:var(--forest-ink);}
.ds-observe-list__n{font-weight:300;font-size:22px;line-height:1;color:var(--emerald-wordmark);}
.ds-observe-list--compact{padding:18px 18px 16px;}
.ds-observe-list--compact .ds-observe-list__list{grid-template-columns:1fr;}
@media (max-width:760px){
.ds-observe-list{padding:18px 18px 16px;}
.ds-observe-list__list{grid-template-columns:1fr;}
}
.ds-cause-card{padding:24px 26px;border-radius:var(--web-radius-card);background:var(--web-card);border:1px solid var(--web-hairline);color:var(--forest-ink);font-family:var(--font-body);}
.ds-cause-card--act{background:var(--web-forest-fill);border-color:var(--web-forest-fill);color:var(--web-on-forest);}
.ds-cause-card__title{margin:0 0 10px;font-size:20px;font-weight:600;color:var(--forest-ink);}
.ds-cause-card--act .ds-cause-card__title{color:var(--web-on-forest);}
.ds-cause-card__body{font-size:17px;line-height:1.6;color:var(--web-body);}
.ds-cause-card__body .ds-eyebrow{margin-top:14px;}
.ds-cause-card__body .ds-eyebrow:first-child{margin-top:0;}
.ds-cause-card__body p{margin:0 0 12px;}
.ds-cause-card--act .ds-cause-card__body{color:var(--web-on-forest-soft);}
/* CauseCard pair (2026-09-16): 270px auto-fit fitted three columns in the ~810px reading measure and stretch left empty card below short texts; 290px keeps the pair, rows size to content, an odd last card spans the row. */
.ds-cause-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px;align-items:start;}
.ds-cause-grid>.ds-cause-card:last-child:nth-child(odd){grid-column:1/-1;}
@media (max-width:760px){.ds-cause-grid{grid-template-columns:1fr;}}
/* CauseCard pictograms (2026-09-16, "make it amazing" symptom-page pass):
   an optional 44px decorative icon beside the title, top-left, matching the
   pathway card thumb's pixelated rendering. New class names only — the base
   .ds-cause-card/__title rules above are untouched, so a card with no
   matching pictogram (nothing invented) renders exactly as it always has. */
.ds-cause-card__head{display:flex;align-items:center;gap:14px;}
.ds-cause-card--illustrated .ds-cause-card__head{margin:0 0 10px;}
.ds-cause-card--illustrated .ds-cause-card__title{margin:0;}
.ds-cause-card__icon{width:44px;height:44px;flex:0 0 auto;object-fit:contain;image-rendering:pixelated;}
.ds-verdict-card{padding:22px 24px;border-radius:var(--web-radius-card);background:var(--web-card);border:1px solid var(--web-hairline);font-family:var(--font-body);}
.ds-verdict-card__head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;}
.ds-verdict-card__pill{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:var(--web-radius-pill);color:var(--web-on-forest);font-size:15px;font-weight:700;background:var(--text-muted);}
.ds-verdict-card--toxic .ds-verdict-card__pill{background:var(--attention-web-text);}
.ds-verdict-card--safe .ds-verdict-card__pill{background:var(--emerald-wordmark);}
.ds-verdict-card__dot{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--text-muted);}
.ds-verdict-card--toxic .ds-verdict-card__dot{color:var(--attention-web-text);}
.ds-verdict-card--safe .ds-verdict-card__dot{color:var(--emerald-wordmark);}
.ds-verdict-card__name{margin:14px 0 4px;font-size:22px;font-weight:600;line-height:1.2;}
.ds-verdict-card__sci{font-style:italic;font-weight:400;color:var(--text-muted);font-size:17px;}
.ds-verdict-card__detail{margin:0;font-size:15px;line-height:1.5;color:var(--web-body);}
.ds-verdict-card__source{margin:12px 0 0;font-size:13px;color:var(--text-muted);}
.ds-verdict-card__link{display:inline-flex;align-items:center;gap:8px;margin-top:12px;min-height:44px;font-size:16px;font-weight:600;color:var(--emerald-wordmark);text-decoration:none;text-underline-offset:4px;transition:var(--ds-transition);}
.ds-verdict-card__link:hover{text-decoration:underline;}
.ds-verdict-card__link:hover span{transform:translateX(4px);}
.ds-verdict-card__link:focus-visible{outline:2px solid var(--forest-ink);outline-offset:3px;}
.ds-verdict-card__link span{display:inline-block;transition:var(--ds-transition);}
.ds-checker-field{display:flex;gap:12px;max-width:var(--ds-checker-max,640px);}
.ds-checker-field__input{flex:1;min-width:0;min-height:54px;padding:0 18px;border-radius:var(--web-radius-control);border:1px solid var(--web-hairline-strong);transition:var(--ds-transition);background:var(--web-card-raised);color:var(--forest-ink);font-family:var(--font-body);font-size:17px;}
.ds-checker-field__input:focus{border-color:var(--forest-ink);box-shadow:0 0 0 3px rgba(4,120,87,.18);}
.ds-checker-field__input:focus-visible{outline:2px solid var(--forest-ink);outline-offset:3px;}
.ds-web-button{transition:var(--ds-transition);display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 22px;border-radius:2px;border:0;font-family:var(--font-body);font-size:16px;font-weight:600;text-decoration:none;cursor:pointer;background:var(--forest-deep);color:var(--web-on-forest);box-shadow:6px 6px 0 rgba(15,42,31,.18);}
.ds-web-button:hover{background:var(--web-forest-fill-hover);}
.ds-web-button:active{transform:translate(6px,6px);box-shadow:0 0 0 rgba(15,42,31,.18);}
.ds-web-button:focus-visible{outline:2px solid var(--forest-ink);outline-offset:3px;}
.ds-web-button--lg{min-height:56px;padding:0 28px;}
.ds-web-button--compact{min-height:44px;padding:0 18px;font-size:15px;box-shadow:4px 4px 0 rgba(15,42,31,.18);}
.ds-web-button--compact:active{transform:translate(4px,4px);}
.ds-web-button--ghost{border:1px solid var(--web-hairline-strong);background:var(--web-card);color:var(--forest-ink);box-shadow:none;}
.ds-web-button--ghost:hover{background:var(--web-forest-fill);color:var(--web-on-forest);border-color:var(--web-forest-fill);}
.ds-web-button--ghost:active{transform:none;box-shadow:none;}
.ds-web-button--on-forest{background:var(--web-on-forest);color:var(--forest-deep);}
.ds-web-button--on-forest:hover{background:var(--web-on-forest);opacity:.9;}
.ds-web-button--on-forest:focus-visible{outline:2px solid var(--web-on-forest);outline-offset:3px;}
/* The ledger keeps its 640px minimum and scrolls sideways on a phone. Nothing
   said so: overlay scrollbars stay hidden until a gesture starts, so the table
   simply looked cut off. Two cover layers scroll with the content and two
   shadow layers stay put, so an edge shades only while there is more table
   past it — and the scrollbar is drawn where the platform allows one. */
.ds-ledger-table{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;
background-image:linear-gradient(to right,var(--web-ground),transparent),linear-gradient(to left,var(--web-ground),transparent),linear-gradient(to right,var(--web-hairline-strong),transparent),linear-gradient(to left,var(--web-hairline-strong),transparent);
background-position:left center,right center,left center,right center;
background-repeat:no-repeat;
background-size:24px 100%,24px 100%,14px 100%,14px 100%;
background-attachment:local,local,scroll,scroll;}
.ds-ledger-table::-webkit-scrollbar{height:8px;}
.ds-ledger-table::-webkit-scrollbar-thumb{border-radius:var(--web-radius-pill);background:var(--web-hairline-strong);}
.ds-ledger-table::-webkit-scrollbar-track{background:transparent;}
.ds-ledger-table table{width:100%;min-width:640px;border-collapse:collapse;font-family:var(--font-body);font-size:16px;}
/* 2026-09-16 (HUB-05): the two-plant compare ledger is always row-label +
   exactly two data columns (thead's 3rd th is also its last), so the fixed
   640px minimum forced it into sideways scroll at tablet widths where the
   reading column runs narrower than that. A wider ledger (best-apps) keeps
   the 640px floor and its scrollbar. */
.ds-ledger-table table:has(thead tr th:nth-child(3):last-child){min-width:0;}
.ds-ledger-table th[scope="col"]{text-align:left;padding:12px 16px 12px 12px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);border-bottom:1px solid var(--web-hairline-strong);}
.ds-ledger-table th[scope="row"]{text-align:left;padding:16px 16px 16px 12px;font-weight:600;border-bottom:1px dotted var(--web-hairline-dotted);}
.ds-ledger-table td{padding:16px;color:var(--web-body);border-bottom:1px dotted var(--web-hairline-dotted);}
.ds-ledger-table tr{background:transparent;}
.ds-ledger-table tr.is-highlight{background:rgba(6,166,120,.06);}
@media (max-width:760px){
.ds-ledger-table{background-image:none;}
.ds-ledger-table table{min-width:0;display:block;}
.ds-ledger-table thead{display:none;}
.ds-ledger-table tbody{display:block;}
.ds-ledger-table tr{display:block;padding:14px 0;border-bottom:1px dotted var(--web-hairline-dotted);}
.ds-ledger-table td{display:block;padding:0;border-bottom:0;}
.ds-ledger-table td+td{margin-top:10px;}
.ds-ledger-table th[scope="row"],.ds-ledger-table td[data-plant]::before{display:block;font-size:12px;font-weight:700;text-transform:uppercase;color:var(--text-muted)}
.ds-ledger-table th[scope="row"]{padding:0 0 10px;border-bottom:0}
.ds-ledger-table td[data-plant]::before{content:attr(data-plant);margin-bottom:4px}
}
.ds-facts-ledger{margin:0;display:grid;padding:6px 22px;border-radius:var(--web-radius-card);background:var(--web-card);border:1px solid var(--web-hairline);}
.ds-facts-ledger__row{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px dotted var(--web-hairline-dotted);font-family:var(--font-body);font-size:15px;}
.ds-facts-ledger__label{color:var(--text-muted);}
.ds-facts-ledger__value{margin:0;font-weight:600;}
/* RuleCard.jsx (HANDOFF 2026-09-07): a titled explainer card on the paper
   surface, not a rule-topped column. `eyebrow` labels it ("Our pick",
   "Runner-up"); `featured` draws the forest border for the recommended one. */
.ds-rule-card{padding:26px;border-radius:var(--web-radius-card);background:var(--web-card);border:1px solid var(--web-hairline);font-family:var(--font-body);min-width:0;}
.ds-rule-card--featured{border:1.5px solid var(--forest-ink);}
.ds-rule-card--compact{padding:20px;}
.ds-rule-card__eyebrow{margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);}
.ds-rule-card--featured .ds-rule-card__eyebrow{color:var(--emerald-wordmark);}
.ds-rule-card__title{margin:0 0 8px;font-size:24px;font-weight:600;line-height:1.2;color:var(--forest-ink);overflow-wrap:anywhere;}
.ds-rule-card--compact .ds-rule-card__title{font-size:21px;}
.ds-rule-card__body{margin:0;font-size:16px;line-height:1.55;color:var(--web-body);}
.ds-capability-card{padding:24px;border-radius:var(--web-radius-card);background:var(--web-card);border:1px solid var(--web-hairline);color:var(--forest-ink);font-family:var(--font-body);}
.ds-capability-card--pro{background:var(--web-forest-fill);border-color:var(--web-forest-fill);color:var(--web-on-forest);}
.ds-capability-card__tier{margin:0 0 12px;display:inline-flex;min-height:26px;align-items:center;padding:0 10px;border-radius:var(--web-radius-pill);background:var(--feed-wash);color:var(--emerald-logo);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;}
.ds-capability-card--pro .ds-capability-card__tier{background:var(--web-pro-tag);color:var(--web-forest-fill);}
.ds-capability-card__title{margin:0 0 8px;font-size:22px;font-weight:600;color:inherit;}
.ds-capability-card__body{margin:0;font-size:16px;line-height:1.55;color:var(--web-body);}
.ds-capability-card--pro .ds-capability-card__body{color:var(--web-on-forest-soft);}
.ds-plan-card{padding:28px;border-radius:var(--web-radius-card);background:var(--web-card);border:1px solid var(--web-hairline);font-family:var(--font-body);}
.ds-plan-card--featured{border:1.5px solid var(--forest-ink);}
.ds-plan-card__name{margin:0;font-size:26px;font-weight:600;}
.ds-plan-card__summary{margin:4px 0 18px;font-size:15px;color:var(--text-muted);}
.ds-plan-card__list{margin:0;padding:0;list-style:none;display:grid;gap:10px;font-size:16px;line-height:1.5;color:var(--web-body);}
.ds-plan-card__item{display:flex;gap:12px;}
.ds-plan-card__bullet{flex:0 0 auto;margin-top:9px;width:7px;height:7px;border-radius:var(--web-radius-pill);background:var(--emerald-wordmark);}
.ds-step-card{padding:24px;border-radius:var(--web-radius-card);background:var(--web-card);border:1px solid var(--web-hairline);font-family:var(--font-body);}
.ds-step-card__n{margin:0 0 12px;font-weight:300;font-size:32px;line-height:1;color:var(--emerald-wordmark);}
.ds-step-card__title{margin:0 0 8px;font-size:20px;font-weight:600;}
.ds-step-card__body{margin:0;font-size:15.5px;line-height:1.55;color:var(--web-body);}
.ds-care-guide__prose{max-width:65ch;}
/* Prose beside its companion — Mr. Kitty in a 380px column, the ObserveList in
   a 440px one. Both stack under the copy on a phone. */
.ds-care-guide__split{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:56px;align-items:start;}
.ds-care-guide__split--wide{grid-template-columns:minmax(0,1fr) 440px;}
.ds-care-guide__split .ds-kitty-aside{margin:0;}
/* The paired cause cards: what it looks like, then what to do about it. */
.ds-cause-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:20px;}
@media (max-width:760px){
.ds-care-guide__split,.ds-care-guide__split--wide{grid-template-columns:minmax(0,1fr);gap:24px;}
.ds-cause-pair{grid-template-columns:minmax(0,1fr);gap:10px;margin-top:16px;}
}
/* 2026-09-16 CH-01: the 380/440px fixed aside column left only ~320-360px for
   the prose in this band, squeezing five paragraphs beside a much shorter
   "Look at"/Mr. Kitty callout and stranding a wide empty gap under it — the
   same failure the press facts split had (see press() below). Stack early
   here too, in DOM order (prose, then its companion); 1100px+ keeps the
   side-by-side form unchanged. */
@media (min-width:760px) and (max-width:1099px){
.ds-care-guide__split,.ds-care-guide__split--wide{grid-template-columns:minmax(0,1fr);gap:24px;}
}
.ds-split:has(>.ds-press-facts){grid-template-columns:minmax(0,1fr) 560px;}
.ds-press-facts .ds-facts-ledger{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;}
@media (max-width:760px){
.ds-split:has(>.ds-press-facts){grid-template-columns:minmax(0,1fr);}
.ds-press-facts .ds-facts-ledger{grid-template-columns:minmax(0,1fr);}
}
/* 2026-09-16: 560px column still squeezed the intro copy; stack early too. */
@media (min-width:760px) and (max-width:1099px){
.ds-split:has(>.ds-press-facts){grid-template-columns:minmax(0,1fr);}
}
.ds-steps--urgent{list-style:none;margin:0 0 16px;padding:0;counter-reset:s}
.ds-steps--urgent>li{position:relative;counter-increment:s;margin:0 0 14px;padding-left:40px;min-height:26px}
.ds-steps--urgent>li::before{content:counter(s);position:absolute;left:0;top:-1px;width:26px;height:26px;border-radius:50%;background:var(--attention-web-text);color:var(--web-on-forest);font:700 13px/26px var(--font-body);text-align:center}
.ds-section--signs-urgent{border-left:3px solid var(--attention-web-text);padding-left:16px}
@media (prefers-reduced-motion: reduce){
[class^="ds-"],[class*=" ds-"],[class^="ds-"] *,[class*=" ds-"] *{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important;}
.ds-plant-card:hover .ds-plant-card__photo img{transform:none;}
.ds-pathway-card--row:hover .ds-pathway-card__thumb{transform:none;}
.ds-pathway-card:hover .ds-pathway-card__arrow,.ds-guide-tile:hover .ds-guide-tile__arrow,.ds-guide-directory__link:hover .ds-guide-directory__arrow,.ds-jump-index__link:hover .ds-jump-index__arrow,.ds-verdict-card__link:hover span{transform:none;}
.ds-plant-card:active,.ds-guide-tile:active,.ds-guide-chip:active,.ds-pathway-card:active,.ds-web-button:active,.ds-app-cta__action:active,.ds-mobile-store-bar__action:active,.ds-site-footer__action:active{transform:none;}
}
html[lang="el"],html[lang="uk"]{--font-display:'Noto Serif', "Bevan", Georgia, "Times New Roman", serif;--font-body:'Noto Sans', "Jost", system-ui, -apple-system, sans-serif;}
html[lang="ja"]{--font-display:'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;--font-body:'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', "Jost", sans-serif;}
html[lang="ko"]{--font-display:'Noto Serif KR', 'AppleMyungjo', 'Batang', serif;--font-body:'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', "Jost", sans-serif;}.ds-plant-card__photo .ph{width:100%;height:100%;display:grid;place-items:center;background:var(--web-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21V9M12 14c-4.6 0-7-2.4-7-6.8 4.6 0 7 2.4 7 6.8ZM12 11c4.6 0 7-2.4 7-6.8-4.6 0-7 2.4-7 6.8Z'/%3E%3C/svg%3E") no-repeat center / 34px 34px;}