/* ─────────────────────────────────────────────────────────
   IngredientIQ — Landing page stylesheet
   All visual rules live here; no inline <style> in Blade.
───────────────────────────────────────────────────────── */

/* ── Base typography ── */
body            { font-family: 'Inter', system-ui, sans-serif; }
h1, h2, h3      { font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; }
[x-cloak]       { display: none !important; }

/* ── Gradient text variants ── */
.gradient-text {
    background: linear-gradient(135deg, #22c55e 0%, #4ade80 50%, #86efac 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.gradient-text-hero {
    background: linear-gradient(115deg, #34d399 0%, #4ade80 30%, #a3e635 60%, #d9f99d 100%);
    background-size: 220% 220%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* Soft neon glow on the rendered glyphs + a slow shimmer so the headline feels alive. */
    filter: drop-shadow(0 0 28px rgba(74, 222, 128, 0.35));
    animation: heroGradientShift 9s ease-in-out infinite;
}
@keyframes heroGradientShift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
.gradient-text-section {
    background: linear-gradient(135deg, #16a34a 0%, #22c55e 60%, #0ea5e9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Dark hero background ── */
.hero-dark {
    background:
        radial-gradient(ellipse 100% 75% at 78% -8%,  rgba(34,197,94,0.34)  0%, transparent 55%),
        radial-gradient(ellipse 55%  55% at 14% 22%,  rgba(52,211,153,0.22) 0%, transparent 58%),  /* spotlight behind the headline */
        radial-gradient(ellipse 65%  65% at 12% 98%,  rgba(16,185,129,0.20) 0%, transparent 55%),
        radial-gradient(ellipse 45%  50% at 55% 108%, rgba(132,204,22,0.10) 0%, transparent 60%),
        linear-gradient(160deg, #02110a 0%, #04141f 52%, #020c08 100%);
}
.hero-grid {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 0h60v60H0z' fill='none'/%3E%3Cpath d='M0 60V0M60 0v60' stroke='%2322c55e' stroke-opacity='.08' stroke-width='1'/%3E%3C/svg%3E");
    /* Fade the grid toward the edges so it reads as depth, not wallpaper. */
    -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 28%, #000 28%, transparent 78%);
            mask-image: radial-gradient(ellipse 85% 75% at 50% 28%, #000 28%, transparent 78%);
}

/* ── Hero badge ── */
.hero-badge {
    box-shadow: 0 0 30px rgba(22, 163, 74, 0.2);
}

/* ── Nav glass ── */
.nav-glass {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: rgba(255, 255, 255, 0.88);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* ── Animated orbs ── */
.orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.orb-1 {
    width: 700px; height: 700px;
    top: -200px; right: -150px;
    background: radial-gradient(circle, rgba(22,163,74,0.28) 0%, transparent 70%);
    filter: blur(80px);
    animation: orbDrift 22s ease-in-out infinite;
}
.orb-2 {
    width: 550px; height: 550px;
    bottom: -150px; left: -100px;
    background: radial-gradient(circle, rgba(16,185,129,0.22) 0%, transparent 70%);
    filter: blur(90px);
    animation: orbDrift 28s ease-in-out reverse infinite;
}
.orb-3 {
    width: 350px; height: 350px;
    top: 35%; left: 35%;
    background: radial-gradient(circle, rgba(6,182,212,0.12) 0%, transparent 70%);
    filter: blur(60px);
    animation: orbDrift 18s ease-in-out 5s infinite;
}
@keyframes orbDrift {
    0%,  100% { transform: translate(0, 0) scale(1); }
    25%        { transform: translate(25px, -20px) scale(1.04); }
    50%        { transform: translate(-15px, 30px) scale(0.96); }
    75%        { transform: translate(20px, 15px) scale(1.02); }
}

/* ── Float animations ── */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-12px); }
}
@keyframes floatDelay {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-10px); }
}
.animate-float        { animation: float      6s ease-in-out infinite; }
.animate-float-delay  { animation: floatDelay 6s ease-in-out 2s infinite; }
.animate-pulse-slow   { animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* ── Phone mockup ── */
.phone-screen  { height: 580px; }
.phone-content { height: calc(100% - 40px); overflow: hidden; }

/* Animated conic-gradient ring around phone */
@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@keyframes borderRotate {
    from { --angle: 0deg; }
    to   { --angle: 360deg; }
}
.phone-ring {
    position: absolute;
    inset: -3px;
    border-radius: 3.3rem;
    background: conic-gradient(from var(--angle), transparent 20%, #22c55e 40%, #4ade80 50%, transparent 60%);
    animation: borderRotate 4s linear infinite;
    z-index: -1;
    opacity: 0.6;
}

/* ── CTA button glow ── */
.btn-glow {
    position: relative;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-glow::before {
    content: '';
    position: absolute;
    top: -50%; left: -60%;
    width: 30%; height: 200%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.18), transparent);
    transform: skewX(-20deg);
    transition: left 0.65s ease;
}
.btn-glow:hover::before { left: 130%; }
.btn-glow:hover {
    box-shadow: 0 0 50px rgba(34, 197, 94, 0.55), 0 8px 30px rgba(0, 0, 0, 0.25);
    transform: translateY(-2px);
}

.btn-dark-glow {
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-dark-glow:hover {
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.12), 0 8px 30px rgba(0, 0, 0, 0.45);
    transform: translateY(-2px);
}

/* ── Trust bar marquee ── */
@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.marquee-track  { overflow: hidden; }
.marquee-inner  {
    display: flex;
    width: max-content;
    animation: marquee 30s linear infinite;
}
.marquee-inner:hover { animation-play-state: paused; }

/* Trust dot — color set via --c custom property */
.trust-dot { background: var(--c, #16a34a); }

/* ── Section pill badge ── */
.section-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, rgba(22,163,74,0.12), rgba(34,197,94,0.08));
    border: 1px solid rgba(22, 163, 74, 0.2);
    color: #15803d;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.375rem 1rem;
    border-radius: 9999px;
}

/* ── Breadcrumb trail ──
   Rendered hidden, then relocated by JS to the top of the hero band (.on-hero, dark theme)
   or the top of the first content section on hero-less pages (base, light theme).
── */
.breadcrumb-nav { margin-bottom: 1.25rem; }
.breadcrumb-list {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0.4rem;
    font-size: 12.5px;
    line-height: 1;
}
.breadcrumb-link    { color: #64748b; transition: color 0.15s ease; }
.breadcrumb-link:hover { color: #16a34a; }
.breadcrumb-current { color: #0f172a; font-weight: 600; }
.breadcrumb-sep     { width: 0.8rem; height: 0.8rem; color: #cbd5e1; flex-shrink: 0; }

/* On the dark hero band — a brighter, glassy pill that's far more visible than the bare trail. */
.breadcrumb-nav.on-hero { margin-bottom: 1.5rem; }
.breadcrumb-nav.on-hero .breadcrumb-list {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.13);
    padding: 0.45rem 0.9rem;
    border-radius: 9999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
    font-size: 13px;
}
.breadcrumb-nav.on-hero .breadcrumb-link    { color: #cbd5e1; }
.breadcrumb-nav.on-hero .breadcrumb-link:hover { color: #ffffff; }
.breadcrumb-nav.on-hero .breadcrumb-current { color: #ffffff; }
.breadcrumb-nav.on-hero .breadcrumb-sep     { color: rgba(255, 255, 255, 0.4); }

/* ── Feature cards ──
   Parent card receives --f and --t CSS custom properties for the accent gradient.
   Child elements (.feat-stripe, .feat-icon-bg) read those vars.
── */
.feature-card {
    position: relative;
    background: #fff;
    border: 1px solid #f1f5f9;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.feature-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--f, rgba(22,163,74,0.4)), var(--t, rgba(34,197,94,0.15)), transparent);
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: -1;
    border-radius: 1.6rem;
}
.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 0 1px rgba(22,163,74,0.12), 0 30px 60px rgba(22,163,74,0.09), 0 10px 20px rgba(0,0,0,0.05);
    border-color: transparent;
}
.feature-card:hover::before { opacity: 1; }

/* Top colour stripe — visible on hover */
.feat-stripe {
    background: linear-gradient(90deg, var(--f, #16a34a), var(--t, #22c55e));
}

/* Icon background */
.feat-icon-bg {
    background: linear-gradient(135deg, var(--f, #16a34a), var(--t, #22c55e));
}

/* ── Step cards ──
   Parent card receives --f and --t for the accent gradient.
── */
.step-card {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.step-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.08);
}
.step-badge-bg { background: linear-gradient(135deg, var(--f, #16a34a), var(--t, #22c55e)); }
.step-icon-bg  { background: linear-gradient(135deg, var(--f, #16a34a), var(--t, #22c55e)); }

/* ── India focus banner ── */
.india-grid {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 0h60v60H0z' fill='none'/%3E%3Cpath d='M0 60V0M60 0v60' stroke='%2322c55e' stroke-opacity='.04' stroke-width='1'/%3E%3C/svg%3E");
}

/* Stat value — color set via --c custom property */
.stat-value { color: var(--c, #16a34a); }

/* ── Testimonials ── */
.testimonial-card {
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    transition: all 0.3s ease;
}
.testimonial-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.07);
}

/* ── Pricing ── */
.pricing-popular {
    background: linear-gradient(160deg, #0a0f1e 0%, #0d1f0f 50%, #0a0f1e 100%);
}
.pricing-popular-glow {
    box-shadow: 0 0 80px rgba(22, 163, 74, 0.25), 0 30px 60px rgba(0, 0, 0, 0.3);
}

/* ── Section background variants ── */
.section-tinted {
    background: linear-gradient(180deg, #f8fffe 0%, #f0fdf4 50%, #f8fffe 100%);
}
.section-dark-mesh {
    background:
        radial-gradient(ellipse 80% 50% at 20% 50%, rgba(22,163,74,0.08) 0%, transparent 60%),
        radial-gradient(ellipse 60% 60% at 80% 50%, rgba(14,165,233,0.06) 0%, transparent 60%),
        #f8fafc;
}

/* ── Scroll reveal ── */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible      { opacity: 1; transform: translateY(0); }
.reveal-delay-1      { transition-delay: 0.08s; }
.reveal-delay-2      { transition-delay: 0.16s; }
.reveal-delay-3      { transition-delay: 0.24s; }
.reveal-delay-4      { transition-delay: 0.32s; }
.reveal-delay-5      { transition-delay: 0.40s; }
.reveal-delay-6      { transition-delay: 0.48s; }

/* ── Animated stat counter ── */
.stat-num { font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════════
   PRODUCT / SEARCH / BRAND INNER PAGES
═══════════════════════════════════════════════════════════ */

/* Mini hero for inner pages (shorter than landing hero) */
.page-hero {
    background:
        radial-gradient(ellipse 80% 100% at 60% -10%, rgba(22,163,74,0.28) 0%, transparent 55%),
        radial-gradient(ellipse 50% 60% at 10% 90%,  rgba(16,185,129,0.18) 0%, transparent 55%),
        linear-gradient(160deg, #020e05 0%, #041a2e 60%, #020e05 100%);
}

/* ── Product card (search results grid) ── */
.product-card {
    background: #fff;
    border: 1px solid #f1f5f9;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.07), 0 0 0 1px rgba(22,163,74,0.1);
    border-color: rgba(22,163,74,0.15);
}

/* Score badge on product cards */
.score-badge {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 0.8rem;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
}
.score-good    { background: #dcfce7; color: #15803d; }
.score-moderate{ background: #fef3c7; color: #92400e; }
.score-poor    { background: #fee2e2; color: #991b1b; }
.score-none    { background: #f1f5f9; color: #64748b; }

/* ── Score gauge (SVG semicircle on product detail) ── */
.score-gauge-wrap { position: relative; display: inline-block; }

/* ── Status badges ── */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    border-radius: 9999px;
}
.status-published  { background: #dcfce7; color: #15803d; }
.status-pending    { background: #fef3c7; color: #92400e; }
.status-processing { background: #e0f2fe; color: #075985; }
.status-rejected   { background: #fee2e2; color: #991b1b; }

/* ── Ingredient flags ── */
.ing-flag {
    display: inline-flex;
    align-items: center;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}
.ing-flag-danger  { background: #fee2e2; color: #b91c1c; }
.ing-flag-warning { background: #fef3c7; color: #92400e; }
.ing-flag-info    { background: #e0f2fe; color: #075985; }
.ing-flag-ok      { background: #dcfce7; color: #15803d; }

/* ── Alert cards ── */
.alert-card {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.875rem 1rem;
    border-radius: 0.875rem;
    border: 1px solid;
}
.alert-danger  { background: #fff1f2; border-color: #fecaca; }
.alert-warning { background: #fffbeb; border-color: #fde68a; }
.alert-info    { background: #f0f9ff; border-color: #bae6fd; }

/* ── Positive / Watch out list items ── */
.positive-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid #f0fdf4;
}
.positive-item:last-child { border-bottom: none; }

.watchout-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid #fffbeb;
}
.watchout-item:last-child { border-bottom: none; }

/* ── Ingredient table ── */
.ing-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f8fafc;
}
.ing-row:last-child { border-bottom: none; }

.ing-impact-positive { color: #15803d; }
.ing-impact-negative { color: #b91c1c; }
.ing-impact-neutral  { color: #64748b; }

/* ── Product page summary card ── */
.summary-card {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 1.25rem;
    padding: 1.5rem;
}
.summary-headline {
    font-size: 1.1rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.3;
    margin-bottom: 0.625rem;
}
.summary-plain {
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.65;
    margin-bottom: 1rem;
}
.summary-tag-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.summary-tag-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}
.summary-tag-avoid {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.65rem;
    border-radius: 9999px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}
.summary-tag-okay {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.65rem;
    border-radius: 9999px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #15803d;
}

/* Top concern chips (compact strip) */
.concern-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    border-radius: 9999px;
    border: 1px solid;
    /* Wraps rather than nowrap: the limiter chip carries a whole cap reason ("Primary surfactant with
       recognised irritation potential…"), and one unbreakable line pushed product pages to 490px on a
       375px phone. Short ingredient-name chips still fit on one line, so they look unchanged. */
    max-width: 100%;
    line-height: 1.35;
}
.concern-chip svg { flex-shrink: 0; }
.concern-chip-danger  { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.concern-chip-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.concern-chip-caution { background: #f0f9ff; border-color: #bae6fd; color: #0369a1; }

/* Full-analysis accordion toggle */
.analysis-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.875rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}
.analysis-toggle:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

/* ── Ingredient detail drawer ── */

/* Spring slide-up enter */
@keyframes ingDrawerIn {
    0%   { transform: translateX(-50%) translateY(100%); }
    62%  { transform: translateX(-50%) translateY(-7px); }
    80%  { transform: translateX(-50%) translateY(3px); }
    100% { transform: translateX(-50%) translateY(0); }
}
@keyframes ingDrawerOut {
    0%   { transform: translateX(-50%) translateY(0); }
    100% { transform: translateX(-50%) translateY(100%); }
}
.ing-drawer-panel {
    transform: translateX(-50%) translateY(0);
}
.ing-drawer-panel[x-show]:not([style*="display: none"]) {
    animation: ingDrawerIn 0.44s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Header gradients by severity */
.ing-header-danger  { background: linear-gradient(140deg, #dc2626 0%, #991b1b 100%); }
.ing-header-warning { background: linear-gradient(140deg, #d97706 0%, #92400e 100%); }
.ing-header-positive{ background: linear-gradient(140deg, #16a34a 0%, #15803d 100%); }
.ing-header-default { background: linear-gradient(140deg, #1e293b 0%, #0f172a 100%); }

/* Severity accent stripe on panel */
.ing-panel-danger  { box-shadow: 0 -4px 0 0 #dc2626, 0 -25px 60px rgba(220,38,38,0.12); }
.ing-panel-warning { box-shadow: 0 -4px 0 0 #d97706, 0 -25px 60px rgba(217,119,6,0.12); }
.ing-panel-positive{ box-shadow: 0 -4px 0 0 #16a34a, 0 -25px 60px rgba(22,163,74,0.12); }
.ing-panel-default { box-shadow: 0 -4px 0 0 #334155, 0 -25px 60px rgba(15,23,42,0.14); }

/* Meta badges */
.ing-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    padding: 0.22rem 0.6rem;
    border-radius: 9999px;
    border: 1px solid transparent;
}
.ing-badge-gray   { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.ing-badge-blue   { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.ing-badge-green  { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.ing-badge-red    { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.ing-badge-amber  { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.ing-badge-orange { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }

/* AI assessment card */
.ing-assessment-card {
    padding: 0.875rem 1rem;
    border-radius: 0.875rem;
    border: 1px solid;
}
.ing-assessment-positive { background: #f0fdf4; border-color: #bbf7d0; }
.ing-assessment-negative { background: #fef2f2; border-color: #fecaca; }
.ing-assessment-neutral  { background: #f8fafc; border-color: #e2e8f0; }

/* Flagged concern card — left accent border */
.ing-concern-card {
    border-radius: 0.875rem;
    padding: 1rem 1rem 1rem 0.875rem;
    border: 1px solid;
    border-left-width: 4px;
}
.ing-concern-danger  { background: #fef2f2; border-color: #fecaca; border-left-color: #ef4444; }
.ing-concern-warning { background: #fffbeb; border-color: #fde68a; border-left-color: #f59e0b; }
.ing-concern-info    { background: #f0f9ff; border-color: #bae6fd; border-left-color: #3b82f6; }

/* Concern icon pill */
.ing-concern-icon {
    width: 2rem; height: 2rem;
    border-radius: 0.5rem;
    display: flex; align-items: center; justify-content: center;
}
.ing-concern-icon-danger  { background: #fee2e2; color: #dc2626; }
.ing-concern-icon-warning { background: #fef3c7; color: #d97706; }
.ing-concern-icon-info    { background: #dbeafe; color: #2563eb; }

/* "Who should take caution" tags */
.ing-affect-tag {
    font-size: 0.69rem; font-weight: 500;
    padding: 0.18rem 0.55rem;
    border-radius: 9999px;
    background: white; border: 1px solid #e2e8f0; color: #64748b;
}

/* Description block */
.ing-desc-block {
    background: #f8fafc; border: 1px solid #f1f5f9;
    border-radius: 0.875rem; padding: 1rem;
}

/* Learn-more 2-up grid buttons */
.ing-learn-btn {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.78rem; font-weight: 500;
    padding: 0.6rem 0.875rem;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    color: #374151; background: #f9fafb;
    transition: all 0.15s ease;
    text-decoration: none;
}
.ing-learn-btn:hover {
    border-color: #16a34a; color: #15803d;
    background: #f0fdf4;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    text-decoration: none;
}

/* ── Share sheet ── */
.share-platform-btn {
    display: flex; flex-direction: column; align-items: center; gap: 0.375rem;
    background: none; border: none; cursor: pointer;
    transition: transform 0.12s ease;
}
.share-platform-btn:hover { transform: translateY(-2px); }
.share-platform-btn span {
    font-size: 0.65rem; font-weight: 600; color: #4b5563; text-align: center; line-height: 1.2;
}
.share-platform-icon {
    width: 3rem; height: 3rem;
    border-radius: 0.875rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.share-list-btn {
    display: flex; align-items: center; gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 0.875rem;
    font-size: 0.8rem; font-weight: 600; color: #374151;
    cursor: pointer; transition: all 0.12s ease;
}
.share-list-btn:hover { background: #f3f4f6; border-color: #d1d5db; }

/* ── Reviews ── */
.review-card {
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 1rem;
    padding: 1rem 1.25rem;
    transition: box-shadow 0.15s ease;
}
.review-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.06); }

.star-btn {
    background: none; border: none; padding: 0.1rem;
    cursor: pointer; color: #d1d5db; font-size: 1.4rem;
    transition: color 0.1s, transform 0.1s;
    line-height: 1;
}
.star-btn:hover,
.star-btn.active { color: #f59e0b; transform: scale(1.15); }

.rating-bar-track {
    flex: 1; height: 6px; background: #f1f5f9;
    border-radius: 9999px; overflow: hidden;
}
.rating-bar-fill {
    height: 100%; background: #f59e0b;
    border-radius: 9999px; transition: width 0.3s ease;
}

.avoid-toggle {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.4rem 0.875rem; border-radius: 0.625rem;
    border: 1.5px solid #e2e8f0; font-size: 0.78rem; font-weight: 600;
    cursor: pointer; transition: all 0.15s ease; user-select: none;
    color: #64748b; background: #f8fafc;
}
.avoid-toggle.active {
    border-color: #fecaca; color: #b91c1c; background: #fef2f2;
}

/* ── Product signals: "was this helpful" + "does your pack match" ──
   One card with a tinted head and two panes. It sits between the analysis and the reader reviews
   and has to read as an invitation rather than as page furniture — the earlier flat grey boxes were
   the thing a reader's eye skipped on the way past. */
.signal-card {
    background: #fff;
    border: 1px solid #e8edf3;
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04), 0 8px 24px -12px rgba(16, 24, 40, 0.10);
}

.signal-card-head {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.9rem 1.25rem;
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.09), rgba(34, 197, 94, 0.02));
    border-bottom: 1px solid #eef2f7;
}
.signal-card-head-icon {
    width: 2rem; height: 2rem; border-radius: 0.625rem;
    background: rgba(34, 197, 94, 0.14); color: #15803d;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.signal-signin-top {
    margin-left: auto; flex-shrink: 0;
    font-size: 0.75rem; font-weight: 700; color: #15803d;
    padding: 0.35rem 0.75rem; border-radius: 0.5rem;
    background: rgba(34, 197, 94, 0.12); transition: background 0.15s ease;
}
.signal-signin-top:hover { background: rgba(34, 197, 94, 0.22); }

/* Two panes, divided rather than boxed — one card, two halves. */
.signal-card-body { display: grid; grid-template-columns: 1fr; }
@media (min-width: 768px) {
    .signal-card-body { grid-template-columns: 1fr 1fr; }
    .signal-pane + .signal-pane { border-left: 1px solid #eef2f7; border-top: 0; }
}
.signal-pane { padding: 1.25rem 1.35rem 1.4rem; }
.signal-pane + .signal-pane { border-top: 1px solid #eef2f7; }

.signal-q   { font-size: 0.9rem; font-weight: 700; color: #0f172a; }
.signal-sub { font-size: 0.78rem; color: #64748b; margin-top: 0.3rem; line-height: 1.5; }

.signal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.9rem; }

.signal-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.45rem 0.9rem; border-radius: 0.625rem;
    border: 1.5px solid #e2e8f0; background: #fff;
    font-size: 0.8rem; font-weight: 600; color: #475569;
    cursor: pointer; transition: all 0.15s ease; user-select: none;
}
.signal-btn:hover:not(:disabled):not(.signal-btn-locked) {
    border-color: #cbd5e1; background: #f8fafc; color: #1e293b;
}
.signal-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* The reader's own standing choice. Both buttons stay visible so the answer is always changeable. */
.signal-btn-on {
    border-color: #86efac; background: #f0fdf4; color: #15803d;
    box-shadow: inset 0 0 0 1px rgba(134, 239, 172, 0.5);
}

/* The mismatch path is the one we actually want to hear about, so it reads as a real choice rather
   than a complaint — amber, not red. Red would make reporting an error feel like an accusation and
   suppress exactly the reports that are worth having. */
.signal-btn-warn { border-color: #fde68a; color: #b45309; background: #fffbeb; }
.signal-btn-warn:hover:not(:disabled) { border-color: #fcd34d; background: #fef3c7; color: #92400e; }

/* Signed out: the controls are shown, inert, so a guest can see exactly what is on offer. */
.signal-btn-locked { opacity: 0.55; cursor: default; }

.signal-signin {
    display: inline-block; margin-top: 0.7rem;
    font-size: 0.78rem; font-weight: 700; color: #16a34a;
}
.signal-signin:hover { text-decoration: underline; }

.signal-you {
    display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap;
    margin-top: 0.7rem; font-size: 0.78rem; font-weight: 600; color: #15803d;
}
.signal-you-hint { font-weight: 500; color: #94a3b8; }

.signal-tally { margin-top: 0.75rem; font-size: 0.75rem; color: #64748b; }

/* The reader's standing label report, shown back to them. */
.signal-standing { margin-top: 0.9rem; padding: 0.75rem 0.9rem; border-radius: 0.75rem; border: 1px solid; }
.signal-standing-ok   { background: #f0fdf4; border-color: #bbf7d0; }
.signal-standing-warn { background: #fffbeb; border-color: #fde68a; }
.signal-standing-head {
    display: flex; align-items: center; gap: 0.35rem;
    font-size: 0.78rem; font-weight: 700; color: #0f172a;
}
.signal-standing-note {
    margin-top: 0.4rem; font-size: 0.78rem; color: #475569; line-height: 1.5;
    overflow-wrap: anywhere;
}
.signal-edit {
    margin-top: 0.55rem; font-size: 0.74rem; font-weight: 700; color: #0f766e;
    background: none; border: none; padding: 0; cursor: pointer;
}
.signal-edit:hover { text-decoration: underline; }

.signal-form { margin-top: 0.9rem; }
.signal-label {
    display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: #64748b; margin-bottom: 0.4rem;
}
.signal-textarea {
    width: 100%; padding: 0.65rem 0.8rem; border-radius: 0.75rem;
    border: 1px solid #e2e8f0; font-size: 0.82rem; resize: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.signal-textarea:focus {
    outline: none; border-color: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}
.signal-count { font-size: 0.68rem; color: #94a3b8; text-align: right; margin-top: 0.2rem; }
.signal-file  { display: block; width: 100%; font-size: 0.72rem; color: #64748b; cursor: pointer; }
.signal-file::file-selector-button {
    margin-right: 0.6rem; padding: 0.4rem 0.7rem; border: 0; border-radius: 0.5rem;
    font-size: 0.72rem; font-weight: 700; cursor: pointer;
    background: rgba(34, 197, 94, 0.12); color: #15803d;
}
.signal-hint { font-size: 0.68rem; color: #94a3b8; margin-top: 0.3rem; }

.signal-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 0.9rem; }
.signal-submit {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.5rem 1rem; border-radius: 0.625rem; border: 0;
    background: #16a34a; color: #fff; font-size: 0.8rem; font-weight: 700;
    cursor: pointer; transition: opacity 0.15s ease;
}
.signal-submit:disabled { opacity: 0.4; cursor: not-allowed; }
.signal-cancel {
    background: none; border: 0; padding: 0.5rem 0.25rem; cursor: pointer;
    font-size: 0.8rem; color: #64748b;
}
.signal-cancel:hover { color: #0f172a; }
.signal-withdraw {
    margin-left: auto; background: none; border: 0; padding: 0; cursor: pointer;
    font-size: 0.74rem; font-weight: 600; color: #0f766e;
}
.signal-withdraw:hover { text-decoration: underline; }

.signal-thanks { margin-top: 0.8rem; font-size: 0.8rem; font-weight: 600; color: #15803d; }
.signal-error  { margin-top: 0.5rem; font-size: 0.74rem; color: #dc2626; }

/* ── Image upload zones ── */
.upload-zone {
    border: 2px dashed #cbd5e1;
    border-radius: 1rem;
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #f8fafc;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.upload-zone:hover,
.upload-zone.drag-over {
    border-color: #16a34a;
    background: #f0fdf4;
}
.upload-zone input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}
.upload-preview {
    width: 100%;
    height: 160px;
    object-fit: contain;
    border-radius: 0.5rem;
}

/* ── Legal pages prose ── */
.prose-legal { color: #374151; line-height: 1.75; }
.prose-legal h2 {
    font-size: 1.25rem; font-weight: 800; color: #0f172a;
    margin-top: 2.5rem; margin-bottom: 0.75rem;
    padding-bottom: 0.5rem; border-bottom: 2px solid #f1f5f9;
}
.prose-legal h3 {
    font-size: 1rem; font-weight: 700; color: #1e293b;
    margin-top: 1.5rem; margin-bottom: 0.5rem;
}
.prose-legal p  { margin-bottom: 1rem; font-size: 0.925rem; }
.prose-legal ul { margin-bottom: 1rem; padding-left: 1.5rem; list-style: disc; }
.prose-legal li { margin-bottom: 0.375rem; font-size: 0.925rem; }
.prose-legal a  { color: #16a34a; font-weight: 500; text-decoration: underline; }
.prose-legal a:hover { color: #15803d; }
.prose-legal address { font-style: normal; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 0.875rem; padding: 1rem 1.25rem; margin-top: 0.5rem; font-size: 0.9rem; line-height: 1.8; }
.prose-legal table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.875rem; }
.prose-legal thead tr { background: #f8fafc; }
.prose-legal th { text-align: left; padding: 0.75rem 1rem; font-weight: 700; color: #1e293b; border-bottom: 2px solid #e2e8f0; }
.prose-legal td { padding: 0.75rem 1rem; border-bottom: 1px solid #f1f5f9; color: #374151; vertical-align: top; }
.prose-legal strong { color: #0f172a; font-weight: 700; }

/* Legal TOC */
.legal-toc {
    background: #f8fafc; border: 1px solid #e2e8f0;
    border-radius: 1rem; padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
}
.legal-toc p { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #94a3b8; margin-bottom: 0.75rem; }
.legal-toc ol { list-style: decimal; padding-left: 1.25rem; }
.legal-toc li { margin-bottom: 0.25rem; }
.legal-toc a  { font-size: 0.85rem; color: #475569; text-decoration: none; font-weight: 500; }
.legal-toc a:hover { color: #16a34a; }

/* ── Search tabs ── */
.search-tab {
    padding: 0.5rem 1.25rem;
    border-radius: 0.625rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    color: #64748b;
}
.search-tab.active {
    background: #16a34a;
    color: #fff;
    border-color: #16a34a;
    box-shadow: 0 4px 12px rgba(22,163,74,0.3);
}
.search-tab:not(.active):hover {
    background: #f0fdf4;
    color: #15803d;
    border-color: #bbf7d0;
}

/* ── Score breakdown bars ── */
.score-bar-track {
    height: 6px;
    background: #f1f5f9;
    border-radius: 9999px;
    overflow: hidden;
}
.score-bar-fill {
    height: 100%;
    border-radius: 9999px;
    transition: width 1s cubic-bezier(0.16,1,0.3,1);
}

/* ── Justified card body copy ─────────────────────────────────────────────────
   Card prose is justified site-wide.

   Scoped to `p.leading-relaxed`, which is how this codebase marks running body copy,
   and NOT applied as a blanket `.card p` rule. That distinction is load-bearing:
   `text-align: justify` stretches every line except the last, so applying it to the
   short strings that also live in cards actively damages them — the uppercase
   ingredient label in .ing-concern-card, the reviewer name and date in .review-card,
   the headline in .summary-card, and product tile titles, which are two-line names
   whose first line would be pulled apart. Those are all excluded by this selector.

   `hyphens: auto` is not optional here: these are ~300-430px columns, and justifying
   a column that narrow without hyphenation opens rivers of white space between words.
   It relies on <html lang>, which the layout sets. */
.feature-card p.leading-relaxed,
.step-card p.leading-relaxed,
.testimonial-card p.leading-relaxed,
.ing-assessment-card p.leading-relaxed,
.ing-concern-card p.leading-relaxed,
/* Two prose blocks that predate the leading-relaxed convention and so need naming.
   .summary-plain is the plain-English verdict — NOT .summary-headline above it.
   In .alert-card the size class is the tell: prose is text-sm, while the uppercase
   ingredient label and the "Source:" citation are text-xs and stay ragged-right. */
.summary-card p.summary-plain,
.alert-card p.text-sm {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* ── Footer link columns ──────────────────────────────────────────────────────
   Collapsed on phones (Alpine x-show), always open from md.

   🚨 The !important is load-bearing and not laziness. x-show writes an INLINE
   display, and [x-cloak] sets one too; nothing but !important outranks either.
   The first cut left desktop visibility to Alpine state initialised from
   matchMedia, and the footer rendered with all three columns shut whenever the
   script evaluated x-data before the viewport settled — a race the layout has no
   business depending on. This rule makes "open on desktop" true before any
   script runs, which also covers the pre-boot frame and the no-JS reader. */
@media (min-width: 768px) {
    footer .footer-links { display: block !important; }
}

/* Product page reference tabs. md and up only; below md every panel stays visible and the
   existing accordions do the work. `.tabs-on` is added by Alpine, so with no JS nothing hides. */
@media (min-width: 768px) {
    .tabs-on .tab-panel:not(.is-active) { display: none; }
}

/* Product page tab bodies: one card treatment for every tab. In tab mode the tab IS the disclosure,
   so the accordion furniture goes — no coloured rail, no chevron, no click target — and the header
   becomes a plain title + the finding line (the accordion hides that line while open; here it stays).
   md+ only; below md the accordions are untouched. */
@media (min-width: 768px) {
    .tabs-on .tab-panel .cs-root { border-color: #e5e7eb; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
    .tabs-on .tab-panel .cs-rail,
    .tabs-on .tab-panel .cs-chevron { display: none !important; }
    .tabs-on .tab-panel .cs-head { pointer-events: none; cursor: default; padding: 1.25rem 1.5rem 1.1rem !important; align-items: center; }
    .tabs-on .tab-panel .cs-head:hover { background: transparent; }
    .tabs-on .tab-panel .cs-icon {
        display: inline-flex; align-items: center; justify-content: center;
        width: 2.5rem; height: 2.5rem; margin-top: 0 !important; border-radius: .75rem;
        background: #f0fdf4; color: #15803d !important;
    }
    .tabs-on .tab-panel .cs-icon svg { width: 1.2rem !important; height: 1.2rem !important; }
    .tabs-on .tab-panel .cs-title { font-size: 1.0625rem; }
    .tabs-on .tab-panel .cs-summary { display: block !important; font-size: .8125rem; margin-top: .15rem; }
    .tabs-on .tab-panel .cs-body > div { padding: 1.5rem !important; background: #fff; }
    /* the claim partial repeats the tab and card name above its own tally chip */
    .tabs-on .tab-panel .tab-dup-head { display: none; }
    /* Overview concern card: same header as the others, content inset to match their body padding */
    .tabs-on .tab-panel .concern-card { padding: 0 !important; border-color: #e5e7eb; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
    .tabs-on .tab-panel .tab-only-head {
        display: flex; align-items: center; gap: .75rem;
        padding: 1.25rem 1.5rem 1.1rem; border-bottom: 1px solid #f3f4f6;
    }
    .tabs-on .tab-panel .tab-only-icon {
        display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
        width: 2.5rem; height: 2.5rem; border-radius: .75rem; background: #f0fdf4; color: #15803d;
    }
    .tabs-on .tab-panel .tab-only-icon svg { width: 1.2rem; height: 1.2rem; }
    .tabs-on .tab-panel .tab-only-title { display: block; font-size: 1.0625rem; font-weight: 800; letter-spacing: -.01em; color: #111827; line-height: 1.3; }
    .tabs-on .tab-panel .tab-only-sub { display: block; font-size: .8125rem; color: #6b7280; margin-top: .15rem; }
    .tabs-on .tab-panel .concern-card > :not(.tab-only-head) { margin-left: 1.5rem; margin-right: 1.5rem; }
    .tabs-on .tab-panel .concern-card > .tab-only-head + * { margin-top: 1.25rem; }
    .tabs-on .tab-panel .concern-card > :last-child { margin-bottom: 1.5rem; }
    .tabs-on .tab-panel .tab-card-row,
    .tabs-on .tab-panel .tab-card-cap { display: none; }
}
/* Outside tab mode the tab-only header never shows. */
.tab-only-head { display: none; }

/* Ingredients tab: count tiles + one label-order list (md+ inside a tab); the accordion groups are the
   phone / no-JS rendering. Both are in the DOM; .tabs-on decides which one shows. */
.ing-flat { display: none; }
@media (min-width: 768px) {
    .tabs-on .ing-flat { display: block; }
    .tabs-on .ing-groups { display: none; }
}

/* Summary card prose clamp: At a glance carries the findings, so the narrative opens short. */
.summary-clamp {
    max-height: 4.6rem; overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}