/* 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',Georgia,serif;
  --sans:'Inter Tight','Noto Sans Devanagari','Noto Sans Kannada',system-ui,sans-serif;
  --mono:'JetBrains Mono','Noto Sans Devanagari','Noto Sans Kannada',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}
: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; }
@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; }