/* ========================================
   AI Planter — Design System
   Neutral foundation · 8px grid · functional motion
   ======================================== */

:root {
    /* Brand */
    --color-primary: #2d6a4f;
    --color-primary-hover: #1b4332;
    --color-primary-light: #52b788;
    --color-primary-soft: rgba(45, 106, 79, 0.08);

    /* Semantic */
    --color-success: #2d6a4f;
    --color-success-soft: rgba(45, 106, 79, 0.1);
    --color-warning: #b45309;
    --color-warning-soft: rgba(180, 83, 9, 0.1);
    --color-error: #b91c1c;
    --color-error-soft: rgba(185, 28, 28, 0.1);
    --color-info: #1d4ed8;
    --color-info-soft: rgba(29, 78, 216, 0.1);

    /* Neutrals */
    --color-white: #ffffff;
    --color-gray-50: #f8f9f7;
    --color-gray-100: #f0f2ef;
    --color-gray-200: #e2e6e0;
    --color-gray-300: #c9cfc6;
    --color-gray-400: #9ba398;
    --color-gray-500: #6a7067;
    --color-gray-600: #4a5147;
    --color-gray-700: #353b33;
    --color-gray-800: #232822;
    --color-gray-900: #151914;

    /* Type */
    --font: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.25rem;
    --fs-2xl: 1.5rem;
    --fs-3xl: 1.875rem;
    --fs-4xl: 2.25rem;
    --fs-5xl: 3rem;

    /* Spacing (8px grid) */
    --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
    --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem;
    --s-12: 3rem; --s-14: 3.5rem; --s-16: 4rem; --s-20: 5rem; --s-24: 6rem;

    /* Radius */
    --r-sm: 0.375rem; --r-md: 0.5rem; --r-lg: 0.75rem; --r-xl: 1rem; --r-2xl: 1.5rem; --r-full: 9999px;

    /* Shadow */
    --sh-sm: 0 1px 2px rgba(0,0,0,0.05);
    --sh-md: 0 4px 10px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
    --sh-lg: 0 12px 32px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.03);
    --sh-xl: 0 24px 48px rgba(0,0,0,0.1);

    /* Transition */
    --t-fast: 150ms cubic-bezier(.4,0,.2,1);
    --t-base: 250ms cubic-bezier(.4,0,.2,1);
    --t-slow: 400ms cubic-bezier(.4,0,.2,1);

    --maxw: 1160px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:var(--font);font-size:var(--fs-base);line-height:1.65;color:var(--color-gray-700);background:var(--color-white);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;font-size:inherit}
input,textarea,select{font-family:inherit;font-size:inherit}

/* Skip link */
.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);z-index:3000;padding:var(--s-3) var(--s-6);background:var(--color-primary);color:#fff;font-weight:600;font-size:var(--fs-sm);border-radius:0 0 var(--r-md) var(--r-md);text-decoration:none;transition:top var(--t-fast)}
.skip-link:focus{top:0;color:#fff}

/* Focus-visible styles */
:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:2px}
:focus:not(:focus-visible){outline:none}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.upload-zone:focus-visible{border-color:var(--color-primary);outline:2px solid var(--color-primary);outline-offset:2px}

/* Container */
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--s-6)}

/* ========================================
   Scroll progress bar
   ======================================== */
.scroll-progress{position:fixed;top:0;left:0;width:100%;height:3px;z-index:1001;background:transparent}
.scroll-progress-fill{display:block;height:100%;width:0;background:var(--color-primary);transition:width 80ms linear}

/* ========================================
   Buttons
   ======================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);padding:var(--s-3) var(--s-6);font-size:var(--fs-sm);font-weight:600;border-radius:var(--r-lg);transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast);white-space:nowrap;cursor:pointer}
.btn-sm{padding:var(--s-2) var(--s-4);font-size:var(--fs-xs);border-radius:var(--r-md);min-height:44px}
.btn-lg{padding:var(--s-4) var(--s-8);font-size:var(--fs-base)}
.btn-primary{background:var(--color-primary);color:var(--color-white);box-shadow:var(--sh-sm)}
.btn-primary:hover{background:var(--color-primary-hover);transform:translateY(-1px);box-shadow:var(--sh-md)}
.btn-primary:active{transform:translateY(0)}
.btn-primary:disabled{opacity:0.5;pointer-events:none}
.btn-secondary{background:var(--color-white);color:var(--color-gray-800);border:1px solid var(--color-gray-300)}
.btn-secondary:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-soft)}
.btn-ghost{color:var(--color-gray-600)}
.btn-ghost:hover{color:var(--color-gray-900);background:var(--color-gray-100)}
.btn-icon{width:18px;height:18px;display:inline-flex}
.btn-spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,0.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ========================================
   Header
   ======================================== */
.header{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(255,255,255,0.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--color-gray-200);transition:box-shadow var(--t-base)}
.header.scrolled{box-shadow:var(--sh-md)}
.header-content{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{display:flex;align-items:center;gap:var(--s-2);font-size:var(--fs-xl);font-weight:700;color:var(--color-gray-900)}
.logo-icon{display:inline-flex;color:var(--color-primary)}
.logo-img{width:26px;height:26px;flex-shrink:0;display:block}
.logo-text{line-height:1}
.nav{display:flex;gap:var(--s-6)}
.nav-link{font-weight:500;color:var(--color-gray-600);font-size:var(--fs-sm);transition:color var(--t-fast)}
.nav-link:hover{color:var(--color-primary)}
.header-cta{display:none}
.mobile-menu-btn{display:none;flex-direction:column;gap:5px;width:44px;height:44px;align-items:center;justify-content:center;padding:0}
.hamburger{width:22px;height:2px;background:var(--color-gray-700);position:relative;transition:background var(--t-fast)}
.hamburger::before,.hamburger::after{content:'';position:absolute;width:22px;height:2px;background:var(--color-gray-700);transition:transform var(--t-fast)}
.hamburger::before{top:-6px}.hamburger::after{top:6px}
.mobile-menu{display:none;position:fixed;top:68px;left:0;right:0;background:var(--color-white);border-bottom:1px solid var(--color-gray-200);padding:var(--s-6);flex-direction:column;gap:var(--s-2);box-shadow:var(--sh-lg);z-index:999}
.mobile-menu.active{display:flex}
.mobile-nav-link{padding:var(--s-3);font-weight:500;color:var(--color-gray-700);border-radius:var(--r-md);transition:background var(--t-fast);min-height:44px;display:flex;align-items:center}
.mobile-nav-link:hover{background:var(--color-gray-50);color:var(--color-primary)}
.mobile-menu .btn{margin-top:var(--s-2);justify-content:center}
.mobile-menu-close{display:none;position:absolute;top:var(--s-4);right:var(--s-4);width:44px;height:44px;background:none;color:var(--color-gray-700);border-radius:var(--r-md);transition:background var(--t-fast)}
.mobile-menu-close:hover{background:var(--color-gray-100)}
.mobile-menu-close i{width:22px;height:22px}
.mobile-menu.active .mobile-menu-close{display:flex;align-items:center;justify-content:center}

/* ========================================
   Sections
   ======================================== */
section{padding:var(--s-20) 0}
.section-header{text-align:center;max-width:640px;margin:0 auto var(--s-14)}
.section-header.left-align{text-align:left;margin-left:0}
.section-tag{display:inline-block;color:var(--color-primary);font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:0.16em;margin-bottom:var(--s-3)}
.section-title{font-size:var(--fs-4xl);font-weight:700;color:var(--color-gray-900);line-height:1.15;margin-bottom:var(--s-3)}
.section-subtitle{font-size:var(--fs-lg);color:var(--color-gray-500);line-height:1.65}

/* ========================================
   Hero
   ======================================== */
.hero{position:relative;padding:calc(var(--s-20) + 68px) 0 var(--s-16);display:flex;align-items:center;min-height:88vh;overflow:hidden;background:linear-gradient(180deg,var(--color-gray-50) 0%,var(--color-white) 100%)}
/* Depth field: two ultra-soft organic light tints behind the hero content.
   WHY: the hero previously read as an empty white void; a barely-there light
   field gives the photo and glass card something to sit in. Static, GPU-free. */
.hero::before,.hero::after{content:"";position:absolute;pointer-events:none;border-radius:50%}
.hero::before{width:56vw;height:56vw;max-width:820px;max-height:820px;top:-18%;right:-12%;background:radial-gradient(circle,rgba(82,183,136,0.10) 0%,rgba(82,183,136,0) 68%)}
.hero::after{width:44vw;height:44vw;max-width:640px;max-height:640px;bottom:-24%;left:-14%;background:radial-gradient(circle,rgba(45,106,79,0.06) 0%,rgba(45,106,79,0) 70%)}
.hero-content{display:grid;grid-template-columns:1.1fr 0.9fr;gap:var(--s-16);align-items:center;position:relative;z-index:1}
.hero-text{min-width:0}
.hero-eyebrow{font-size:var(--fs-sm);font-weight:600;color:var(--color-primary);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:var(--s-3)}
.hero-title{font-size:var(--fs-5xl);font-weight:800;line-height:1.08;color:var(--color-gray-900);margin-bottom:var(--s-6);letter-spacing:-0.02em}
.hero-em{color:var(--color-primary)}
.hero-subtitle{font-size:var(--fs-lg);color:var(--color-gray-600);margin-bottom:var(--s-8);line-height:1.7}
.hero-cta{display:flex;gap:var(--s-4);flex-wrap:wrap;margin-bottom:var(--s-10)}
.hero-trust{display:flex;flex-wrap:wrap;gap:var(--s-6);list-style:none;padding:0}
.hero-trust li{display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--fs-sm);color:var(--color-gray-600)}
.hero-trust i{color:var(--color-primary);width:16px;height:16px}

/* Hero entrance: staggered rise on load. Gated on html.js (added by inline
   script) so no-JS renders fully visible, and wrapped in no-preference so
   reduced-motion users see the final state immediately. */
@media (prefers-reduced-motion: no-preference){
    .js .hero-text>*{opacity:0;transform:translateY(16px);transition:opacity 0.7s cubic-bezier(0.22,1,0.36,1),transform 0.7s cubic-bezier(0.22,1,0.36,1)}
    .js .hero.is-entered .hero-text>*{opacity:1;transform:none}
    .js .hero.is-entered .hero-text>*:nth-child(1){transition-delay:0.05s}
    .js .hero.is-entered .hero-text>*:nth-child(2){transition-delay:0.12s}
    .js .hero.is-entered .hero-text>*:nth-child(3){transition-delay:0.2s}
    .js .hero.is-entered .hero-text>*:nth-child(4){transition-delay:0.28s}
    .js .hero.is-entered .hero-text>*:nth-child(5){transition-delay:0.36s}
    .js .hero-visual{opacity:0;transform:translateY(12px) scale(0.985);transition:opacity 0.8s cubic-bezier(0.22,1,0.36,1) 0.25s,transform 0.8s cubic-bezier(0.22,1,0.36,1) 0.25s}
    .js .hero.is-entered .hero-visual{opacity:1;transform:none}
}

/* Scroll reveal: elements with [data-reveal] rise once when they enter the
   viewport. Animation-based (not transition) so it never fights hover
   transitions; JS strips the attribute after the entrance to restore the
   element's original CSS untouched. Same js + reduced-motion gates. */
@media (prefers-reduced-motion: no-preference){
    .js [data-reveal]{opacity:0}
    .js [data-reveal].is-visible{opacity:1;animation:reveal-rise 0.7s cubic-bezier(0.22,1,0.36,1) var(--rd,0s) both}
    @keyframes reveal-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
    .js .sample-grid .sample-card:nth-child(2){--rd:60ms}
    .js .sample-grid .sample-card:nth-child(3){--rd:120ms}
    .js .sample-grid .sample-card:nth-child(4){--rd:180ms}
    .js .sample-grid .sample-card:nth-child(5){--rd:240ms}
    .js .sample-grid .sample-card:nth-child(6){--rd:240ms}
    .js .features-index .feature-row:nth-child(2){--rd:50ms}
    .js .features-index .feature-row:nth-child(3){--rd:100ms}
    .js .features-index .feature-row:nth-child(4){--rd:150ms}
    .js .features-index .feature-row:nth-child(5){--rd:200ms}
    .js .features-index .feature-row:nth-child(6){--rd:250ms}
}

/* Hero visual */
.hero-visual{position:relative;display:flex;justify-content:center}
.hero-image-container{position:relative;width:100%;max-width:440px;--scan-y:516px}
.hero-plant-img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-2xl);box-shadow:0 32px 64px rgba(21,25,20,0.14),0 8px 20px rgba(21,25,20,0.08)}
/* Scan line: conveys "the AI is examining this photo" without stealing the moment.
   Pure transform animation; disabled by the global reduced-motion rule. */
.hero-scan{position:absolute;left:var(--s-6);right:var(--s-6);top:0;height:2px;z-index:2;border-radius:var(--r-full);opacity:0;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.85) 30%,rgba(82,183,136,0.95) 50%,rgba(255,255,255,0.85) 70%,transparent);animation:hero-scan 5.2s ease-in-out 1.2s infinite}
@keyframes hero-scan{0%{opacity:0;transform:translateY(0)}7%{opacity:1}46%{opacity:0.85;transform:translateY(var(--scan-y))}56%,100%{opacity:0;transform:translateY(var(--scan-y))}}
/* WebGPU hero canvas (scan-fx.js): JS pins it to the img box. Positioned, no
   z-index -> paints above the static img but below .hero-scan (z:2) and the
   result card that follows it in DOM order. */
.hero-canvas{position:absolute;pointer-events:none;border-radius:var(--r-2xl);opacity:0;transition:opacity 0.5s ease}
.hero-canvas.is-on{opacity:1}
/* Once the real vgpu effect is live, the CSS fallback line stands down and the
   result card materializes only after the first sweep "produced" it — a glass
   panel condensing out of the scan (blur -> sharp, rise + settle). */
.hero-fx-on .hero-scan{display:none}
.hero-fx-on .hero-result-preview{opacity:0;transform:translateX(-50%) translateY(14px);filter:blur(6px)}
.hero-fx-on .hero-result-preview.is-revealed{opacity:1;transform:translateX(-50%);filter:blur(0);transition:opacity 0.65s ease 0.15s,transform 0.65s cubic-bezier(0.22,1,0.36,1) 0.15s,filter 0.65s ease 0.15s}
/* Frosted-glass result card: real backdrop blur over the live scan/prism
   canvas + photo, hairline top highlight, soft depth shadow. Backed by a
   near-opaque layer so text contrast holds even where the photo is bright. */
.hero-result-preview{position:absolute;bottom:var(--s-6);left:50%;transform:translateX(-50%);width:calc(100% - var(--s-6));background:rgba(255,255,255,0.72);-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);border-radius:var(--r-xl);padding:var(--s-4) var(--s-5);border:1px solid rgba(255,255,255,0.65);box-shadow:0 16px 40px rgba(21,25,20,0.16),0 2px 8px rgba(21,25,20,0.06),inset 0 1px 0 rgba(255,255,255,0.8)}
.hrp-head{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-3)}
.hrp-avatar{width:36px;height:36px;border-radius:var(--r-md);object-fit:cover;flex-shrink:0;background:var(--color-gray-100)}
.hrp-head-info{flex:1;min-width:0}
.hrp-name{font-size:var(--fs-sm);font-weight:700;color:var(--color-gray-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hrp-sci{font-size:var(--fs-xs);color:var(--color-gray-500);font-style:italic}
.hrp-badge{flex-shrink:0;display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:var(--r-full);font-size:var(--fs-xs);font-weight:600;background:var(--color-success-soft);color:var(--color-success)}
.hrp-badge i{width:12px;height:12px}
.hrp-conf-row{display:flex;align-items:center;gap:var(--s-3)}
.hrp-conf-label{font-size:var(--fs-xs);color:var(--color-gray-500);flex-shrink:0}
.hrp-bar{flex:1;height:6px;background:var(--color-gray-100);border-radius:var(--r-full);overflow:hidden}
.hrp-bar-fill{display:block;height:100%;background:var(--color-primary);border-radius:var(--r-full)}
.hrp-pct{font-size:var(--fs-xs);font-weight:600;color:var(--color-primary);flex-shrink:0}
.hrp-care{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3);padding-top:var(--s-3);border-top:1px solid var(--color-gray-100)}
.hrp-chip{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);color:var(--color-gray-600);background:var(--color-gray-50);border-radius:var(--r-full);padding:4px 9px}
.hrp-chip i{width:12px;height:12px;color:var(--color-primary)}
.hero-scroll-hint{position:absolute;bottom:var(--s-6);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:var(--s-1);font-size:var(--fs-xs);color:var(--color-gray-500)}

/* ========================================
   Quick-test samples
   ======================================== */
.quick-test{background:var(--color-white);border-top:1px solid var(--color-gray-100)}
.sample-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s-4)}
.sample-card{position:relative;border:none;background:none;padding:0;cursor:pointer;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-md);transition:transform var(--t-base),box-shadow var(--t-base);aspect-ratio:1}
.sample-card img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow)}
.sample-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.sample-card:hover img{transform:scale(1.06)}
.sample-name{position:absolute;left:0;right:0;bottom:0;padding:var(--s-2) var(--s-3);background:linear-gradient(transparent,rgba(0,0,0,0.7));color:#fff;font-size:var(--fs-sm);font-weight:600;text-align:left}

/* ========================================
   How it works — pipeline diagram
   ======================================== */
.how-it-works{background:var(--color-gray-50)}
.pipeline{display:flex;justify-content:center;margin-top:var(--s-4)}
.pipeline svg{width:100%;height:auto}
.pipeline-h svg{max-width:880px}
.pipeline-v{display:none}
/* Dashed connectors flow continuously = data moving through the pipeline */
.pl-dash{stroke-dasharray:5 9;animation:dashflow 1.15s linear infinite}
@keyframes dashflow{to{stroke-dashoffset:-14}}
/* Nodes pulse in sequence: photo -> analysis -> care plan */
.pl-pulse{animation:plpulse 3.6s ease-in-out infinite}
.pl-pulse-2{animation:plpulse 3.6s ease-in-out 1.2s infinite}
.pl-pulse-3{animation:plpulse 3.6s ease-in-out 2.4s infinite}
@keyframes plpulse{0%,62%,100%{opacity:0.28}10%,20%{opacity:1}}
/* Rolling processing dots inside the analysis node */
.pl-dot{animation:pldot 1.2s ease-in-out infinite}
.pl-dot-2{animation-delay:0.4s}
.pl-dot-3{animation-delay:0.8s}
@keyframes pldot{0%,100%{opacity:0.25}50%{opacity:1}}
@media (max-width:768px){
    .pipeline-h{display:none}
    .pipeline-v{display:flex;justify-content:center}
    .pipeline-v svg{max-width:250px}
}

/* ========================================
   Features — editorial index
   ======================================== */
.features{background:var(--color-white)}
.features-layout{display:grid;grid-template-columns:minmax(250px,340px) 1fr;gap:var(--s-16);align-items:start}
.features-intro{position:sticky;top:96px}
.features-intro .section-subtitle{margin-bottom:var(--s-6)}
.features-note{display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--fs-sm);color:var(--color-gray-500)}
.features-note i{width:16px;height:16px;color:var(--color-primary)}
.features-index{list-style:none;border-top:1px solid var(--color-gray-200)}
.feature-row{display:flex;align-items:flex-start;gap:var(--s-5);padding:var(--s-6) 0;border-bottom:1px solid var(--color-gray-200)}
.feature-idx{font-size:var(--fs-xs);font-weight:700;color:var(--color-primary-light);letter-spacing:0.08em;padding-top:5px;font-variant-numeric:tabular-nums}
.feature-row-body{flex:1;min-width:0}
.feature-row h3{font-size:var(--fs-lg);font-weight:700;color:var(--color-gray-900);margin-bottom:var(--s-1)}
.feature-row h3 a{transition:color var(--t-fast)}
.feature-row h3 a:hover{color:var(--color-primary)}
.feature-row p{font-size:var(--fs-sm);color:var(--color-gray-500);line-height:1.65;max-width:54ch}
.feature-row-icon{width:40px;height:40px;border-radius:var(--r-md);background:var(--color-primary-soft);color:var(--color-primary);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.feature-row-icon i{width:20px;height:20px}
@media (max-width:900px){
    .features-layout{grid-template-columns:1fr;gap:var(--s-10)}
    .features-intro{position:static}
}
@media (max-width:640px){
    .feature-row{flex-wrap:wrap;gap:var(--s-3)}
    .feature-row-icon{display:none}
}

/* ========================================
   My Plants / History (light cards)
   ======================================== */
.my-plants{background:var(--color-gray-50);border-top:1px solid var(--color-gray-100)}
.my-plants-panel{background:var(--color-white);border:1px solid var(--color-gray-200);border-radius:var(--r-xl);padding:var(--s-8);margin-bottom:var(--s-10)}
.my-plants-empty{text-align:center;padding:var(--s-10) var(--s-4)}
.empty-icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;background:var(--color-primary-soft);color:var(--color-primary);border-radius:var(--r-full);margin-bottom:var(--s-4)}
.empty-icon i{width:28px;height:28px}
.empty-title{font-size:var(--fs-xl);font-weight:600;color:var(--color-gray-900);margin-bottom:var(--s-2)}
.empty-desc{color:var(--color-gray-500);margin-bottom:var(--s-6);max-width:440px;margin-left:auto;margin-right:auto}
.my-plants-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--s-4)}
.plant-card{background:var(--color-gray-50);border:1px solid var(--color-gray-200);border-radius:var(--r-lg);padding:var(--s-4);text-align:center}
.plant-card-img{width:64px;height:64px;border-radius:var(--r-full);object-fit:cover;margin:0 auto var(--s-2)}
.plant-card-name{font-weight:600;color:var(--color-gray-900);margin-bottom:var(--s-1)}
.plant-card-status{font-size:var(--fs-xs);color:var(--color-success);font-weight:600}

.analysis-history{margin-top:var(--s-10)}
.history-title{font-size:var(--fs-base);font-weight:600;color:var(--color-gray-700);margin-bottom:var(--s-4)}
.history-empty{color:var(--color-gray-500);font-size:var(--fs-sm);padding:var(--s-4);background:var(--color-white);border:1px dashed var(--color-gray-300);border-radius:var(--r-lg);text-align:center}
.history-list{list-style:none;display:flex;flex-direction:column;gap:var(--s-2)}
.history-item{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);padding:var(--s-3) var(--s-4);background:var(--color-white);border:1px solid var(--color-gray-200);border-radius:var(--r-lg)}
.history-item .hi-left{display:flex;align-items:center;gap:var(--s-3)}
.history-item .hi-thumb{width:40px;height:40px;border-radius:var(--r-md);object-fit:cover;background:var(--color-gray-100)}
.history-item .hi-name{font-weight:600;color:var(--color-gray-900);font-size:var(--fs-sm)}
.history-item .hi-date{font-size:var(--fs-xs);color:var(--color-gray-500)}
.history-item .hi-status{font-size:var(--fs-xs);font-weight:600;padding:var(--s-1) var(--s-3);border-radius:var(--r-full)}
.hi-status.healthy{background:var(--color-success-soft);color:var(--color-success)}
.hi-status.unhealthy{background:var(--color-error-soft);color:var(--color-error)}

/* ========================================
   Learn / Knowledge Base — editorial post index
   ======================================== */
.learn{background:var(--color-white)}
.learn-layout{display:grid;grid-template-columns:minmax(240px,320px) 1fr;gap:var(--s-16);align-items:start}
.learn-intro{position:sticky;top:96px}
.learn-intro .section-subtitle{margin-bottom:var(--s-6)}
.learn-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s-10) var(--s-8)}
.learn-group h3{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--color-gray-400);margin-bottom:var(--s-2)}
.learn-post{display:block;padding:var(--s-4) 0;border-bottom:1px solid var(--color-gray-100)}
.learn-post h4{font-size:var(--fs-base);font-weight:600;color:var(--color-gray-800);line-height:1.35;margin-bottom:2px;transition:color var(--t-fast)}
.learn-post:hover h4{color:var(--color-primary)}
.learn-post time{font-size:var(--fs-xs);color:var(--color-gray-400)}
.learn-more{display:inline-flex;align-items:center;gap:var(--s-1);margin-top:var(--s-4);font-size:var(--fs-sm);font-weight:600;color:var(--color-primary);min-height:44px}
.learn-more:hover{color:var(--color-primary-hover)}
@media (max-width:900px){
    .learn-layout{grid-template-columns:1fr;gap:var(--s-10)}
    .learn-intro{position:static}
}
.gallery-block{margin-bottom:var(--s-14)}
.learn .gallery-block{margin-top:var(--s-16)}
.gallery-title{font-size:var(--fs-xl);font-weight:600;color:var(--color-gray-900);margin-bottom:var(--s-2)}
.gallery-desc{color:var(--color-gray-500);max-width:60ch;margin-bottom:var(--s-6)}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--s-4)}
.gallery-item{border-radius:var(--r-lg);overflow:hidden;margin:0;background:var(--color-gray-100)}
.gallery-item img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform var(--t-slow)}
.gallery-item:hover img{transform:scale(1.04)}
.gallery-item figcaption{padding:var(--s-2) var(--s-3);font-size:var(--fs-xs);color:var(--color-gray-600);line-height:1.4;background:var(--color-white)}

/* ========================================
   eBook Promotion
   ======================================== */
.ebook-section{margin-top:var(--s-12)}
.ebook-promo-card{display:flex;gap:var(--s-5);align-items:stretch;background:var(--color-white);border-radius:var(--r-xl);padding:var(--s-6);border:1px solid var(--color-gray-200);transition:transform var(--t-base),box-shadow var(--t-base),border-color var(--t-base)}
.ebook-promo-card:hover{transform:translateY(-2px);box-shadow:var(--sh-lg);border-color:var(--color-primary-light)}
.ebook-cover{flex-shrink:0;width:110px;height:155px;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-md);background:var(--color-gray-100)}
.ebook-cover img{width:100%;height:100%;object-fit:cover}
.ebook-cover-fallback{display:none;width:100%;height:100%;align-items:center;justify-content:center;color:var(--color-gray-400)}
.ebook-cover-fallback i{width:32px;height:32px}
.ebook-info{flex:1;display:flex;flex-direction:column;min-width:0}
.ebook-meta-row{margin-bottom:var(--s-2)}
.ebook-tag{font-size:var(--fs-xs);font-weight:600;color:var(--color-primary);text-transform:uppercase;letter-spacing:0.05em}
.ebook-meta{font-size:var(--fs-xs);color:var(--color-gray-500);margin-left:var(--s-2)}
.ebook-title{font-size:var(--fs-xl);font-weight:700;color:var(--color-gray-900);margin-bottom:var(--s-1);line-height:1.3}
.ebook-desc{font-size:var(--fs-sm);color:var(--color-gray-500);margin-bottom:var(--s-3);line-height:1.6}
.ebook-cta{display:flex;align-items:center;gap:var(--s-2);margin-top:auto}
.ebook-price{font-weight:700;color:var(--color-gray-900)}
.read-more{font-size:var(--fs-sm);font-weight:600;color:var(--color-primary)}
.ebook-promo-card:hover .read-more{color:var(--color-primary-hover)}

/* ========================================
   Toolkit Promotion (landscape-cover cards)
   ======================================== */
.resources-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5);margin-top:var(--s-4)}
.toolkit-promo-card{display:flex;gap:var(--s-5);align-items:stretch;background:var(--color-white);border-radius:var(--r-xl);padding:var(--s-6);border:1px solid var(--color-gray-200);transition:transform var(--t-base),box-shadow var(--t-base),border-color var(--t-base)}
.toolkit-promo-card:hover{transform:translateY(-2px);box-shadow:var(--sh-lg);border-color:var(--color-primary-light)}
.toolkit-cover{flex:0 0 auto;width:256px;height:170px;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-md);background:var(--color-gray-100)}
.toolkit-cover img{width:100%;height:100%;object-fit:cover}
.toolkit-cover-fallback{display:none;width:100%;height:100%;align-items:center;justify-content:center;color:var(--color-gray-400)}
.toolkit-cover-fallback i{width:32px;height:32px}
.ebook-tag--new{display:inline-block;background:var(--color-primary);color:var(--color-white);padding:2px 10px;border-radius:var(--r-full);letter-spacing:0.05em}

/* ========================================
   "Remain Valuable" ebook — site-native placements
   Flat, editorial treatments in existing tokens.
   No gradients, no glow, no motion beyond the
   standard card hover used by sibling promos.
   ======================================== */
.rv-strip{display:flex;gap:var(--s-5);align-items:center;background:#f0f4ea;border:1px solid #dce5d5;border-radius:var(--r-xl);padding:var(--s-5) var(--s-6);margin-top:var(--s-5)}
.rv-strip-cover{flex:0 0 auto;width:88px;border-radius:var(--r-sm);overflow:hidden;box-shadow:var(--sh-md);background:var(--color-gray-100)}
.rv-strip-cover img{display:block;width:88px;height:117px;object-fit:cover}
.rv-strip-body{flex:1;min-width:0}
.rv-eyebrow{display:block;font-size:var(--fs-xs);font-weight:700;color:var(--color-primary);text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--s-1)}
.rv-strip-title{font-family:var(--font-display,Georgia,serif);font-weight:400;font-size:var(--fs-xl);line-height:1.3;color:var(--color-gray-900);margin-bottom:var(--s-1)}
.rv-strip-text{font-size:var(--fs-sm);color:var(--color-gray-600);line-height:1.6;max-width:62ch}
.rv-strip-cta{flex:0 0 auto;font-size:var(--fs-sm);font-weight:700;color:var(--color-primary);white-space:nowrap}
.rv-strip-cta:hover{color:var(--color-primary-hover);text-decoration:underline;text-underline-offset:3px}
.rv-panel{display:flex;gap:var(--s-5);align-items:flex-start;background:var(--color-white);border:1px solid var(--color-gray-200);border-radius:var(--r-xl);padding:var(--s-6)}
.rv-panel-cover{flex:0 0 auto;width:112px;border-radius:var(--r-sm);overflow:hidden;box-shadow:var(--sh-md);background:var(--color-gray-100)}
.rv-panel-cover img{display:block;width:112px;height:149px;object-fit:cover}
.rv-panel-body{flex:1;min-width:0}
.rv-panel-title{font-family:var(--font-display,Georgia,serif);font-weight:400;font-size:var(--fs-2xl);line-height:1.25;color:var(--color-gray-900);margin-bottom:var(--s-2);letter-spacing:-.01em}
.rv-panel-text{font-size:var(--fs-sm);color:var(--color-gray-600);line-height:1.7;max-width:60ch;margin-bottom:var(--s-3)}
.rv-note{display:block;border:1px solid var(--color-gray-200);background:var(--color-gray-50);border-radius:var(--r-md);padding:var(--s-4) var(--s-5);margin:var(--s-8) 0;font-size:var(--fs-sm);line-height:1.7;color:var(--color-gray-600)}
.rv-note strong{color:var(--color-gray-900)}
.rv-note a{font-weight:700;color:var(--color-primary);white-space:nowrap}
.rv-note a:hover{color:var(--color-primary-hover);text-decoration:underline;text-underline-offset:3px}

/* ========================================
   Homepage announcement bar (dismissible)
   Fixed-height single line: no JS measuring,
   no layout shift. Offset rules keep the
   fixed header, scroll progress, mobile menu
   and anchor scroll-margin aligned.
   ======================================== */
:root{--announce-h:0px}
body.has-announce{--announce-h:44px}
.announce{position:fixed;top:0;left:0;right:0;z-index:1002;display:flex;align-items:center;justify-content:center;gap:var(--s-3);min-height:var(--announce-h);padding:6px 52px 6px 16px;background:var(--color-primary-hover);color:#fff;font-size:13px;line-height:1.4;text-align:center}
.announce[hidden]{display:none}
.announce-cover{flex:0 0 auto;width:24px;height:32px;border-radius:2px;object-fit:cover;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.announce-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.announce-short{display:none}
.announce a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.announce a:hover{color:#d8e8dc}
.announce :focus-visible{outline-color:#fff}
.announce-dismiss{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--r-md);color:#fff;opacity:.75}
.announce-dismiss:hover{opacity:1;background:rgba(255,255,255,.12)}
.announce-dismiss svg{width:16px;height:16px}
body.has-announce{padding-top:var(--announce-h)}
body.has-announce .header{top:var(--announce-h)}
body.has-announce .scroll-progress{top:var(--announce-h)}
body.has-announce .mobile-menu{top:calc(var(--header-height,68px) + var(--announce-h))}
body.has-announce section{scroll-margin-top:calc(var(--header-height,68px) + var(--announce-h))}
@media (max-width:640px){.announce-full{display:none}.announce-short{display:inline}.announce{font-size:12px}}

/* ========================================
   FAQ — visible answers matching the FAQPage schema
   ======================================== */
.faq{background:var(--color-gray-50);border-top:1px solid var(--color-gray-100)}
.faq-list{max-width:760px;margin:0 auto;border-top:1px solid var(--color-gray-200)}
.faq-item{border-bottom:1px solid var(--color-gray-200)}
.faq-item summary{display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);padding:var(--s-5) var(--s-2);min-height:44px;cursor:pointer;list-style:none;font-weight:700;font-size:var(--fs-lg);color:var(--color-gray-900);transition:color var(--t-fast)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--color-primary)}
.faq-item summary::after{content:'+';flex-shrink:0;font-weight:400;font-size:var(--fs-2xl);line-height:1;color:var(--color-gray-600)}
.faq-item[open] summary::after{content:'\2212'}
.faq-item p{padding:0 var(--s-2) var(--s-5);color:var(--color-gray-600);max-width:64ch}

/* ========================================
   Footer
   ======================================== */
.footer{background:var(--color-gray-900);color:var(--color-gray-400);padding:var(--s-16) 0 var(--s-8)}
.footer-content{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--s-10);margin-bottom:var(--s-10)}
.footer-links-group{min-width:0}
.footer-brand .logo{color:#fff;margin-bottom:var(--s-3)}
.footer-tagline{color:var(--color-gray-400);font-size:var(--fs-sm);max-width:280px;line-height:1.6}
.footer-heading{color:var(--color-gray-200);font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:var(--s-3)}
.footer-links{display:flex;flex-direction:column;gap:var(--s-2)}
.footer-links a{color:var(--color-gray-400);font-size:var(--fs-sm);transition:color var(--t-fast)}
.footer-links a:hover{color:#fff}
.footer-bottom{text-align:center;padding-top:var(--s-6);border-top:1px solid rgba(255,255,255,0.08)}
.footer-bottom p{color:var(--color-gray-400);font-size:var(--fs-sm)}
.footer-bottom a{color:var(--color-primary-light)}
.footer-bottom a:hover{color:#fff}

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 1024px){
    .hero-content{grid-template-columns:1fr;text-align:center}
    .hero-visual{order:-1;max-width:400px;margin:0 auto}
    .hero-image-container{--scan-y:468px}
    .hero-cta{justify-content:center}
    .hero-trust{justify-content:center}
    .sample-grid{grid-template-columns:repeat(3,1fr)}
    .footer-content{grid-template-columns:1fr 1fr}
}
@media (max-width: 768px){
    .nav{display:none}
    .mobile-menu-btn{display:flex}
    .hero{padding-top:calc(var(--s-14) + 68px);min-height:auto}
    .hero-title{font-size:var(--fs-4xl)}
    .footer-content{grid-template-columns:1fr;gap:var(--s-8)}
    .section-title{font-size:var(--fs-3xl)}
    .ebook-promo-card{flex-direction:column;align-items:flex-start}
    .resources-grid{grid-template-columns:1fr}
    .toolkit-promo-card{flex-direction:column;align-items:stretch}
    .toolkit-cover{width:100%;height:auto;aspect-ratio:880/591}
    .rv-strip{flex-direction:column;align-items:flex-start}
    .rv-strip-cta{white-space:normal}
    .rv-panel{flex-direction:column}
    .rv-panel-title{font-size:var(--fs-xl)}
}
@media (max-width: 520px){
    .container{padding:0 var(--s-4)}
    .hero-title{font-size:var(--fs-3xl)}
    .hero-subtitle{font-size:var(--fs-base)}
    .hero-trust{flex-direction:column;gap:var(--s-2);align-items:center}
    .sample-grid{grid-template-columns:repeat(2,1fr)}
    .gallery-grid{grid-template-columns:repeat(2,1fr)}
    .section-title{font-size:var(--fs-2xl)}
    .hero-visual{max-width:100%}
    .hero-image-container{--scan-y:418px}
    .hero-result-preview{position:relative;bottom:auto;left:auto;transform:none;width:100%;margin-top:var(--s-4)}
    /* The fx reveal rules (line ~226) re-apply translateX(-50%) at higher
       specificity to center the ABSOLUTE desktop card; in this stacked layout
       the card is in-flow, so that X-shift pushes it half its width off-screen
       (headless 390px probe 2026-09-02). Keep the rise+fade, drop the X. */
    .hero-fx-on .hero-result-preview{transform:translateY(14px)}
    .hero-fx-on .hero-result-preview.is-revealed{transform:none}
    .hrp-care{display:none}
}
@media (min-width: 900px){
    .header-cta{display:inline-flex}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}
    .hero-scroll-hint{display:none}
}

/* ========================================
   Legacy / compat helpers (minimal)
   ======================================== */
.left-align{text-align:left}

/* ========================================
   Polish layer — November 2026 (site-wide)
   This sheet loads first on every page, so every rule here either fills a
   gap nobody else fills or is wrapped in :where() (zero specificity) to stay
   beatable by the page sheets. Nothing here hides content: the reveal is a
   scroll-driven animation gated behind @supports and prefers-reduced-motion.
   ======================================== */

/* Native controls follow the site's light palette. Without this, a browser
   in dark mode paints selects, radios, date pickers and scrollbars as dark
   blocks against the paper background — the one mismatch a light-only
   design cannot style away. */
:root{color-scheme:light}

/* ---- Scroll reveal ------------------------------------------------
   Cards below the fold rise once as they arrive, then stay put. The hiding
   class is added by motion-2026-11.js, and only to elements that are still
   off-screen when it runs, so a failed or late script never hides content.
   Nothing is tied to the scroll position: a page left half-scrolled never
   shows half-faded cards. `translate` (not `transform`) composes with the
   hover lift each card already owns. Reduced motion: no reveal at all. */
@media (prefers-reduced-motion: no-preference){
    .mv-io :where(.mv-watch){opacity:0;translate:0 16px;transition:opacity .5s ease var(--mv-d,0ms),translate .6s cubic-bezier(.22,1,.36,1) var(--mv-d,0ms)}
    .mv-io :where(.mv-watch.mv-in){opacity:1;translate:0 0}
}
@media print{.mv-io :where(.mv-watch){opacity:1;translate:none;transition:none}}

/* One-time note after browser data is carried over from aiplanter.online (site-nav.js). */
.carry-note{position:fixed;left:50%;bottom:20px;z-index:1003;width:max-content;max-width:min(92vw,520px);margin:0;padding:12px 18px;transform:translateX(-50%);border-radius:10px;background:#1d4735;color:#fff;font-size:14px;line-height:1.5;box-shadow:0 12px 30px -12px rgba(10,30,20,.5);transition:opacity .6s ease}
.carry-note.is-out{opacity:0}

/* ---- Reading rhythm ------------------------------------------------
   Long-form pages were set at one measure from headline to footnote.
   Headlines get balanced, paragraphs get a comfortable measure, and
   figures/quotations get room to breathe. */
:where(h1,h2,h3,h4){text-wrap:balance}
:where(p,li,blockquote,dd,figcaption){text-wrap:pretty}
:where(article,.post-content,.interior-page) :where(p,li,blockquote,td){overflow-wrap:break-word}
:where(article,.post-content) > :where(p,ul,ol,blockquote){max-width:74ch}
:where(.post-content) > :where(p,ul,ol,blockquote){max-width:74ch}
:where(article) :where(figure){margin-block:var(--s-8)}
:where(article,.post-content) :where(figcaption){font-size:var(--fs-xs);line-height:1.55;color:var(--color-gray-500);margin-top:var(--s-2)}

/* Quotations read as a pause, not a box. */
:where(article,.post-content) :where(blockquote){
    margin-block:var(--s-8);
    padding:var(--s-5) var(--s-6);
    border-left:3px solid var(--color-primary-light);
    border-radius:0 var(--r-md) var(--r-md) 0;
    background:var(--color-primary-soft);
    color:var(--color-gray-700);
    font-size:var(--fs-lg);
    line-height:1.7;
}
:where(article,.post-content) :where(blockquote) :where(p){margin:0;max-width:none}
:where(article,.post-content) :where(blockquote) :where(p+p){margin-top:var(--s-3)}
:where(article,.post-content) :where(blockquote cite){display:block;margin-top:var(--s-3);font-size:var(--fs-sm);font-style:normal;color:var(--color-gray-500)}

/* Rules and tables inside prose. */
:where(article,.post-content) :where(hr){border:0;border-top:1px solid var(--color-gray-200);margin-block:var(--s-10)}
:where(article,.post-content) :where(table){width:100%;border-collapse:collapse;margin-block:var(--s-8);font-size:var(--fs-sm);line-height:1.5}
:where(article,.post-content) :where(caption){text-align:left;font-size:var(--fs-xs);color:var(--color-gray-500);padding-bottom:var(--s-2)}
:where(article,.post-content) :where(th){text-align:left;font-weight:700;color:var(--color-gray-900);border-bottom:1px solid var(--color-gray-300);padding:var(--s-2) var(--s-3)}
:where(article,.post-content) :where(td){border-bottom:1px solid var(--color-gray-100);padding:var(--s-2) var(--s-3);vertical-align:top}

/* Inline detail that used to read as plain text. */
:where(:not(pre)>code){font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;background:var(--color-gray-100);border:1px solid var(--color-gray-200);border-radius:var(--r-sm);padding:.08em .36em}
:where(mark){background:color-mix(in srgb,var(--color-primary-light) 26%,transparent);color:inherit;padding:0 .14em;border-radius:2px}
::selection{background:color-mix(in srgb,var(--color-primary-light) 40%,transparent);color:inherit}

/* Links inside prose carry a hairline underline, so a paragraph reads as
   written text rather than a row of coloured words. */
:where(article,.post-content,.interior-page) :where(p,li,dd) :where(a:not(.btn)){
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:.18em;
    text-decoration-color:color-mix(in srgb,currentColor 34%,transparent);
    transition:color var(--t-fast),text-decoration-color var(--t-fast);
}
:where(article,.post-content,.interior-page) :where(p,li,dd) :where(a:not(.btn)):hover{
    color:var(--color-primary);
    text-decoration-color:currentColor;
}

/* ---- Card language -------------------------------------------------
   Cards that had no hover answer now share the one the rest of the site
   uses: 3px lift, deeper shadow. :where() keeps every component's own
   hover intact. */
:where(.post-card,.knowledge-card,.tool-card,.history-item){transition:transform var(--t-base),box-shadow var(--t-base),border-color var(--t-base)}
:where(.post-card,.knowledge-card,.tool-card):hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}
@media (prefers-reduced-motion: reduce){
    :where(.post-card,.knowledge-card,.tool-card):hover{transform:none;box-shadow:var(--sh-md)}
}

/* ---- Mobile spacing -------------------------------------------------
   Tighter prose margins and anchored headings that clear the fixed header. */
@media (max-width:640px){
    :where(article,.post-content) :where(h2,h3){scroll-margin-top:calc(var(--header-height,68px) + 16px)}
    :where(article) :where(figure){margin-block:var(--s-6)}
    :where(article,.post-content) :where(blockquote){margin-block:var(--s-6);padding:var(--s-4) var(--s-5);font-size:var(--fs-base)}
    :where(article,.post-content) :where(table){font-size:var(--fs-xs)}
    :where(article,.post-content) :where(th,td){padding:var(--s-2)}
}