/* ============================================================
   HealthyGreens — Design System
   Type: Sora (display) / Inter (body)
   Palette: Ink navy, Forest green, Clay terracotta
   ============================================================ */

:root{
  --ink:        #12283D;
  --ink-70:     #3E5C76;
  --forest:     #2E9E4F;
  --forest-dark:#227A3D;
  --clay:       #E8734A;
  --clay-dark:  #CF5C34;
  --mint:       #DFF4E5;
  --mint-deep:  #CDEBD6;
  --sand:       #F1F5F0;
  --paper:      #FAFAF7;
  --peach:      #FCEAE1;
  --charcoal:   #24303A;
  --slate:      #6B7280;
  --line:       #E2E5E1;

  --ok:         #3CB371;
  --warn:       #F0A93C;
  --danger:     #D64545;

  --font-display: 'Sora', sans-serif;
  --font-body: 'Inter', sans-serif;

  --maxw: 1180px;
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 28px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body{
  margin:0;
  font-family: var(--font-body);
  color: var(--charcoal);
  background: var(--paper);
  line-height: 1.55;
  font-size: 16px;
}

h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 0.5em;
  font-weight: 600;
  letter-spacing: -0.01em;
}

h1{ font-size: clamp(2.3rem, 4.2vw, 3.6rem); font-weight: 700; }
h2{ font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
h3{ font-size: 1.25rem; }

p{ margin: 0 0 1em; color: var(--ink-70); max-width: 62ch; }
a{ color: var(--forest-dark); }

img{ max-width: 100%; display:block; }

.container{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
}

section{ padding: 96px 0; }
@media (max-width: 720px){ section{ padding: 64px 0; } }

.section-alt{ background: var(--sand); }
.section-ink{ background: var(--ink); color: #fff; }
.section-ink h2, .section-ink h3{ color:#fff; }
.section-ink p{ color: #C7D4DE; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-display); font-weight:600;
  font-size: 0.8rem; color: var(--forest-dark);
  margin-bottom: 14px;
}
.eyebrow::before{
  content:""; width: 18px; height: 2px; background: var(--clay); display:inline-block;
}

.lede{ font-size: 1.15rem; max-width: 56ch; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem;
  padding: 13px 26px; border-radius: 999px; text-decoration:none;
  border: 1.5px solid transparent; cursor:pointer; transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--forest); color:#fff; }
.btn-primary:hover{ background: var(--forest-dark); }
.btn-accent{ background: var(--clay); color:#fff; }
.btn-accent:hover{ background: var(--clay-dark); }
.btn-outline{ background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-outline:hover{ background: var(--ink); color:#fff; }
.btn-outline-light{ background: transparent; border-color: rgba(255,255,255,.5); color:#fff; }
.btn-outline-light:hover{ background: rgba(255,255,255,.12); border-color:#fff; }
.btn-ghost{ background: transparent; color: var(--ink); padding: 13px 6px; }
.btn-block{ width:100%; }

/* ---------- Nav ---------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(250,250,247,0.9); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav{
  display:flex; 
  align-items:center; 
  justify-content: space-between;
  padding: 16px 28px; 
  max-width: var(--maxw); 
  margin: 0 auto;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-display); font-weight:700; font-size:1.15rem;
  color: var(--ink); text-decoration:none;
}
.brand svg{ flex-shrink:0; }
.nav-links{
  display:flex; align-items:center; gap: 30px; list-style:none; margin:0; padding:0;
}
.nav-links a{
  color: var(--ink); text-decoration:none; font-weight:500; font-size: 0.95rem;
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.nav-links a:hover, .nav-links a.active{ border-color: var(--clay); }
.nav-cta{ display:flex; align-items:center; gap:16px; }
.nav-toggle{
  display:none; background:none; border:none; cursor:pointer; padding: 6px;
}
.nav-toggle span{ display:block; width:24px; height:2px; background: var(--ink); margin: 5px 0; }

@media (max-width: 900px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0; background: var(--paper);
    flex-direction: column; align-items: flex-start; gap:0;
    border-bottom: 1px solid var(--line);
    max-height:0; overflow:hidden; transition: max-height .25s ease;
  }
  .nav-links.open{ max-height: 420px; }
  .nav-links li{ width:100%; }
  .nav-links a{ display:block; padding: 14px 28px; width:100%; border-bottom:1px solid var(--line); }
  .nav-toggle{ display:block; }
  .nav-cta{ display:none; }
}

/* ---------- Hero ---------- */
.hero{
  padding: 64px 0 96px;
  overflow: hidden;
}
.hero-grid{
  display:grid; 
  grid-template-columns: 1.05fr 0.95fr; 
  gap: 56px; 
  /* align-items:center; */
  align-items: start;
  /* justify-content: center; */
  /* border: 2px solid black; */
}
@media (max-width: 900px){ .hero-grid{ grid-template-columns: 1fr; gap: 40px; } }

.word-span-green{
  color: var(--forest-dark);
}

.word-span-clay{
  color: var(--clay-dark);
}

.hero-media{
  position:relative;
  border-radius: var(--radius-l);
  overflow:hidden;
  box-shadow: 0 24px 60px -20px rgba(18,40,61,0.35);
  /* background-color: red; */
}
.hero-media img{ 
  width:100%; 
  height:100%; 
  object-fit: cover; }

.stat-row{
  display:flex; gap: 40px; margin-top: 36px; flex-wrap: wrap;
}
.stat-row .stat b{
  display:block; font-family: var(--font-display); font-size: 1.7rem; color: var(--ink);
}
.stat-row .stat span{ color: var(--slate); font-size: 0.88rem; }

/* ---------- Grids & Cards ---------- */
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-2{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.grid-4{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 900px){
  .grid-3, .grid-2, .grid-4{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px){
  .grid-3, .grid-2, .grid-4{ grid-template-columns: 1fr; }
}

.feature-card{
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--forest);
  border-radius: var(--radius-s);
  padding: 28px 26px;
}
.feature-card h3{ margin-bottom: 8px; }
.feature-card p{ margin-bottom: 0; font-size: 0.95rem; }
.feature-card.accent{ border-left-color: var(--clay); }

.section-head{
  display:flex; justify-content: space-between; align-items:flex-end; gap: 24px;
  margin-bottom: 48px;
}
@media (max-width: 700px){ .section-head{ flex-direction:column; align-items:flex-start; } }

/* ---------- Numbered steps (real sequence) ---------- */
.steps{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 26px;
  counter-reset: step;
}
@media (max-width: 900px){ .steps{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .steps{ grid-template-columns: 1fr; } }
.step{ position:relative; padding-top: 8px; }
.step-num{
  counter-increment: step;
  font-family: var(--font-display); font-weight:700; font-size: 0.85rem;
  color:#fff; background: var(--ink);
  width: 30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 16px;
}
.step-num::before{ content: counter(step); }

/* ---------- Banner / CTA ---------- */
.cta-banner{
  position:relative; border-radius: var(--radius-l); overflow:hidden;
  background-size: cover; background-position:center;
  padding: 72px 56px; color:#fff;
}
.cta-banner::before{
  content:""; position:absolute; inset:0; background: linear-gradient(120deg, rgba(18,40,61,0.92), rgba(18,40,61,0.55));
}
.cta-banner-inner{ position:relative; max-width: 620px; }
.cta-banner h2{ color:#fff; }
.cta-banner p{ color: #DCE6EA; }

/* ---------- Forms ---------- */
.form-field{ margin-bottom: 20px; }
.form-field label{
  display:block; font-weight:600; font-size:0.88rem; margin-bottom:6px; color: var(--ink);
}
.form-field input, .form-field select, .form-field textarea{
  width:100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-s);
  font-family: var(--font-body); font-size: 0.95rem; background:#fff; color: var(--charcoal);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  outline: none; border-color: var(--forest);
}
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 620px){ .form-row{ grid-template-columns: 1fr; } }

.inline-signup{
  display:flex; gap: 12px; max-width: 480px; margin-top: 4px;
}
.inline-signup input{
  flex:1; padding: 13px 16px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.08); color:#fff; font-size: 0.95rem;
}
.inline-signup input::placeholder{ color: #C7D4DE; }
.inline-signup input:focus{ outline:none; border-color:#fff; }
@media (max-width: 480px){ .inline-signup{ flex-direction:column; } }

.form-success{
  display:none; background: var(--mint); border: 1px solid var(--forest); border-radius: var(--radius-s);
  padding: 16px 20px; color: var(--forest-dark); font-weight:600; margin-top: 14px;
}
.form-success.show{ display:block; }

/* ---------- Tabs ---------- */
.tabs{ display:flex; gap: 8px; margin-bottom: 32px; border-bottom: 1px solid var(--line); }
.tab-btn{
  background:none; border:none; padding: 12px 4px; margin-right: 28px;
  font-family: var(--font-display); font-weight:600; color: var(--slate); cursor:pointer;
  border-bottom: 2px solid transparent; font-size: 0.98rem;
}
.tab-btn.active{ color: var(--ink); border-color: var(--clay); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

/* ---------- Accordion (FAQ) ---------- */
.accordion-item{ border-bottom: 1px solid var(--line); }
.accordion-trigger{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding: 22px 0; display:flex; justify-content:space-between; align-items:center; gap: 20px;
  font-family: var(--font-display); font-weight:600; font-size: 1.02rem; color: var(--ink);
}
.accordion-icon{
  flex-shrink:0; width: 22px; height:22px; position:relative;
}
.accordion-icon::before, .accordion-icon::after{
  content:""; position:absolute; background: var(--ink); border-radius: 2px;
}
.accordion-icon::before{ width: 14px; height:2px; top:10px; left:4px; }
.accordion-icon::after{ width:2px; height:14px; top:4px; left:10px; transition: transform .2s ease; }
.accordion-item.open .accordion-icon::after{ transform: rotate(90deg); }
.accordion-panel{ max-height:0; overflow:hidden; transition: max-height .25s ease; }
.accordion-item.open .accordion-panel{ max-height: 400px; }
.accordion-panel-inner{ padding-bottom: 22px; }

/* ---------- Disease library cards ---------- */
.disease-toolbar{
  display:flex; gap: 14px; flex-wrap:wrap; margin-bottom: 40px;
}
.chip{
  border: 1.5px solid var(--line); background:#fff; border-radius: 999px;
  padding: 9px 18px; font-size: 0.88rem; font-weight:600; color: var(--ink-70);
  cursor:pointer;
}
.chip.active{ background: var(--ink); color:#fff; border-color: var(--ink); }

.disease-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius-m);
  overflow:hidden;
}
.disease-card .tag{
  display:inline-block; font-size: 0.72rem; font-weight:700; letter-spacing:.02em;
  padding: 4px 10px; border-radius: 999px; margin-bottom: 10px;
}
.tag-fungal{ background: var(--peach); color: var(--clay-dark); }
.tag-pest{ background: var(--mint); color: var(--forest-dark); }
.tag-abiotic{ background: var(--sand); color: var(--ink-70); border:1px solid var(--line); }
.disease-card-body{ padding: 22px 22px 24px; }
.disease-card h3{ margin-bottom: 6px; }
.disease-card .latin{ font-style: italic; color: var(--slate); font-size:0.85rem; margin-bottom: 12px; display:block; }

/* ---------- Founder / about ---------- */
.value-row{ display:flex; gap: 18px; margin-bottom: 26px; }
.value-row .dot{
  flex-shrink:0; width: 8px; height:8px; border-radius:50%; background: var(--clay); margin-top: 9px;
}

.timeline{ border-left: 2px solid var(--line); padding-left: 30px; }
.timeline-item{ position:relative; padding-bottom: 40px; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{
  content:""; position:absolute; left:-36px; top:2px; width:12px; height:12px; border-radius:50%;
  background: var(--forest); border: 3px solid var(--mint);
}
.timeline-item .when{ font-family: var(--font-display); font-weight:700; color: var(--clay-dark); font-size:0.85rem; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--ink); color: #C7D4DE; padding: 72px 0 28px; }
.footer-grid{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 56px;
}
@media (max-width: 800px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .footer-grid{ grid-template-columns: 1fr; } }
.site-footer .brand{ color:#fff; margin-bottom: 14px; }
.site-footer h4{ color:#fff; font-size: 0.85rem; letter-spacing: .02em; margin-bottom: 18px; }
.site-footer ul{ list-style:none; margin:0; padding:0; }
.site-footer li{ margin-bottom: 12px; }
.site-footer a{ color: #C7D4DE; text-decoration:none; font-size:0.92rem; }
.site-footer a:hover{ color:#fff; }
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,0.12); padding-top: 26px;
  display:flex; justify-content: space-between; align-items:center; flex-wrap:wrap; gap:16px;
  font-size: 0.85rem; color: #93A6B4;
}
.footer-legal{ display:flex; gap: 20px; flex-wrap: wrap; }
.site-footer .footer-legal a{ font-size: 0.85rem; }
.footer-social{ display:flex; gap: 14px; }
.footer-social a{
  width: 34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,0.2);
  display:flex; align-items:center; justify-content:center;
}

/* ---------- Misc ---------- */
.badge-pill{
  display:inline-flex; align-items:center; gap:8px; background: var(--mint);
  color: var(--forest-dark); font-weight:600; font-size:0.82rem; padding: 7px 16px; border-radius:999px;
  margin-bottom: 18px;
}
.blob-bg{
  position:relative;
}
.divider-space{ height: 1px; background: var(--line); }

.two-col{ display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items:center; }
@media (max-width: 860px){ .two-col{ grid-template-columns: 1fr; gap: 32px; } }
.two-col.reverse .col-media{ order: 2; }
@media (max-width: 860px){ .two-col.reverse .col-media{ order: 0; } }

.rounded-media{ border-radius: var(--radius-l); overflow:hidden; }
.rounded-media img{ width:100%; }

.page-hero{
  padding: 56px 0 40px;
  text-align:left;
}
.page-hero .lede{ margin-top: 10px; }

/* ---------- Legal pages (privacy policy, terms) ---------- */
.legal-section{ padding-top: 8px; }
.legal{ max-width: 780px; }
.legal h2{ font-size: 1.45rem; margin: 48px 0 16px; scroll-margin-top: 96px; }
.legal h2:first-child{ margin-top: 0; }
.legal h3{ font-size: 1.05rem; margin: 28px 0 10px; }
.legal p{ max-width: none; }
.legal ul{ margin: 0 0 1.2em; padding-left: 1.3em; color: var(--ink-70); }
.legal li{ margin-bottom: 8px; }
.legal li::marker{ color: var(--forest); }
.legal strong{ color: var(--ink); }
.legal .table-wrap{ margin: 8px 0 24px; }
.legal .docs-table th:first-child{ width: 30%; }
.legal-contact{ background: var(--sand); border-left: 3px solid var(--forest); border-radius: var(--radius-s); padding: 14px 18px; }

.mini-list{ margin: 0 0 24px; padding: 0; list-style:none; }
.mini-list li{
  position:relative; padding-left: 26px; margin-bottom: 10px; color: var(--ink-70); font-size:0.96rem;
}
.mini-list li::before{
  content:""; position:absolute; left:0; top:8px; width:8px; height:8px; border-radius:50%; background: var(--forest);
}

.tier-note{
  background: var(--sand); border: 1px dashed var(--line); border-radius: var(--radius-s);
  padding: 20px 22px; font-size: 0.9rem; color: var(--ink-70);
}

::selection{ background: var(--mint-deep); }

/* ============================================================
   API Documentation page
   ============================================================ */
:root{
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.docs-layout{
  display:grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; align-items:start;
}
@media (max-width: 900px){ .docs-layout{ grid-template-columns: minmax(0, 1fr); gap: 0; } }

.docs-toc{
  position: sticky; top: 96px;
  border-left: 2px solid var(--line); padding-left: 18px;
}
.docs-toc h4{ font-size: 0.78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); margin-bottom: 14px; }
.docs-toc ul{ list-style:none; margin:0; padding:0; }
.docs-toc li{ margin-bottom: 10px; }
.docs-toc a{ color: var(--ink-70); text-decoration:none; font-size: 0.92rem; font-weight:500; }
.docs-toc a:hover, .docs-toc a.active{ color: var(--forest-dark); }
@media (max-width: 900px){ .docs-toc{ display:none; } }

.docs-section{ padding: 0 0 64px; scroll-margin-top: 96px; }
.docs-section + .docs-section{ border-top: 1px solid var(--line); padding-top: 56px; }
.docs-section h2{ margin-bottom: 14px; }
.docs-section h3{ margin: 32px 0 12px; }
.docs-section p{ max-width: 72ch; }

code, .mono{ font-family: var(--font-mono); font-size: 0.88em; }
p code, li code, td code{
  background: var(--sand); border: 1px solid var(--line); border-radius: 6px;
  padding: 1px 6px; color: var(--ink); word-break: break-word;
}

/* Endpoint bar */
.endpoint-bar{
  display:flex; align-items:center; gap: 14px; flex-wrap: wrap;
  background:#fff; border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: 14px 16px; margin: 18px 0 8px;
}
.method{
  font-family: var(--font-display); font-weight:700; font-size: 0.78rem; letter-spacing:.04em;
  padding: 5px 12px; border-radius: 999px; background: var(--mint); color: var(--forest-dark);
}
.endpoint-url{ font-family: var(--font-mono); font-size: 0.92rem; color: var(--ink); flex: 1; word-break: break-all; }

.copy-btn{
  background:#fff; border: 1.5px solid var(--line); border-radius: 999px; cursor:pointer;
  font-family: var(--font-display); font-weight:600; font-size: 0.78rem; color: var(--ink-70);
  padding: 6px 14px; transition: border-color .2s ease, color .2s ease;
}
.copy-btn:hover{ border-color: var(--ink); color: var(--ink); }
.copy-btn.copied{ border-color: var(--forest); color: var(--forest-dark); }

/* Code blocks */
.code-block{
  position:relative; background: var(--ink); border-radius: var(--radius-m);
  margin: 12px 0 8px; overflow:hidden;
}
.code-block pre{
  margin:0; padding: 22px 22px; overflow:auto; max-height: 560px;
  font-family: var(--font-mono); font-size: 0.85rem; line-height: 1.6; color: #E6EEF3;
}
.code-block .copy-btn{
  position:absolute; top: 8px; right: 12px;
  z-index: 1;   /* stay above the code, which is itself absolutely positioned in the Try it response box */
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25); color:#DCE6EA;
}
.code-block .copy-btn:hover{ border-color:#fff; color:#fff; }
.code-block .copy-btn + pre{ padding-top: 48px; }
.code-block .code-label{
  display:block; padding: 12px 22px; border-bottom: 1px solid rgba(255,255,255,.1);
  font-family: var(--font-display); font-weight:600; font-size: 0.78rem; color: #93A6B4;
}
.tok-key{ color: #9FD8B0; }
.tok-str{ color: #F4B89C; }
.tok-num{ color: #F0C674; }
.tok-lit{ color: #8EC5E8; }

/* Tables */
.table-wrap{ overflow-x:auto; border: 1px solid var(--line); border-radius: var(--radius-m); background:#fff; margin: 12px 0 8px; }
.docs-table{ width:100%; border-collapse: collapse; font-size: 0.92rem; }
.docs-table th{
  text-align:left; font-family: var(--font-display); font-weight:600; font-size: 0.8rem;
  color: var(--ink); background: var(--sand); padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.docs-table td{ padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-70); }
.docs-table tr:last-child td{ border-bottom: none; }
.docs-table .field{ font-family: var(--font-mono); font-size: 0.86rem; color: var(--ink); font-weight:600; white-space: nowrap; }
.docs-table .type{ white-space: nowrap; }
.docs-table.fields th:first-child{ width: 34%; }
.docs-table.fields th:nth-child(2){ width: 13%; }
.docs-table .type{ font-family: var(--font-mono); font-size: 0.8rem; color: var(--slate); }
.docs-table .nested{ padding-left: 34px; }

.req{
  display:inline-block; font-size: 0.68rem; font-weight:700; letter-spacing:.03em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; margin-left: 6px; vertical-align: middle;
  background: var(--peach); color: var(--clay-dark);
}
.req.optional{ background: var(--sand); color: var(--slate); border: 1px solid var(--line); }

/* Callouts */
.callout{
  background: var(--mint); border-left: 3px solid var(--forest); border-radius: var(--radius-s);
  padding: 16px 20px; margin: 18px 0; color: var(--forest-dark); font-size: 0.93rem;
}
.callout.warn{ background: var(--peach); border-left-color: var(--clay); color: var(--clay-dark); }
.callout p{ margin:0; color: inherit; max-width: none; }

/* Try it */
.try-card{
  background:#fff; border: 1px solid var(--line); border-radius: var(--radius-l);
  padding: 28px; box-shadow: 0 24px 60px -34px rgba(18,40,61,0.35);
}
.try-grid{ display:grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 28px; }
@media (max-width: 1000px){ .try-grid{ grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px){ .try-card{ padding: 18px; border-radius: var(--radius-m); } }

.dropzone{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  min-height: 260px; padding: 24px; cursor:pointer;
  border: 2px dashed var(--mint-deep); border-radius: var(--radius-m); background: var(--sand);
  transition: border-color .2s ease, background .2s ease;
}
.dropzone:hover, .dropzone.dragover{ border-color: var(--forest); background: var(--mint); }
.dropzone input[type=file]{ position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; }
.dropzone .dz-icon{
  width: 52px; height: 52px; border-radius: 50%; background:#fff; color: var(--forest);
  display:flex; align-items:center; justify-content:center; margin-bottom: 14px;
  box-shadow: 0 6px 18px -8px rgba(18,40,61,.35);
}
.dropzone strong{ font-family: var(--font-display); color: var(--ink); }
.dropzone small{ color: var(--slate); margin-top: 6px; }
.dropzone img.preview{
  max-height: 240px; width:auto; border-radius: var(--radius-s); object-fit: contain;
}
.dropzone.has-image{ border-style: solid; background:#fff; }
/* With a photo the box keeps exactly its empty size, so the Analyze button below never moves:
   the "Drop a plant photo" text stays in place but invisible, and the photo is laid over it,
   scaled to fit (never cropped or stretched). Clicks pass through to the file input. */
.dropzone.has-image img.preview{
  position:absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px);
  max-height: none; object-fit: contain; pointer-events: none;
}
.try-card [hidden]{ display:none !important; }
.dropzone .dz-empty{ display:flex; flex-direction:column; align-items:center; }
.dropzone.has-image .dz-empty{ visibility:hidden; }
.try-card .camera-btn{ display:none; margin-top: 12px; }
@media (pointer: coarse){ .try-card .camera-btn{ display:flex; } }
.tabs{ overflow-x:auto; }

.file-meta{ display:flex; justify-content:space-between; gap: 12px; font-size: 0.85rem; color: var(--slate); margin: 10px 2px 18px; min-height: 1.3em; }
.file-meta span{ overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-meta button{ background:none; border:none; color: var(--clay-dark); font-weight:600; cursor:pointer; padding:0; font-size: 0.85rem; }

.try-actions{ display:flex; gap: 12px; align-items:flex-end; flex-wrap: wrap; }
.try-actions .form-field{ margin-bottom:0; flex: 1; min-width: 160px; }
.try-actions input[readonly]{ color: var(--slate); cursor: default; }
.field-note{ display:block; margin-top: 10px; font-size: 0.82rem; color: var(--slate); }
.btn[disabled]{ opacity: .55; cursor: not-allowed; }

.response-head{
  display:flex; align-items:center; justify-content:space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap;
}
.response-head h4{ margin:0; font-size: 0.95rem; }
.status-pill{
  display:inline-flex; align-items:center; gap: 8px; font-size: 0.8rem; font-weight:700;
  padding: 5px 12px; border-radius: 999px; background: var(--sand); color: var(--slate); border: 1px solid var(--line);
}
.status-pill::before{ content:""; width:8px; height:8px; border-radius:50%; background: currentColor; }
.status-pill.ok{ background: var(--mint); color: var(--forest-dark); border-color: var(--mint-deep); }
.status-pill.warn{ background: #FDF3E1; color: #A86A12; border-color: #F6DDB0; }
.status-pill.err{ background: var(--peach); color: var(--danger); border-color: #F5CDBD; }
.response-time{ font-size: 0.8rem; color: var(--slate); }

.summary-row{ display:flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.summary-row:empty{ display:none; }
.summary-chip{
  background: var(--sand); border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 8px 12px; font-size: 0.78rem; color: var(--slate);
}
.summary-chip b{ display:block; font-family: var(--font-display); color: var(--ink); font-size: 0.95rem; }

.try-card .code-block pre{ min-height: 300px; max-height: 470px; }
/* Side-by-side layout: the response box stretches to the full height of the photo column,
   so there's no empty white gap under it. The JSON scrolls inside the box instead of making
   the panel taller (the photo column sets the height). Stacked layouts keep the rule above. */
@media (min-width: 1001px){
  #try-response{ display:flex; flex-direction:column; }
  #try-response .code-block{ flex: 1 1 0; min-height: 300px; margin-bottom: 0; }
  #try-response .code-block pre{ position:absolute; inset:0; min-height:0; max-height:none; }
}
.placeholder-text{ color: #93A6B4; }

.spinner{
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.4); border-top-color:#fff; animation: hg-spin .8s linear infinite;
}
@keyframes hg-spin{ to{ transform: rotate(360deg); } }

/* Crop chips (non-interactive) */
.crop-chips{ display:flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.crop-chips span{
  background:#fff; border: 1.5px solid var(--line); border-radius: 999px;
  padding: 6px 14px; font-size: 0.85rem; font-weight:600; color: var(--ink-70);
}

/* ---------- Contact form checks ---------- */
.field-error{ display:block; margin-top: 6px; font-size: 0.82rem; font-weight: 600; color: var(--danger); }
/* Honeypot: kept in the page for bots but moved off-screen for people */
.hp-field{ position:absolute !important; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }

/* ---------- Go to top button (mobile only) ---------- */
.back-to-top{
  display:none; position: fixed; z-index: 60;
  right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
  align-items:center; justify-content:center;
  background: var(--forest); color: #fff;
  box-shadow: 0 8px 20px -6px rgba(18,40,61,.45);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.back-to-top.show{ opacity: 1; visibility: visible; transform: none; }
.back-to-top:active{ background: var(--forest-dark); }
.back-to-top:focus-visible{ outline: 3px solid var(--clay); outline-offset: 3px; }
@media (max-width: 900px){ .back-to-top{ display:flex; } }

/* ---------- Contact form: "submitting" overlay ---------- */
.submit-overlay{
  position: fixed; inset: 0; z-index: 9000;
  display:flex; align-items:center; justify-content:center; padding: 16px;
  background: rgba(18,40,61,.55); backdrop-filter: blur(3px);
}
.submit-overlay[hidden]{ display:none; }
/* White in both themes, to match the GIF's white background */
.submit-overlay-card{
  background:#fff; border-radius: var(--radius-m); padding: 28px 36px; text-align:center;
  box-shadow: 0 18px 50px -12px rgba(0,0,0,.45);
}
.submit-overlay-card img{ margin: 0 auto 12px; }
.submit-overlay-card p{ margin:0; font-family: var(--font-display); font-weight:600; color:#12283D; max-width:none; }

/* ---------- Try it: "OR" between the photo options + sample picker ---------- */
.or-divider{
  display:flex; align-items:center; gap: 12px; margin: 14px 0;
  font-family: var(--font-display); font-weight:700; font-size: 0.78rem; letter-spacing: .08em; color: var(--slate);
}
.or-divider::before, .or-divider::after{ content:""; flex:1; height:1px; background: var(--line); }
/* The camera option (and its OR) only exists on touch devices, like .camera-btn */
.try-card .or-divider.camera-only{ display:none; }
@media (pointer: coarse){ .try-card .or-divider.camera-only{ display:flex; } }
.try-card .or-divider + .camera-btn{ margin-top: 0; }

.sample-picker{ margin-bottom: 20px; }
.sample-picker-label{ margin: 0 0 10px; font-family: var(--font-display); font-weight:600; font-size: 0.88rem; color: var(--ink); max-width:none; }
.sample-grid{ display:grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.sample-thumb{
  aspect-ratio: 1; padding:0; overflow:hidden; cursor:pointer;
  border: 2px solid var(--line); border-radius: var(--radius-s); background: var(--sand);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sample-thumb img{ width:100%; height:100%; object-fit: cover; display:block; }
/* Mouse hover only: on touch screens :hover sticks after a tap and looks like a selection */
@media (hover: hover){ .sample-thumb:hover{ border-color: var(--forest); } }
.sample-thumb[aria-pressed="true"]{ border-color: var(--forest); box-shadow: 0 0 0 3px var(--mint-deep); }
.sample-thumb:focus-visible{ outline: 3px solid var(--clay); outline-offset: 2px; }

/* ---------- Try it: compact photo panel on phones ----------
   So that "Try it live" links can land with the photo options AND the Analyze button on one
   screen (api-docs.js scrollToTryIt). Tablets and desktops keep the roomier layout above. */
@media (max-width: 600px){
  .dropzone{ min-height: 150px; padding: 16px; }
  .dropzone .dz-icon{ width: 40px; height: 40px; margin-bottom: 8px; }
  .dropzone .dz-icon svg{ width: 20px; height: 20px; }
  .file-meta{ margin: 6px 2px 4px; }
  .or-divider{ margin: 8px 0; }
  .sample-picker{ margin-bottom: 12px; }
  .sample-picker-label{ margin-bottom: 8px; }
  /* One swipeable row; the last visible photo is cut at the edge, hinting there are more */
  .sample-grid{
    display:flex; gap: 8px; overflow-x:auto; scroll-snap-type: x mandatory;
    margin: 0 -4px; padding: 0 4px 4px; scrollbar-width: none;
  }
  .sample-grid::-webkit-scrollbar{ display:none; }
  .sample-thumb{ flex: 0 0 72px; scroll-snap-align: start; }
  /* Language field and Analyze button side by side */
  .try-actions{ flex-wrap: nowrap; }
  .try-actions .form-field{ min-width: 0; }
  .try-actions .form-field label{ white-space: nowrap; }   /* the space above the button is free */
  .try-actions .btn{ flex: none; padding: 12px 18px; white-space: nowrap; }
}