/* Phytotron crop hub (crop-hubs/engine/template/index.html), on the strawberry hub's layout (3 Oct 2026). One 1180px
   working column: hero, quick downloads, then the working tools (planner, schedule, tank check, diagnosis) and the
   download shelf (deck, films, posters, products), contact last. Everything is drawn from data/hub.json and
   data/i18n.json (crop-hubs/engine/build_hub.py). House tokens: cool green paper, Phyto Green, Brand Navy; copper only
   for caution, staff-only, only-when-needed and draft. Serif only for headings; rows are sans. */
.hubx{
  --paper:#F0F4EF; --surface:#FFFFFF; --sunk:#E5ECE3; --ink:#12241A; --ink-2:rgba(18,36,26,.74); --ink-3:rgba(18,36,26,.68);
  --rule:rgba(18,36,26,.14); --rule-2:rgba(18,36,26,.26); --green:#098E19; --green-d:#06610F; --green-t:rgba(9,142,25,.10);
  --navy:#102033; --navy-ink:#F0F4EF; --copper:#B8703A; --copper-d:#8A4F22; --copper-t:rgba(184,112,58,.14);
  --stop:#A8322B; --stop-t:rgba(168,50,43,.10); --stage:#0c1622; --chip:#E4ECE2; --btn:#12241A; --btn-ink:#F0F4EF;
  --lift:0 1px 2px rgba(18,36,26,.06),0 10px 28px rgba(18,36,26,.09);
  --serif:'Source Serif 4','Noto Serif Devanagari','Noto Serif Kannada','Noto Sans Kannada','Noto Serif Malayalam','Noto Sans Malayalam',Georgia,serif;
  --sans:'Inter Tight','Noto Sans Devanagari','Noto Sans Kannada','Noto Sans Malayalam',system-ui,sans-serif;
  --mono:'JetBrains Mono','Noto Sans Devanagari','Noto Sans Kannada','Noto Sans Malayalam',ui-monospace,monospace;
  --black:'Archivo Black','Arial Black',sans-serif;
  --ease:cubic-bezier(.23,1,.32,1);
  --gut:clamp(16px,4vw,40px);
}
/* Devanagari and Kannada in the mono slot: the script face supplies spaces and digits too */
.hubx:not(:lang(en)){--mono:'Noto Sans Devanagari','Noto Sans Kannada','JetBrains Mono',ui-monospace,monospace}
/* Malayalam (5 Nov 2026, the cardamom hub): the script face first in every slot, and NEVER letter-spacing or
   text-transform anywhere on the page — either one splits or reorders the conjunct clusters (ക്ക, ണ്ട, ങ്ക). This rule
   comes after the token block, and the !important below outranks every later component rule that spaces its own text. */
.hubx:lang(ml){--mono:'Noto Sans Malayalam','JetBrains Mono',ui-monospace,monospace;
  --sans:'Noto Sans Malayalam','Inter Tight',system-ui,sans-serif;
  --serif:'Noto Serif Malayalam','Noto Sans Malayalam','Source Serif 4',Georgia,serif}
.hubx:lang(ml) :not(:is(.lock b,.sl .lk b,.pt-word,.sl .dn:not(.word):not(.mo),.sl .pv b,.sl .prow .rt,.sl .ct .nums b)){letter-spacing:0 !important;text-transform:none !important}
/* left out above: the wordmark and the big dose / phone numerals, which are Latin type only and keep their own tracking */
:root[data-theme="navy"] .hubx{
  --paper:#0E1A14; --surface:#15241C; --sunk:#112019; --ink:#E9F0E8; --ink-2:rgba(233,240,232,.78); --ink-3:rgba(233,240,232,.60);
  --rule:rgba(233,240,232,.14); --rule-2:rgba(233,240,232,.28); --green:#5FCB6C; --green-d:#8FE09A; --green-t:rgba(95,203,108,.14);
  --navy:#0A141F; --navy-ink:#E9F0E8; --copper:#E0A06A; --copper-d:#F2BD8E; --copper-t:rgba(224,160,106,.16);
  --stop:#F08A80; --stop-t:rgba(240,138,128,.15); --stage:#070d14; --chip:#1D3026; --btn:#E9F0E8; --btn-ink:#0E1A14;
  --lift:0 0 0 1px rgba(233,240,232,.09); color-scheme:dark}
.hubx *{box-sizing:border-box}
.hubx{scroll-padding-top:calc(76px + env(safe-area-inset-top,0px));-webkit-text-size-adjust:100%}
.hubx{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;margin:0;overflow-x:hidden}
.hubx .wrap{max-width:1180px;margin:0 auto;padding-inline:var(--gut);padding-block:0 64px}
.hubx h1,.hubx h2,.hubx h3{text-wrap:balance;margin:0}
.hubx p{text-wrap:pretty}
.hubx button{font:inherit;color:inherit}
.hubx :focus-visible{outline:2px solid var(--green);outline-offset:2px}
.hubx .tnum{font-variant-numeric:tabular-nums}
.hubx .nb{white-space:nowrap}
.hubx [hidden]{display:none!important}

/* header */
.hubx header.top{position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:1px solid var(--rule);padding-top:env(safe-area-inset-top,0px)}   /* opaque, as strawberry's: no ghosting, no blur per scroll frame */
.hubx .bar{max-width:1180px;margin:0 auto;padding:10px var(--gut);display:flex;align-items:center;gap:10px 14px}
.hubx .lock{display:flex;align-items:center;gap:9px;text-decoration:none;flex:none;color:var(--green)}
.hubx .lock svg,.hubx .lock img{height:24px;width:auto;display:block}
.hubx .lock b{font-family:var(--black);font-weight:400;font-size:15px;letter-spacing:.05em;color:var(--green)}
.hubx .cropsel{flex:none;width:auto;font:600 14px var(--sans);color:var(--ink);background:var(--chip);border:0;border-radius:999px;padding:7px 28px 7px 12px;min-width:0;max-width:44vw;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2312241A' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center}
:root[data-theme="navy"] .hubx .cropsel{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23E9F0E8' stroke-width='1.6'/%3E%3C/svg%3E")}
.hubx .topnav{display:none;gap:2px;flex:1;min-width:0;justify-content:center}
.hubx .topnav a,.hubx .secnav a{font:500 13.5px var(--sans);color:var(--ink-2);text-decoration:none;padding:6px 10px;border-radius:6px;white-space:nowrap}
.hubx .topnav a:hover,.hubx .secnav a:hover{color:var(--ink);background:var(--chip)}
.hubx .topnav a[aria-current="true"]{color:var(--green-d);background:var(--green-t)}
.hubx .hspace{flex:1}
.hubx .langs{display:flex;background:var(--chip);border-radius:999px;padding:3px;gap:2px;flex:none}
.hubx .langs button{border:0;background:transparent;color:var(--ink-2);font:500 13.5px var(--sans);padding:6px 12px;border-radius:999px;cursor:pointer;transition:background-color .15s,color .15s}
.hubx .langs button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.14)}
.hubx .langsel{display:none;font:500 14px var(--sans);color:var(--ink);padding:7px 8px;border-radius:999px;background:var(--chip);border:0;min-width:0;flex:none;width:auto}
@media (min-width:1080px){.hubx .topnav{display:flex}.hubx .hspace{display:none}}
.hubx .navtight .topnav{display:none}.hubx .navtight .hspace{display:block}
@media (max-width:700px){.hubx .langs{display:none}.hubx .langsel{display:block}.hubx .lock b{font-size:14px}.hubx .lock svg,.hubx .lock img{height:21px}.hubx .bar{gap:8px 10px}}
/* phones: every header item used to be fixed width, and a crop <select> takes the width of its longest option (123 px in
   Kannada), so the bar needed ~407 px and the page panned sideways at 360. The crop picker now takes what is left. */
@media (max-width:430px){.hubx .hspace,.hubx .navtight .hspace{display:none}.hubx .bar{gap:8px}
  .hubx .cropsel{flex:1 1 0;width:0;min-width:0;max-width:none;padding:7px 24px 7px 10px;font-size:13.5px;background-position:right 9px center}.hubx .langsel{flex:none}}
@media (max-width:1079px){.hubx .bar{padding:8px var(--gut)}}
@media (max-width:380px){.hubx .lock{gap:6px}.hubx .lock svg,.hubx .lock img{height:18px}.hubx .lock b{font-size:12px;letter-spacing:.04em}}

/* draft band */
.hubx .draftband{background:var(--copper-t);border-bottom:1px solid var(--copper)}
.hubx .draftband div{max-width:1180px;margin:0 auto;padding:10px var(--gut);display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline}
.hubx .stamp{font:600 11.5px var(--mono);letter-spacing:.14em;color:#fff;background:var(--copper);padding:3px 8px;border-radius:3px}
:root[data-theme="navy"] .hubx .stamp{color:#0E1A14}
.hubx .draftband b{font-weight:600;color:var(--copper-d)}
.hubx .draftband span:not(.stamp){color:var(--ink-2);font-size:14.5px}
.hubx:not(:lang(en)) :is(.stamp,.contact small,.cline,.count){letter-spacing:0}

/* hero */
.hubx .hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px 44px;align-items:center;padding-block:40px 8px}
.hubx .hero h1{font:600 clamp(36px,5.2vw,58px)/1.04 var(--serif);letter-spacing:-.02em;margin:0 0 12px}
.hubx:not(:lang(en)) .hero h1{letter-spacing:0}
.hubx .lede{font-size:18px;color:var(--ink-2);max-width:60ch;margin:0}
.hubx .hero h1.long{font-size:clamp(34px,4.4vw,50px)}
.hubx .facts{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:18px;font:13px/1.45 var(--mono);color:var(--ink-3);font-variant-numeric:tabular-nums}
.hubx .facts span{white-space:nowrap}
.hubx .facts b{color:var(--ink);font-weight:500}
@media (max-width:430px){.hubx .facts span{white-space:normal}}
.hubx .cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.hubx #heroimg{margin:0;position:relative;border-radius:8px;overflow:hidden;aspect-ratio:16/9;background:var(--sunk);max-width:100%}
.hubx #heroimg>img{width:100%;height:100%;object-fit:cover;display:block}
.hubx .ptag{position:absolute;left:10px;bottom:10px;font:500 11.5px var(--sans);color:#F0F4EF;background:rgba(12,22,34,.66);padding:3px 9px;border-radius:999px}
.hubx #heroimg.art{background:var(--navy);display:grid;align-content:end;padding:20px}
.hubx #heroimg.art .packs{position:absolute;inset:24px 24px 60px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);align-items:end;justify-items:center;gap:3%}
.hubx #heroimg.art .packs img{max-height:100%;max-width:100%;min-width:0;object-fit:contain;object-position:bottom;filter:drop-shadow(0 14px 18px rgba(0,0,0,.35))}
.hubx #heroimg.art .cap{position:relative;color:var(--navy-ink);font:500 13.5px var(--sans);opacity:.8}
@media (max-width:860px){.hubx .hero{grid-template-columns:minmax(0,1fr);padding-top:20px}.hubx #heroimg{order:-1}.hubx .lede{font-size:16.5px}}
@media (max-width:430px){.hubx .hero .cta{display:none}.hubx .lede-one{display:none}}   /* a portrait phone gets the deck's tap-to-zoom, not a 390x220 stage */

/* quick downloads, section index */
.hubx .quick{margin-top:22px;padding:16px 18px;border-radius:10px;background:var(--surface);box-shadow:var(--lift);display:grid;gap:10px}
.hubx .quick h2{font:600 15px var(--sans);margin:0;letter-spacing:0}
.hubx .quick .dls{gap:8px}
.hubx .no-dl .quick{display:none}
@media (max-width:430px){.hubx .quick .dls{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}.hubx .quick .dl{border-radius:10px;justify-content:space-between;white-space:normal;text-align:left;min-height:44px}}
.hubx .secnav{display:none;position:relative;margin-top:18px;border-top:1px solid var(--rule)}
.hubx .secnav .sc{display:flex;gap:4px;overflow-x:auto;padding:14px 0 2px;scrollbar-width:none;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
.hubx .secnav .sc::-webkit-scrollbar{display:none}
.hubx .secnav .sc a{scroll-snap-align:start;flex:none}
.hubx .secnav::before,.hubx .secnav::after{content:"";position:absolute;top:0;bottom:1px;pointer-events:none;opacity:0;transition:opacity .15s;z-index:1}
.hubx .secnav::before{left:0;width:16px;background:linear-gradient(90deg,var(--paper),color-mix(in srgb,var(--paper) 0%,transparent))}
.hubx .secnav::after{right:0;width:28px;background:linear-gradient(270deg,var(--paper),color-mix(in srgb,var(--paper) 0%,transparent))}
.hubx .secnav.l::before,.hubx .secnav.r::after{opacity:1}
@media (max-width:1079px){.hubx .secnav{display:block;position:sticky;top:var(--hh,54px);z-index:20;background:var(--paper);margin:10px calc(-1*var(--gut)) 0;border-top:0;border-bottom:1px solid var(--rule)}
  .hubx .secnav .sc{padding:0 var(--gut);scroll-padding-inline:var(--gut)}
  .hubx .secnav .sc a{min-height:40px;display:inline-flex;align-items:center}
  .hubx .secnav .sc a[aria-current="true"]{background:none;border-radius:0;box-shadow:inset 0 -2px 0 var(--green)}
  .hubx{scroll-padding-top:calc(var(--hh,57px) + 40px + env(safe-area-inset-top,0px))}
  .hubx .cardrow,.hubx .rulebox .ga3{scroll-margin-top:calc(var(--hh,57px) + 52px)!important}}
.hubx .navtight .secnav{display:block}
.hubx .secnav a[aria-current="true"]{color:var(--green-d);background:var(--green-t)}

/* sections */
.hubx section{padding-block:40px 8px;border-top:1px solid var(--rule);margin-top:32px;display:grid;gap:18px;min-width:0}
.hubx .shead{display:flex;justify-content:space-between;align-items:flex-end;gap:10px 20px;flex-wrap:wrap}
.hubx h2{font:600 30px/1.15 var(--serif);letter-spacing:-.01em}
@media (max-width:560px){.hubx h2{font-size:26px}}
.hubx:not(:lang(en)) h2{letter-spacing:0}
/* page headings only (the slides set their own) */
.hubx:not(:lang(en)) :is(.hero h1,.shead h2,#h-contact,.quick h2,.rulebox h3,.pbody h3,.doc .dt b){line-height:1.35}
.hubx:not(:lang(en)) :is(.dcard h3,.finfo h3,.fthumb b,.stage-h h3,.verdict .vt,.cwhen){line-height:1.4}
.hubx .sub{color:var(--ink-2);margin:4px 0 0;max-width:72ch}
.hubx .sub:empty,.hubx .kv:empty,.hubx .note:empty,.hubx .tnote:empty{display:none}
.hubx .note{font-size:14px;color:var(--ink-3);margin:0}

/* buttons, chips, badges */
.hubx .dl,.hubx .btn{display:inline-flex;align-items:center;gap:8px;border:0;background:var(--btn);color:var(--btn-ink);font:500 13.5px var(--sans);padding:9px 15px;border-radius:999px;cursor:pointer;white-space:nowrap;text-decoration:none;transition:transform .16s var(--ease),opacity .15s}
.hubx .dl:active,.hubx .btn:active,.hubx .chip:active{transform:scale(.97)}
.hubx .dl svg,.hubx .btn svg{width:14px;height:14px;flex:none}
.hubx .dl.ghost,.hubx .btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--rule-2)}
.hubx .dl:disabled,.hubx .btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.hubx .dl.busy{cursor:progress;opacity:.7}
.hubx .dl small{font:11.5px var(--mono);opacity:.72;white-space:nowrap;flex:none}
.hubx .dls{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hubx .no-dl .dl{display:none}
.hubx .nodl-note{display:none;font-size:13.5px;color:var(--ink-3);margin:14px 0 0}
.hubx .no-dl .nodl-note{display:block}
.hubx .chips{display:flex;flex-wrap:wrap;gap:6px}
.hubx .chip{border:0;background:var(--chip);color:var(--ink-2);font:500 13.5px var(--sans);padding:7px 13px;border-radius:999px;cursor:pointer;transition:background-color .15s,color .15s,transform .16s var(--ease)}
.hubx .chip[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.hubx .chip .n{font:11.5px var(--mono);opacity:.7;margin-left:4px}
@media (pointer:coarse){.hubx .chip,.hubx .tchip,.hubx .langs button,.hubx .copy,.hubx .linkbtn,.hubx .dl,.hubx .btn,.hubx .seg button,.hubx .secnav a,.hubx .cropsel,.hubx .langsel,.hubx .lock{min-height:40px}.hubx .linkbtn,.hubx .secnav a{display:inline-flex;align-items:center}
  .hubx .secnav a,.hubx .linkbtn{min-width:44px;justify-content:center}}   /* "डेक" and "जाँचें →" were 37-38 px wide */
.hubx .badges{display:flex;flex-wrap:wrap;gap:6px}
.hubx .badge{display:inline-flex;align-items:center;gap:5px;font:500 12px var(--sans);padding:3px 9px;border-radius:999px;white-space:nowrap;line-height:1.35}
.hubx .b-drip,.hubx .b-soil{background:var(--navy);color:var(--navy-ink);box-shadow:inset 0 0 0 1px var(--rule-2)}
.hubx .b-shield{background:var(--green-t);color:var(--green-d)}
.hubx .b-staff{background:var(--copper-t);color:var(--copper-d)}
.hubx .b-needed{background:var(--copper-t);color:var(--copper-d)}
.hubx .b-advice{color:var(--copper-d);box-shadow:inset 0 0 0 1.5px var(--copper)}
.hubx .b-cond{color:var(--ink-2);box-shadow:inset 0 0 0 1.5px var(--rule-2)}
.hubx .b-missed{background:var(--copper-t);color:var(--copper-d)}
.hubx .linkbtn{border:0;background:none;padding:0;color:var(--green-d);font:600 13.5px var(--sans);cursor:pointer;text-decoration:underline;text-underline-offset:3px;justify-self:start}
.hubx .linkbtn small{font:500 12px var(--sans);color:var(--ink-3)}
.hubx .callout{font-size:14px;border-radius:8px;padding:10px 12px;margin:0}
.hubx .callout.info{background:var(--sunk);color:var(--ink-2)}
.hubx .callout.warn{background:var(--copper-t);color:var(--ink)}

/* planner */
/* panel | right column (ribbon, Next), both the same height: the settings card runs down to the Next box with its downloads
   at the foot (strawberry's planner); the "When the crop shows it" list spans both columns under them */
.hubx .plan{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:16px 20px;align-items:stretch}
.hubx .plan>.panel{display:flex;flex-direction:column;align-self:start}   /* the date and its downloads, no tall empty card (the facts list went) */
.hubx .plan>.panel>.dls{margin-top:auto;padding-top:4px}
.hubx .plan>.condlist{grid-column:1/-1}
.hubx .pcol{display:grid;gap:16px;min-width:0;align-content:start}
.hubx .pnotes{display:grid;gap:8px}
.hubx .pnotes:empty{display:none}
.hubx .panel{background:var(--surface);border-radius:10px;box-shadow:var(--lift);padding:20px;display:grid;gap:14px;min-width:0}
.hubx .field{display:grid;gap:6px}
.hubx .field label{font:500 13px var(--sans);color:var(--ink-2)}
.hubx select,.hubx input[type="date"]{font:500 16px var(--sans);color:var(--ink);background:var(--paper);border:1.5px solid var(--rule-2);border-radius:8px;padding:9px 11px;width:100%;min-width:0}
.hubx select:focus-visible,.hubx input:focus-visible{outline:2px solid var(--green);outline-offset:1px}
.hubx .kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;margin:0;font-size:14.5px}
.hubx .kv dt{color:var(--ink-3)}
.hubx .kv dd{margin:0;font-weight:500;font-variant-numeric:tabular-nums}
.hubx .ribbon{min-width:0}
.hubx .ribbon .shead{align-items:baseline}
.hubx .ribbon h3{font:600 15px var(--sans)}
.hubx .count{font:13px var(--mono);color:var(--ink-3);font-variant-numeric:tabular-nums}
.hubx .ribbon svg{display:block;width:100%;height:auto;overflow:visible}
.hubx .rb-mon{fill:var(--ink-3);font:11.5px var(--sans)}
.hubx .rb-yr{fill:var(--ink-3);font:10.5px var(--mono)}
.hubx .rb-tick{stroke:var(--rule);stroke-width:1}
.hubx .rb-lanebg{fill:var(--sunk)}
:root[data-theme="navy"] .hubx .rb-lanebg{fill:rgba(233,240,232,.05)}
.hubx .rb-lane{fill:var(--ink-3);font:500 11.5px var(--sans)}
.hubx .rb-spray{fill:var(--green)}
.hubx .rb-drip{fill:var(--navy)}
:root[data-theme="navy"] .hubx .rb-drip{fill:#6E8BB0}
.hubx .rb-shield{fill:var(--surface);stroke:var(--green);stroke-width:1.75}
.hubx .rb-band{stroke-width:1.5}
.hubx .rb-band.spray{fill:var(--green-t);stroke:var(--green)}
.hubx .rb-band.drip{fill:rgba(16,32,51,.10);stroke:var(--navy)}
.hubx .rb-band.shield{fill:var(--surface);stroke:var(--green)}
.hubx .rb-band.shield.fc{stroke:var(--copper);stroke-dasharray:3 2.5}
:root[data-theme="navy"] .hubx .rb-band.drip{stroke:#6E8BB0;fill:rgba(110,139,176,.16)}
.hubx .rb-pre{fill:var(--surface);stroke:var(--green);stroke-width:2}
.hubx .rb-shield.fc{stroke-dasharray:3 2.5;stroke:var(--copper)}
.hubx .rb-condtx{fill:var(--ink-2);font:600 11px var(--sans)}
.hubx .rb-num{fill:#fff;font:600 11px var(--sans);font-variant-numeric:tabular-nums;pointer-events:none}
:root[data-theme="navy"] .hubx .rb-num{fill:#0E1A14}
.hubx .rb-snum{fill:var(--green-d);font:600 11px var(--sans);pointer-events:none}
.hubx .rb-snum.fc{fill:var(--copper-d)}
.hubx .rb-name{fill:var(--ink-2);font:500 11px var(--sans);pointer-events:none}
.hubx .rb-hit{fill:transparent;cursor:pointer}
.hubx .rb-hit:focus-visible{outline:none;stroke:var(--green);stroke-width:2}
.hubx .rb-g:hover>.rb-spray,.hubx .rb-g:hover>.rb-drip{filter:brightness(1.18)}
.hubx .rb-ring{fill:none;stroke:var(--green);stroke-width:2;opacity:.45}
.hubx .rb-ring.drip{stroke:var(--navy)}
.hubx .rb-zero{stroke:var(--ink);stroke-width:1.25;stroke-dasharray:3 3}
.hubx .rb-today{stroke:var(--copper);stroke-width:2}
.hubx .rb-flag{font:600 11px var(--sans)}
.hubx .rb-flag rect{fill:var(--ink)}.hubx .rb-flag text{fill:var(--paper)}
.hubx .rb-flag.today rect{fill:var(--copper)}.hubx .rb-flag.today text{fill:#fff}
:root[data-theme="navy"] .hubx .rb-flag.today text{fill:#0E1A14}
.hubx .rb-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--ink-3);margin-top:8px}
.hubx .rb-legend:empty{display:none}
.hubx .rb-legend i{display:inline-block;width:14px;height:8px;border-radius:4px;margin-right:6px;vertical-align:0}
.hubx .rb-legend i.ln{width:2px;height:11px;border-radius:1px;vertical-align:-1px}
.hubx .rb-legend i.lb-band,.hubx .glg i.lb-band{width:24px;height:6px;border-radius:3px;background:var(--green-t);box-shadow:inset 0 0 0 1.5px var(--green);vertical-align:1px}
.hubx .next{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 22px;align-items:start;padding:14px 16px;border-radius:10px;background:var(--sunk)}
.hubx .next .when{font:600 15px/1.35 var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap}
.hubx .next .when small{display:block;font:500 12.5px var(--sans);color:var(--copper-d);white-space:normal}
.hubx .next .what{min-width:0;display:grid;gap:5px;max-width:760px}
.hubx .next .pline{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px}
.hubx .next .npk{display:flex;align-items:flex-end;gap:4px;flex:none}
.hubx .next .npk img{height:40px;width:auto;filter:drop-shadow(0 4px 6px rgba(0,0,0,.16))}
.hubx .next .npk img.pouch{height:32px}
.hubx .next .pp{font-size:15px;min-width:0}
.hubx .next .pp b{font-weight:600}
.hubx .gsep{color:var(--ink-3);margin:0 2px}
.hubx .next .what .dw{font-size:13.5px;color:var(--ink-2)}
@media (max-width:560px){.hubx .next{grid-template-columns:minmax(0,1fr)}.hubx .next .when{white-space:normal}}
/* "When the crop shows it": strawberry's "Watch for" list (sans bullets, no boxes) */
.hubx .condlist{display:grid;gap:6px;padding:0 2px}
.hubx .condlist h3{font:600 13.5px var(--sans);margin:0}
.hubx .condlist .note{font-size:13px}
.hubx .condlist ul{margin:2px 0 0;padding-left:18px;display:grid;gap:4px;font-size:14px;color:var(--ink-2)}
@media (min-width:900px){.hubx .condlist ul{display:block;columns:2;column-gap:32px}.hubx .condlist li{break-inside:avoid;margin-bottom:4px}}
.hubx .condlist li b{color:var(--ink);font-weight:600}
@media (max-width:860px){.hubx .plan{grid-template-columns:minmax(0,1fr)}}

/* schedule: month groups of rows (the strawberry card-row anatomy) */
.hubx .sch-meta{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between}
.hubx .stage-h{display:flex;align-items:baseline;justify-content:space-between;gap:6px 14px;flex-wrap:wrap;padding:18px 0 8px;border-bottom:1.5px solid var(--ink)}
.hubx .stage-h h3{font:600 19px/1.2 var(--serif)}
.hubx .stage-h span{font:12.5px var(--mono);color:var(--ink-3);font-variant-numeric:tabular-nums}
.hubx .stage-h.needed{border-color:var(--copper)}
.hubx .stage-h.needed h3{color:var(--copper-d)}
.hubx .cardrow{display:grid;grid-template-columns:150px minmax(0,1fr);gap:6px 22px;padding:14px 0;border-bottom:1px solid var(--rule);align-items:start;scroll-margin-top:110px;border-radius:4px;transition:background-color 600ms ease-out}
.hubx .cardrow.flash{background:var(--green-t);transition:background-color 240ms var(--ease)}
.hubx .cardrow.past>.d{color:var(--ink-3)}
.hubx .cardrow .d{font:600 16px/1.3 var(--sans);font-variant-numeric:tabular-nums;display:grid;gap:2px;align-content:start}
.hubx .cardrow .d small{display:block;font:500 12.5px/1.35 var(--sans);color:var(--ink-3)}
.hubx .cardrow .d.cond{font:600 14.5px/1.35 var(--sans)}
.hubx .cardrow .d.win{font:600 14.5px/1.35 var(--sans);color:var(--ink)}
.hubx .cardrow .body{display:grid;gap:6px;min-width:0}
.hubx .cline{font:600 12.5px var(--sans);color:var(--green-d);letter-spacing:.02em}
.hubx .cline .dip{color:var(--ink)}
.hubx .cwhen{font:600 15px/1.35 var(--sans);color:var(--ink)}
.hubx .prods{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:16px;align-items:center}
.hubx .pair{white-space:nowrap;display:inline-flex;align-items:baseline;gap:6px}
.hubx .pair b{font-weight:600}
.hubx .pair .ord{font:500 12.5px var(--mono);color:var(--ink-3)}
.hubx .pair .q{font-variant-numeric:tabular-nums}
.hubx .pair.staff b,.hubx .pair.staff .q{color:var(--copper-d)}
.hubx .prods .plus,.hubx .pair .plus{color:var(--ink-3)}
.hubx .pair>.plus{margin-right:6px}            /* 12 px either side of "+", as between pairs (it rode the 6 px pair gap) */
/* plain-language pass: a line's own note and its Drip / Soil tag ride right after its dose (no "Product: note" list) */
.hubx .pl{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;min-width:0}
.hubx .pl .pn{font-size:14px;color:var(--ink-2)}
.hubx .pl .badge{align-self:center}
.hubx .sno{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--green);color:#fff;font:600 11.5px var(--sans);letter-spacing:0;font-variant-numeric:tabular-nums}
:root[data-theme="navy"] .hubx .sno{color:#0E1A14}
.hubx .tanks{display:grid;gap:8px;margin:2px 0}
.hubx .tank1{border-left:2px solid var(--rule-2);padding:2px 0 2px 10px;display:grid;gap:3px}
.hubx .tlabel{font:500 12.5px/1.35 var(--sans);color:var(--ink-3);display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
.hubx .tlabel .linkbtn{font-size:13px}
.hubx .tsplit{font-size:13.5px;color:var(--copper-d);margin:0}
.hubx .tank1.offtank{border-left-color:var(--navy)}
:root[data-theme="navy"] .hubx .tank1.offtank{border-left-color:#6E8BB0}
.hubx .how{margin:0;padding:0;list-style:none;display:grid;gap:3px;font-size:14px;color:var(--ink-2)}
.hubx .how b{font-weight:600;color:var(--ink)}
.hubx .how li.staff{color:var(--copper-d)}
.hubx:lang(en) .how li::first-letter{text-transform:uppercase}
.hubx .chks{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:2px}
.hubx .rulebox{margin-top:18px;padding:16px 18px;border-radius:10px;background:var(--surface);box-shadow:var(--lift);display:grid;gap:10px}
.hubx .rulebox h3{font:600 17px/1.2 var(--serif)}
.hubx .rulebox ul{margin:0;padding-left:18px;display:grid;gap:6px;font-size:14px;color:var(--ink-2)}
.hubx .rulebox ul.passes{margin:0;padding:0;list-style:none;display:grid;gap:4px;font-size:13.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.hubx .rulebox .passes b{font-weight:600;color:var(--ink)}
.hubx .rulebox .passes .fc{color:var(--copper-d)}
.hubx .rulebox .ga3{border-top:1px solid var(--rule);padding-top:10px;display:grid;gap:4px;scroll-margin-top:110px}
.hubx .rulebox .ga3 b{font:600 15px var(--sans)}
.hubx .rulebox .ga3 p{margin:0;font-size:14px;color:var(--ink-2)}
.hubx .rulebox .ga3 .ess{color:var(--ink-3);font-size:13.5px}
.hubx .rulebox .ga3{border-radius:4px;transition:background-color 600ms ease-out}.hubx .rulebox .ga3.flash{background:var(--green-t);transition:background-color 240ms var(--ease)}
.hubx .rulebox .staff{font-size:13px;color:var(--copper-d);margin:0}
.hubx .empty{padding:24px;text-align:center;color:var(--ink-3);background:var(--sunk);border-radius:10px}
@media (max-width:640px){.hubx .cardrow{grid-template-columns:minmax(0,1fr);gap:6px}.hubx .cardrow .d{grid-auto-flow:row}}

/* tank check */
.hubx .tank{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px;align-items:start}
.hubx .tank .grp{display:grid;gap:8px}
.hubx .tank .grp h3{font:600 14px var(--sans);color:var(--ink-2)}
.hubx .tchip{display:inline-flex;align-items:center;gap:8px;border:0;background:var(--surface);color:var(--ink);font:500 14px var(--sans);padding:7px 13px 7px 9px;border-radius:999px;cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--rule-2);transition:background-color .15s,box-shadow .15s,transform .16s var(--ease)}
.hubx .tchip:active{transform:scale(.97)}
.hubx .tchip .tk{width:16px;height:16px;border-radius:4px;box-shadow:inset 0 0 0 1.5px var(--rule-2);display:grid;place-items:center;flex:none}
.hubx .tchip[aria-pressed="true"]{background:var(--green-t);box-shadow:inset 0 0 0 1.5px var(--green)}
.hubx .tchip[aria-pressed="true"] .tk{background:var(--green);box-shadow:none}
.hubx .tchip[aria-pressed="true"] .tk::after{content:"";width:8px;height:4px;border:2px solid #fff;border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.hubx .tnote{font-size:13.5px;color:var(--ink-3);margin:0}
.hubx .verdict{border-radius:10px;padding:18px;display:grid;gap:12px;background:var(--surface);box-shadow:var(--lift);transition:background-color .2s;min-width:0;scroll-margin-top:12px}   /* on top of the page's scroll padding (header + index) */
.hubx .verdict .vh{display:flex;align-items:center;gap:12px}
.hubx .verdict .ico,.hubx .tbar .ico{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:700 18px var(--sans);flex:none;background:var(--sunk);color:var(--ink-3)}
.hubx .verdict .vt{font:600 20px/1.2 var(--serif)}
.hubx .verdict .meter{font:12.5px var(--mono);color:var(--ink-3);font-variant-numeric:tabular-nums}
.hubx [data-v="ok"] .ico{background:var(--green);color:#fff}
.hubx [data-v="jar"] .ico,.hubx [data-v="fix"] .ico{background:var(--copper);color:#fff}
.hubx [data-v="stop"] .ico,.hubx [data-v="apart"] .ico{background:var(--stop);color:#fff}
:root[data-theme="navy"] .hubx :is([data-v="ok"],[data-v="jar"],[data-v="fix"],[data-v="stop"],[data-v="apart"]) .ico{color:#0E1A14}
.hubx .verdict[data-v="stop"],.hubx .verdict[data-v="apart"]{background:var(--stop-t)}
.hubx .verdict[data-v="jar"],.hubx .verdict[data-v="fix"]{background:var(--copper-t)}
.hubx .verdict[data-v="ok"]{background:var(--green-t)}
.hubx .rules{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:14.5px}
.hubx .rules li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px}
.hubx .rules li::before{font:700 13px var(--sans);text-align:center}
.hubx .rules li.r0::before{content:"✓";color:var(--green)}
.hubx .rules li.r1::before,.hubx .rules li.r2::before{content:"!";color:var(--copper-d)}
.hubx .rules li.r3::before{content:"✕";color:var(--stop)}
.hubx .slots{display:flex;gap:6px}
.hubx .slots i{flex:1;height:6px;border-radius:3px;background:var(--rule)}
.hubx .slots i.on{background:var(--green)}.hubx .slots i.over{background:var(--stop)}
.hubx .tbar{display:none}
@media (max-width:860px){.hubx .tank{grid-template-columns:minmax(0,1fr)}
  .hubx .tbar{position:sticky;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:15;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:center;width:100%;border:0;text-align:left;cursor:pointer;background:var(--surface);color:var(--ink);border-radius:12px;padding:10px 14px;box-shadow:0 6px 24px rgba(0,0,0,.18),inset 0 0 0 1.5px var(--rule-2);font:inherit}
  .hubx .tbar .ico{width:28px;height:28px;font-size:15px;grid-row:1/3}.hubx .tbar .vt{font:600 15px/1.25 var(--sans)}.hubx .tbar .slots i{height:5px}}

/* diagnosis */
.hubx .diag{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
/* desktop: the column count follows the item count (9 cards = 3 x 3, never one orphan on a third row) */
@media (min-width:1080px){.hubx .diag{grid-template-columns:repeat(var(--cols,4),minmax(0,1fr))}}
.hubx .dcard{display:grid;grid-template-rows:auto 1fr;background:var(--surface);border-radius:10px;overflow:hidden;box-shadow:var(--lift);min-width:0}
.hubx .dimg{position:relative;aspect-ratio:1/1;max-width:100%;background:var(--sunk)}
.hubx .dcard img{width:100%;height:100%;object-fit:cover;display:block}
.hubx .dcard .dbody{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;min-width:0}
.hubx .dcard .act-line{margin-top:auto}          /* the action sits on the card's foot: one line across a row, the slack above it */
.hubx .dcard h3{font:600 18px/1.25 var(--serif)}
.hubx .dcard p{margin:0;font-size:14px;color:var(--ink-2)}
.hubx .act-line{display:grid;gap:5px;padding-top:10px;border-top:1px solid var(--rule);font-size:14px}
.hubx .act-line .lbl{font:600 13px var(--sans)}
.hubx .act-line .pp{font-weight:600;line-height:1.4}
.hubx .act-line .ln{color:var(--ink-2);font-size:13.5px}
.hubx .act-card .lbl{color:var(--green-d)}
.hubx .act-advisor .lbl{color:var(--ink)}
.hubx .act-field .lbl{color:var(--ink-2)}
.hubx .dcard .dmore{font-size:13px;margin-top:-2px;align-self:flex-start}
/* desktop and tablet: strawberry's density. The sign is 4 lines and the action note 3 until "More"; the row the card
   points at ("See the spray") has the rest. Phones read them in full. */
@media (min-width:700px){
  .hubx .dcard:not(.open) .dsign{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
  .hubx .dcard:not(.open) .act-line .ln{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}}
@media (max-width:560px){.hubx .dimg{aspect-ratio:4/3}}

/* deck: the generated slides, live, scaled from 1600x900 */
.hubx .viewer{display:grid;gap:12px;min-width:0}
.hubx .stagebox{position:relative;background:var(--stage);border-radius:8px;overflow:hidden;aspect-ratio:16/9;max-width:100%;cursor:zoom-in}
.hubx .slhost{position:absolute;left:0;top:0;width:1600px;height:900px;transform-origin:0 0}
:root[data-theme="navy"] .hubx .stagebox{box-shadow:0 0 0 1px rgba(233,240,232,.14)}
.hubx .nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:#12241A;font:600 20px var(--sans);cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.25);z-index:2;opacity:0;transition:opacity .2s var(--ease)}
.hubx .nav.prev{left:12px}.hubx .nav.next{right:12px}
.hubx .stagebox:hover .nav,.hubx .stagebox:focus-within .nav{opacity:.85}
.hubx .stagebox .nav:disabled{opacity:0;pointer-events:none}
@media (hover:none){.hubx .stagebox .nav{opacity:.8}}
.hubx .mnav{display:none;gap:8px}
.hubx .mnav .nav{position:static;transform:none;opacity:1;box-shadow:inset 0 0 0 1.5px var(--rule-2);background:var(--surface);color:var(--ink)}
.hubx .mnav .nav:disabled{opacity:.35;cursor:default}
@media (max-width:700px){.hubx .stagebox .nav{display:none}.hubx .mnav{display:flex}}
.hubx .meta{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.hubx .strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity}
.hubx .thumb{flex:0 0 136px;border:2px solid transparent;border-radius:6px;padding:0;background:var(--sunk);cursor:pointer;scroll-snap-align:start;aspect-ratio:16/9;overflow:hidden;transition:transform .16s var(--ease),border-color .15s}
.hubx .thumb:active{transform:scale(.97)}
.hubx .thumb img{display:block;width:100%;height:100%;object-fit:cover}
.hubx .thumb[aria-current="true"]{border-color:var(--green)}
.hubx .thumb{position:relative}
.hubx .thumb .tl{position:absolute;left:4px;top:4px;display:block;font:500 11px/1.3 var(--mono);color:#F0F4EF;background:rgba(16,32,51,.8);padding:1px 5px;border-radius:4px}
.hubx .thumb .tl b{font-weight:500;color:#8FE09A}
.hubx .thumb.tx{background:var(--sunk);display:flex;align-items:flex-start}
.hubx .thumb.tx .tl{position:static;margin:6px 7px;padding:0;background:none;color:var(--ink-2);text-align:left;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
.hubx .thumb.tx .tl b{color:var(--green-d);margin-right:4px}
.hubx .zoomhint{display:none;margin:-4px 0 0}
.hubx .narrow-only{display:none}
@media (max-width:700px){.hubx .zoomhint{display:block}.hubx .wide-only{display:none}.hubx .narrow-only{display:inline}}
@media (max-width:430px){.hubx #deck [data-kind="full"]{display:none}}   /* a portrait phone only letterboxes a 16:9 stage */

/* films: big player + playlist */
.hubx .filmstage{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:24px 28px;align-items:start}
.hubx .player{position:relative;border-radius:10px;overflow:hidden;background:var(--stage);box-shadow:var(--lift)}
.hubx .player video{display:block;width:100%;background:var(--stage)}
.hubx .player.wide video{aspect-ratio:16/9}
.hubx .player.tall{max-width:380px;width:100%;justify-self:center}
.hubx .player.tall video{aspect-ratio:9/16}
.hubx .finfo{display:grid;gap:14px;align-content:start;min-width:0}
.hubx .finfo h3{font:600 22px/1.2 var(--serif)}
.hubx .fmeta{font:12.5px var(--mono);color:var(--ink-3);margin-top:-8px;font-variant-numeric:tabular-nums}
.hubx .finfo p{margin:0;color:var(--ink-2);font-size:15px}
.hubx .fprods{display:flex;flex-wrap:wrap;gap:8px}
.hubx .fprods span{display:inline-flex;align-items:center;gap:8px;font:600 13.5px var(--sans);background:var(--surface);box-shadow:inset 0 0 0 1px var(--rule);border-radius:999px;padding:4px 12px 4px 6px}
.hubx .fprods img{height:28px;width:auto;margin:-6px 0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.2))}
.hubx .frow{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.hubx .seg{display:inline-flex;background:var(--chip);border-radius:999px;padding:3px;gap:2px;justify-self:start}
.hubx .seg button{border:0;background:transparent;font:500 13px var(--sans);padding:6px 12px;border-radius:999px;cursor:pointer;color:var(--ink-2)}
.hubx .seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.14)}
.hubx .tags{display:flex;flex-wrap:wrap;gap:6px}
.hubx .tag{display:inline-block;font:12px var(--mono);color:var(--green-d);background:var(--chip);padding:3px 9px;border-radius:999px;justify-self:start}
.hubx .tag.off{color:var(--ink-3)}
.hubx .flist{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));border-top:1px solid var(--rule);padding-top:14px}
.hubx .filmstage>.flist{grid-column:1/-1}
.hubx .fthumb{border:0;padding:6px 8px;margin:0;background:none;text-align:left;cursor:pointer;display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;align-items:center;color:var(--ink);border-radius:10px;transition:background-color .15s}
.hubx .fthumb:hover{background:var(--chip)}
.hubx .fthumb[aria-current="true"]{background:var(--green-t)}
.hubx .fthumb img,.hubx .fthumb .ph{width:120px;aspect-ratio:16/9;object-fit:cover;border-radius:6px;display:block;background:var(--sunk)}
.hubx .fthumb .ft{display:grid;gap:2px;min-width:0}
.hubx .fthumb b{font:600 13.5px/1.3 var(--sans)}
.hubx .fthumb small{font:12px var(--mono);color:var(--ink-3)}
@media (max-width:900px){.hubx .filmstage{grid-template-columns:minmax(0,1fr)}}

/* posters, documents */
.hubx #post-body{display:grid;gap:18px;min-width:0}
.hubx .pgroups{display:grid;gap:30px;min-width:0}
.hubx .pgroup{display:grid;gap:12px;min-width:0}
.hubx .pgh{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.hubx .pgh h3{font:600 19px var(--serif)}
.hubx .postone{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:20px 28px;align-items:start}
.hubx .poster{display:grid;gap:8px;min-width:0;align-content:start}
.hubx .pv{border:0;background:none;padding:0;cursor:zoom-in;display:block;border-radius:6px;transition:transform .16s var(--ease)}
.hubx .pv:active{transform:scale(.98)}
.hubx .poster img{width:100%;height:auto;border-radius:6px;box-shadow:var(--lift);background:var(--surface);display:block}
.hubx .postone .poster img{aspect-ratio:9/16;object-fit:cover;object-position:top}
.hubx .pname{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;font:600 14.5px var(--sans)}
.hubx .plangs{display:grid;gap:10px;align-content:start}
.hubx .plangs h4{font:600 14px var(--sans);color:var(--ink-2);margin:0}
.hubx .plang{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:center}
.hubx .plang img{width:72px;aspect-ratio:9/16;object-fit:cover;object-position:top;border-radius:4px;box-shadow:var(--lift);display:block}
.hubx .plang div{display:grid;gap:6px;justify-items:start;font:500 14px var(--sans)}
.hubx .pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:start}
.hubx .pgrid .pname{font:500 13.5px var(--sans)}
.hubx .docs{display:grid;gap:10px}
.hubx .doc{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px 14px;align-items:center;padding:14px 16px;border-radius:10px;background:var(--surface);box-shadow:var(--lift)}
.hubx .doc .ic{width:34px;height:42px;border-radius:4px;background:var(--sunk);display:grid;place-items:center;font:600 10px var(--mono);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--rule-2)}
.hubx .doc .ic svg{width:16px;height:16px}
.hubx .doc .dt b{font:600 15px/1.3 var(--sans);display:block}
.hubx .doc .dt small{font:12.5px var(--sans);color:var(--ink-3)}
.hubx .doc .dls{justify-content:flex-end}
@media (max-width:1000px){.hubx .doc{grid-template-columns:auto minmax(0,1fr)}.hubx .doc .dls{grid-column:1/-1;justify-content:flex-start}}
@media (max-width:640px){.hubx .postone{grid-template-columns:minmax(0,1fr)}.hubx .postone>.poster{max-width:360px}.hubx .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* products */
.hubx .prodgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.hubx .prod{display:grid;grid-template-rows:auto 1fr;background:var(--surface);border-radius:10px;box-shadow:var(--lift);overflow:hidden;min-width:0}
.hubx .prod .pack{height:190px;display:grid;place-items:center;background:var(--sunk);padding:14px}
.hubx .prod .pack img{max-height:162px;max-width:100%;width:auto;display:block;filter:drop-shadow(0 8px 14px rgba(0,0,0,.18));transition:transform .4s var(--ease)}
.hubx .prod .pack img.pouch{max-height:128px}
@media (hover:hover){.hubx .prod:hover .pack img{transform:translateY(-3px)}}
.hubx .prod .pack.type{align-content:center;gap:6px;text-align:center}
.hubx .prod .pack.type b{font:600 40px/1 var(--serif);letter-spacing:-.01em;color:var(--green-d)}
.hubx:not(:lang(en)) .prod .pack.type b{letter-spacing:0}
.hubx .prod .pack.type.staff b{color:var(--copper-d)}
.hubx .prod .pack.type small{font:500 12.5px/1.35 var(--sans);color:var(--ink-3);max-width:24ch;margin:0 auto}
.hubx .prod .pbody{padding:14px 16px 16px;display:grid;gap:7px;align-content:start}
.hubx .prod h3{font:600 19px/1.2 var(--serif)}
.hubx .prod h3 sup,.hubx .sl sup{font-size:.5em;font-weight:500;line-height:0;margin-left:1px}
.hubx .ss{font-family:var(--sans);font-size:.9em}
.hubx .prod .role{margin:0;font-size:14px;color:var(--ink-2)}
.hubx .prod .label{margin:0;font-size:13.5px;font-style:italic;color:var(--ink-2)}
.hubx .prod .dose{font:500 14.5px var(--sans);font-variant-numeric:tabular-nums;display:grid;gap:2px}
.hubx .prod .uses{font-size:13px;color:var(--ink-3)}
.hubx .prod .dose .uc{font-weight:400;color:var(--ink-2)}
.hubx .prod.staff .dose{color:var(--copper-d)}
/* phones: one readable card per product, the pack on the left (2-up left ~143 px of text at 360) */
@media (max-width:600px){.hubx .prodgrid{grid-template-columns:minmax(0,1fr);gap:12px}.hubx .prod{grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto}
  .hubx .prod .pack{height:auto;min-height:128px;padding:10px 8px}.hubx .prod .pack img{max-height:110px}.hubx .prod .pack img.pouch{max-height:86px}
  .hubx .prod .pack.type{padding:10px 6px}.hubx .prod .pack.type b{font-size:20px}.hubx .prod .pack.type small{font-size:11px}
  .hubx .prod .pbody{padding:12px 14px 14px;gap:5px}.hubx .prod h3{font-size:17px}.hubx .prod .role{font-size:13.5px}.hubx .prod .label{font-size:12.5px}.hubx .prod .dose{font-size:14px}}
.hubx .costbox{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 28px;align-items:center;padding:20px 22px;border-radius:10px;background:var(--surface);box-shadow:var(--lift)}
.hubx .costbox .ch{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;font-weight:600}
.hubx .costbox .num b{font:600 28px/1.1 var(--sans);font-variant-numeric:tabular-nums}
.hubx .costbox .num span{font-size:13px;color:var(--ink-3);margin-left:8px}
.hubx .costbox p{margin:0;font-size:14px;color:var(--ink-2)}
.hubx .costbox .bench{font-weight:600;color:var(--ink)}
.hubx .costbox .side{display:grid;gap:8px;max-width:40ch}
.hubx .costbox.slim{grid-template-columns:minmax(0,1fr);padding:14px 18px}
.hubx .costbox.slim .side{max-width:none;display:flex;flex-wrap:wrap;gap:4px 24px}
.hubx .sstamp{font:600 11px var(--mono);letter-spacing:.08em;color:var(--copper-d);background:var(--copper-t);padding:3px 8px;border-radius:4px}
@media (max-width:640px){.hubx .costbox{grid-template-columns:minmax(0,1fr)}}

/* contact, footer */
.hubx .contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:22px 44px;padding:24px 26px;background:var(--navy);color:var(--navy-ink);border-radius:10px;align-items:start}
:root[data-theme="navy"] .hubx .contact{box-shadow:inset 0 0 0 1px rgba(233,240,232,.12)}
.hubx .contact .nums{display:flex;flex-wrap:wrap;gap:18px 40px}
.hubx .contact .c{display:grid;gap:4px;justify-items:start}
.hubx .contact small{font:11px var(--mono);letter-spacing:.12em;color:rgba(240,244,239,.62)}
.hubx .contact b{font:600 24px var(--sans);font-variant-numeric:tabular-nums;user-select:all;letter-spacing:.01em;white-space:nowrap}
.hubx .copy{border:0;background:rgba(240,244,239,.14);color:var(--navy-ink);font:500 12.5px var(--sans);padding:4px 10px;border-radius:999px;cursor:pointer}
.hubx .contact .side{display:grid;gap:8px;padding-left:28px;border-left:1px solid rgba(240,244,239,.16)}
.hubx .contact p{margin:0;font-size:13.5px;color:rgba(240,244,239,.78)}
.hubx .contact .lock2{display:flex;align-items:center;gap:8px;color:#5FCB6C;margin-bottom:4px}
.hubx .contact .lock2 svg{height:20px;width:auto}
.hubx .contact .lock2 b{font:400 14px var(--black);letter-spacing:.06em;color:#5FCB6C}
@media (max-width:760px){.hubx .contact{grid-template-columns:minmax(0,1fr);padding:20px}.hubx .contact b{font-size:21px}.hubx .contact .side{padding-left:0;border-left:0;padding-top:16px;border-top:1px solid rgba(240,244,239,.16)}}
.hubx footer.foot{margin-top:28px;display:grid;gap:6px;font-size:12.5px;color:var(--ink-3)}
.hubx footer.foot ul{margin:0;padding-left:18px}
.hubx footer.foot .src{font-family:var(--mono);font-size:12px}
.hubx .lint{background:var(--copper-t);border-radius:8px;padding:10px 14px;color:var(--ink)}

.hubx dialog#zoom{border:0;padding:0;background:transparent;max-width:min(96vw,1100px);max-height:96vh}
.hubx dialog#zoom::backdrop{background:rgba(5,10,8,.84)}
.hubx dialog#zoom img{width:auto;max-width:100%;height:auto;display:block;border-radius:6px;max-height:90vh;object-fit:contain;margin:auto}
.hubx dialog .x{position:absolute;top:8px;right:8px;border:0;border-radius:999px;background:rgba(255,255,255,.92);color:#12241A;font:600 14px var(--sans);padding:10px 16px;min-height:44px;cursor:pointer}
@media (max-width:700px){.hubx dialog#zoom{overflow:visible}.hubx dialog#zoom img{max-height:calc(100vh - 150px)}.hubx dialog .x{top:auto;bottom:calc(100% + 10px);right:0}}
.hubx #toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,8px);background:var(--btn);color:var(--btn-ink);font:500 14px var(--sans);padding:10px 16px;border-radius:999px;opacity:0;transition:opacity 140ms ease-in,transform 140ms ease-in;pointer-events:none;z-index:60;max-width:calc(100vw - 32px)}
.hubx #toast.on{opacity:1;transform:translate(-50%,0);transition:opacity 200ms var(--ease),transform 200ms var(--ease)}
.hubx #loaderr{margin:32px 0}

/* present mode: a 1600x900 stage scaled to the screen; the same slides as the deck section */
.hubx #pres{position:fixed;inset:0;z-index:50;background:#08110C;display:grid;grid-template-rows:minmax(0,1fr) auto;color:#F0F4EF}
.hubx #pres .stagewrap{position:relative;overflow:hidden;display:grid;place-items:center}
.hubx #pres .stage{position:absolute;left:50%;top:50%;width:1600px;height:900px;transform-origin:center;overflow:hidden;border-radius:4px}
.hubx #pres .pbar{display:flex;align-items:center;gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:#08110C}
.hubx #pres .pbar button{border:0;background:rgba(240,244,239,.12);color:#F0F4EF;font:500 13.5px var(--sans);padding:8px 14px;border-radius:999px;cursor:pointer;min-height:38px}
.hubx #pres .pbar button:disabled{opacity:.35}
.hubx #pres .prog{flex:1;height:3px;background:rgba(240,244,239,.15);border-radius:2px;overflow:hidden;min-width:40px}
.hubx #pres .prog i{display:block;height:100%;background:#5FCB6C;transition:width .3s var(--ease)}
.hubx #pres .cnt{font:12.5px var(--mono);color:rgba(240,244,239,.7);font-variant-numeric:tabular-nums;white-space:nowrap}
.hubx #pres .hint{font-size:12.5px;color:rgba(240,244,239,.55);white-space:nowrap}
@media (max-width:700px){.hubx #pres .hint{display:none}}
.hubx #rshot{position:fixed;left:0;top:0;width:1600px;height:900px;z-index:99;overflow:hidden}
/* slides (1600x900), the strawberry deck's anatomy (strawberry/hub/deck): a rail (mono green eyebrow + the lockup), the body
   and a footer band (company · programme · n / N). Paper by default, navy for the cover and "Ask us anything". The light
   tokens are pinned on .sl, so a slide looks the same in a dark page, in present mode and in the rendered JPG. */
.hubx .sl{position:absolute;inset:0;overflow:hidden;line-height:1.5;text-align:left;display:flex;flex-direction:column;padding:54px 72px 40px;
  background:#F0F4EF;color:#12241A;font-family:var(--sans);
  --paper:#F0F4EF;--surface:#FFFFFF;--sunk:#E5ECE3;--ink:#12241A;--ink-2:rgba(18,36,26,.74);--ink-3:rgba(18,36,26,.62);--rule:rgba(18,36,26,.14);--rule-2:rgba(18,36,26,.26);
  --green:#098E19;--green-d:#06610F;--green-t:rgba(9,142,25,.10);--navy:#102033;--copper:#B8703A;--copper-d:#8A4F22;--copper-t:rgba(184,112,58,.14);
  --nums:'JetBrains Mono','Noto Sans Devanagari','Noto Sans Kannada',ui-monospace,monospace}
.hubx .sl.navy{background:#102033;color:#F0F4EF}
.hubx .sl .rail{flex:none;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-bottom:14px;border-bottom:1px solid rgba(18,36,26,.16);position:relative;z-index:3}
.hubx .sl.navy .rail{border-bottom-color:rgba(240,244,239,.22)}
.hubx .sl .eb{font:500 15px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#098E19;margin:0;min-height:20px}
.hubx .sl.navy .eb,.hubx .sl .ceb{color:#6FD07A}
.hubx .sl .lk{display:flex;align-items:center;gap:10px;color:#098E19;flex:none}
.hubx .sl .lk svg{height:28px;width:auto;display:block}
.hubx .sl .lk b{font:400 16px/1 var(--black);letter-spacing:.045em}
.hubx .sl.navy .lk{color:#6FD07A}.hubx .sl.navy .lk b{color:#F0F4EF}
.hubx .sl .sbody{flex:1;min-height:0;position:relative;display:flex;z-index:2}
.hubx .sl .sfoot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:12px;border-top:1px solid rgba(18,36,26,.16);font:500 13px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(18,36,26,.55);position:relative;z-index:3}
.hubx .sl .sfoot .ft{flex:1;text-align:center}
.hubx .sl .sfoot .pg{font-family:var(--nums);font-variant-numeric:tabular-nums}
.hubx .sl.navy .sfoot{border-top-color:rgba(240,244,239,.22);color:rgba(240,244,239,.6)}
.hubx .sl .dpill{font:600 12.5px var(--sans);letter-spacing:.04em;text-transform:none;color:#8A4F22;background:rgba(184,112,58,.14);border:1px solid #B8703A;border-radius:999px;padding:3px 11px;white-space:nowrap}
.hubx .sl.navy .dpill{color:#F2BD8E;background:rgba(224,160,106,.14);border-color:#E0A06A}
.hubx:not(:lang(en)) .sl :is(.eb,.ceb,.sfoot,.k,.dcap,.tlab,figcaption){letter-spacing:.02em}
.hubx .sl h1{font:600 76px/1.04 var(--serif);letter-spacing:-.025em;margin:0;text-wrap:balance}
.hubx .sl h2{font:600 46px/1.12 var(--serif);letter-spacing:-.02em;margin:0;text-wrap:balance}
.hubx:not(:lang(en)) .sl h1,.hubx:not(:lang(en)) .sl h2{letter-spacing:0;line-height:1.25}
.hubx .sl p{margin:0}
.hubx .sl .lead{font:400 21px/1.5 var(--sans);color:rgba(18,36,26,.74);max-width:62ch}
.hubx .sl.navy .lead{color:rgba(240,244,239,.8)}
.hubx .sl .k{font:500 13px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(18,36,26,.55)}
.hubx .sl.navy .k{color:rgba(240,244,239,.55)}
/* cover */
.hubx .sl .cov{position:absolute;inset:-15px -72px -12px 0;display:flex}
.hubx .sl .cov .cl{width:47%;flex:none;display:flex;flex-direction:column;justify-content:center;gap:22px;padding-right:44px;position:relative;z-index:2}
.hubx .sl .ceb{font:500 15px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.hubx .sl .cov h1{color:#F0F4EF}
.hubx .sl .creg{font:500 15px var(--mono);color:#6FD07A}
.hubx .sl .meta{display:flex;gap:40px;padding-top:18px;border-top:1px solid rgba(240,244,239,.2)}
.hubx .sl .meta .v{font:500 19px var(--nums);margin-top:6px;white-space:nowrap}
.hubx .sl .cov .cr{flex:1;position:relative;overflow:hidden}
.hubx .sl .cov .cr>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hubx .sl .cov .cr::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#102033 0%,rgba(16,32,51,.55) 14%,rgba(16,32,51,0) 40%)}
.hubx .sl .cov .cr em{position:absolute;right:20px;bottom:18px;z-index:1;font:500 14px var(--sans);font-style:normal;color:#F0F4EF;background:rgba(16,32,51,.6);padding:3px 11px;border-radius:999px}
.hubx .sl .cov .cr.art{background:#0c1a2a}.hubx .sl .cov .cr.art::after{display:none}
/* a step: the day numeral, the products with their doses, the framed right panel */
.hubx .sl .scol{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-start;gap:12px;padding:48px 52px 4px 0}
.hubx .sl .scol .lead{font-size:21px;max-width:58ch;margin:-2px 0 6px}
.hubx .sl .motif{position:absolute;left:-150px;top:-160px;width:380px;height:380px;pointer-events:none;z-index:1}
.hubx .sl .scol.dense{gap:6px;padding-top:36px}
.hubx .sl .dnum{display:flex;align-items:baseline;gap:6px 18px;flex-wrap:wrap}
.hubx .sl .dn{font:500 120px/.92 var(--nums);letter-spacing:-.045em;color:#098E19;font-variant-numeric:tabular-nums;white-space:nowrap}
.hubx .sl .scol.dense .dn{font-size:96px}
.hubx .sl .scol .dn.mo{font:600 88px/1 var(--sans);letter-spacing:-.01em}
.hubx .sl .scol .dn.word{font:600 54px/1.12 var(--sans);letter-spacing:-.01em;white-space:normal;flex-basis:100%}
.hubx .sl .scol.dense .dn.mo{font-size:72px}.hubx .sl .scol.dense .dn.word{font-size:44px}
.hubx .sl .dcap{font:500 17px var(--mono);letter-spacing:.06em;color:rgba(18,36,26,.55)}
.hubx .sl .sh{font:600 44px/1.1 var(--serif);margin:6px 0 4px;letter-spacing:-.01em}
.hubx .sl .scol.dense .sh{font-size:34px;margin:2px 0 2px}
.hubx:not(:lang(en)) .sl .sh{letter-spacing:0;line-height:1.25}
.hubx .sl .plist{display:flex;flex-direction:column}
.hubx .sl .prow{display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;gap:22px;padding:11px 0;border-top:1px solid rgba(18,36,26,.13)}
.hubx .sl .prow:last-child{border-bottom:1px solid rgba(18,36,26,.13)}
.hubx .sl .prow .pk{height:72px;display:grid;place-items:center}
.hubx .sl .prow .pk img{max-height:72px;max-width:72px;object-fit:contain;filter:drop-shadow(0 3px 5px rgba(0,0,0,.18))}
.hubx .sl .tpk{font:600 17px/1.1 var(--serif);color:#06610F;text-align:center}
.hubx .sl .prow .nm{font:600 32px/1.15 var(--sans);letter-spacing:-.01em}
.hubx .sl .prow .ds{font:500 18px/1.35 var(--sans);color:rgba(18,36,26,.62);margin-top:3px}
.hubx .sl .ordt{font:500 17px var(--mono);color:rgba(18,36,26,.55);margin-left:10px;letter-spacing:0}
.hubx .sl .prow .rt{font:500 32px var(--nums);color:#06610F;white-space:nowrap;text-align:right;letter-spacing:-.02em}
.hubx .sl .plist.dense .prow{grid-template-columns:52px minmax(0,1fr) auto;gap:18px;padding:6px 0}
.hubx .sl .plist.dense .prow .pk{height:52px}.hubx .sl .plist.dense .prow .pk img{max-height:52px;max-width:52px}
.hubx .sl .plist.dense .prow .nm,.hubx .sl .plist.dense .prow .rt{font-size:25px}.hubx .sl .plist.dense .prow .ds{font-size:15.5px;margin-top:1px}
.hubx .sl .tlab{font:500 14px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#8A4F22;padding-top:4px}
.hubx .sl .tsplit{font:500 17px var(--sans);color:#8A4F22}
.hubx .sl .snotes{margin:4px 0 0;padding-left:20px;display:grid;gap:4px;font:400 17px/1.4 var(--sans);color:rgba(18,36,26,.72)}
.hubx .sl .sph{position:relative;flex:none;width:520px;margin:-14px -72px -12px 0;border-radius:0;overflow:hidden;background:#E5ECE3}
.hubx .sl .sph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hubx .sl .sph figcaption{position:absolute;left:0;right:0;bottom:0;padding:48px 22px 16px;background:linear-gradient(180deg,rgba(16,32,51,0),rgba(16,32,51,.86) 62%);font:500 14px/1.35 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:#F0F4EF}
.hubx .sl .sph em{position:absolute;right:20px;top:30px;font:500 13px var(--sans);font-style:normal;color:#F0F4EF;background:rgba(16,32,51,.6);padding:3px 10px;border-radius:999px}
.hubx .sl .sph.pkp{background:linear-gradient(180deg,#E9EFE7,#DCE6D9)}
.hubx .sl .pks{position:absolute;inset:44px 32px 78px;display:flex;align-items:flex-end;justify-content:center;gap:22px}
.hubx .sl .pks img{max-height:100%;max-width:44%;min-width:0;object-fit:contain;object-position:bottom;filter:drop-shadow(0 22px 24px rgba(0,0,0,.26))}
.hubx .sl .pks.n1 img{max-width:76%;max-height:90%}.hubx .sl .pks.n3 img{max-width:30%;max-height:78%}
.hubx .sl .pks .tpk{font-size:56px;align-self:center}
/* text slides: the crop note, the disease rule, the GA3 tank */
.hubx .sl .tx{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:24px;padding-right:56px}
.hubx .sl .tx .big{font:500 30px/1.45 var(--sans);max-width:1000px}
.hubx .sl .rule2{height:5px;width:300px;border-radius:3px;background:#098E19}
/* at a glance: the planner ribbon at 1440 px and the step index */
.hubx .sl .gl{display:flex;flex-direction:column;justify-content:center;width:100%;gap:14px;padding-top:20px}
.hubx .sl .glr svg{display:block;width:1440px;height:auto;overflow:visible}
.hubx .sl .glg{display:flex;flex-wrap:wrap;gap:6px 24px;font:500 15px var(--sans);color:rgba(18,36,26,.62)}
.hubx .sl .glg i{display:inline-block;width:16px;height:9px;border-radius:5px;margin-right:8px;vertical-align:1px}
.hubx .sl .gli{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-flow:column;gap:10px 26px;margin-top:4px}
.hubx .sl .gi{display:grid;gap:2px;align-content:start;border-top:1px solid rgba(18,36,26,.13);padding-top:7px}
.hubx .sl .gi .gd{font:500 14px var(--nums);color:#098E19}
.hubx .sl .gi b{font:600 17px/1.25 var(--sans)}
/* the disease shield */
.hubx .sl .shs{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px 40px;width:100%;align-content:center}
.hubx .sl .shk{display:flex;gap:14px;align-items:flex-end}
.hubx .sl .shk img{height:180px;width:auto;filter:drop-shadow(0 16px 18px rgba(0,0,0,.22))}
.hubx .sl .passes{grid-column:1/-1;display:grid;gap:26px}
.hubx .sl .pass{border-top:3px solid #098E19;padding-top:14px;display:grid;gap:10px;align-content:start}
.hubx .sl .pass.fc{border-top:3px dashed #B8703A}
.hubx .sl .pv{display:flex;align-items:flex-end;gap:14px}
.hubx .sl .pv span{display:grid;gap:2px}
.hubx .sl .pv small{font:500 15px/1.3 var(--sans);color:rgba(18,36,26,.62)}
.hubx .sl .pv b{font:500 58px/1 var(--nums);color:#06610F;letter-spacing:-.03em}
.hubx .sl .pv i{font:500 34px var(--sans);font-style:normal;color:rgba(18,36,26,.4);padding-bottom:26px}
.hubx .sl .pw{font:600 19px/1.3 var(--sans);color:#06610F}
.hubx .sl .pass.fc .pw{color:#8A4F22}
.hubx .sl .srule{grid-column:1/-1;font:400 20px/1.45 var(--sans);color:rgba(18,36,26,.74);max-width:1250px}
/* films, products, contact */
.hubx .sl .fl{display:flex;flex-direction:column;justify-content:center;gap:30px;width:100%}
.hubx .sl .fgrid{display:grid;gap:28px}
.hubx .sl .fgrid img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:6px;display:block}
.hubx .sl .fgrid b{font:600 26px/1.25 var(--serif)}
.hubx .sl .pgrid{display:grid;gap:26px 18px}
.hubx .sl .pcell{display:grid;gap:8px;justify-items:center;text-align:center;align-content:start}
.hubx .sl .pcell .im{height:150px;display:grid;place-items:end center}
.hubx .sl .pcell img{max-height:150px;max-width:130px;filter:drop-shadow(0 12px 16px rgba(0,0,0,.2))}
.hubx .sl .pcell .tpk{font-size:30px;align-self:center}
.hubx .sl .pcell b{font:600 21px/1.2 var(--sans)}
.hubx .sl .pcell span{font:500 15px/1.35 var(--nums);color:#06610F}
.hubx .sl .ct{display:flex;flex-direction:column;justify-content:center;gap:40px;width:100%}
.hubx .sl .ct h2{font-size:72px;color:#F0F4EF}
.hubx .sl .ct .nums{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:1300px}
.hubx .sl .ct .nums b{display:block;font:500 64px/1.1 var(--nums);letter-spacing:-.02em;color:#F0F4EF;margin-top:10px}
/* the ribbon inside a slide keeps the light colours whatever the page theme */
.hubx .sl .rb-lanebg{fill:#E5ECE3!important}.hubx .sl .rb-drip{fill:#102033!important}.hubx .sl .rb-num{fill:#fff!important}.hubx .sl .rb-flag.today text{fill:#fff!important}
.hubx .sl .rb-band.drip{stroke:#102033!important;fill:rgba(16,32,51,.10)!important}
.hubx .sl .a{opacity:0;transform:translateY(22px)}
.hubx .sl.play .a{animation:rise .8s var(--ease) forwards;animation-delay:var(--d,0s)}
.hubx .sl.play.quick .a{animation-duration:.38s;animation-delay:min(var(--d,0s),60ms)}
.hubx .sl .grow{transform:scaleX(0);transform-origin:left}
.hubx .sl.play .grow{animation:grow 1.1s var(--ease) forwards;animation-delay:var(--d,0s)}
.hubx .sl .zoomin{transform:scale(1.08)}
.hubx .sl.play .zoomin{animation:kb 9s ease-out forwards}
.hubx .sl.paused *{animation-play-state:paused!important}
.hubx .sl.still .a{opacity:1;transform:none}.hubx .sl.still .grow,.hubx .sl.still .zoomin{transform:none}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes grow{to{transform:scaleX(1)}}
@keyframes kb{to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.hubx .sl .a,.hubx .sl .grow,.hubx .sl .zoomin{opacity:1!important;transform:none!important;animation:none!important}}
@media (prefers-reduced-motion:reduce){.hubx *{scroll-behavior:auto!important;transition-duration:.01ms!important}}

/* Crop hub inside phytotron.com (app/[lang]/[hub], 10 Oct 2026). Appended after the scoped template CSS (scope-css.mjs).
   The site owns the chrome (nav, footer, language, ground); this file maps the hub onto the site's tokens (tokens.css),
   makes it square and mono-labelled like the rest of the site, and gives the hero the site's full-bleed plate. */

/* ---------- grounds: the site's navy and paper, on whichever the visitor picked ---------- */
.hubx, :root[data-theme="navy"] .hubx {
  --paper:#102033; --surface:#1A3049; --sunk:#162a41; --ink:#F0F4EF; --ink-2:#D3DEE7; --ink-3:#A8BACD;
  --rule:#22344B; --rule-2:#324864; --green:#3FCC51; --green-d:#3FCC51; --green-t:rgba(63,204,81,.12);
  --navy:#0b1726; --navy-ink:#F0F4EF; --stage:#0b1726; --chip:#22344B; --btn:#098E19; --btn-ink:#F0F4EF; --lift:none;
  --copper:#D08A54; --copper-d:#E0A06A; --hx-accent:#3FCC51; color-scheme:dark;
}
:root[data-theme="paper"] .hubx {
  --paper:#F0F4EF; --surface:#F7FAF6; --sunk:#E4EBE2; --ink:#12241A; --ink-2:#3E4F42; --ink-3:#4E6054;
  --rule:#C8D3C6; --rule-2:#9FB09C; --green:#098E19; --green-d:#0B5A16; --green-t:#D9EBD8;
  --navy:#102033; --navy-ink:#F0F4EF; --stage:#0c1622; --chip:#E4EBE2; --btn:#098E19; --btn-ink:#F0F4EF; --lift:none;
  --copper:#B8703A; --copper-d:#8A4F22; --hx-accent:#0B5A16; color-scheme:light;
}
.hubx { --serif:var(--pt-sans); --sans:var(--pt-sans); --mono:var(--pt-mono); --black:var(--pt-wordmark); --gut:clamp(16px,4vw,40px);
  --hh:var(--pt-nav-h,64px); display:block; background:var(--paper); color:var(--ink); font-family:var(--pt-sans); font-size:16px; line-height:1.5; }
.hubx > header.top { display:none !important; }
.hubx .wrap { max-width:1200px; padding-inline:clamp(16px,4vw,40px); padding-block:0 72px; }
.hubx #foot { display:none; }

/* ---------- loading: nothing placeholder ever shows; the page settles in once the data is in ---------- */
.hubx:not(.is-ready) .hero > div:first-child, .hubx:not(.is-ready) .wrap > :not(.hero) { opacity:0; }
.hubx.is-ready .wrap > :not(.hero) { transition:opacity .45s cubic-bezier(.2,.7,.2,1); }
.hubx .hero > div:first-child { transition:opacity .3s; }

/* ---------- type ---------- */
.hubx .hero h1 { font-weight:600; letter-spacing:-.035em; font-size:clamp(42px,6.4vw,82px); line-height:.98; }
.hubx:not(:lang(en)) .hero h1 { letter-spacing:0; line-height:1.18; font-size:clamp(38px,5.6vw,70px); }
.hubx h2 { font-weight:600; letter-spacing:-.025em; font-size:clamp(28px,3.4vw,44px); }
.hubx:not(:lang(en)) h2 { letter-spacing:0; line-height:1.3; }
.hubx section { padding-block:clamp(48px,7vw,96px) 8px; border-top:1px solid var(--rule); margin-top:0; }
.hubx .shead .sub { color:var(--ink-3); }

/* ---------- shape: square like the site; dots stay round ---------- */
.hubx :is(.dl,.btn,.chip,.tchip,.seg,.seg button,.langs,.langs button,.langsel,.cropsel,select,input[type="date"],
.callout,.contact,.costbox,.dcard,.doc,.empty,.fthumb,.fthumb img,.fthumb .ph,.next,.panel,.player,.poster img,.prod,
.pv,.quick,.quick .dl,.rulebox,.stagebox,.verdict,.tbar,#heroimg,.thumb,.cardrow,.topnav a,.secnav a,.copy,.badge,.tag,
.ptag,.fprods span,.plang img,#toast,.lint) { border-radius:0 !important; }
.hubx :is(.panel,.quick,.next,.contact,.costbox,.dcard,.doc,.prod,.rulebox,.verdict,.stagebox,.fthumb,.callout) { box-shadow:none !important; border:1px solid var(--rule); }

/* ---------- buttons: the site's key (green, square, mono caps) and its outline sibling ---------- */
.hubx :is(.dl,.btn) { font:500 12.5px/1 var(--pt-mono); letter-spacing:.08em; text-transform:uppercase; padding:12px 16px; background:var(--btn); color:var(--btn-ink); transition:background .2s,box-shadow .2s,transform .2s; }
.hubx :is(.dl,.btn):hover { background:#0AA61D; box-shadow:0 0 0 3px rgba(9,142,25,.28); }
.hubx :is(.dl.ghost,.btn.ghost) { background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--rule-2); }
.hubx :is(.dl.ghost,.btn.ghost):hover { box-shadow:inset 0 0 0 1px var(--green); color:var(--green-d); }
.hubx:not(:lang(en)) :is(.dl,.btn) { font:600 14px/1.1 var(--pt-sans); letter-spacing:0; text-transform:none; }
.hubx :is(.chip[aria-pressed="true"],.seg button[aria-pressed="true"]) { background:#098E19; color:#F0F4EF; }
.hubx .quick .dl { background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--rule-2); }
.hubx a { color:var(--green-d); }

/* ---------- hero: the site's page head over a full-bleed photo plate, under the site nav ---------- */
.hubx .hero { position:relative; isolation:isolate; overflow-x:visible; overflow-y:clip;   /* the photo's scroll drift must not paint over the downloads card below */
  grid-template-columns:minmax(0,1fr); min-height:min(78vh,760px); align-content:end;
  padding-block:calc(var(--pt-nav-h,64px) + clamp(72px,10vw,140px)) clamp(40px,6vw,72px); color:var(--ink); }
.hubx .hero > div:first-child { max-width:860px; }
.hubx #heroimg { max-width:none !important; position:absolute !important; z-index:-1; top:0; bottom:0; left:50%; width:100vw; margin:0 !important;
  transform:translateX(-50%); height:auto !important; aspect-ratio:auto !important; overflow:hidden; background:var(--stage); border:0; }
.hubx #heroimg img { width:100%; height:100%; object-fit:cover; object-position:72% 38% !important; }
.hubx #heroimg::after { content:""; position:absolute; inset:0; background:
  linear-gradient(90deg,rgb(var(--pt-wash) / .95) 0%,rgb(var(--pt-wash) / .78) 40%,rgb(var(--pt-wash) / .25) 100%),
  linear-gradient(0deg,rgb(var(--pt-wash) / 1) 0%,rgb(var(--pt-wash) / 0) 42%),
  linear-gradient(180deg,rgb(var(--pt-wash) / .7) 0%,rgb(var(--pt-wash) / 0) 22%); }
.hubx #heroimg .ptag { left:auto !important; right:clamp(16px,4vw,40px) !important; bottom:16px !important; padding:0 !important; background:none !important; color:var(--ink-3) !important; font:11px var(--pt-mono); z-index:1; }
.hubx .hero .lede { color:var(--ink-2); font-size:1.15rem; max-width:60ch; }
.hubx .hero .facts { font-family:var(--pt-mono); color:var(--ink-3); }
.hubx .hero .cta { display:flex !important; gap:10px; flex-wrap:wrap; margin-top:26px; }
.hubx .pt-films { padding:15px 22px; }
.hubx .pt-crumbs { font:500 .72rem var(--pt-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-bottom:20px; }
.hubx .pt-crumbs a { color:inherit; text-decoration:none; } .hubx .pt-crumbs a:hover { color:var(--hx-accent); }
.hubx .pt-crumbs span { margin:0 8px; color:var(--rule-2); }
.hubx:not(:lang(en)) .pt-crumbs { letter-spacing:0; text-transform:none; font-family:var(--pt-sans); font-size:.85rem; }
/* a hub-only language (Malayalam on cardamom, 5 Nov 2026; site i18n/config.ts HUB_LANGS): its link sits at the end of the
   crumbs. Malayalam is never tracked or uppercased (either splits its conjuncts), so the link resets both. */
.hubx .pt-crumbs .hx-xlangs { margin:0 0 0 14px; display:inline-flex; gap:8px; vertical-align:middle; }
.hubx .pt-crumbs a.hx-xlang { border:1px solid var(--rule-2); padding:3px 11px; border-radius:999px; color:var(--ink); }
.hubx .pt-crumbs a.hx-xlang:hover { border-color:var(--hx-accent); }
.hubx .pt-crumbs a.hx-xlang:lang(ml) { letter-spacing:0; text-transform:none; font:500 .9rem 'Noto Sans Malayalam', var(--pt-sans); }
@media (max-width:760px) {
  .hubx .hero { min-height:0; padding-top:calc(var(--pt-nav-h,64px) + 56px); }
  .hubx #heroimg::after { background:linear-gradient(0deg,rgb(var(--pt-wash) / 1) 10%,rgb(var(--pt-wash) / .8) 60%,rgb(var(--pt-wash) / .6) 100%); }
  .hubx #presbtn2 { display:none !important; } .hubx .pt-films { width:100%; justify-content:center; }
}
/* the title arrives word by word once the data is in; the plate drifts against the scroll (scroll-driven, no JS) */
@media (prefers-reduced-motion:no-preference) {
  .hubx.is-ready .hero h1 { animation:hx-title .9s cubic-bezier(.2,.7,.2,1) both; }
  .hubx.is-ready .hero .pt-crumbs { animation:hx-up .6s cubic-bezier(.2,.7,.2,1) both; }
  .hubx.is-ready .hero .lede { animation:hx-up .8s cubic-bezier(.2,.7,.2,1) .12s both; }
  .hubx.is-ready .hero .facts { animation:hx-up .8s cubic-bezier(.2,.7,.2,1) .2s both; }
  .hubx.is-ready .hero .cta { animation:hx-up .8s cubic-bezier(.2,.7,.2,1) .28s both; }
  .hubx.is-ready #heroimg img { animation:hx-plate 1.6s cubic-bezier(.2,.7,.2,1) both; }
  @supports (animation-timeline: view()) {
    .hubx.is-ready #heroimg img { animation:hx-drift linear both; animation-timeline:view(); animation-range:exit 0% exit 100%; }   /* the frame stays, the photo drifts inside it */
    .hubx .dcard img, .hubx .fthumb img { animation:hx-par linear both; animation-timeline:view(); animation-range:cover 0% cover 100%; }
  }
}
@keyframes hx-title { from { opacity:0; transform:translateY(28px); clip-path:inset(0 0 100% 0); } to { opacity:1; transform:none; clip-path:inset(0 0 -.3em 0); } }
@keyframes hx-up { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@keyframes hx-plate { from { opacity:0; transform:scale(1.06); } to { opacity:1; transform:none; } }
@keyframes hx-drift { from { transform:scale(1.14) translateY(0); } to { transform:scale(1.14) translateY(5%); } }
@keyframes hx-par { from { transform:scale(1.08) translateY(-3%); } to { transform:scale(1.08) translateY(3%); } }

/* ---------- section index: sticky under the site nav, in the site's nav voice ---------- */
.hubx .secnav { display:block !important; position:sticky; top:var(--pt-nav-h,64px); z-index:20; background:rgb(var(--pt-nav-bg,16 32 51) / .92);
  backdrop-filter:blur(12px) saturate(1.1); -webkit-backdrop-filter:blur(12px); margin:0 calc(-1 * clamp(16px,4vw,40px)); padding:0 clamp(16px,4vw,40px);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.hubx .secnav .sc { padding:0; gap:0; }
.hubx .secnav a { font:500 .72rem var(--pt-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); padding:16px 14px; position:relative; background:transparent !important; }
.hubx:not(:lang(en)) .secnav a { font:500 .92rem var(--pt-sans); letter-spacing:0; text-transform:none; }
.hubx .secnav a::after { content:""; position:absolute; left:14px; right:14px; bottom:10px; height:1px; background:var(--hx-accent); transform:scaleX(0); transform-origin:left; transition:transform .28s cubic-bezier(.2,.7,.2,1); }
.hubx .secnav a:hover, .hubx .secnav a[aria-current="true"] { color:var(--hx-accent) !important; }
.hubx .secnav a:hover::after, .hubx .secnav a[aria-current="true"]::after { transform:scaleX(1); }

/* ---------- panels, rules, callouts ---------- */
.hubx .callout { border-left:2px solid var(--green) !important; }
.hubx .quick { margin-top:0; }
.hubx :is(.fthumb,.dcard,.prod,.doc) { transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .25s,background-color .25s; }
@media (hover:hover) { .hubx :is(.fthumb,.dcard,.prod,.doc):hover { transform:translateY(-3px); border-color:var(--green) !important; } }
.hubx .player video { background:#000; }
.hubx :focus-visible { outline:2px solid var(--green); outline-offset:2px; }
.hubx #toast { border-radius:0; }