/* ═══════════════════════════════════════════════════════════════════════
KITE AGRO — DESIGN SYSTEM v2
Signature idea: the "Ripening Thread" — a four-stop gradient that follows
the areca fruit's own colour journey (raw green → ripe gold → sun-dried
rust → roasted chali umber). It recurs as dividers, the rate-tracker
spine, and section accents, tying the trade, rates and farming content
back to one real, literal fact about the crop.
═══════════════════════════════════════════════════════════════════════ */
:root{
/* ── Core palette ──
Vibrant and multi-hued: warm rust/gold/terracotta balanced against
a fresh, saturated green — which also now happens to literally
match the Raw Green Fruit stage it represents. */
--ink: #1F160E; /* deep coffee-bark, slightly richer/darker for contrast */
--ink-soft: #4A3F34;
--cream: #F6EFE0; /* brighter sun-dried parchment */
--cream-deep: #ECE0C6;
--paper: #FFFFFF; /* pure white cards — max contrast against cream sections */
--rust: #D8431A; /* primary — vivid burnt orange-red */
--rust-deep: #A32D0E;
--gold: #F0AC1E; /* ripe-fruit gold — vivid */
--gold-pale: #FDEDC8;
--slate: #17A34E; /* raw-fruit stand-in — vivid green, swapped in for the earlier blue */
--slate-pale: #D2F2DE;
--terracotta: #E67A2E; /* sun-dried stage — vivid */
/* ── Four-stage rate colours (the ripening thread) ── */
--stage-raw: #17A34E; /* Raw Green Fruit → green (a literal match now) */
--stage-ripe: #F0AC1E; /* Ripe Yellow Fruit → gold */
--stage-dried: #E67A2E; /* Sun-Dried Fruit → terracotta */
--stage-chali: #7A3312; /* Arecanut (Chali) → umber */
--border: #DDC9A0;
--up: #17A34E; /* green = price up (paired with red for down) */
--down: #D8341F;
--font-display: 'Source Serif 4', 'Georgia', serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
--radius: 14px;
--shadow: 0 4px 20px rgba(36,28,21,.06);
--shadow-lg: 0 14px 40px rgba(36,28,21,.12);
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
/* Every anchor target (nav links, footer links, in-page CTAs) needs this,
otherwise the sticky nav bar sits on top of and hides the section
heading right after the page jumps there. */
[id]{scroll-margin-top:88px}
body{
font-family:var(--font-body);
background:var(--cream);
color:var(--ink-soft);
font-size:16px;
line-height:1.65;
letter-spacing:-.01em;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold); outline-offset:2px}
@media (prefers-reduced-motion: reduce){
*{animation-duration:.001ms !important; transition-duration:.001ms !important}
.reveal{opacity:1; transform:none}
}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px}
.wrap-wide{max-width:1440px; margin:0 auto; padding:0 24px}
.tool-page-hero{background:var(--ink); color:#fff; padding:48px 0 36px}
.tool-page-hero .breadcrumb{color:#B7A98F}
.tool-page-hero .breadcrumb a{color:#D9CDBA; text-decoration:none}
.tool-page-hero h1{color:#fff; font-size:clamp(26px,4vw,38px); margin-bottom:10px}
.tool-page-hero p{color:#D9CDBA; font-size:14.5px; max-width:720px; line-height:1.7}
.tool-page-body{padding:40px 0 64px}
.tool-page .calc-grid{min-height:auto}
@media (min-width:1400px){
.tool-page .calc-inputs{padding:44px 46px}
.tool-page .calc-results{padding:44px 46px}
.tool-page .calc-total{font-size:64px}
}
.section{padding:72px 0}
.section-tight{padding:48px 0}
/* ── Ripening thread divider (signature element) ── */
.thread{
height:6px; width:100%; border-radius:6px;
background:linear-gradient(90deg, var(--stage-raw) 0%, var(--stage-raw) 22%, var(--stage-ripe) 22%, var(--stage-ripe) 48%, var(--stage-dried) 48%, var(--stage-dried) 74%, var(--stage-chali) 74%, var(--stage-chali) 100%);
}
.thread-thin{height:3px; border-radius:3px}
/* ── Type ── */
h1,h2,h3,h4,h5{font-family:var(--font-display); color:var(--ink); font-weight:600; line-height:1.18; letter-spacing:-.01em}
.eyebrow{
font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:1.6px;
text-transform:uppercase; color:var(--rust); margin-bottom:12px; display:flex; align-items:center; gap:9px;
}
.eyebrow::before{content:''; width:20px; height:2px; background:var(--gold); display:inline-block; flex-shrink:0}
h2.section-title{font-size:clamp(26px,3.4vw,36px); margin-bottom:14px; max-width:640px}
p.section-sub{font-size:15.5px; color:var(--ink-soft); max-width:640px; margin-bottom:8px; line-height:1.75}
.mono{font-family:var(--font-mono)}
.figure{font-family:var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:0}
strong{font-weight:600}
/* ── Buttons ── */
.btn{
display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-weight:600;
font-size:14.5px; padding:13px 26px; border-radius:9px; text-decoration:none; border:none; cursor:pointer;
transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--rust); color:#fff; box-shadow:0 8px 20px rgba(199,69,31,.32)}
.btn-primary:hover{background:var(--rust-deep)}
.btn-gold{background:var(--gold); color:var(--ink)}
.btn-outline{background:transparent; color:var(--ink); border:1.5px solid var(--ink)}
.btn-outline:hover{background:var(--ink); color:#fff}
/* For use on dark backgrounds (hero, band-wa, page-hero, etc.) — .btn-outline
alone is dark-on-transparent and becomes invisible there. */
.btn-outline-dark{background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.55)}
.btn-outline-dark:hover{background:#fff; color:var(--ink); border-color:#fff}
.btn-wa{background:#25D366; color:#08380f}
.btn-slate{background:var(--slate); color:#fff}
.btn-slate:hover{background:#334855}
.btn-terracotta{background:var(--terracotta); color:#fff}
.btn-terracotta:hover{background:#9a5226}
.btn-sm{padding:9px 18px; font-size:13px}
/* ── Under-construction ticker: slim, single-line, auto-scrolling ── */
.uc-ticker{background:#1a1a1a; overflow:hidden; white-space:nowrap; border-bottom:2px solid #F5C518}
.uc-ticker-track{display:inline-flex; width:max-content; animation:ucScroll 20s linear infinite}
.uc-ticker-item{display:inline-flex; align-items:center; gap:8px; padding:6px 32px; font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.3px; color:#F5C518; white-space:nowrap}
@keyframes ucScroll{
0%{transform:translateX(0)}
100%{transform:translateX(-50%)}
}
@media (prefers-reduced-motion: reduce){
.uc-ticker-track{animation:none}
}
/* ── Topbar ── */
.topbar{background:var(--ink); color:var(--gold-pale); font-size:12.5px}
.topbar .wrap{display:flex; justify-content:space-between; align-items:center; padding:8px 24px; flex-wrap:wrap; gap:10px}
.topbar a{text-decoration:none; color:inherit; opacity:.92}
.topbar a:hover{opacity:1; color:var(--gold)}
.topbar-links{display:flex; gap:16px; align-items:center; flex-wrap:wrap}
.topbar-right{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.topbar-wa-cta{
display:flex; align-items:center; gap:7px; background:#25D366; color:#08380f; font-weight:700;
font-size:12px; padding:6px 14px; border-radius:20px; text-decoration:none; white-space:nowrap; opacity:1;
box-shadow:0 2px 8px rgba(37,211,102,.35);
}
.topbar-wa-cta:hover{background:#20bd5a; opacity:1; transform:translateY(-1px)}
.topbar-social{display:flex; gap:10px}
.topbar-social a{
width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.18);
}
.topbar-social a svg{display:block; width:14px; height:14px}
/* ── Nav ── */
nav.site-nav{background:var(--paper); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100}
nav.site-nav .wrap{display:flex; align-items:center; justify-content:space-between; padding:9px 24px; gap:14px}
.logo{display:flex; align-items:center; gap:9px; text-decoration:none; flex-shrink:0}
.logo img{width:34px; height:34px; object-fit:contain; flex-shrink:0}
.logo-text{white-space:nowrap; line-height:1.15}
.logo-text strong{font-family:var(--font-display); font-size:17px; color:var(--ink); display:block; letter-spacing:.2px; white-space:nowrap}
.logo-text small{font-size:9px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.4px; white-space:nowrap; display:block}
.nav-links{list-style:none; display:flex; gap:1px; align-items:center; flex-wrap:nowrap}
.nav-links > li{position:relative; flex-shrink:0}
.nav-links a{
text-decoration:none; color:var(--ink-soft); font-size:13.2px; font-weight:500; padding:9px 11px; border-radius:7px;
letter-spacing:0; white-space:nowrap; display:flex; align-items:center; gap:4px;
}
.nav-links a:hover, .nav-links a.active{background:var(--gold-pale); color:var(--rust-deep)}
.nav-links a.nav-cta{background:var(--rust); color:#fff; padding:9px 16px; margin-left:6px}
.nav-links a.nav-cta:hover{background:var(--rust-deep); color:#fff}
/* "Free" highlight on the Tools menu — dark ink on gold reads clearly at
this small size (a gold background under light-weight white text fails
contrast the same way several other spots on this site did). */
.nav-free-badge{
background:var(--gold); color:var(--ink); font-weight:700; font-size:11px;
padding:2px 6px; border-radius:5px; letter-spacing:.2px;
}
/* Tools dropdown */
.nav-dropdown{position:relative}
.nav-dropdown > a .caret{font-size:8px; margin-left:2px; opacity:.65; transition:transform .15s}
.nav-dropdown.open .caret{transform:rotate(180deg)}
@media (hover:hover) and (pointer:fine){
.nav-dropdown:hover .caret{transform:rotate(180deg)}
}
.nav-dd-menu{
/* No margin-top: on desktop this menu opens on :hover (see the media
query below), and a gap here between the toggle and the menu is an
unhoverable dead zone — the cursor crosses it while moving down to
click an item, drops :hover on .nav-dropdown, and the menu closes
before the click lands. padding-top gives the same visual breathing
room without creating that gap, since it's inside the hoverable box. */
position:absolute; top:100%; left:0; background:var(--paper); border:1px solid var(--border); border-radius:12px;
box-shadow:var(--shadow-lg); min-width:250px; padding:12px 8px 8px; display:none; z-index:120; margin-top:0;
}
.nav-dropdown.open .nav-dd-menu{display:block}
/* Hover-to-open is only for devices with a real pointer. On touchscreens
a tap leaves a sticky :hover state, which previously fought the .open
class at equal specificity and stopped the menu opening at all. */
@media (hover:hover) and (pointer:fine){
.nav-dropdown:hover .nav-dd-menu{display:block}
}
.nav-dd-menu a{display:flex; gap:10px; align-items:flex-start; padding:9px 10px; border-radius:8px; white-space:normal}
.nav-dd-menu a .dd-icon{width:26px; height:26px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; margin-top:1px}
.nav-dd-menu a .dd-text strong{display:block; font-size:12.5px; color:var(--ink); font-weight:600}
.nav-dd-menu a .dd-text span{display:block; font-size:10.8px; color:var(--ink-soft); margin-top:1px; line-height:1.4}
.nav-dd-menu a:hover{background:var(--cream-deep)}
.nav-toggle{display:none; background:none; border:none; font-size:24px; cursor:pointer; color:var(--ink); flex-shrink:0}
.nav-disabled{
display:flex; align-items:center; gap:6px; font-size:13.2px; font-weight:500; color:#b0a794;
padding:9px 11px; cursor:not-allowed; white-space:nowrap; user-select:none;
}
.soon-tag{
font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
background:var(--cream-deep); color:var(--ink-soft); padding:2px 7px; border-radius:10px;
}
/* ── Cards ── */
.card{background:var(--paper); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow)}
.pillar-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:32px}
.pillar-grid-2{grid-template-columns:repeat(2,1fr)}
.pillar-grid-3{grid-template-columns:repeat(3,1fr)}
.pillar-card{background:var(--paper); border:1px solid var(--border); border-radius:var(--radius); padding:26px 22px; text-align:left; border-top:4px solid var(--rust)}
.pillar-grid > .pillar-card:nth-child(4n+1){border-top-color:var(--slate)}
.pillar-grid > .pillar-card:nth-child(4n+2){border-top-color:var(--gold)}
.pillar-grid > .pillar-card:nth-child(4n+3){border-top-color:var(--terracotta)}
.pillar-grid > .pillar-card:nth-child(4n+4){border-top-color:var(--rust)}
.pillar-grid-2 > .pillar-card:nth-child(1){border-top-color:var(--slate)}
.pillar-grid-2 > .pillar-card:nth-child(2){border-top-color:var(--terracotta)}
.pillar-icon{width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:21px; margin-bottom:14px}
.pillar-card h4{font-size:16px; margin-bottom:8px}
.pillar-card p{font-size:13.3px; color:var(--ink-soft); line-height:1.6}
/* ── Rate stage cards ── */
.rate-card{
display:grid; grid-template-columns:220px 1fr; gap:0; background:var(--paper); border:1px solid var(--border);
border-radius:18px; overflow:hidden; margin-bottom:22px; box-shadow:var(--shadow);
}
.rate-card-img{position:relative; min-height:230px; display:flex; align-items:center; justify-content:center; padding:18px; overflow:hidden}
.rate-card-icon{display:block; width:100%; height:100%}
.rate-card-photo{display:none; position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.rate-card-img.has-photo .rate-card-icon{display:none}
.rate-card-img.has-photo .rate-card-photo{display:block}
.rate-card-img.has-photo{padding:0}
.rate-card-img svg{width:100%; height:100%}
.rate-card-body{padding:24px 28px; border-left:1px solid var(--border)}
.rate-card-head{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:10px; margin-bottom:6px}
.rate-card-head h3{font-size:20px}
.rate-local-name{font-family:var(--font-mono); font-size:11.5px; color:var(--ink-soft); margin-top:3px}
.rate-stage-tag{font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.8px; text-transform:uppercase; padding:4px 10px; border-radius:20px; color:#fff}
.rate-range{font-family:var(--font-mono); font-size:30px; font-weight:600; color:var(--ink); display:flex; align-items:baseline; gap:6px}
.rate-week-change{margin-top:6px; font-size:16px; font-weight:700; display:flex; align-items:center; justify-content:flex-end; gap:5px; font-family:var(--font-mono)}
.rate-week-change.up{color:var(--up)}
.rate-week-change.down{color:var(--down)}
.rate-week-change.flat{color:var(--ink-soft); font-weight:600; font-size:13px}
.rate-week-change span{font-weight:500; font-size:12.5px; opacity:.8}
.rate-range small{font-size:13px; font-weight:500; color:var(--ink-soft)}
.rate-delta-row{display:flex; gap:10px; flex-wrap:wrap; margin:8px 0 14px}
.rate-delta{font-family:var(--font-mono); font-size:11.5px; font-weight:600; padding:4px 10px; border-radius:20px; display:inline-flex; gap:4px; align-items:center}
.rate-delta.up{background:#D7F5E2; color:var(--up)}
.rate-delta.down{background:#F7DEDA; color:var(--down)}
.rate-delta.flat{background:var(--cream-deep); color:var(--ink-soft)}
.rate-chart-wrap{background:var(--cream); border-radius:12px; padding:12px; margin-top:6px}
.rate-chart-wrap canvas{max-height:150px}
.rate-meta{font-size:11.5px; color:var(--ink-soft); margin-top:10px}
.rate-demo-flag{display:flex; align-items:center; gap:8px; background:var(--gold-pale); color:var(--rust-deep); font-size:12.5px; line-height:1.6; padding:11px 16px; border-radius:9px; margin:14px 0 18px}
/* One shared "last updated" line for all 4 rate cards, replacing the old
per-card "Week of ..." line (which duplicated the per-mandi dates
already shown inside each card and could show a slightly different
date on each of the 4 — this is the single source of truth). */
.last-updated-row{display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-top:18px}
.last-updated-row::before{content:''; width:8px; height:8px; border-radius:50%; background:var(--slate); flex:none; animation:liveDotPulse 2s ease-in-out infinite}
@keyframes liveDotPulse{0%,100%{opacity:1} 50%{opacity:.35}}
.sheet-guide-list{margin:14px 0 4px 0; padding-left:22px; display:flex; flex-direction:column; gap:12px}
.sheet-guide-list li{font-size:12.8px; color:var(--ink-soft); line-height:1.7}
.sheet-guide-list .mono{background:var(--cream-deep); padding:1px 6px; border-radius:4px; font-size:11.5px; color:var(--ink)}
/* ── Range slider / update panel (admin) ── */
.admin-card{background:var(--ink); color:var(--cream); border-radius:18px; padding:28px 30px; margin-top:36px}
.admin-card h4{color:#fff; font-size:16px; margin-bottom:6px}
.admin-card p{font-size:12.5px; color:#cbbfa9; margin-bottom:18px}
.admin-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px}
.admin-field label{font-size:11px; color:#cbbfa9; display:block; margin-bottom:5px; font-family:var(--font-mono)}
.admin-field input{width:100%; padding:9px 10px; border-radius:7px; border:1px solid #453a2c; background:#2f2519; color:#fff; font-family:var(--font-mono); font-size:13px}
.admin-status-msg{display:none; font-size:12.5px; line-height:1.6; padding:10px 14px; border-radius:8px; margin-top:12px}
.admin-status-msg.show{display:block}
.admin-status-msg.warn{background:#3a2a1a; color:#f0c98a; border:1px solid #5a4326}
.admin-status-msg.success{background:#173a22; color:#9be8ac; border:1px solid #2c5a3a}
/* ── Table (used sparingly) ── */
table{width:100%; border-collapse:collapse; font-size:13.5px}
th,td{padding:11px 14px; text-align:left; border-bottom:1px solid var(--border)}
th{font-family:var(--font-mono); font-size:11px; letter-spacing:.6px; text-transform:uppercase; color:var(--ink-soft); background:var(--cream-deep)}
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.table-scroll table{min-width:520px}
.mandi-section{background:var(--paper)}
.mandi-compare-chart-wrap{position:relative; background:linear-gradient(135deg,var(--cream) 0%,var(--gold-pale) 100%); border:1px solid var(--border); border-radius:14px; padding:20px 14px 8px; margin-top:22px; box-shadow:0 2px 10px rgba(0,0,0,.05)}
.mandi-svg{width:100%; height:auto; display:block; max-width:900px; margin:0 auto}
.mandi-legend{display:flex; gap:22px; align-items:center; margin-top:14px; flex-wrap:wrap}
.mandi-legend-item{display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--ink)}
.mandi-legend-swatch{width:14px; height:14px; flex:none}
.mandi-legend-note{font-size:11.5px; color:var(--ink-soft); font-weight:400}
.mandi-pt-hit{cursor:pointer}
/* Floating tooltip anchored to a chart point, shown on hover/click —
positioned in JS (mandiSvgToPixel) via left/top in pixels relative to
.mandi-compare-chart-wrap, styled like a classic dark chart tooltip
rather than a static panel below the chart. */
.mandi-tooltip{
position:absolute; z-index:5; pointer-events:none; white-space:nowrap;
transform:translate(-50%,calc(-100% - 14px)); background:var(--ink); color:#fff;
padding:10px 14px; border-radius:10px; box-shadow:0 8px 20px rgba(0,0,0,.28);
opacity:0; transition:opacity .12s ease; font-size:12.5px;
}
.mandi-tooltip.show{opacity:1}
.mandi-tooltip::after{
content:''; position:absolute; left:50%; top:100%; transform:translateX(-50%);
border:6px solid transparent; border-top-color:var(--ink);
}
.mandi-tooltip-series{font-weight:700; font-family:var(--font-display); font-size:13px}
.mandi-tooltip-date{font-family:var(--font-mono); font-size:11px; color:#cbbfa9; margin-top:2px}
.mandi-tooltip-price{font-family:var(--font-mono); font-size:15px; font-weight:600; margin-top:4px}
.mandi-tooltip-price span{font-size:10.5px; font-weight:400; color:#cbbfa9; margin-left:2px}
.mandi-tooltip-mid{font-size:10.5px; color:#cbbfa9; margin-top:2px}
@media (max-width:480px){.mandi-tooltip{font-size:11.5px; padding:8px 11px}}
.mandi-stat-cards{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px}
.mandi-stat-card{background:var(--paper); border:1px solid var(--border); border-top:4px solid; border-radius:12px; padding:16px 18px}
.mandi-stat-head{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--ink); font-family:var(--font-display)}
.mandi-stat-price{font-family:var(--font-mono); font-size:26px; font-weight:600; color:var(--ink); margin-top:8px}
.mandi-stat-price small{font-size:12px; font-weight:500; color:var(--ink-soft)}
.mandi-stat-date{font-family:var(--font-mono); font-size:11.5px; color:var(--ink-soft); margin-top:4px}
.mandi-stat-delta{margin-top:12px; text-align:center; font-size:12.5px; font-weight:600; color:var(--rust-deep); background:var(--gold-pale); border-radius:20px; padding:8px 14px}
@media (max-width:560px){.mandi-stat-cards{grid-template-columns:1fr}}
.mandi-weeks{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px}
.mandi-weeks-card{background:var(--cream); border:1px solid var(--border); border-radius:10px; padding:12px 14px}
.mandi-weeks-head{display:flex; align-items:center; gap:7px; font-weight:700; font-size:12px; color:var(--ink)}
.mandi-weeks-card table{width:100%; border-collapse:collapse; font-size:11.5px; margin-top:6px}
.mandi-weeks-card td{padding:4px 2px; border-top:1px solid var(--border); border-bottom:none}
.mandi-weeks-card tr:first-child td{border-top:none}
.mandi-weeks-card td:first-child{color:var(--ink-soft)}
.mandi-weeks-card td:last-child{text-align:right; font-family:var(--font-mono); font-weight:600; color:var(--ink)}
.mandi-weeks-empty{font-size:11.5px; color:var(--ink-soft); padding:4px 0}
.mandi-weeks-card tr.mandi-weeks-latest td{background:var(--gold-pale); font-weight:700; color:var(--rust-deep)}
.mandi-weeks-card tr.mandi-weeks-latest td:first-child{border-radius:6px 0 0 6px}
.mandi-weeks-card tr.mandi-weeks-latest td:last-child{border-radius:0 6px 6px 0}
.mandi-weeks-tag{display:inline-block; margin-left:6px; font-size:9px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; background:var(--gold); color:#fff; padding:1px 6px; border-radius:10px; vertical-align:middle}
@media (max-width:560px){.mandi-weeks{grid-template-columns:1fr}}
@media (max-width:640px){.mandi-compare-wrap{padding:16px 14px 14px}}
/* ── FAQ (AEO/GEO-friendly: plain heading + answer, always visible in DOM) ── */
.faq-section{background:var(--paper)}
.faq-list{max-width:800px; margin-top:28px}
.faq-item{border-bottom:1px solid var(--border); padding:20px 0}
.faq-item:first-child{padding-top:0}
.faq-item h3{font-size:15.5px; margin-bottom:8px; color:var(--ink)}
.faq-item p{font-size:13.8px; color:var(--ink-soft); line-height:1.7}
/* ── Hero (no cover photo) ── */
.hero{background:var(--ink); color:var(--cream); position:relative; overflow:hidden; padding:76px 0 64px}
.hero::before{
content:''; position:absolute; inset:0;
background:
radial-gradient(600px 300px at 85% -10%, rgba(224,166,46,.22), transparent),
radial-gradient(500px 260px at 5% 110%, rgba(199,69,31,.26), transparent);
}
.hero-inner{position:relative; z-index:1; max-width:760px}
.hero h1{color:#fff; font-size:clamp(32px,5vw,52px); line-height:1.08; margin-bottom:18px}
.hero h1 em{font-style:italic; color:var(--gold)}
.hero p{font-size:16px; color:#D9CDBA; max-width:560px; margin-bottom:28px; line-height:1.7}
.hero-cta-row{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:36px}
.hero-highlights{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:28px}
.hero-highlight-chip{
display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16);
padding:8px 14px; border-radius:22px; font-size:12.5px; font-weight:600; color:#EFE6D4; text-decoration:none;
transition:background .15s ease, border-color .15s ease;
}
.hero-highlight-chip:hover{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.3)}
.hero-highlight-chip-free{border-color:rgba(240,172,30,.5)}
/* Bright, solid-fill variant — for a chip that needs to stand out from
the regular translucent hero chips (e.g. the language switcher),
instead of blending into the dark hero background. */
.hero-highlight-chip-bright{background:var(--gold); border-color:var(--gold); color:var(--ink); font-weight:700}
.hero-highlight-chip-bright:hover{background:#FFC94A; border-color:#FFC94A}
.hero-free-stamp{
display:inline-block; background:var(--gold); color:var(--ink); font-family:var(--font-mono); font-size:9.5px;
font-weight:700; letter-spacing:.6px; padding:2px 6px; border-radius:5px; transform:rotate(-4deg);
}
.hero-stage-row{display:flex; gap:10px; flex-wrap:wrap}
.hero-stage-chip{
display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
padding:9px 14px; border-radius:24px; font-size:12.5px; color:#EFE6D4;
}
.hero-stage-dot{width:9px; height:9px; border-radius:50%}
/* ── WhatsApp community & Instagram bands ── */
.band{padding:52px 0}
.band-wa{background:linear-gradient(120deg,#0d3d1c 0%,#134d24 100%); color:#fff}
.band-wa .wrap{display:grid; grid-template-columns:1.2fr 1fr; gap:36px; align-items:center}
.band-ig{background:linear-gradient(120deg,#5b2a86,#a8326f 55%,#e08a2e); color:#fff}
.band-ig .wrap{display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap}
.band h3{color:#fff; font-size:24px; margin-bottom:8px}
.band p{color:rgba(255,255,255,.86); font-size:14px; line-height:1.7}
.band-feature-list{list-style:none; margin-top:14px}
.band-feature-list li{font-size:13.5px; padding:6px 0; color:rgba(255,255,255,.9)}
/* ── Drone section ── */
.drone-section{background:var(--paper); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.drone-grid{display:grid; grid-template-columns:1fr 1.05fr; gap:48px; align-items:center}
.soon-badge{
display:inline-flex; align-items:center; gap:6px; background:var(--gold-pale); color:var(--rust-deep);
font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:1px; text-transform:uppercase;
padding:6px 14px; border-radius:20px; margin-bottom:16px;
}
.drone-features{list-style:none; margin:18px 0 26px}
.drone-features li{font-size:13.8px; color:var(--ink-soft); padding:10px 0; border-bottom:1px solid var(--border); display:flex; gap:10px}
.drone-features li:last-child{border-bottom:none}
.drone-visual{background:var(--ink); border-radius:20px; padding:20px}
/* Drone photo gallery — a wide report-card hero, a second wide banner,
then two regular tiles, each captioned with what it shows. Aspect
ratios are chosen to match each real photo's native shape (a report
screenshot and a numbered-tree scan are both naturally wide; the
other two are closer to 4:3) so object-fit:cover doesn't need to crop
away much. Every ![]()
has its own onerror handler (see index.html),
so slots fill in independently as photos are added/replaced in
images/drone/ — no code changes needed — and a slot with no photo
yet still looks intentional via .img-missing rather than a broken
image icon. */
.drone-gallery{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.drone-gallery-item{
position:relative; margin:0; border-radius:12px; overflow:hidden; aspect-ratio:4/3;
background:linear-gradient(135deg,#3a2c1e,#1a1108);
}
.drone-gallery-item-lg{grid-column:1/-1; aspect-ratio:1235/361}
.drone-gallery-item-wide{grid-column:1/-1; aspect-ratio:867/301}
.drone-gallery-item img{width:100%; height:100%; object-fit:cover; display:block}
.drone-gallery-item figcaption{
position:absolute; left:0; right:0; bottom:0; padding:10px 12px 8px;
background:linear-gradient(transparent,rgba(10,7,4,.85));
}
.drone-gallery-item figcaption strong{display:block; font-size:12.5px; color:#fff; line-height:1.3}
.drone-gallery-item figcaption span{display:block; font-size:10.5px; color:#D9CDBA; margin-top:2px}
.drone-gallery-item.img-missing img{display:none}
.drone-gallery-item.img-missing::before{
content:'🚁'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
font-size:26px; opacity:.3;
}
/* Deliberately-empty slot (not a broken existing photo) — dashed border
and explicit wording so it reads as "reserved for you", not an error. */
.drone-gallery-item-empty{background:rgba(255,255,255,.03); border:2px dashed rgba(255,255,255,.22)}
.drone-gallery-item-empty.img-missing::before{
content:'📷 Add a real photo here'; font-size:13px; font-weight:600; opacity:.5; white-space:nowrap;
}
/* ── Manure section ── */
.manure-section{background:var(--cream-deep)}
.manure-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center}
.manure-tags{display:flex; gap:8px; flex-wrap:wrap; margin:16px 0 22px}
.manure-tag{background:var(--paper); border:1px solid var(--border); font-size:12px; padding:6px 13px; border-radius:20px; color:var(--ink-soft)}
/* ── Trade strip (5-10% weight, minimal) ── */
.trade-strip{background:var(--paper); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:34px 0}
.trade-strip .wrap{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap}
.trade-strip h5{font-size:15px; margin-bottom:4px}
.trade-strip p{font-size:12.5px; color:var(--ink-soft)}
/* ── About teaser ── */
.about-teaser{background:var(--ink); color:var(--cream)}
.about-teaser .wrap{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center}
.about-teaser h2{color:#fff}
.about-teaser p{color:#D9CDBA; font-size:14.5px; line-height:1.75; margin-bottom:20px}
.stat-row{display:flex; gap:32px; margin-top:24px; flex-wrap:wrap}
.stat-row .n{font-family:var(--font-mono); font-size:28px; color:var(--gold); font-weight:600}
.stat-row .l{font-size:11.5px; color:#B7A98F; text-transform:uppercase; letter-spacing:.6px}
/* ── Contact ── */
.contact-section{background:var(--paper)}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px}
.contact-item{display:flex; gap:14px; margin-bottom:18px}
.contact-icon{width:42px; height:42px; border-radius:10px; background:var(--gold-pale); color:var(--rust-deep); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0}
.contact-item:nth-child(4n+1) .contact-icon{background:var(--gold-pale); color:var(--rust-deep)}
.contact-item:nth-child(4n+2) .contact-icon{background:var(--slate-pale); color:var(--slate)}
.contact-item:nth-child(4n+3) .contact-icon{background:#EFD9C4; color:var(--terracotta)}
.contact-item:nth-child(4n+4) .contact-icon{background:#F0DDD3; color:var(--rust-deep)}
.contact-item h5{font-size:14px; margin-bottom:2px}
.contact-item p{font-size:13.5px; color:var(--ink-soft)}
.form-card{background:var(--cream); border:1px solid var(--border); border-radius:16px; padding:26px}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px}
.form-group label{font-size:12px; font-weight:600; color:var(--ink-soft); margin-bottom:5px; display:block}
.form-group input,.form-group select,.form-group textarea{
width:100%; padding:11px 12px; border:1px solid var(--border); border-radius:8px; background:var(--paper); font-family:var(--font-body); font-size:13.8px;
}
.btn-submit{width:100%; background:var(--rust); color:#fff; border:none; padding:13px; border-radius:9px; font-weight:600; font-size:14.5px; cursor:pointer; margin-top:6px}
.btn-submit:hover{background:var(--rust-deep)}
/* ── Footer ── */
footer{background:var(--ink); color:#B7A98F; padding:52px 0 24px}
.footer-top{display:grid; grid-template-columns:1.6fr minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); gap:32px; margin-bottom:32px}
.footer-brand strong{color:#fff; font-family:var(--font-display); font-size:19px}
.footer-brand p{font-size:12.5px; margin:10px 0; line-height:1.6}
.footer-col h6{color:#fff; font-size:12.5px; text-transform:uppercase; letter-spacing:.7px; margin-bottom:12px}
.footer-col a{display:block; font-size:13px; color:#B7A98F; text-decoration:none; margin-bottom:9px}
.footer-col a:hover{color:var(--gold)}
.footer-bottom{border-top:1px solid #3a2f22; padding-top:18px; font-size:12px; text-align:center; color:#8c806c}
.site-version{font-family:var(--font-mono); font-size:11px; opacity:.8}
/* ── WhatsApp float ── */
.wa-float{
position:fixed; bottom:22px; right:22px; width:56px; height:56px; border-radius:50%; background:#25D366;
display:flex; align-items:center; justify-content:center; font-size:24px; box-shadow:0 8px 22px rgba(0,0,0,.28);
z-index:200; text-decoration:none;
}
/* ── Breadcrumb / article hero (for sub-pages) ── */
.page-hero{background:var(--ink); color:#fff; padding:52px 0 40px}
.breadcrumb{font-size:12px; color:#B7A98F; margin-bottom:14px}
.breadcrumb a{color:#D9CDBA; text-decoration:none}
.page-hero h1{color:#fff; font-size:clamp(26px,3.6vw,40px)}
.page-hero p{color:#D9CDBA; font-size:14.5px; max-width:720px; margin-top:14px; line-height:1.75}
/* ── Guide / article pages (disease & pest management) ── */
.toc-bar{background:var(--cream-deep); border-bottom:1px solid var(--border); padding:14px 0; position:sticky; top:65px; z-index:60}
.toc-inner{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.toc-label{font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--rust); margin-right:4px}
.toc-inner a{font-size:12.5px; font-weight:600; color:var(--ink-soft); text-decoration:none; background:var(--paper); border:1px solid var(--border); padding:6px 13px; border-radius:20px}
.toc-inner a:hover{color:var(--rust-deep); border-color:var(--gold)}
.entry-card{display:grid; grid-template-columns:320px 1fr; gap:0; background:var(--paper); border:1px solid var(--border); border-radius:16px; overflow:hidden; margin-bottom:26px}
.entry-card:nth-child(even){grid-template-columns:1fr 320px}
.entry-card:nth-child(even) .entry-img{order:2}
.entry-img{position:relative; min-height:260px}
.entry-img img{width:100%; height:100%; object-fit:cover; display:block}
.entry-img-tag{position:absolute; top:12px; left:12px; background:rgba(36,28,21,.82); color:#fff; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.5px; text-transform:uppercase; padding:5px 11px; border-radius:20px}
.entry-body{padding:24px 28px}
.entry-body h3{font-size:21px; margin-bottom:4px}
.entry-local-name{font-family:var(--font-mono); font-size:11.5px; color:var(--rust); font-weight:500; margin-bottom:12px}
.entry-sub-label{font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.7px; text-transform:uppercase; color:var(--ink-soft); margin:12px 0 6px}
.entry-body p{font-size:13.6px; color:var(--ink-soft); line-height:1.7}
.entry-body ul{list-style:none; margin:4px 0 0}
.entry-body ul li{font-size:13.3px; color:var(--ink-soft); line-height:1.6; padding:4px 0 4px 20px; position:relative}
.entry-body ul li::before{content:'✓'; position:absolute; left:0; top:4px; color:var(--rust); font-weight:700; font-size:11px}
.severity-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}
.severity-pill{font-family:var(--font-mono); font-size:10.5px; font-weight:600; padding:4px 11px; border-radius:20px; background:var(--gold-pale); color:var(--rust-deep)}
.article-cta{background:var(--gold-pale); border:1px solid var(--border); border-radius:16px; padding:26px 28px; margin-top:36px; display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap}
.article-cta h4{font-size:16px; margin-bottom:5px}
.article-cta p{font-size:13px; color:var(--ink-soft)}
/* ── Disease/Pest pillar pages: symptom selector, fact boxes, image placeholders ── */
.principle-band{background:var(--ink); color:#EFE6D4; border-radius:16px; padding:20px 26px; margin:24px 0; font-size:14px; line-height:1.7}
.principle-band strong{color:#fff}
.filter-bar{position:relative; max-width:420px; margin:24px 0 8px}
.filter-bar input{width:100%; padding:12px 16px 12px 40px; border:1.5px solid var(--border); border-radius:12px; font-family:var(--font-body); font-size:14px; background:var(--paper); color:var(--ink)}
.filter-bar input:focus{outline:none; border-color:var(--rust)}
.filter-bar::before{content:'🔍'; position:absolute; left:14px; top:50%; transform:translateY(-50%); font-size:14px; opacity:.6}
.filter-empty{display:none; font-size:13.5px; color:var(--ink-soft); padding:16px 0}
.symptom-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; margin-top:24px}
.symptom-detail{background:var(--paper); border:1px solid var(--border); border-radius:14px; overflow:hidden}
.symptom-detail summary{list-style:none; cursor:pointer; padding:18px 18px; display:flex; align-items:center; gap:12px; font-weight:600; font-size:14px; color:var(--ink)}
.symptom-detail summary::-webkit-details-marker{display:none}
.symptom-detail summary .sy-ic{font-size:22px}
.symptom-detail summary::after{content:'+'; margin-left:auto; font-size:18px; color:var(--rust); font-weight:400}
.symptom-detail[open] summary::after{content:'−'}
.symptom-detail[open]{border-color:var(--rust); box-shadow:var(--shadow)}
.symptom-detail-body{padding:0 18px 18px; font-size:13.5px; color:var(--ink-soft); line-height:1.75}
.symptom-detail-body .decision-list{list-style:none; margin:8px 0}
.symptom-detail-body .decision-list li{padding:8px 0 8px 22px; position:relative; border-top:1px dashed var(--border)}
.symptom-detail-body .decision-list li:first-child{border-top:none}
.symptom-detail-body .decision-list li::before{content:'→'; position:absolute; left:0; color:var(--rust); font-weight:700}
.symptom-detail-body a{color:var(--rust-deep); font-weight:600; text-decoration:none}
.symptom-detail-body a:hover{text-decoration:underline}
.entry-lookfor{background:var(--gold-pale); border-radius:10px; padding:12px 14px; margin:12px 0 4px}
.entry-lookfor-label{font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; color:var(--rust-deep); margin-bottom:6px; display:block}
.entry-lookfor ul{list-style:none; margin:0}
.entry-lookfor ul li{font-size:12.8px; color:var(--ink-soft); line-height:1.6; padding:2px 0 2px 18px; position:relative}
.entry-lookfor ul li::before{content:'→'; position:absolute; left:0; color:var(--rust-deep); font-weight:700}
.img-placeholder{width:100%; height:100%; min-height:260px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px; padding:22px; background:repeating-linear-gradient(135deg,var(--cream-deep),var(--cream-deep) 10px,var(--cream) 10px,var(--cream) 20px); border:2px dashed var(--border)}
.img-placeholder .ip-ic{font-size:26px; opacity:.55}
.img-placeholder .ip-label{font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--rust-deep)}
.img-placeholder .ip-list{font-size:11.5px; color:var(--ink-soft); line-height:1.6}
.fact-box{background:var(--cream-deep); border-radius:12px; padding:16px 18px; margin:14px 0}
.fact-box-label{font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px; display:block}
.fact-box dl{display:grid; grid-template-columns:auto 1fr; gap:5px 12px; margin:0}
.fact-box dt{font-size:12px; font-weight:700; color:var(--ink); white-space:nowrap}
.fact-box dd{font-size:12.5px; color:var(--ink-soft); margin:0; line-height:1.55}
.mistake-box{background:#FBEAEA; border-left:3px solid var(--down); border-radius:8px; padding:12px 16px; margin:14px 0; font-size:12.8px; color:var(--ink-soft); line-height:1.6}
.mistake-box strong{display:block; color:var(--ink); font-size:13px; margin-bottom:3px}
.urgent-box{background:#FFF3E0; border-left:3px solid var(--terracotta); border-radius:8px; padding:12px 16px; margin:14px 0; font-size:12.8px; color:var(--ink-soft); line-height:1.6}
.urgent-box strong{display:block; color:var(--ink); font-size:13px; margin-bottom:3px}
.entry-details{margin-top:14px; border-top:1px solid var(--border); padding-top:4px}
.entry-details summary{cursor:pointer; list-style:none; padding:10px 0; font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--rust-deep); display:flex; align-items:center; gap:8px}
.entry-details summary::-webkit-details-marker{display:none}
.entry-details summary::before{content:'▸'; font-size:12px}
.entry-details[open] summary::before{content:'▾'}
.entry-sources{margin-top:16px; padding-top:12px; border-top:1px dashed var(--border); font-family:var(--font-mono); font-size:11px; color:var(--ink-soft)}
.entry-sources a{color:var(--rust-deep); text-decoration:none; font-weight:600}
.entry-sources a:hover{text-decoration:underline}
.severity-pill.pill-urgent{background:#FBEAEA; color:var(--down)}
.severity-pill.pill-important{background:#FFF3E0; color:var(--terracotta)}
.severity-pill.pill-monitor{background:var(--gold-pale); color:var(--rust-deep)}
.season-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:28px}
.season-card{background:var(--paper); border:1px solid var(--border); border-radius:14px; padding:20px 20px; border-top:4px solid var(--slate)}
.season-card:nth-child(2){border-top-color:var(--gold)}
.season-card:nth-child(3){border-top-color:var(--terracotta)}
.season-card:nth-child(4){border-top-color:var(--rust)}
.season-card h4{font-size:14.5px; margin-bottom:2px}
.season-card .season-months{font-family:var(--font-mono); font-size:10.5px; color:var(--ink-soft); margin-bottom:10px; display:block}
.season-card ul{list-style:none; margin:0}
.season-card ul li{font-size:12.3px; color:var(--ink-soft); line-height:1.55; padding:3px 0 3px 16px; position:relative}
.season-card ul li::before{content:'•'; position:absolute; left:2px; color:var(--rust)}
.hub-cross-link{display:flex; gap:16px; flex-wrap:wrap; margin:28px 0}
.hub-cross-link .pillar-card{flex:1 1 260px}
@media (max-width:960px){
.season-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
.symptom-grid{grid-template-columns:repeat(2,1fr)}
.season-grid{grid-template-columns:1fr}
.fact-box dl{grid-template-columns:1fr}
}
/* ── Plantation Spacing Calculator ── */
.calc-section{background:var(--paper); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.calc-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0; background:var(--cream-deep); border:1px solid var(--border); border-radius:20px; overflow:hidden; margin-top:28px}
.calc-inputs{padding:32px 34px}
.calc-results{padding:32px 34px; background:var(--ink); color:var(--cream)}
.calc-unit-toggle{display:inline-flex; background:var(--paper); border:1px solid var(--border); border-radius:20px; padding:3px; margin-bottom:22px}
.calc-unit-toggle button{
border:none; background:transparent; font-family:var(--font-mono); font-size:12px; font-weight:600; padding:7px 16px;
border-radius:16px; cursor:pointer; color:var(--ink-soft);
}
.calc-unit-toggle button.active{background:var(--rust); color:#fff}
.calc-unit-label{font-family:var(--font-mono); font-size:11px; color:var(--ink-soft); margin-bottom:8px; display:block}
/* Accent variants so each tool doesn't read as identical brown-on-brown */
.calc-results.accent-slate .calc-headline{color:#7EE2A8}
.calc-results.accent-slate .calc-stat{border-color:rgba(143,180,199,.3)}
.calc-unit-toggle.accent-slate button.active{background:var(--slate)}
.calc-preset-btn.accent-slate.active, .calc-preset-btn.accent-slate:hover{border-color:var(--slate); color:var(--slate); background:var(--slate-pale)}
.calc-results.accent-terracotta .calc-headline{color:#F0A868}
.calc-results.accent-terracotta .calc-stat{border-color:rgba(224,165,118,.3)}
.calc-preset-btn.accent-terracotta.active, .calc-preset-btn.accent-terracotta:hover{border-color:var(--terracotta); color:var(--terracotta); background:#EFD9C4}
.calc-unit-toggle.accent-terracotta button.active{background:var(--terracotta)}
/* Spray calculator: each toggle's two options get their own "ripening
thread" color (green/gold) instead of one flat accent — a small,
deliberate way to use more of the site's stage palette here, since
this tool otherwise stays almost entirely orange/ink. Both variants use
dark text — white on --stage-raw measured only 3.28:1, under the 4.5:1
WCAG AA minimum for normal-size text; dark ink passes on both. */
#sprayModeToggle button[data-mode="volume"].active,
#doseUnitToggle button[data-unit="ml"].active{background:var(--stage-raw); color:var(--ink)}
#sprayModeToggle button[data-mode="tanks"].active,
#doseUnitToggle button[data-unit="g"].active{background:var(--stage-ripe); color:var(--ink)}
/* Summary chips: small colored dot per chip, reusing the same visual
language as .hero-stage-dot elsewhere on the site. */
.calc-chip{display:inline-flex; align-items:center; gap:6px}
.calc-chip-dot{width:7px; height:7px; border-radius:50%; flex-shrink:0}
.calc-field{margin-bottom:24px}
/* align-items:baseline used to align the input box against whichever
text line a wrapped, multi-line label's baseline happened to fall on —
fine for a short single-line label, but some languages' translations
("Total Tree Count" etc.) run long enough to wrap to 2 lines in a
narrow mobile column, which left the input floating at a seemingly
random height next to it. flex-start pins both to the top consistently;
flex-wrap lets the input drop to its own full-width line below the
label instead of squeezing beside it when there's truly no room. */
.calc-field-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:8px; margin-bottom:9px}
.calc-field-head label{font-size:13.5px; font-weight:600; color:var(--ink)}
.calc-field-head .val{font-family:var(--font-mono); font-size:14px; font-weight:600; color:var(--rust-deep); background:var(--paper); border:1px solid var(--border); border-radius:7px; padding:3px 10px; min-width:64px; text-align:center}
.calc-input-group{display:flex; align-items:center; gap:0; border:1.5px solid var(--border); border-radius:8px; overflow:hidden; background:var(--paper)}
.calc-input-group:focus-within{border-color:var(--slate)}
.calc-num-input{
width:72px; border:none; outline:none; padding:7px 8px; font-family:var(--font-mono); font-size:14px;
font-weight:600; color:var(--ink); text-align:right; background:transparent;
}
.calc-unit-suffix{font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); background:var(--cream-deep); padding:7px 10px; border-left:1px solid var(--border)}
.calc-error{font-size:11.5px; color:#A13A2E; margin-top:5px; min-height:14px; display:none}
.calc-error.show{display:block}
.calc-input-group.invalid{border-color:#A13A2E}
.calc-hint{font-size:11.5px; color:var(--ink-soft); margin-top:6px; line-height:1.5; font-style:italic}
.calc-select{
width:100%; border:none; outline:none; padding:10px 12px; font-family:var(--font-body); font-size:13.5px;
font-weight:600; color:var(--ink); background:transparent; cursor:pointer;
}
.calc-preview-scroll{max-height:440px; overflow:auto; border-radius:8px; background:rgba(0,0,0,.15)}
.calc-preview-svg-wrap{
display:inline-block; transform-origin:top left;
transition:transform .38s cubic-bezier(.2,.8,.3,1.3), opacity .3s ease; opacity:.85;
}
.calc-zoom-bar{display:flex; align-items:center; gap:8px; margin-bottom:8px}
.calc-zoom-btn{
width:26px; height:26px; border-radius:6px; border:1px solid rgba(255,255,255,.2);
background:rgba(255,255,255,.08); color:#fff; font-size:14px; font-weight:700; cursor:pointer;
display:flex; align-items:center; justify-content:center; line-height:1; transition:background .15s ease;
}
.calc-zoom-btn:hover{background:rgba(255,255,255,.18)}
.calc-zoom-btn:active{transform:scale(.94)}
.calc-zoom-level{font-family:var(--font-mono); font-size:11px; color:#B7A98F; min-width:38px; text-align:center}
.calc-zoom-hint{font-size:10.5px; color:#8c806c; margin-left:auto}
.calc-slider{
-webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:6px; background:var(--border); outline:none; cursor:pointer;
}
.calc-slider::-webkit-slider-thumb{
-webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%; background:var(--rust);
border:3px solid var(--paper); box-shadow:0 2px 6px rgba(36,28,21,.3); cursor:pointer; margin-top:-7px;
}
.calc-slider::-moz-range-thumb{width:20px; height:20px; border-radius:50%; background:var(--rust); border:3px solid var(--paper); box-shadow:0 2px 6px rgba(36,28,21,.3); cursor:pointer}
.calc-slider::-webkit-slider-runnable-track{height:6px; border-radius:6px}
.calc-slider::-moz-range-track{height:6px; border-radius:6px; background:var(--border)}
.calc-presets{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px}
.calc-preset-btn{font-family:var(--font-mono); font-size:11px; background:var(--paper); border:1px solid var(--border); color:var(--ink-soft); padding:6px 12px; border-radius:20px; cursor:pointer}
.calc-preset-btn:hover, .calc-preset-btn.active{border-color:var(--rust); color:var(--rust-deep); background:var(--gold-pale)}
/* Optional intercrop toggle + its expandable settings panel */
.calc-checkbox-row{display:flex; align-items:center; gap:9px; cursor:pointer; font-size:13.5px; font-weight:600; color:var(--ink)}
.calc-checkbox-row input[type="checkbox"]{width:17px; height:17px; accent-color:var(--terracotta); cursor:pointer; flex-shrink:0}
.calc-intercrop-panel{margin-top:16px; padding:16px; background:var(--paper); border:1px solid var(--border); border-radius:12px}
.calc-headline{font-family:var(--font-mono); font-size:12px; letter-spacing:1.4px; text-transform:uppercase; color:#F0AC1E; margin-bottom:10px}
.calc-total{font-family:var(--font-mono); font-size:52px; font-weight:600; line-height:1; color:#fff; margin-bottom:4px}
.calc-total small{font-size:16px; font-weight:500; color:#C7B79E; margin-left:6px}
.calc-sub{font-size:14.5px; font-weight:600; color:#EFE6D4; margin-bottom:22px}
.calc-stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:24px}
.calc-stat{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:10px; padding:14px 16px}
.calc-stat .n{font-family:var(--font-mono); font-size:19px; font-weight:600; color:#fff}
.calc-stat .l{font-size:10.5px; color:#B7A98F; text-transform:uppercase; letter-spacing:.5px; margin-top:3px}
.calc-preview{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:14px}
/* ── Modernised calculator visuals ── */
.calc-hero-result{
background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:14px;
padding:18px 20px; margin-bottom:16px;
}
.calc-hero-label{font-family:var(--font-mono); font-size:10.5px; letter-spacing:1px; text-transform:uppercase; opacity:.7; margin-bottom:6px}
.calc-hero-value{font-family:var(--font-mono); font-size:34px; font-weight:600; line-height:1.1}
.calc-hero-value small{font-size:14px; font-weight:500; opacity:.75; margin-left:6px}
/* Horizontal comparison bars (density, tank fill, dose split) */
.calc-bar-row{margin:12px 0}
.calc-bar-head{display:flex; justify-content:space-between; align-items:baseline; font-size:12px; margin-bottom:5px; opacity:.9}
.calc-bar-head .v{font-family:var(--font-mono); font-weight:600}
.calc-bar-track{height:10px; border-radius:6px; background:rgba(255,255,255,.12); overflow:hidden}
.calc-bar-fill{height:100%; border-radius:6px; transition:width .45s cubic-bezier(.2,.8,.3,1)}
/* Quick summary chips under the headline number */
.calc-chip-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.calc-chip{
font-family:var(--font-mono); font-size:11px; padding:5px 11px; border-radius:20px;
background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16);
}
/* Copy-to-clipboard / share result button */
.calc-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
/* ── Fertilizer Dose & Compatibility Calculator ── */
.fert-framework-tabs{display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 4px}
.fert-framework-btn{flex:1 1 220px; text-align:left; background:var(--paper); border:1.5px solid var(--border); border-radius:12px; padding:14px 16px; cursor:pointer; font-family:var(--font-body)}
.fert-framework-btn strong{display:block; font-size:13.5px; color:var(--ink); margin-bottom:3px}
.fert-framework-btn span{display:block; font-size:11.5px; color:var(--ink-soft); line-height:1.5}
.fert-framework-btn.active{border-color:var(--rust); background:var(--gold-pale)}
.fert-framework-btn.active strong{color:var(--rust-deep)}
.fert-framework-note{font-size:12.5px; color:var(--ink-soft); margin:10px 0 4px; font-style:italic}
.fert-soiltype-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.fert-soiltype-btn{font-family:var(--font-body); font-size:12px; background:var(--paper); border:1.5px solid var(--border); color:var(--ink-soft); padding:8px 14px; border-radius:20px; cursor:pointer}
.fert-soiltype-btn:hover{border-color:var(--slate)}
/* --slate on --slate-pale measured 2.74:1 (see the same fix on
.fp-warning-info above) — darkened text only, background/border unchanged. */
.fert-soiltype-btn.active{border-color:var(--slate); color:#0F6B34; background:var(--slate-pale); font-weight:600}
/* Colourful, light plan card — replaces the dark accent-slate treatment
used by the other two calculators (this tool gets its own look). */
:root{
--fert-primary: var(--rust-deep); --fert-primary-bg: var(--gold-pale);
/* Darkened from #B85A1E, which measured 3.59:1 on --fert-secondary-bg —
below the 4.5:1 required for the category header text. */
--fert-secondary: #8A4315; --fert-secondary-bg: #F5DFC4;
--fert-micro: #7A2F9E; --fert-micro-bg: #F1E3F8;
--fert-organic: #1B6B3A; --fert-organic-bg: #E1F5E8;
}
.fert-plan-card{background:var(--paper); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:30px 32px; border-top:6px solid; border-image:linear-gradient(90deg,var(--fert-primary),var(--fert-secondary),var(--fert-micro),var(--fert-organic)) 1}
.fert-plan-headline{font-family:var(--font-display); font-size:20px; color:var(--ink); margin-bottom:4px}
.fert-plan-chips .calc-chip{background:var(--cream-deep); border:1px solid var(--border); color:var(--ink-soft)}
.fert-plan-hint{font-size:12px; color:var(--ink-soft); margin-top:10px}
.fert-results-table{width:100%; margin-top:14px}
.fert-results-table th{background:var(--cream-deep); color:var(--ink-soft)}
.fert-results-table th:nth-child(2), .fert-results-table th:nth-child(3),
.fert-results-table td:nth-child(2), .fert-results-table td:nth-child(3){text-align:right; font-family:var(--font-mono)}
.fert-cat-row td{font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; padding:9px 14px; border-bottom:none}
.fert-cat-primary td{background:var(--fert-primary-bg); color:var(--fert-primary)}
.fert-cat-secondary td{background:var(--fert-secondary-bg); color:var(--fert-secondary)}
.fert-cat-micro td{background:var(--fert-micro-bg); color:var(--fert-micro)}
.fert-cat-organic td{background:var(--fert-organic-bg); color:var(--fert-organic)}
.fert-advisory-row td{padding:0 14px 10px; border-bottom:none}
.fert-advisory-row td:not([style*="display:none"]){font-size:11.5px; color:var(--rust-deep); line-height:1.5; font-style:italic}
.fert-carrier-select{background:transparent; border:none; border-bottom:1px dashed var(--border); color:var(--ink); font-family:var(--font-body); font-size:13px; padding:2px 0; cursor:pointer}
.fert-carrier-select:focus{outline:none; border-bottom-color:var(--rust)}
.fert-row-input-wrap{display:inline-flex; align-items:center; gap:5px; justify-content:flex-end}
.fert-row-input{width:66px; text-align:right; background:var(--cream); border:1px solid var(--border); border-radius:6px; color:var(--ink); font-family:var(--font-mono); font-size:13px; padding:4px 6px}
.fert-row-input:focus{outline:none; border-color:var(--rust)}
.fert-row-unit{font-family:var(--font-mono); font-size:11px; color:var(--ink-soft); width:22px; text-align:left}
.fert-age-note{font-size:12.5px; color:var(--ink-soft); margin-top:14px}
.fert-cost-box{background:var(--gold-pale); border-radius:12px; padding:18px 20px; margin-top:22px}
.fert-cost-totals{display:flex; gap:14px; flex-wrap:wrap; margin-top:14px; padding-top:14px; border-top:1px dashed var(--border)}
.fert-cost-totals div{background:var(--paper); border:1px solid var(--border); border-radius:10px; padding:10px 16px; flex:1 1 140px}
.fert-cost-totals span{display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.5px; text-transform:uppercase; color:var(--ink-soft); margin-bottom:3px}
.fert-cost-totals strong{font-family:var(--font-mono); font-size:18px; color:var(--ink)}
.fert-cost-totals .fert-cost-grand{background:var(--gold-pale); border-color:var(--rust)}
.fert-cost-totals .fert-cost-grand strong{color:var(--rust-deep)}
/* Give each major container on this page its own subtle tint, rather
than the whole page reading as one flat cream/white block. (Backgrounds
for .fert-quick-check and .fert-sequence-box are set at their main rule
definitions further below, not here, so the cascade doesn't fight itself.) */
:root{ --fert-quick-bg: #E3F1F8; --fert-quick-accent: #1F6FA0; }
.fert-inputs-panel{background:linear-gradient(180deg,#EFF7FB,var(--paper) 220px); border-radius:var(--radius)}
.fert-quick-check .eyebrow{color:var(--fert-quick-accent)}
.fert-quick-row select:focus{outline:none; border-color:var(--fert-quick-accent)}
.fert-compat-card{background:linear-gradient(180deg,var(--fert-micro-bg) 0,var(--paper) 140px)}
.fert-compat-card .eyebrow{color:var(--fert-micro)}
.fert-sequence-box .fert-suggest-label{color:var(--fert-organic)}
.fert-cta-disease{border-left:4px solid var(--fert-primary)}
.fert-cta-spray{background:var(--fert-secondary-bg); border-left:4px solid var(--fert-secondary)}
.fert-ph-note{border-radius:10px; padding:12px 14px; margin-top:10px; font-size:12.8px; line-height:1.6}
.fert-tone-ok{background:#E6F6EC; color:#1B6B3A}
.fert-tone-caution{background:#FFF3E0; color:#8A5A12}
.fert-tone-avoid{background:#FBEAEA; color:#A3261A}
.fert-ingredient-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; margin:10px 0 16px}
.fert-ingredient-chip{display:flex; align-items:center; gap:9px; background:var(--paper); border:1.5px solid var(--border); border-radius:10px; padding:10px 12px; cursor:pointer; font-size:12.8px; color:var(--ink-soft)}
.fert-ingredient-chip input{width:16px; height:16px; flex-shrink:0}
.fert-ingredient-cat{font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; padding:5px 12px; border-radius:20px; display:inline-block; margin:18px 0 2px}
.fert-ingredient-cat:first-child{margin-top:4px}
#fertIngredientsPrimary .fert-ingredient-chip:has(input:checked){border-color:var(--fert-primary); background:var(--fert-primary-bg); color:var(--ink)}
#fertIngredientsPrimary .fert-ingredient-chip input{accent-color:var(--fert-primary)}
#fertIngredientsSecondary .fert-ingredient-chip:has(input:checked){border-color:var(--fert-secondary); background:var(--fert-secondary-bg); color:var(--ink)}
#fertIngredientsSecondary .fert-ingredient-chip input{accent-color:var(--fert-secondary)}
#fertIngredientsMicro .fert-ingredient-chip:has(input:checked){border-color:var(--fert-micro); background:var(--fert-micro-bg); color:var(--ink)}
#fertIngredientsMicro .fert-ingredient-chip input{accent-color:var(--fert-micro)}
#fertIngredientsOrganic .fert-ingredient-chip:has(input:checked){border-color:var(--fert-organic); background:var(--fert-organic-bg); color:var(--ink)}
#fertIngredientsOrganic .fert-ingredient-chip input{accent-color:var(--fert-organic)}
.fert-cat-label-primary{background:var(--fert-primary-bg); color:var(--fert-primary)}
.fert-cat-label-secondary{background:var(--fert-secondary-bg); color:var(--fert-secondary)}
.fert-cat-label-micro{background:var(--fert-micro-bg); color:var(--fert-micro)}
.fert-cat-label-organic{background:var(--fert-organic-bg); color:var(--fert-organic)}
.fert-preset-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:6px}
.fert-quick-check{background:var(--fert-quick-bg); border-radius:14px; padding:22px 24px; margin-bottom:28px}
.fert-quick-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:12px}
.fert-quick-row select{flex:1 1 220px; min-width:0; background:var(--paper); border:1.5px solid var(--border); border-radius:10px; padding:10px 12px; font-family:var(--font-body); font-size:13px; color:var(--ink)}
.fert-quick-plus{font-family:var(--font-mono); font-weight:700; color:var(--ink-soft); flex:0 0 auto}
.fert-quick-check .fert-compat-results{margin-top:16px}
.fert-compat-results{margin-top:20px; display:flex; flex-direction:column; gap:10px}
.fert-compat-row{border-radius:10px; padding:12px 14px}
.fert-compat-row strong{display:block; font-size:13px; color:var(--ink); margin:4px 0 3px}
.fert-compat-row p{font-size:12.5px; color:var(--ink-soft); line-height:1.6; margin:0}
.fert-compat-pill{font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.4px}
.fert-compat-empty{font-size:13px; color:var(--ink-soft); padding:10px 0}
.fert-suggest-label{font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--rust-deep); margin:20px 0 8px}
.fert-compat-suggestions ul{list-style:none; margin:0}
.fert-compat-suggestions ul li{font-size:12.8px; color:var(--ink-soft); line-height:1.6; padding:6px 0 6px 20px; position:relative; border-top:1px dashed var(--border)}
.fert-compat-suggestions ul li:first-child{border-top:none}
.fert-compat-suggestions ul li::before{content:'💡'; position:absolute; left:0; top:5px; font-size:11px}
.fert-sequence-box{background:var(--fert-organic-bg); border-radius:12px; padding:18px 20px; margin-top:26px}
.fert-sequence-box ol{margin:8px 0 0 18px; padding:0}
.fert-sequence-box ol li{font-size:12.8px; color:var(--ink-soft); line-height:1.65; padding:5px 0}
@media (max-width:640px){
.fert-framework-btn{flex:1 1 100%}
.fert-ingredient-grid{grid-template-columns:repeat(2,1fr)}
.fert-soiltype-btn{flex:1 1 45%; text-align:center}
.fert-quick-row{flex-direction:column; align-items:stretch}
.fert-quick-row select{flex-basis:auto; width:100%}
.fert-quick-plus{text-align:center}
}
/* ── Lead-capture modal (before Copy/Print) ── */
.lead-modal-overlay{
display:none; position:fixed; inset:0; background:rgba(20,14,8,.6); z-index:300;
align-items:center; justify-content:center; padding:20px;
}
.lead-modal-overlay.show{display:flex}
.lead-modal{
background:var(--paper); border-radius:16px; padding:28px 26px; max-width:380px; width:100%;
box-shadow:var(--shadow-lg); position:relative;
}
.lead-modal-close{
position:absolute; top:14px; right:14px; width:28px; height:28px; border-radius:50%; border:none;
background:var(--cream-deep); color:var(--ink-soft); font-size:16px; cursor:pointer; line-height:1;
}
.lead-modal h3{font-size:18px; margin-bottom:6px; color:var(--ink)}
.lead-modal > p{font-size:12.5px; color:var(--ink-soft); margin-bottom:18px; line-height:1.6}
.lead-modal .form-group{margin-bottom:12px}
.lead-modal .form-group label{font-size:12px; font-weight:600; color:var(--ink-soft); margin-bottom:5px; display:block}
.lead-modal .form-group input{
width:100%; padding:11px 12px; border:1px solid var(--border); border-radius:8px; background:var(--cream);
font-family:var(--font-body); font-size:14px;
}
.phone-field{display:flex; gap:8px}
.phone-field input{flex:1; min-width:0}
.country-code-select{
flex:0 0 auto; max-width:112px; padding:11px 8px; border:1px solid var(--border); border-radius:8px; background:var(--cream);
font-family:var(--font-body); font-size:13px; color:var(--ink);
}
.lead-modal-error{font-size:12px; color:#C23A2A; margin:-4px 0 10px; display:none}
.lead-modal-error.show{display:block}
.lead-modal-note{font-size:11px; color:var(--ink-soft); margin-top:12px; text-align:center; line-height:1.5}
/* Honeypot: real visitors never see or reach this field (off-screen, not
display:none — some bots skip display:none but still fill hidden-off-
screen fields, which is exactly what catches them). Anything filled in
here means it was an automated submission, not a person. */
.lead-hp-field{position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden}
.calc-action-btn{
display:inline-flex; align-items:center; gap:6px; font-family:var(--font-body); font-size:12.5px; font-weight:600;
padding:9px 16px; border-radius:8px; cursor:pointer; border:1px solid rgba(255,255,255,.22);
background:rgba(255,255,255,.08); color:#fff; transition:background .15s ease, transform .15s ease;
}
.calc-action-btn:hover{background:rgba(255,255,255,.16)}
.calc-action-btn:active{transform:scale(.97)}
/* Tree Spacing & Spray Calculators' action rows — site-standard bright
accent colors instead of the plain translucent-white default, so Copy/
Print/Share read as three distinct, tappable actions. Gold and green
both need dark ink text for contrast (white-on-gold/green fails WCAG
AA — same reasoning as the spray calculator's stage-color toggle above). */
#calcCopyBtn, #sprayCopyBtn{background:var(--gold); color:var(--ink); border-color:transparent}
#calcCopyBtn:hover, #sprayCopyBtn:hover{background:#D89616}
#calcPrintBtn, #sprayPrintBtn{background:var(--rust); color:#fff; border-color:transparent}
#calcPrintBtn:hover, #sprayPrintBtn:hover{background:var(--rust-deep)}
#calcShareBtn, #sprayShareBtn{background:var(--slate); color:var(--ink); border-color:transparent}
#calcShareBtn:hover, #sprayShareBtn:hover{background:#128A3E}
.calc-copied-note{font-size:11.5px; opacity:.8; margin-top:8px; display:none}
.calc-copied-note.show{display:block}
/* The fertilizer plan card is light, unlike the other calculators' dark
results panel — the shared button styling above (white-on-translucent-
white) is invisible there, so give it its own visible treatment. */
.fert-plan-card .calc-action-btn{color:#fff; border-color:transparent}
.fert-plan-card #fertCopyBtn{background:var(--ink); }
.fert-plan-card #fertCopyBtn:hover{background:var(--ink-soft)}
.fert-plan-card #fertPrintBtn{background:var(--rust)}
.fert-plan-card #fertPrintBtn:hover{background:var(--rust-deep)}
.fert-plan-card #fertWhatsappBtn{background:#25D366}
.fert-plan-card #fertWhatsappBtn:hover{background:#1DA851}
.fert-plan-card .calc-copied-note{color:var(--ink-soft); opacity:1}
.calc-preview-label{font-family:var(--font-mono); font-size:10.5px; color:#B7A98F; text-transform:uppercase; letter-spacing:.6px; margin-bottom:10px}
/* Scoped to the actual chart wrapper only — NOT ".calc-preview svg", which
would also catch the small legend icon SVGs below and stretch them to
fill their flex-item width (they'd render as giant blobs instead of a
compact 14px legend mark). */
.calc-preview-svg-wrap svg{width:100%; height:auto; display:block}
/* Intercrop preview legend — small colored chips, shape + count per crop */
.calc-legend{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px}
.calc-legend-item{
display:inline-flex; align-items:center; gap:7px; font-size:12px; color:#EFE6D4;
background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:20px;
padding:6px 12px 6px 8px; line-height:1;
}
.calc-legend-item svg{width:14px; height:14px; flex-shrink:0; display:block}
.calc-legend-label{color:#EFE6D4}
.calc-legend-item strong{color:#fff; font-family:var(--font-mono); font-size:13px}
/* ══════════════════════ SKELETON LOADERS ══════════════════════ */
@keyframes skeletonPulse{0%{opacity:.55}50%{opacity:1}100%{opacity:.55}}
.skel-card{
display:grid; grid-template-columns:220px 1fr; background:var(--paper); border:1px solid var(--border);
border-radius:18px; overflow:hidden; margin-bottom:22px;
}
.skel-img{background:var(--cream-deep); animation:skeletonPulse 1.6s ease-in-out infinite; min-height:230px}
.skel-body{padding:24px 28px; display:flex; flex-direction:column; gap:14px}
.skel-line{height:14px; border-radius:6px; background:var(--cream-deep); animation:skeletonPulse 1.6s ease-in-out infinite}
.skel-line.w-30{width:30%} .skel-line.w-50{width:50%} .skel-line.w-70{width:70%} .skel-line.w-100{width:100%}
.skel-line.h-tall{height:120px; border-radius:12px}
/* ══════════════════════ SCROLL-REVEAL ══════════════════════ */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease}
.reveal.in-view{opacity:1; transform:translateY(0)}
/* ══════════════════════ HOVER / PRESS POLISH ══════════════════════ */
.btn{transition:transform .15s ease, box-shadow .15s ease, background .15s ease}
.btn:active{transform:translateY(0) scale(.97)}
.card, .pillar-card, .rate-card, .entry-card{transition:transform .2s ease, box-shadow .2s ease}
.pillar-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.rate-card:hover{box-shadow:var(--shadow-lg)}
.calc-preset-btn, .rate-delta, .manure-tag, .hero-stage-chip{transition:transform .15s ease}
.calc-preset-btn:active{transform:scale(.96)}
.wa-float{transition:transform .2s ease, box-shadow .2s ease}
.wa-float:hover{transform:scale(1.08)}
.nav-links a{transition:background .15s ease, color .15s ease}
.topbar-social a{transition:transform .15s ease, background .15s ease}
.topbar-social a:hover{transform:translateY(-2px); background:rgba(246,230,196,.12)}
/* ══════════════════════ RIPENING JOURNEY DIAGRAM ══════════════════════ */
.journey-section{background:var(--ink)}
.journey-row{display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; align-items:center; gap:6px; margin-top:36px}
.journey-stage{text-align:center}
.journey-dot{width:64px; height:64px; border-radius:50%; margin:0 auto 12px; display:flex; align-items:center; justify-content:center; font-size:26px; box-shadow:0 0 0 6px rgba(255,255,255,.06)}
.journey-stage h5{color:#fff; font-size:14px; margin-bottom:4px}
.journey-stage p{color:#B7A98F; font-size:11.5px}
.journey-arrow{color:var(--gold); font-size:22px; opacity:.6}
/* ══════════════════════ PRINT STYLES (calculators) ══════════════════════ */
/* ══════════════════════════════════════════════════════════════════════
RESPONSIVE — consolidated into exactly two breakpoints, kept together
in one place. Previously this was 15 separate @media blocks scattered
across the file at 8 different, uncoordinated widths (480/600/720/
860/900/960/980px) — nav, grids, and spacing all shifted at different
points, which is what caused inconsistent/broken in-between states on
real devices. Now: 960px (tablet — nav becomes the hamburger menu and
every multi-column grid collapses at the SAME point) and 640px
(phone — finer spacing/font tweaks layered on top).
══════════════════════════════════════════════════════════════════════ */
@media (max-width:960px){
/* Nav → hamburger */
.nav-links{
position:fixed; top:0; right:0; height:100vh; width:78%; max-width:320px; background:var(--paper);
flex-direction:column; align-items:stretch; padding:80px 24px 24px; gap:4px; box-shadow:-10px 0 30px rgba(0,0,0,.15);
transform:translateX(100%); transition:transform .25s ease; overflow-y:auto;
}
/* iOS Safari: 100vh doesn't account for the address bar showing/hiding,
so the menu can render taller than what's actually visible, cutting
off the last item behind Safari's toolbar. 100dvh tracks the real
visible viewport; unsupported browsers just ignore this line and
keep the 100vh fallback above. */
@supports (height:100dvh){
.nav-links{height:100dvh}
}
.nav-links.open{transform:translateX(0)}
.nav-links a{padding:13px 16px; font-size:15px}
.nav-toggle{display:block}
.nav-dropdown .nav-dd-menu{position:static; box-shadow:none; border:none; margin:0 0 4px 12px; padding:0; display:none; min-width:0}
.nav-dropdown.open .nav-dd-menu{display:block}
/* Topbar: drop the location/phone/email row so the WhatsApp CTA and
socials don't get cramped; full contact details are one tap away
in the footer and Contact section anyway. */
.topbar-links{display:none}
.topbar .wrap{justify-content:center}
.topbar-right{width:100%; justify-content:center}
.topbar-wa-cta{flex:1; justify-content:center; max-width:280px}
/* Every multi-column grid collapses here, together, at the same
width — this is the fix for the "haywire" in-between states. */
.pillar-grid{grid-template-columns:repeat(2,1fr)}
.pillar-grid-2, .pillar-grid-3{grid-template-columns:1fr}
.drone-grid, .manure-grid, .about-teaser .wrap, .contact-grid, .band-wa .wrap{grid-template-columns:1fr; gap:28px}
.footer-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px}
.admin-grid{grid-template-columns:repeat(2,1fr)}
.rate-card{grid-template-columns:1fr}
.rate-card-img{min-height:160px}
.rate-card-body{border-left:none; border-top:1px solid var(--border)}
.entry-card, .entry-card:nth-child(even){grid-template-columns:1fr}
.entry-card:nth-child(even) .entry-img{order:0}
.entry-img{min-height:200px}
.toc-bar{position:static}
.calc-grid{grid-template-columns:minmax(0,1fr)}
.calc-total{font-size:44px}
.journey-row{grid-template-columns:1fr; gap:22px}
.journey-arrow{transform:rotate(90deg)}
.skel-card{grid-template-columns:1fr}
.skel-img{min-height:160px}
.form-row{grid-template-columns:1fr}
/* Section spacing / hero */
.section{padding:52px 0}
.section-tight{padding:36px 0}
.hero{padding:52px 0 40px}
.hero-cta-row .btn{flex:1 1 auto; justify-content:center; text-align:center}
.trade-strip .wrap{flex-direction:column; text-align:center}
.band-ig .wrap{flex-direction:column; text-align:center}
.band-wa .wrap{text-align:left}
.wa-float{width:50px; height:50px; font-size:20px; bottom:16px; right:16px}
.rate-card-head{flex-direction:column; align-items:flex-start}
.rate-card-head > div:last-child{text-align:left; margin-top:6px}
.stat-row{gap:22px}
}
@media (max-width:640px){
.wrap{padding:0 18px}
h1{font-size:28px !important}
h2.section-title{font-size:23px}
.eyebrow{font-size:10px; letter-spacing:1.2px}
/* The two wide gallery tiles use their photos' native (very wide/short)
aspect ratio on desktop for a zero-crop fit, but at phone widths that
makes them too short for the caption to sit comfortably — give them
more height here instead, accepting a bit of side cropping. */
.drone-gallery-item-lg, .drone-gallery-item-wide{aspect-ratio:16/9}
.admin-grid{grid-template-columns:1fr}
.rate-range{font-size:25px}
.rate-week-change{justify-content:flex-start}
.toc-inner{overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; -webkit-overflow-scrolling:touch}
.btn{padding:12px 20px; font-size:14px}
.calc-inputs, .calc-results{padding:24px 20px}
.calc-stat-grid{grid-template-columns:1fr 1fr; gap:10px}
.calc-total{font-size:38px}
.uc-ticker-item{padding:6px 20px; font-size:10px}
/* ── Fertilizer calculator results card — scoped to this tool only,
doesn't touch the shared .table-scroll table min-width used by the
other two calculators. Tables shrink to the phone's real width
instead of forcing a horizontal scroll; long fertilizer names wrap
to a second line rather than being clipped. */
.fert-plan-card{padding:20px 16px}
.fert-cost-box{padding:14px 14px}
.fert-plan-card .table-scroll table{min-width:0; width:100%}
.fert-results-table th, .fert-results-table td,
.fert-cost-box table th, .fert-cost-box table td{padding:9px 8px; font-size:12.5px}
.fert-row-input{width:56px; font-size:12.5px}
/* Even, predictable column widths instead of the browser's auto-layout
squeezing whichever column has the least content (e.g. "Whole Farm /
Year" wrapping into 4 ragged lines while "Per Tree / Year" got 2). */
.fert-results-table{table-layout:fixed}
.fert-results-table th:nth-child(1), .fert-results-table td:nth-child(1){width:38%}
.fert-results-table th:nth-child(2), .fert-results-table td:nth-child(2){width:31%}
.fert-results-table th:nth-child(3), .fert-results-table td:nth-child(3){width:31%}
.fert-cost-box table{table-layout:fixed}
.fert-cost-box table th:nth-child(1), .fert-cost-box table td:nth-child(1){width:30%}
.fert-cost-box table th:nth-child(2), .fert-cost-box table td:nth-child(2){width:20%}
.fert-cost-box table th:nth-child(3), .fert-cost-box table td:nth-child(3){width:28%}
.fert-cost-box table th:nth-child(4), .fert-cost-box table td:nth-child(4){width:22%}
/* The "/kg" suffix next to every price input is redundant with the
"Price / kg" column header — dropping it on mobile frees enough
width for the Cost column to actually stay on screen. */
.fert-unit-suffix{display:none}
.fert-price-input{width:38px}
}
/* ── Print-only branding (hidden on screen) ── */
.print-brand-header, .print-brand-footer, .print-doc-title, .print-page-footer{display:none}
.fert-print-only, .fert-compat-print-intro{display:none}
.fert-print-tip{font-size:11px; color:var(--ink-soft); margin-top:8px; font-style:italic}
@media print{
/* Extra bottom margin reserves room for the repeating page-footer bar
(a position:fixed element, which paints at the same spot on every
printed page rather than just once). */
@page{margin:12mm 11mm 18mm 11mm}
/* Chrome/Edge honour background colours only with this set. */
*{-webkit-print-color-adjust:exact !important; print-color-adjust:exact !important}
/* Strip everything interactive or navigational */
.uc-ticker, .topbar, nav.site-nav, .wa-float, footer, .band, .article-cta,
.calc-slider, .calc-unit-toggle, .calc-presets, .calc-hint, .nav-toggle,
.calc-actions, .calc-copied-note, .calc-inputs,
.faq-section, .tool-page-hero, .lead-modal-overlay{display:none !important}
body{background:#fff; font-size:11px; color:#1F160E}
/* ── Fertilizer plan report: swap live form controls for plain text ── */
.fert-row-input-wrap, .fert-carrier-select{display:none !important}
.fert-print-only{display:inline !important; font-weight:600; color:#1F160E}
.fert-print-tip{display:none !important}
.fert-plan-card{border-top:4px solid #D8431A !important; border-image:none !important; box-shadow:none !important}
/* Hide the ingredient-picker UI (checkboxes/preset buttons make no sense
on paper) — keep only the compatibility results it produced. */
.fert-preset-row, .fert-ingredient-cat, .fert-ingredient-grid, .fert-compat-card > .section-sub{display:none !important}
.fert-compat-card{break-before:page}
.fert-compat-print-intro{display:block !important; font-size:11px; color:#5A5148; margin:4px 0 14px}
/* Page-break hygiene: never split a table row, a category header from
its first row, or a result/summary card across two pages. */
.fert-results-table tr, .fert-cost-box table tr{break-inside:avoid}
.fert-cat-row{break-after:avoid}
.fert-advisory-row{break-inside:avoid; break-before:avoid}
.fert-compat-row, .fert-sequence-box, .fert-cost-totals > div{break-inside:avoid}
/* ── Repeating page footer (position:fixed repaints on every printed
page — the standard way to get a running footer without CSS Paged
Media support, which Chrome/Edge lack for arbitrary @page content). ── */
.print-page-footer{
display:flex !important; position:fixed; bottom:0; left:0; right:0;
justify-content:center; flex-wrap:wrap; gap:14px;
padding:6px 11mm; border-top:1px solid #DDC9A0; background:#fff;
font-family:var(--font-mono); font-size:8px; color:#5A5148;
}
/* ── Branded letterhead ── */
.print-brand-header{
display:flex !important; align-items:center; gap:12px;
border-bottom:3px solid #D8431A; padding-bottom:10px; margin-bottom:4px;
}
.print-logo{width:46px; height:46px; object-fit:contain}
.print-brand-text{flex:1; display:flex; flex-direction:column}
.print-brand-text strong{font-family:var(--font-display); font-size:19px; color:#D8431A; line-height:1.15}
.print-brand-text span{font-size:9px; color:#5A5148; letter-spacing:.2px}
.print-brand-contact{display:flex; flex-direction:column; text-align:right; font-family:var(--font-mono); font-size:9px; color:#1F160E; line-height:1.6}
/* Document title bar under the letterhead */
.print-doc-title{
display:block !important; font-family:var(--font-display); font-size:15px; color:#1F160E;
margin:12px 0 14px; padding-bottom:6px; border-bottom:1px solid #DDC9A0;
}
.print-doc-title small{display:block; font-family:var(--font-body); font-size:9px; color:#6B6156; font-weight:400; margin-top:3px}
/* ── Results card ── */
.calc-grid{display:block !important}
.calc-results{
border:1px solid #DDC9A0 !important; border-radius:8px; background:#FFFDF8 !important;
color:#1F160E !important; box-shadow:none !important; padding:16px 18px !important;
page-break-inside:avoid; break-inside:avoid;
}
/* Tree Spacing Calculator only: its .calc-results card is much taller
than the fertilizer/spray calculators' (stats block + a large preview,
see #calcPreviewSvg below) — forcing the WHOLE card to avoid a page
break pushed it entirely onto page 2, leaving page 1 almost blank
under the letterhead. Letting THIS page's card break naturally keeps
the stats on page 1 and only pushes the preview itself (which keeps
its own break-inside:avoid) to a fresh page if it doesn't fit — same
pattern as .quick-fert-page's override below. */
.tree-spacing-page .calc-results{page-break-inside:auto !important; break-inside:auto !important}
.calc-headline{color:#D8431A !important; font-size:10px !important; letter-spacing:1.2px}
.calc-total{color:#1F160E !important; font-size:40px !important; margin:2px 0 2px}
.calc-total small{color:#6B6156 !important}
.calc-sub{color:#5A5148 !important; font-size:11px !important}
.calc-chip{
border:1px solid #DDC9A0 !important; background:#F6EFE0 !important; color:#5A4A2E !important;
font-size:9.5px !important;
}
.calc-stat{
border:1px solid #DDC9A0 !important; background:#fff !important; border-radius:6px;
}
.calc-stat .n{color:#1F160E !important; font-size:17px !important}
.calc-stat .l{color:#6B6156 !important; font-size:8.5px !important}
.calc-bar-head{color:#5A5148 !important}
.calc-bar-head .v{color:#1F160E !important}
.calc-bar-track{border:1px solid #DDC9A0; background:#F6EFE0 !important; height:8px}
.calc-bar-fill{background:#17A34E !important}
.calc-preview{
background:#FFFDF8 !important; border:1px solid #DDC9A0 !important; border-radius:6px;
padding:12px !important; page-break-inside:avoid; break-inside:avoid;
}
.calc-preview-label{color:#6B6156 !important; font-size:9px !important}
/* The legend's light-cream text (styled for the dark on-screen preview
panel) was nearly invisible against print's near-white background. */
.calc-legend-item{background:#F6EFE0 !important; border-color:#DDC9A0 !important}
.calc-legend-label{color:#5A5148 !important}
.calc-legend-item strong{color:#1F160E !important}
/* Tree Spacing Calculator only: the printed plan read as flat cream-
and-ink — tint the headline number, the two summary chips, the two
area cards, and the legend with the site's own brand colors (green/
gold, the same pairing used for the Main Crop/Intercrop markers) so
it reads as a branded report rather than a plain grayscale printout. */
.tree-spacing-page .calc-total{color:#D8431A !important}
.tree-spacing-page .calc-preview{border-top:3px solid #D8431A !important}
.tree-spacing-page .calc-chip-row .calc-chip:nth-child(1){background:#EAF7EF !important; border-color:#17A34E !important; color:#12602F !important}
.tree-spacing-page .calc-chip-row .calc-chip:nth-child(2){background:#FDF3DD !important; border-color:#F0AC1E !important; color:#8A5B0A !important}
.tree-spacing-page .calc-stat-grid .calc-stat:nth-child(1){border-top:3px solid #17A34E !important}
.tree-spacing-page .calc-stat-grid .calc-stat:nth-child(1) .n{color:#12602F !important}
.tree-spacing-page .calc-stat-grid .calc-stat:nth-child(2){border-top:3px solid #F0AC1E !important}
.tree-spacing-page .calc-stat-grid .calc-stat:nth-child(2) .n{color:#8A5B0A !important}
.tree-spacing-page .calc-legend-item:nth-child(1){background:#FDF3DD !important; border-color:#F0AC1E !important}
.tree-spacing-page .calc-legend-item:nth-child(2){background:#EAF7EF !important; border-color:#17A34E !important}
.calc-preview-scroll{max-height:none !important; overflow:visible !important; background:none !important; text-align:center}
.calc-preview-svg-wrap{transform:none !important; opacity:1 !important; display:inline-block !important}
#sprayPreviewSvg svg{
max-width:100% !important; max-height:230px !important; width:auto !important; height:auto !important;
}
/* The Tree Spacing Calculator's on-screen preview is sized for
interactive zoom/scroll and can run to 700px+ tall for large
plantations — 230px squashed it down to illegible dots on paper.
550px reads clearly (dots, axis numbers, spacing callout) for typical
field sizes; a genuinely huge plantation's preview may still need to
spill onto its own page rather than be shrunk to uselessness. */
#calcPreviewSvg svg{
max-width:100% !important; max-height:550px !important; width:auto !important; height:auto !important;
}
.calc-zoom-bar{display:none !important}
/* ── Promo footer: doubles as an ad on any printed copy ── */
.print-brand-footer{
display:block !important; margin-top:16px; padding:12px 14px; border-radius:8px;
background:#F6EFE0 !important; border:1px solid #DDC9A0;
page-break-inside:avoid; break-inside:avoid;
}
.print-promo-main strong{display:block; font-size:12px; color:#D8431A; margin-bottom:3px}
.print-promo-main span{display:block; font-size:8.5px; color:#5A5148; line-height:1.55}
.print-promo-links{
display:flex; gap:14px; flex-wrap:wrap; margin-top:9px; padding-top:8px;
border-top:1px solid #DDC9A0; font-family:var(--font-mono); font-size:8.5px; color:#1F160E;
}
.print-promo-note{margin-top:7px; font-size:8.5px; color:#6B6156; font-style:italic; line-height:1.5}
/* ── Quick Fertilizer Calculator print fixes ──
.calc-inputs (tree count + product picker + bag cards) is hidden by
the general print rule above, same as the other calculators — but
unlike them, nothing in .calc-results restates those inputs, so the
printed page would show results with no record of what produced
them. #quick-print-summary (screen-invisible, see .quick-print-only
below) fills that gap from inside .calc-results, which print CSS
keeps visible. */
/* .calc-results{page-break-inside:avoid} above is correct for the other
two tools, where it's a compact single-card result — but this tool's
.calc-results is a long scrolling report (results table + nutrients +
cost box). Forcing that whole thing to avoid a page break pushes it
entirely to page 2 the moment it doesn't fit the remaining space
under the header on page 1, leaving page 1 almost blank. Let it flow
naturally; individual rows/boxes stay protected on their own
(.fp-plan-table tr and .quick-highlight-box already have their own
break-inside:avoid, further up). */
.quick-fert-page .calc-results{page-break-inside:auto !important; break-inside:auto !important}
.quick-print-only{display:block !important}
.quick-print-summary-title{font-weight:700; font-size:11px; color:#1F160E; margin-bottom:4px}
#quick-print-summary ul{margin:0 0 14px; padding-left:16px; font-size:10px; color:#3A3226}
#quick-print-summary li{margin-bottom:2px}
/* The dark-.calc-results text-color fixes added for this tool (light
cream/gold text, readable on its near-black screen background) go
the opposite direction of print, which forces .calc-results to a
near-white background — left as-is those colors would be nearly
invisible on paper, so print needs its own dark values here. */
.calc-results .fp-plan-table tbody th{color:#1F160E !important}
.calc-results .fp-hint{color:#5A5148 !important}
.quick-result-card{background:#FFFDF8 !important; border:1px solid #DDC9A0 !important; break-inside:avoid}
.quick-result-card strong{color:#1F160E !important}
.quick-result-label{color:#6B6156 !important}
.quick-result-value{color:#1F160E !important}
.quick-highlight-box{background:#F6EFE0 !important; border:1px solid #DDC9A0 !important; break-inside:avoid}
.quick-highlight-title{color:#D8431A !important}
.quick-cost-line{color:#1F160E !important; border-bottom-color:#DDC9A0 !important}
.quick-cost-grand{color:#1F160E !important; border-top-color:#D8431A !important}
a[href]::after{content:none !important}
}
/* ══════════════ Areca Farm Lease Inspection page ══════════════ */
.lease-eyebrow-badge{
display:inline-flex; align-items:center; gap:6px; background:var(--gold-pale); color:var(--rust-deep);
font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.5px; text-transform:uppercase;
padding:6px 14px; border-radius:20px; margin-bottom:14px;
}
.lease-band{background:var(--ink); color:#fff; padding:56px 0; text-align:center}
.lease-band h2{color:#fff; font-size:clamp(22px,3vw,32px); max-width:760px; margin:0 auto 14px}
.lease-band p{color:#D9CDBA; font-size:14.5px; max-width:680px; margin:0 auto; line-height:1.75}
.lease-workflow{max-width:640px; margin:34px auto 0; display:flex; flex-direction:column}
.lease-workflow-step{display:flex; gap:18px; align-items:flex-start; text-align:left}
.lease-workflow-step .lw-num{
flex-shrink:0; width:38px; height:38px; border-radius:50%; background:var(--rust); color:#fff;
display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:600; font-size:14px;
}
.lease-workflow-step .lw-body strong{display:block; font-size:15px; color:var(--ink); margin-bottom:3px}
.lease-workflow-step .lw-body span{display:block; font-size:13px; color:var(--ink-soft); line-height:1.6}
.lease-workflow-arrow{margin:2px 0 2px 18px; color:var(--gold); font-size:18px; line-height:1}
.lease-workflow-step.lw-final .lw-num{background:var(--terracotta)}
.lease-checklist{display:grid; grid-template-columns:1fr 1fr; gap:2px 32px; margin-top:26px}
.lease-checklist-item{display:flex; gap:10px; align-items:flex-start; padding:9px 0; border-bottom:1px solid var(--border); font-size:13.5px; color:var(--ink-soft)}
.lease-checklist-item::before{content:"✓"; color:var(--rust); font-weight:700; flex-shrink:0}
.lease-persona-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:18px; margin-top:30px}
.lease-report-card{background:var(--paper); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:26px 28px; max-width:640px; margin:30px auto 0}
.lease-report-label{display:inline-block; background:var(--gold-pale); color:var(--rust-deep); font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.6px; text-transform:uppercase; padding:4px 11px; border-radius:20px; margin-bottom:16px}
.lease-report-stats{display:flex; flex-wrap:wrap; gap:12px}
.lease-report-stats div{background:var(--cream); border:1px solid var(--border); border-radius:10px; padding:12px 16px; flex:1 1 160px}
.lease-report-stats .n{font-family:var(--font-mono); font-size:20px; font-weight:600; color:var(--rust-deep); display:block}
.lease-report-stats .l{font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.4px}
.lease-timeline{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; margin-top:26px}
.lease-timeline-chip{background:var(--paper); border:1px solid var(--border); border-radius:12px; padding:12px 18px; font-size:12.8px; color:var(--ink-soft); text-align:center; min-width:140px}
.lease-timeline-chip strong{display:block; font-size:13.5px; color:var(--ink); margin-bottom:3px}
.lease-timeline-arrow{color:var(--gold); font-size:18px}
.lease-gallery-caption-note{font-size:12px; color:var(--ink-soft); font-style:italic; margin-top:10px}
@media(max-width:720px){
.lease-checklist{grid-template-columns:1fr}
.lease-workflow-arrow{margin-left:18px}
}
/* ══════════════ Areca Drone Survey page (pricing tiers, poster) ══════════════ */
.pricing-offer-badge{
display:inline-flex; align-items:center; gap:6px; background:var(--rust); color:#fff;
font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
padding:6px 16px; border-radius:20px; margin-bottom:18px;
}
.pricing-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:26px; align-items:stretch}
.pricing-card{
background:var(--paper); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow);
padding:28px 26px; display:flex; flex-direction:column;
}
.pricing-card-advanced{border:2px solid var(--rust); box-shadow:var(--shadow-lg); position:relative}
.pricing-tier-name{font-family:var(--font-display); font-size:20px; color:var(--ink); margin-bottom:2px}
.pricing-tier-sub{font-size:12.5px; color:var(--ink-soft); margin-bottom:18px}
.pricing-amount-row{display:flex; align-items:baseline; gap:8px; margin-bottom:4px}
.pricing-amount{font-family:var(--font-mono); font-size:34px; font-weight:700; color:var(--rust-deep)}
.pricing-amount-note{font-size:12px; color:var(--ink-soft)}
.pricing-peracre{font-size:13px; color:var(--ink-soft); margin-bottom:16px; padding-bottom:16px; border-bottom:1px dashed var(--border)}
.pricing-example{font-size:11.5px; color:var(--ink-soft); background:var(--cream); border-radius:8px; padding:8px 12px; margin-bottom:18px; font-family:var(--font-mono)}
.pricing-features{list-style:none; margin-bottom:20px; flex-grow:1}
.pricing-features li{font-size:13.3px; color:var(--ink-soft); padding:7px 0; display:flex; gap:8px; align-items:flex-start; line-height:1.5}
.pricing-features li::before{content:"✓"; color:#1B6B3A; font-weight:700; flex-shrink:0}
.pricing-card-ideal{font-size:12px; color:var(--ink-soft); font-style:italic; margin-top:auto; padding-top:12px; border-top:1px solid var(--border)}
.pricing-notes{max-width:820px; margin:24px auto 0; font-size:12.5px; color:var(--ink-soft); line-height:1.8}
.pricing-notes li{margin-bottom:4px}
.poster-frame{
max-width:720px; margin:26px auto 0; border-radius:14px; overflow:hidden; border:1px solid var(--border);
box-shadow:var(--shadow); background:var(--cream);
}
.poster-frame img{width:100%; height:auto; display:block; object-fit:contain}
.poster-frame.img-missing{aspect-ratio:3/2; border:2px dashed var(--border); display:flex; align-items:center; justify-content:center}
.poster-frame.img-missing img{display:none}
.poster-frame.img-missing::before{content:"📋 Poster graphic coming soon"; color:var(--ink-soft); font-size:13.5px; font-weight:600}
@media(max-width:720px){
.pricing-grid{grid-template-columns:1fr}
}
/* ══════════════ Areca Fertilizer, Manure & Compatibility Planner v2 ══════════════ */
.fp-step{background:var(--paper); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:26px 26px 30px; margin-bottom:22px}
.fp-step-title{display:flex; align-items:center; gap:12px; font-size:19px; margin-bottom:16px}
.fp-step-num{
display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%;
background:var(--rust); color:#fff; font-family:var(--font-mono); font-size:14px; font-weight:700; flex-shrink:0;
}
.fp-optional-tag{font-size:10.5px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; color:var(--ink-soft); background:var(--cream); border:1px solid var(--border); border-radius:20px; padding:3px 10px; margin-left:6px}
/* Collapsible steps (see fertInitStepCollapse) — every numbered step
becomes a click-to-expand header + body, so the Advanced flow doesn't
dump all 10 steps' full content on a first-time visitor at once. */
.fp-step-title-toggle{margin-bottom:0}
/* The heading stays an for the document outline; a real