/* CS Agritech @26 — the brand layer.
 *
 * A new look for the same app: a deep field green, a grain gold, and paper.
 * Headings are set in a serif because this is a desk for study as much as a
 * tool for a field, and the two should not look like different websites.
 *
 * Everything here is additive: styles.css keeps the working parts, and this
 * file re-dresses them without changing behaviour.
 */

:root{
  --ink:#14231C;
  --paper:#FBF8F1;
  --green:#0E3B2E;
  --green-2:#155C43;
  --green-3:#2C7A5B;
  --gold:#C9A227;
  --gold-2:#E4C55B;
  --gold-soft:#F4E9C6;
  --line:#E3DCCD;
  --muted:#6C7A6F;
  --shadow:0 1px 2px rgba(20,35,28,.06), 0 10px 24px -18px rgba(20,35,28,.35);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
}

body{
  background:
    radial-gradient(1200px 420px at 50% -180px, #F3EEDF 0%, rgba(243,238,223,0) 70%),
    var(--paper);
  color:var(--ink);
}

/* ---------- the mark ---------- */

.brandmark{width:34px;height:34px;flex:none;display:block}
.brandmark .ring{stroke:var(--green)}
.brandmark .grain{fill:var(--gold)}
.brandmark .leaf{fill:var(--green-2)}

.top .brand__name{
  font-family:var(--serif);
  font-weight:700;
  letter-spacing:-.01em;
  font-size:1.02rem;
  color:var(--green);
}
.top .brand__name em{font-style:normal;color:var(--gold)}

/* ---------- the front page ---------- */

.front{padding-top:2px}

.front__intro{
  margin:2px 0 14px;
  font-family:var(--serif);
  font-size:1.02rem;
  line-height:1.5;
  color:var(--muted);
}

/* the scene: a ring of seven notes over a drawn field */
.scene{
  position:relative;
  margin:0 0 18px;
  padding:22px 18px 18px;
  border-radius:24px;
  background:
    radial-gradient(120% 90% at 50% 0%, #17573F 0%, #0E3B2E 52%, #0A2F25 100%);
  color:#F7F3E8;
  overflow:hidden;
  box-shadow:0 18px 40px -28px rgba(10,47,37,.9);
}
.scene__sky{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    radial-gradient(78px 78px at 82% 16%, rgba(228,197,91,.55), rgba(228,197,91,0) 70%),
    radial-gradient(140px 60px at 20% 8%, rgba(255,255,255,.10), rgba(255,255,255,0) 70%);
}
.scene__rows{
  position:absolute;left:-10%;right:-10%;bottom:-6px;height:58%;pointer-events:none;opacity:.5;
  background:
    repeating-linear-gradient(100deg, rgba(255,255,255,.05) 0 2px, rgba(255,255,255,0) 2px 16px);
  -webkit-mask-image:linear-gradient(to top, #000 10%, transparent 92%);
  mask-image:linear-gradient(to top, #000 10%, transparent 92%);
}
.scene__head{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.scene__eyebrow{
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,243,232,.62);
}
.scene__day{font-size:.7rem;color:rgba(247,243,232,.55)}

.ring{
  position:relative;
  width:100%;
  max-width:330px;
  margin:6px auto 4px;
  aspect-ratio:1/1;
}
.ring__track{
  position:absolute;inset:29%;
  border-radius:50%;
  border:1px dashed rgba(247,243,232,.18);
}
.ring__core{
  position:absolute;inset:29%;
  border-radius:50%;
  display:grid;place-items:center;
  text-align:center;
  padding:0 6px;
  background:radial-gradient(circle at 50% 40%, rgba(255,255,255,.08), rgba(255,255,255,0) 70%);
}
.ring__count{font-family:var(--serif);font-size:1.5rem;line-height:1;color:var(--gold-2)}
.ring__count small{display:block;font-family:inherit;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(247,243,232,.55);margin-top:4px}

.ring__dot{
  position:absolute;
  width:34px;height:34px;
  margin:-17px 0 0 -17px;
  border-radius:50%;
  border:1px solid rgba(247,243,232,.22);
  background:rgba(255,255,255,.06);
  color:rgba(247,243,232,.7);
  font-size:.72rem;
  font-weight:700;
  display:grid;place-items:center;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.ring__dot:hover{transform:scale(1.08)}
.ring__dot.is-on{
  background:var(--gold);
  border-color:var(--gold-2);
  color:#25200A;
  box-shadow:0 0 0 6px rgba(201,162,39,.16);
}
.ring__dot.is-on:after{
  content:"";position:absolute;inset:-7px;border-radius:50%;
  border:1px solid rgba(228,197,91,.45);
}

.fact{
  position:relative;
  margin-top:14px;
  padding:14px 15px;
  border-radius:16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(247,243,232,.12);
}
.fact__tag{
  display:inline-block;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:#25200A;background:var(--gold-2);border-radius:999px;padding:2px 8px;font-weight:700;margin-bottom:8px;
}
.fact__text{
  margin:0 0 10px;
  font-family:var(--serif);
  font-size:1.06rem;
  line-height:1.45;
  color:#FBF8F1;
}
.fact__src{
  font-size:.72rem;line-height:1.45;color:rgba(247,243,232,.6);
}
.fact__src b{color:rgba(247,243,232,.8);font-weight:600}
.fact__src a{color:var(--gold-2);text-decoration:underline;text-underline-offset:2px}
.fact__nav{display:flex;gap:6px;margin-top:10px}
.fact__nav button{
  background:none;border:1px solid rgba(247,243,232,.2);color:rgba(247,243,232,.75);
  border-radius:9px;padding:5px 10px;font-size:.76rem;cursor:pointer
}

/* ---------- the five arenas ---------- */

.arenas{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 18px}
@media (max-width:360px){.arenas{grid-template-columns:1fr}}

.arena{
  position:relative;
  display:flex;flex-direction:column;gap:8px;
  padding:15px 14px 14px;
  border-radius:20px;
  border:1px solid var(--line);
  background:#fff;
  text-align:left;
  cursor:pointer;
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.arena:hover{transform:translateY(-2px);border-color:#CDD8CF}
.arena:active{transform:translateY(0)}
.arena--wide{grid-column:1 / -1}
.arena__ico{
  width:40px;height:40px;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(160deg,#EAF1E9,#DCE9DE);
  color:var(--green);
}
.arena__ico svg{width:21px;height:21px}
.arena h3{
  margin:0;font-family:var(--serif);font-size:1.02rem;letter-spacing:-.01em;color:var(--ink);
}
.arena p{margin:0;font-size:.79rem;line-height:1.45;color:var(--muted)}
.arena__n{
  position:absolute;right:12px;top:12px;font-size:.64rem;letter-spacing:.08em;
  text-transform:uppercase;color:#9AA79E;
}
.arena__go{
  margin-top:2px;font-size:.76rem;font-weight:700;color:var(--green-2);letter-spacing:.01em;
}
.arena--accent{
  background:linear-gradient(150deg,#0F3E30,#0B3227);
  border-color:#0B3227;color:#F7F3E8;
}
.arena--accent h3{color:#FBF8F1}
.arena--accent p{color:rgba(247,243,232,.72)}
.arena--accent .arena__ico{background:rgba(255,255,255,.10);color:var(--gold-2)}
.arena--accent .arena__go{color:var(--gold-2)}
.arena--accent .arena__n{color:rgba(247,243,232,.45)}

/* ---------- the front-page strip ---------- */

.strip{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--line);
  margin:0 0 16px;
}
.strip div{background:#fff;padding:11px 10px;text-align:center}
.strip b{display:block;font-family:var(--serif);font-size:1.02rem;color:var(--green);line-height:1.1}
.strip span{display:block;font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:#8A968C;margin-top:3px}

/* ---------- section headings ---------- */

.sect{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:18px 0 8px}
.sect h2{margin:0;font-family:var(--serif);font-size:1.06rem;letter-spacing:-.01em}
.sect button{background:none;border:0;color:var(--green-2);font-size:.78rem;font-weight:700;cursor:pointer;padding:0}

/* ---------- a calmer card ---------- */

.paper{
  border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:var(--shadow);
  padding:16px;
}
.paper h2{margin:0 0 6px;font-family:var(--serif);font-size:1.06rem}
.paper p.lead{margin:0 0 12px;font-size:.86rem;line-height:1.55;color:var(--muted)}

/* ---------- print: with or without the mark ---------- */

.brand-print{display:none}

@media print{
  .scene,.arenas,.sect,.tabs,.top,.fact__nav{display:none!important}
  body{background:#fff}
  .paper{border:0;box-shadow:none;padding:0}
  .brand-print{
    display:flex;align-items:center;gap:10px;margin-bottom:14px;
    padding-bottom:10px;border-bottom:2px solid #0E3B2E;
  }
  .brand-print b{font-family:var(--serif);font-size:1.05rem;color:#0E3B2E}
  .brand-print span{font-size:.72rem;color:#6C7A6F}
  body.print-clean .brand-print{display:none!important}
}

.top__right{display:flex;align-items:center;gap:10px}
.top__gear{
  width:34px;height:34px;border-radius:11px;border:1px solid var(--line);background:#fff;
  color:var(--green);display:grid;place-items:center;cursor:pointer
}
.top__gear:hover{background:#F3F7F2}
.brand__tag{
  display:block;font-style:normal;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:#9AA79E;margin-top:1px
}
.keep--promise{
  border:1px solid #D8E6D9;background:linear-gradient(160deg,#F2F8F1,#EAF3E8);
  border-radius:14px;padding:12px 13px;margin:10px 0
}
.keep--promise b{display:block;font-family:var(--serif);font-size:.98rem;color:#1B4A34;line-height:1.35}
.keep--promise span{display:block;font-size:.74rem;color:#5F7A64;margin-top:4px}

/* ---------- quick actions ---------- */

.quick{
  display:flex;gap:7px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding:2px 0 4px;margin:0 0 14px;scrollbar-width:none
}
.quick::-webkit-scrollbar{display:none}
.quick__b{
  flex:none;display:inline-flex;align-items:center;gap:6px;
  padding:9px 13px;border-radius:999px;border:1px solid var(--line);background:#fff;
  color:var(--ink);font-size:.8rem;font-weight:650;cursor:pointer;box-shadow:var(--shadow);white-space:nowrap
}
.quick__b svg{width:15px;height:15px;color:var(--green-2)}
.quick__b:hover{border-color:#C9D8CE;background:#FCFDFB}
.quick__i{
  width:17px;height:17px;border-radius:50%;background:var(--gold);color:#241F07;
  display:grid;place-items:center;font-size:.9rem;font-weight:800;line-height:1
}

/* ---------- the book, as a paper card under a dark scene ---------- */

#view-home .hero{
  background:#fff;background-image:none;color:var(--ink);
  border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:17px 16px
}
#view-home .hero__today,#view-home .hero__label{color:#8A968C;opacity:1}
#view-home .hero__balance{color:var(--green);font-size:2.1rem;letter-spacing:-.02em}
#view-home .hero__sub,#view-home .hero__say{color:var(--muted);opacity:1}
#view-home .hero__say{font-size:.86rem;line-height:1.5}
#view-home .split{border-top:1px solid var(--line);color:var(--muted)}
#view-home .split b{color:var(--ink)}
#view-home .trust{color:#9AA79E;opacity:1}
#view-home .flow{background:#F3F0E6}

/* ---------- the folded help ---------- */

.help{border:1px solid var(--line);border-radius:16px;background:#fff;margin:0 0 14px;overflow:hidden}
.help summary{
  cursor:pointer;padding:13px 15px;font-family:var(--serif);font-size:.98rem;color:var(--green);
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px
}
.help summary::-webkit-details-marker{display:none}
.help summary:after{content:"+";font-size:1.1rem;color:#9AA79E;font-family:system-ui,sans-serif}
.help[open] summary:after{content:"–"}
.help .card{border:0;box-shadow:none;border-radius:0;border-top:1px solid var(--line);margin:0}

/* ---------- back ---------- */

.top__back{
  height:34px;flex:none;border-radius:11px;border:1px solid var(--line);background:#fff;
  color:var(--green);display:inline-flex;align-items:center;gap:4px;cursor:pointer;
  margin-right:2px;padding:0 10px 0 7px;font:inherit;font-size:.76rem;font-weight:650
}
.top__back[hidden]{display:none}
.top__back:hover{background:#F3F7F2}
.top__back svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- welcome ---------- */

.welcome__eyebrow{
  margin:16px 0 2px;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);font-weight:800
}
.welcome__card h2{margin-top:2px}

/* ---------- the book before the first entry ---------- */

.hero__empty{margin:2px 0 14px}
.hero__empty-k{
  margin:0 0 7px;font-size:.64rem;letter-spacing:.11em;text-transform:uppercase;
  color:#8A968C;font-weight:700
}
.hero__empty ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.hero__empty li{position:relative;padding-left:16px;font-size:.85rem;line-height:1.4}
.hero__empty li:before{
  content:"";position:absolute;left:0;top:6px;width:7px;height:7px;border-radius:2px;background:var(--gold)
}
.hero__empty b{display:block;color:var(--green);font-weight:700;font-size:.9rem;letter-spacing:-.005em}
.hero__empty span{display:block;color:var(--muted)}

.welcome__card li b,.welcome__card li strong{color:var(--green);font-weight:750}

/* ---------- the welcome, by reader ---------- */

.welcome__head{
  margin:2px 0 6px;font-family:var(--serif);font-size:1.28rem;line-height:1.24;
  letter-spacing:-.015em;color:var(--ink)
}
.welcome__sub{
  margin:0 0 12px;font-size:.86rem;line-height:1.5;color:var(--muted);text-align:center
}
.who__ask{
  margin:14px 0 7px;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:#8A968C;font-weight:700;text-align:center
}
.who{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:0 0 2px}
.who__b{
  flex:none;border:1px solid var(--line);background:#fff;color:var(--muted);
  border-radius:999px;padding:7px 12px;font-size:.76rem;font-weight:650;cursor:pointer;white-space:nowrap
}
.who__b.is-on{background:var(--green);border-color:var(--green);color:#F7F3E8}
.welcome__list--who{margin-top:12px}
.welcome__list--who li b{color:var(--green)}

/* the mark sits a little prouder on the welcome card */
.welcome__mark{width:62px;height:62px}

/* the language box is the tallest thing on the card; trim it, not the promise */
.welcome__card .langpick{padding:12px 12px 10px;margin-bottom:2px}
.welcome__card .langpick__label{margin-bottom:8px}

/* The label fits beside the mark on a normal phone; on a very narrow one the
   chevron stays and the word steps aside rather than squeezing the name. */
.top__back span{white-space:nowrap}
.top .brand__name{white-space:nowrap}
@media (max-width:379px){
  /* Room is made by dropping the version chip, not the word: "Back" is the
     thing a reader needs, v21m is the thing only I need. */
  .top .ver{display:none}
  .top__back{padding:0 9px 0 6px}
}
@media (max-width:339px){
  .top__back span{display:none}
  .top__back{padding:0 8px 0 7px}
}

/* ---------- install and share ---------- */
.as-hero{
  display:flex;align-items:center;gap:14px;padding:18px 16px;border-radius:20px;margin:2px 0 14px;
  background:radial-gradient(120% 140% at 20% 0%,#17583F 0%,#0E3B2E 55%,#092A22 100%);
  color:#F7F3E8;box-shadow:0 10px 26px rgba(9,42,34,.22)
}
.as-hero__icon{width:62px;height:62px;flex:none;border-radius:50%;box-shadow:0 4px 14px rgba(0,0,0,.28)}
.as-hero__eyebrow{display:block;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:#D8B14A;margin-bottom:3px}
.as-hero h2{margin:0;font-family:var(--serif,Georgia,serif);font-size:1.18rem;color:#F7F3E8;line-height:1.2}
.as-hero p{margin:4px 0 0;font-size:.78rem;color:#CFE0D5;line-height:1.45}

.as-card{margin-bottom:12px}
.as-card h2{margin:0 0 6px}
.as-status{margin:10px 0 0;font-size:.78rem;color:#3B4A40;background:#EEF5EF;border:1px solid #D6E4D8;border-radius:11px;padding:9px 11px;line-height:1.45}
.as-status b{color:#0B3D2E}
.as-steps{margin:6px 0 0;padding-left:18px;font-size:.8rem;line-height:1.55;color:#3B4A40}
.as-steps li{margin-bottom:5px}
.as-fine{margin:10px 0 0;font-size:.68rem;color:#8A968B;line-height:1.5}

.as-share-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
@media (min-width:520px){.as-share-row{grid-template-columns:repeat(3,1fr)}}
.as-share{
  display:flex;align-items:center;justify-content:center;gap:7px;padding:11px 10px;border-radius:12px;
  border:1px solid var(--line,#E3DCC9);background:#fff;color:#0B3D2E;font:inherit;font-size:.82rem;
  font-weight:600;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease
}
.as-share:active{transform:translateY(1px)}
.as-share svg{width:17px;height:17px;flex:none}
.as-share--primary{grid-column:1 / -1;background:#0B3D2E;color:#F7F3E8;border-color:#0B3D2E}
.as-share--wa{background:#25D366;border-color:#25D366;color:#053B23}
.as-link{
  margin:10px 0 0;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.7rem;color:#6E7B70;
  background:#F6F2E6;border:1px dashed #DCD3BA;border-radius:9px;padding:7px 9px;word-break:break-all
}
.as-facts{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.as-facts li{display:grid;grid-template-columns:1fr;gap:2px;padding-left:12px;border-left:2px solid #E4D9BE}
.as-facts b{font-size:.86rem;color:#0B3D2E}
.as-facts span{font-size:.78rem;color:#5D6B60;line-height:1.5}

/* ---------- home hero, second pass: smaller, quieter, more readable ---------- */
.scene{padding:16px 16px 12px;border-radius:22px;margin-bottom:16px}
.scene__sun{
  position:absolute;top:-42px;right:-30px;width:168px;height:168px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(228,197,91,.38),rgba(228,197,91,.10) 52%,rgba(228,197,91,0) 70%)
}
.scene__head{margin-bottom:10px}
.fact{margin:0;padding:0;background:none;border:none;border-radius:0}
.fact__tag{margin-bottom:8px;font-size:.58rem}
.fact__text{font-size:1.11rem;line-height:1.46;margin:0 0 9px;letter-spacing:-.005em}
.fact__src{font-size:.67rem;line-height:1.5;color:rgba(247,243,232,.58)}
.fact__bar{
  display:flex;align-items:center;gap:10px;margin-top:13px;padding-top:11px;
  border-top:1px solid rgba(247,243,232,.13)
}
.fact__nav{display:flex;gap:6px;margin:0}
.fact__nav button{
  width:32px;height:32px;padding:0;display:grid;place-items:center;font-size:1.1rem;line-height:1;
  border-radius:10px;border:1px solid rgba(247,243,232,.22);background:rgba(255,255,255,.05);
  color:rgba(247,243,232,.85);cursor:pointer;-webkit-tap-highlight-color:transparent
}
.fact__nav button:active{background:rgba(255,255,255,.14)}
.ring{display:flex;align-items:center;gap:5px;flex:1;width:auto;max-width:none;margin:0;aspect-ratio:auto}
.ring__dot{
  position:static;width:7px;height:7px;margin:0;padding:0;border:0;border-radius:99px;flex:none;
  background:rgba(247,243,232,.26);color:transparent;font-size:0;line-height:0;box-shadow:none;
  transition:width .18s ease,background .18s ease
}
.ring__dot:hover{transform:none;background:rgba(247,243,232,.55)}
.ring__dot.is-on{width:20px;background:var(--gold-2);box-shadow:none}
.ring__dot.is-on:after{display:none}
.fact__count{display:flex;align-items:baseline;gap:3px;font-size:.64rem;color:rgba(247,243,232,.55);letter-spacing:.03em}
.fact__count b{font-family:var(--serif);font-size:.9rem;color:var(--gold-2)}
.fact__count i{font-style:normal}

/* arenas: a little more presence, a little less noise */
.arena{padding:16px 15px 15px;border-radius:18px;box-shadow:0 1px 2px rgba(11,61,46,.05)}
.arena:hover{box-shadow:0 14px 26px -22px rgba(11,61,46,.55)}
.arena__ico{width:44px;height:44px;border-radius:14px;background:linear-gradient(160deg,#EDF3EB,#DDEADF)}
.arena__ico svg{width:23px;height:23px}
.arena h3{font-size:1.05rem}
.arena p{font-size:.78rem}
.arena__go{font-size:.75rem;margin-top:4px}
.arena--accent .arena__ico{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}

/* the empty book: a start panel, not a list of promises */
.hero__empty{margin:6px 0 14px}
.hero__empty-k{color:#9A8654;font-size:.6rem;letter-spacing:.12em}
.hero__empty ul{gap:9px}
.hero__empty li{padding-left:22px;font-size:.82rem;color:#4A5750}
.hero__empty li:before{
  content:"";position:absolute;left:0;top:1px;width:15px;height:15px;border-radius:5px;
  background:#F1ECDC;border:1px solid #E2D7B8
}
.hero__empty b{font-size:.87rem;color:#0B3D2E}
.hero__empty span{font-size:.78rem;color:#6E7B70}

/* ---------- desk view: a considered frame instead of a phone column on white ---------- */
@media (min-width:900px){
  body{
    background:
      radial-gradient(1100px 520px at 50% -8%, #F6F2E4 0%, rgba(246,242,228,0) 62%),
      linear-gradient(180deg,#EEE9DA 0%,#E7E1CF 100%);
    padding-bottom:104px;
    min-height:100vh;
  }
  .top{
    max-width:600px;margin:22px auto 0;
    border:1px solid #E3DCC9;border-bottom:0;border-radius:20px 20px 0 0;
    background:rgba(250,247,240,.96)
  }
  main{
    max-width:600px;background:var(--cream);
    border-left:1px solid #E3DCC9;border-right:1px solid #E3DCC9;
    padding-bottom:36px;min-height:calc(100vh - 180px);
    box-shadow:0 40px 80px -60px rgba(11,61,46,.55)
  }
  .tabs{
    left:50%;right:auto;transform:translateX(-50%);
    width:min(600px,calc(100% - 40px));bottom:18px;
    border:1px solid #E3DCC9;border-radius:18px;
    box-shadow:0 18px 40px -26px rgba(11,61,46,.45);
    padding-bottom:8px
  }
  .welcome__card,.sheet{max-width:600px;margin-left:auto;margin-right:auto}
}
@media (min-width:900px){main{padding-bottom:130px}}

/* The welcome is laid out from the first paint and only made visible when it
   is time: toggling display would move a full-screen card into place and count
   as a layout shift for no visual reason. */
#welcome[hidden]{display:flex !important;visibility:hidden;pointer-events:none}

/* very small phones: keep the hero labels on one line instead of stacking */
@media (max-width:359px){
  .scene__eyebrow{font-size:.55rem;letter-spacing:.09em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:64%}
  .scene__day{white-space:nowrap;font-size:.63rem}
  .rchip small{display:none}
  .rchip__go{font-size:.6rem;white-space:nowrap}
  .fact__text{font-size:1.03rem}
}

/* ---------- welcome: a masthead, a claim, and the door ---------- */
.welcome .welcome__card{
  padding:0;overflow:hidden;border-radius:24px;max-width:440px;
  background:var(--cream,#FBF8F1);
  box-shadow:0 40px 90px -40px rgba(4,26,20,.75),0 2px 0 rgba(255,255,255,.06) inset;
  border:1px solid rgba(216,177,74,.22)
}
@media (prefers-reduced-motion:no-preference){
  .welcome:not([hidden]) .welcome__card{animation:wIn .38s cubic-bezier(.22,.7,.3,1) both}
  @keyframes wIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
}

.welcome__band{
  position:relative;display:flex;align-items:center;gap:12px;
  padding:18px 18px 17px;
  background:
    radial-gradient(120% 160% at 82% -20%,rgba(228,197,91,.16),rgba(228,197,91,0) 60%),
    linear-gradient(160deg,#12503B 0%,#0C3A2D 58%,#092E24 100%);
  color:#F7F3E8
}
.welcome__band:after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,rgba(228,197,91,0),rgba(228,197,91,.55),rgba(228,197,91,0))
}
.welcome__mark{width:48px;height:48px;flex:none;border-radius:50%;box-shadow:0 6px 16px rgba(0,0,0,.3)}
.welcome__brand{display:flex;flex-direction:column;gap:1px;min-width:0}
.welcome__brand b{
  font-family:var(--serif,Georgia,serif);font-size:1.1rem;font-weight:600;letter-spacing:.01em;color:#FBF8F1
}
.welcome__brand b em{font-style:italic;color:#E4C55B}
.welcome__brand span{font-size:.58rem;letter-spacing:.17em;text-transform:uppercase;color:rgba(247,243,232,.55)}
.welcome__seal{
  margin-left:auto;text-align:center;font-size:.5rem;line-height:1.25;letter-spacing:.13em;text-transform:uppercase;
  color:#E4C55B;border:1px solid rgba(228,197,91,.42);border-radius:9px;padding:5px 8px;flex:none
}

.welcome__body{padding:18px 18px 16px}

/* language: one quiet line of pills, not a wall of buttons */
.welcome__card .langpick{padding:0;margin:0 0 15px;background:none;border:0}
.welcome__card .langpick__label{
  margin:0 0 7px;font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:#9AA69B;font-weight:700
}
/* Small circles that slide. Five and a half fit, so the sixth is always
   half-seen at the edge — the row itself says there is more. A fade and a
   count make it explicit without a button that has to be explained. */
.welcome__card .langpick{position:relative}
.welcome__card .langpick__row{
  display:flex;flex-wrap:nowrap;gap:8px;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  padding:3px 26px 5px 2px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.welcome__card .langpick__row::-webkit-scrollbar{display:none}
.welcome__card .langpick::after{
  content:'';position:absolute;right:0;top:19px;height:78px;width:30px;pointer-events:none;
  background:linear-gradient(90deg,rgba(253,251,245,0) 0%,rgba(253,251,245,.92) 55%,#FDFBF5 100%);
}
/* The ball: a polished token, not a container for squeezed text. The mark is
   two letters; the name is set in full underneath, where it can never be cut. */
.welcome__card .langchip,
.langchip--ball{
  flex:0 0 auto;scroll-snap-align:start;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  width:auto;height:auto;padding:0 2px;
  border:0;border-radius:0;background:none;box-shadow:none;cursor:pointer;
}
.welcome__card .langball,
.langchip .langball{
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  background:radial-gradient(120% 120% at 32% 20%,#FFFDF8 0%,#F4EFE0 62%,#E9E2CE 100%);
  border:1px solid #E0D9C4;
  box-shadow:inset 0 1px 0 #fff, inset 0 -3px 7px rgba(24,38,29,.07),
             0 2px 5px rgba(24,38,29,.07);
  font-family:var(--serif);font-size:15.5px;font-weight:600;line-height:1;
  letter-spacing:.01em;color:#2C7A5B;
  transition:transform .14s ease, box-shadow .18s ease, background .18s ease;
}
.langchip .langname{
  font-size:9.8px;line-height:1.15;letter-spacing:.01em;color:#5C6B62;
  text-align:center;max-width:62px;
}
.welcome__card .langchip:active .langball,
.langchip--ball:active .langchip .langball{transform:scale(.95)}

/* chosen: the ball is filled, ringed in brass, and the name goes dark */
.welcome__card .langchip[aria-pressed="true"] .langball,
.langchip--ball[aria-pressed="true"] .langball{
  background:radial-gradient(120% 120% at 30% 18%,#1A6A47 0%,#0B3D2E 68%,#082E23 100%);
  border-color:#0B3D2E;color:#F2D079;
  box-shadow:0 0 0 2px rgba(201,154,44,.55), 0 5px 14px rgba(11,61,46,.28),
             inset 0 1px 0 rgba(255,255,255,.18);
}
.welcome__card .langchip[aria-pressed="true"] .langname,
.langchip--ball[aria-pressed="true"] .langname{color:#0B3D2E;font-weight:700}

/* the cap of the count line stays under the row */
/* CSAARENA — the five doors, arranged so they can be read at a glance.

   Each card now has a colour of its own, its number in a small tag rather
   than floating in the corner, and its link pinned to the foot — so two cards
   side by side start and finish on the same line whatever the length of the
   sentence between. */
.arena{
  padding:14px 14px 13px;
  border:1px solid #E3DCC9;
  box-shadow:0 1px 2px rgba(24,38,29,.05);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.arena:hover{box-shadow:0 8px 20px rgba(24,38,29,.10)}
.arena p{font-size:.795rem;line-height:1.47;color:#5C6B62}
.arena__go{margin-top:auto;padding-top:7px;font-size:.775rem}
.arena__go:after{content:'';}

/* the number, as a tag */
.arena__n{
  position:absolute;right:10px;top:10px;
  font-size:.545rem;font-weight:700;letter-spacing:.12em;font-variant-numeric:tabular-nums;
  color:#8A968C;background:#F7F4EA;border:1px solid #EAE3D2;border-radius:99px;padding:2px 7px;
}

/* one colour per door: leaf, grain, teal, sky, clay */
.arena__ico{
  width:42px;height:42px;border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(24,38,29,.06);
}
.arena:nth-child(1) .arena__ico{background:linear-gradient(160deg,#EAF3EC,#D5E8DA);color:#1E6B45}
.arena:nth-child(2) .arena__ico{background:linear-gradient(160deg,#FBF1DA,#F2E1B9);color:#8A6A16}
.arena:nth-child(4) .arena__ico{background:linear-gradient(160deg,#E7EFF7,#D4E1EF);color:#2A4F86}
.arena:nth-child(5) .arena__ico{background:linear-gradient(160deg,#F8EAE3,#EFD9CD);color:#9A4A22}

.arena::before{
  content:'';position:absolute;left:14px;right:14px;top:0;height:2px;border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,#2C7A5B,#8FC7A9 40%,rgba(44,122,91,0));
  opacity:.0;transition:opacity .16s ease;
}
.arena:hover::before{opacity:.9}

/* the lab is the one that shouts: gold rule, gold number, gold link */
.arena--accent .arena__n{
  color:#E4C55B;background:rgba(228,197,91,.12);border-color:rgba(228,197,91,.34);
}
.arena--accent .arena__ico{
  background:linear-gradient(160deg,rgba(228,197,91,.22),rgba(228,197,91,.10));
  color:#E9CF84;box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.arena--accent p{color:rgba(247,243,232,.78)}
.arena--accent .arena__go{color:#E4C55B}

/* ---- the tab bar: six doors, and the one you are in ------------------- */
.tabs{grid-template-columns:repeat(6,1fr);padding:7px 3px calc(7px + env(safe-area-inset-bottom))}
.tab{
  position:relative;padding:7px 1px 5px;gap:4px;
  font-size:11px;font-weight:600;letter-spacing:.002em;
}
.tab svg{width:23px;height:23px}
.tab.is-on{font-weight:700}
/* a short gold rule over the door you came in by */
.tab.is-on::after{
  content:'';position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:20px;height:2.5px;border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,#C9A227,#F0D79A);
}
.tab.is-on svg{transform:translateY(-1px)}

/* CSACHAT — the message button, made to look like the correspondence desk it
   opens. A word beside the icon, because an icon alone is a guess. */
.top__msg{
  position:relative;
  width:auto;min-width:0;height:36px;padding:0 11px 0 9px;border-radius:999px;
  display:inline-flex;align-items:center;gap:6px;
  background:#EAF2EC;border:1px solid #CFE0D4;color:#0B3D2E;
}
.top__msg svg{width:17px;height:17px;flex:none}
.top__msg-lbl{
  font-size:11.5px;font-weight:700;letter-spacing:.02em;line-height:1;
  color:#0B3D2E;
}
.top__msg:hover{background:#E1EEE5;border-color:#BFD6C6}
/* unread: the desk is calling */
.top__msg.is-live{background:linear-gradient(158deg,#17603F,#0B3D2E);border-color:#0B3D2E;color:#FBF8F1}
.top__msg.is-live .top__msg-lbl{color:#FBF8F1}
.top__msg.is-live .top__dot{
  position:absolute;top:-2px;right:-2px;width:9px;height:9px;border-radius:50%;
  background:#F2A93B;border:2px solid #FBF8F1;
}
@media (max-width:359px){
  .top__msg{padding:0 9px 0 8px;gap:5px}
  .top__msg-lbl{font-size:11px}
}

/* CSAWELCOME — the shape of the welcome card, in one place.

   Shortened earlier, then accidentally dropped when the language row was
   rebuilt; restored here with the greeting as its own piece of typography. */
.welcome__card{border-radius:18px}
.welcome__band{border-radius:17px 17px 0 0}
.welcome__body{padding:16px 17px 14px}
.welcome__head{
  margin:0 0 7px;
  font-size:clamp(1.34rem,5.9vw,1.62rem);
  line-height:1.16;letter-spacing:-.018em;
}
.welcome__sub{font-size:.855rem;line-height:1.5;max-width:34ch;margin:0 auto}
.welcome__card #whoBox{margin:13px 0 2px}
.welcome__list{margin:0 0 14px;padding-left:16px;font-size:.82rem;line-height:1.5}
.welcome__list li{margin-bottom:6px}
.welcome__free{margin:10px 0 0;font-size:11.5px;line-height:1.45}
.welcome__card .place{margin:13px 0 10px;text-align:left}
.welcome__card .langpick{margin-bottom:12px;padding:0;border:0;background:none}
.welcome__start{
  width:100%;min-height:50px;border-radius:13px;border:0;
  background:linear-gradient(158deg,#14603F,#0B3D2E 62%,#082E23);
  color:#FBF8F1;font-size:1rem;font-weight:650;letter-spacing:.01em;
  box-shadow:0 8px 20px rgba(11,61,46,.28), inset 0 1px 0 rgba(255,255,255,.16);
}
.welcome__start:active{transform:scale(.995)}

/* The greeting: the word in the display italic, held between two gold rules.
   It is the first thing read on the card, so it is set, not stamped. */
.welcome__hi{
  display:flex;align-items:center;justify-content:center;gap:11px;margin:0 0 8px;
}
.welcome__hi::before,.welcome__hi::after{
  content:'';height:1px;flex:0 1 54px;border-radius:1px;
  background:linear-gradient(90deg,rgba(201,154,44,0),rgba(201,154,44,.8));
}
.welcome__hi::after{background:linear-gradient(90deg,rgba(201,154,44,.8),rgba(201,154,44,0))}
.welcome__hi span{
  font-family:var(--display);font-style:italic;font-weight:600;
  font-size:1.06rem;line-height:1;letter-spacing:.004em;color:#8A6A16;white-space:nowrap;
}

/* the count under the row of balls */
.langpick__count{
  display:flex;align-items:center;gap:6px;margin:9px 0 0;
  font-size:.625rem;line-height:1.35;color:#8B988E;letter-spacing:.005em;
}
.langpick__count svg{width:13px;height:13px;flex:none;color:#2C7A5B}
.langpick__count b{color:#0B3D2E;font-weight:700}

/* ---------------------------------------------------------------------------
   CSAFINAL — the two refinements, written last so nothing above can win.

   The language tokens carry the whole word; the Chat control is rebuilt at a
   specificity that messages.css (which loads after this file) cannot undo.
   ------------------------------------------------------------------------- */

/* 1. Whole words inside a stadium token — round at the ends like the ball it
      replaces, long enough that no language name is ever abbreviated. */
.welcome__card .langchip,
.langchip--ball{
  display:inline-flex;align-items:center;justify-content:center;
  padding:0;border:0;background:none;box-shadow:none;
}
.welcome__card .langball,
.langchip .langball{
  display:inline-flex;align-items:center;justify-content:center;
  width:auto;min-width:0;height:38px;padding:0 15px;border-radius:999px;
  white-space:nowrap;font-family:var(--sans);
  font-size:12px;font-weight:650;line-height:1;letter-spacing:.008em;
  color:#33513F;
  background:radial-gradient(140% 200% at 28% 0%,#FFFDF8 0%,#F4EFE0 58%,#E8E1CC 100%);
  border:1px solid #DED7C1;
  box-shadow:inset 0 1px 0 #fff, inset 0 -3px 7px rgba(24,38,29,.06),
             0 2px 5px rgba(24,38,29,.07);
  transition:transform .14s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.langchip .langname{display:none}
.welcome__card .langchip[aria-pressed="true"] .langball,
.langchip--ball[aria-pressed="true"] .langball{
  background:radial-gradient(140% 200% at 28% 0%,#1A6A47 0%,#0B3D2E 66%,#082E23 100%);
  border-color:#0B3D2E;color:#FBF8F1;
  box-shadow:0 0 0 2px rgba(201,154,44,.55), 0 5px 14px rgba(11,61,46,.26),
             inset 0 1px 0 rgba(255,255,255,.18);
}

/* 2. The correspondence desk: deep green, brass hairline, gold speech mark. */
.top .top__msg{
  position:relative;width:auto;height:38px;min-width:0;
  padding:0 15px 0 12px;border-radius:999px;
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(158deg,#14603F 0%,#0B3D2E 58%,#082E23 100%);
  border:1px solid rgba(201,154,44,.55);color:#FBF8F1;
  box-shadow:0 2px 8px rgba(11,61,46,.22), inset 0 1px 0 rgba(255,255,255,.14);
  transition:box-shadow .18s ease, transform .12s ease, border-color .18s ease;
}
.top .top__msg:hover{
  border-color:rgba(228,197,91,.9);
  box-shadow:0 6px 16px rgba(11,61,46,.3), inset 0 1px 0 rgba(255,255,255,.2);
}
.top .top__msg:active{transform:scale(.985)}
.top .top__msg svg{width:18px;height:18px;flex:none;color:#E9CF84;stroke:#E9CF84}
.top .top__msg .top__msg-lbl{
  font-family:var(--serif);font-size:12.5px;font-weight:600;
  letter-spacing:.03em;line-height:1;color:#FBF8F1;
}
.top .top__msg.is-live{
  border-color:#F2C14E;
  box-shadow:0 0 0 3px rgba(242,193,78,.16), 0 6px 18px rgba(11,61,46,.3);
}
.top .top__msg.is-live .top__dot{
  position:absolute;top:-6px;right:-6px;
  min-width:19px;height:19px;padding:0 4px;border-radius:999px;
  display:grid;place-items:center;
  background:linear-gradient(180deg,#FFD37A,#E7A93A);
  border:2px solid #FBF8F1;color:#3A2A05;
  font-size:10px;font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums;
  box-shadow:0 2px 6px rgba(11,61,46,.25);
}
@media (max-width:359px){
  .top .top__msg{padding:0 11px 0 10px;gap:6px;height:36px}
  .top .top__msg .top__msg-lbl{font-size:12px}
}

/* ---------------------------------------------------------------------------
   CSASCENE — the ten living pictures on the front page.

   One canvas, one palette, one set of motions. Every loop is slow enough to
   read as a living thing rather than a cartoon, and quiet in the corner of the
   eye while the note is being read.
   ------------------------------------------------------------------------- */
.fact__scene{
  position:relative;height:116px;margin:-6px -15px 12px;overflow:hidden;
  border-radius:14px 14px 0 0;
  background:
    radial-gradient(80% 120% at 82% -20%,rgba(228,197,91,.16),rgba(228,197,91,0) 60%),
    linear-gradient(180deg,#0F4A36 0%,#0B3D2E 62%,#082F23 100%);
}
.fact__scene::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,26,20,0) 62%,rgba(6,26,20,.55) 100%);
}
.scene{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ---- the motions ------------------------------------------------------- */
@keyframes sRain{0%{transform:translateY(-16px);opacity:0}
  12%{opacity:.9}85%{opacity:.9}100%{transform:translateY(86px);opacity:0}}
@keyframes sRipple{0%{transform:scale(.5);opacity:.85}100%{transform:scale(3.2);opacity:0}}
@keyframes sGrow{0%{transform:scaleY(.18)}55%{transform:scaleY(1)}100%{transform:scaleY(1)}}
@keyframes sDraw{0%{stroke-dashoffset:480;opacity:.4}55%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes sPop{0%,55%{transform:scale(.4);opacity:0}75%,100%{transform:scale(1);opacity:1}}
@keyframes sDrift{0%{transform:translate(-14px,0)}100%{transform:translate(30px,0)}}
@keyframes sSway{0%{transform:rotate(-1.1deg)}100%{transform:rotate(1.1deg)}}
@keyframes sFill{0%{opacity:.15}70%,100%{opacity:.8}}
@keyframes sDrain{0%{transform:scaleY(1)}70%,100%{transform:scaleY(.26)}}
@keyframes sRoot{0%{stroke-dashoffset:70}60%,100%{stroke-dashoffset:0}}
@keyframes sBloom{0%,42%{transform:scale(.15) rotate(-18deg);opacity:0}
  70%,100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes sWing{0%{transform:rotate(-16deg)}100%{transform:rotate(22deg)}}
@keyframes sFlow{to{stroke-dashoffset:-32}}
@keyframes sWrite{0%{stroke-dashoffset:90}70%,100%{stroke-dashoffset:0}}
@keyframes sTick{0%,55%{stroke-dashoffset:26}80%,100%{stroke-dashoffset:0}}
@keyframes sDrop{0%{transform:translateY(-14px);opacity:0}20%{opacity:1}
  85%{opacity:1}100%{transform:translateY(92px);opacity:0}}
@keyframes sGrow2{0%,38%{transform:scaleY(.2)}72%,100%{transform:scaleY(1)}}

.s-rain line{animation:sRain 2.6s linear infinite}
.s-ripple{animation:sRipple 2.8s ease-out infinite;transform-origin:center}
.s-grow{animation:sGrow 5.2s cubic-bezier(.22,.9,.3,1) infinite}
.s-grow2{animation:sGrow2 6.4s cubic-bezier(.22,.9,.3,1) infinite}
.s-draw{animation:sDraw 5s ease-in-out infinite}
.s-pop{animation:sPop 4.6s ease-out infinite;transform-origin:center}
.s-drift{animation:sDrift 9s ease-in-out infinite alternate}
.s-sway{animation:sSway 6.5s ease-in-out infinite alternate}
.s-fill{animation:sFill 5s ease-in-out infinite}
.s-drain{animation:sDrain 6s ease-in-out infinite;transform-origin:top center}
.s-root{animation:sRoot 6s ease-out infinite}
.s-bloom{animation:sBloom 7s ease-out infinite}
.s-wing{animation:sWing .16s ease-in-out infinite alternate;transform-origin:0 0}
.s-wing2{animation:sWing .14s ease-in-out infinite alternate-reverse;transform-origin:0 0}
.s-flow{animation:sFlow 1.4s linear infinite}
.s-write{animation:sWrite 5s ease-out infinite}
.s-tick{animation:sTick 6s ease-out infinite}
.s-drop{animation:sDrop 3.2s linear infinite}



/* ---------------------------------------------------------------------------
   The rest of the front page: the masthead at a narrow width, the help card,
   and the seal kept away from the introductory sentence.
   ------------------------------------------------------------------------- */

/* A phone is not wide enough for the wordmark, the tagline, the build number
   and two buttons. The tagline and the build go; the name and the doors stay. */
@media (max-width:460px){
  .brand__tag,.brand .ver{display:none}
  .brand__name{font-size:1.02rem}
  .brandmark{width:34px;height:34px}
}

/* The invitation to ask a person, laid out as a card rather than a sentence
   running into its own icon. */
.help-card{
  display:flex;align-items:center;gap:11px;width:100%;
  margin:10px 0 0;padding:11px 12px;
  background:#FFFDF7;border:1px solid #E3DCC9;border-radius:14px;
  text-align:left;cursor:pointer;
  box-shadow:0 1px 2px rgba(24,38,29,.05);
}
.help-card__ico{
  flex:none;width:32px;height:32px;border-radius:10px;
  display:grid;place-items:center;
  background:#EAF2EC;color:#1E6B45;
  font-family:var(--serif);font-size:16px;font-weight:700;
}
.help-card__txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.help-card__txt b{font-family:var(--serif);font-size:.92rem;color:#0B3D2E;line-height:1.2}
.help-card__txt span{font-size:11.5px;line-height:1.4;color:#6E7C72}
.help-card__go{
  flex:none;font-size:12px;font-weight:700;color:#2C7A5B;white-space:nowrap;
}
.help-card:hover{border-color:#CBD9CE;background:#FBFDF9}

/* the sheet's seal moves to the foot, clear of the opening paragraph */
#app > .view{background-position:calc(100% + 12px) calc(100% - 10px)}
@keyframes sAppear{0%,45%{opacity:0}70%,100%{opacity:1}}
.s-appear{animation:sAppear 6s ease-in-out infinite}

/* ---------------------------------------------------------------------------
   CSASHOT — the field notes, as photographs with a slow camera on them.

   The drift is the whole effect: a 30-second push or pan, a light that creeps,
   and a whisper of grain. Any faster and it reads as animation; this reads as
   footage of something happening very slowly.
   ------------------------------------------------------------------------- */
.fact__scene{height:134px;margin:-6px -15px 12px;background:#082A20}
.shot{position:absolute;inset:0;overflow:hidden}
.shot__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 46%;
  filter:saturate(1.04) contrast(1.04) brightness(1.02);
  transform-origin:center;
  will-change:transform;
  animation:sDriftIn 1.4s ease-out both;
}
/* five slow moves */
.shot__img.d1{animation:sDriftIn 1.4s ease-out both, sPushIn 32s ease-in-out infinite alternate}
.shot__img.d2{animation:sDriftIn 1.4s ease-out both, sPullOut 36s ease-in-out infinite alternate}
.shot__img.d3{animation:sDriftIn 1.4s ease-out both, sPanL 38s ease-in-out infinite alternate}
.shot__img.d4{animation:sDriftIn 1.4s ease-out both, sPanR 34s ease-in-out infinite alternate}
.shot__img.d5{animation:sDriftIn 1.4s ease-out both, sPushDiag 40s ease-in-out infinite alternate}

@keyframes sDriftIn{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:scale(1)}}
@keyframes sPushIn{from{transform:scale(1.02)}to{transform:scale(1.13)}}
@keyframes sPullOut{from{transform:scale(1.14)}to{transform:scale(1.02)}}
@keyframes sPanL{from{transform:scale(1.1) translateX(2.6%)}to{transform:scale(1.1) translateX(-2.6%)}}
@keyframes sPanR{from{transform:scale(1.1) translateX(-2.6%)}to{transform:scale(1.1) translateX(2.6%)}}
@keyframes sPushDiag{from{transform:scale(1.04) translate(-1.6%,1.6%)}to{transform:scale(1.12) translate(1.6%,-1.6%)}}

/* light creeping across the frame, as cloud moves over the sun */
.shot__sheen{
  position:absolute;inset:-20% -40%;pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,0) 42%,rgba(255,248,230,.16) 50%,rgba(255,255,255,0) 58%);
  animation:sSheen 24s ease-in-out infinite alternate;
}
@keyframes sSheen{from{transform:translateX(-26%)}to{transform:translateX(26%)}}

/* a little grain, so a phone screen does not look too clean */
.shot__grain{
  position:absolute;inset:0;pointer-events:none;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
.fact__scene::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(6,26,20,.34) 0%,rgba(6,26,20,0) 34%),
    linear-gradient(180deg,rgba(6,26,20,0) 58%,rgba(6,26,20,.72) 100%);
}
/* The photograph keeps its slow drift even where a phone asks for less motion:
   it is the point of the panel, and it is gentle enough to be safe. Only the
   sweeping light is dropped. */
@media (prefers-reduced-motion:reduce){
  .shot__sheen{animation:none !important;opacity:0 !important}
}

/* the language balls, holding the plain name */
.welcome__card .langball,
.langchip .langball{
  width:56px;height:56px;padding:0;border-radius:50%;
  font-size:11px;font-weight:650;letter-spacing:.005em;white-space:nowrap;
}

/* ---------------------------------------------------------------------------
   CSAARENA — the five doors, each opening on a photograph of its own subject.
   ------------------------------------------------------------------------- */
.arena{overflow:hidden;padding:0 14px 13px;background:#fff}
.arena::after{
  content:'';position:absolute;left:0;right:0;top:0;height:88px;z-index:0;
  background-size:cover;background-position:center 46%;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 46%,rgba(0,0,0,.45) 74%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 46%,rgba(0,0,0,.45) 74%,transparent 100%);
  filter:saturate(1.05) contrast(1.03);
}
.arena:nth-child(1)::after{background-image:url("img/maize-vt.jpg")}
.arena:nth-child(2)::after{background-image:url("img/crop-vegetables.jpg")}
.arena:nth-child(3)::after{
  background-image:url("img/note/soil.jpg");opacity:.42;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 40%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 40%,transparent 100%);
}
.arena:nth-child(4)::after{background-image:url("img/cotton-hv.jpg")}
.arena:nth-child(5)::after{background-image:url("img/crop-cassava.jpg")}

.arena__ico{margin-top:56px;position:relative;z-index:1}
.arena h3,.arena p,.arena__go{position:relative;z-index:1}
.arena__n{z-index:2;color:#FBF8F1;background:rgba(8,42,32,.55);border-color:rgba(255,255,255,.42)}
.arena--accent .arena__n{color:#F2D079;background:rgba(8,42,32,.6);border-color:rgba(228,197,91,.5)}

/* CSATIMELAPSE — three photographs, cross-fading slowly, as a growth sequence.

   Each frame holds for five seconds and takes one second to give way to the
   next, so the change is noticed but never seen happening — which is how a
   time-lapse of a plant actually reads. Each frame also carries its own slow
   push, so the cut is never a dead still. */
.shot--seq .stage{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 46%;
  opacity:0;animation:sStage 16.5s ease-in-out infinite, sPushIn 26s ease-in-out infinite alternate;
}
.shot--seq .stage1{animation-delay:0s,0s}
.shot--seq .stage2{animation-delay:5.5s,.6s}
.shot--seq .stage3{animation-delay:11s,1.2s}

@keyframes sStage{
  0%{opacity:0}
  6%{opacity:1}
  30%{opacity:1}
  38%{opacity:0}
  100%{opacity:0}
}
/* The time-lapse still turns, a little slower and without the push, so a phone
   with animations dialled down is not left with one frozen frame. */
@media (prefers-reduced-motion:reduce){
  .shot--seq .stage{animation:sStage 22s ease-in-out infinite !important}
}

/* CSAWORD — the name set in a face drawn for a name.

   Cormorant Garamond is lighter and far more elegant than the working serif;
   the tagline takes its italic, slightly opened, so the lockup reads as one
   engraved plate rather than a heading with a label under it. */
.brand__name{
  font-family:var(--wordmark);font-weight:600;
  letter-spacing:.004em;line-height:1.05;
}
.brand__name em{font-family:var(--wordmark);font-style:italic;font-weight:600}
.brand__tag{
  font-family:var(--wordmark);font-style:italic;font-weight:600;
  font-size:10.5px;letter-spacing:.055em;color:#5F7168;line-height:1.2;
}
@media (max-width:460px){
  .brand__name{font-size:1.12rem}
  .brand__tag{display:block;font-size:9.5px;letter-spacing:.04em}
}

/* Each door opens on its own photograph. The strip is a fixed-height flex
   item with the picture clipped inside it, and the icon sits on the seam by an
   explicit negative margin — nothing is absolutely positioned over the words,
   so a photograph can never ride up into the title. */
.arena{
  position:relative;overflow:hidden;padding:0;gap:0;
  display:flex;flex-direction:column;align-items:stretch
}
.arena:not(.arena--accent){background:#fff}
.arena::after,.arena::before{content:none !important;display:none !important}

.arena__ph{
  display:block;position:relative;flex:0 0 96px;
  height:96px;min-height:96px;max-height:96px;overflow:hidden;margin:0;
  background-size:cover;background-position:center 45%;background-color:#0B3D2E
}
.arena__ph::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,61,46,.02) 40%,rgba(11,61,46,.34))
}
.arena:nth-child(1) .arena__ph{background-image:url("img/maize-vt.jpg")}
.arena:nth-child(2) .arena__ph{background-image:url("img/crop-vegetables.jpg")}
.arena:nth-child(3) .arena__ph{background-image:url("img/note/soil.jpg")}
.arena:nth-child(4) .arena__ph{background-image:url("img/cotton-hv.jpg")}
.arena:nth-child(5) .arena__ph{background-image:url("img/crop-cassava.jpg")}
.arena:nth-child(6) .arena__ph{background-image:url("img/learn/fall-armyworm.jpg")}

.arena__ico{
  position:relative;z-index:2;margin:-20px 14px 8px;flex:none;
  background:#fff;border:1px solid var(--line);box-shadow:0 3px 10px rgba(11,61,46,.10)
}
.arena--accent .arena__ico{background:#14453A;border-color:rgba(255,255,255,.18)}
.arena h3{padding:0 14px}
.arena p{padding:0 14px}
.arena__go{padding:4px 14px 14px;margin-top:auto}

.arena__n{
  top:10px;right:10px;z-index:2;padding:3px 7px;border-radius:6px;
  background:rgba(8,42,32,.58);color:#FBF8F1;letter-spacing:.1em;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)
}
.arena--accent .arena__n{background:rgba(251,248,241,.18);color:#FBF8F1}

@media (max-width:360px){
  .arena__ph{flex-basis:84px;height:84px;min-height:84px;max-height:84px}
}

/* CSALOCAL — the panel pictures are carried on the phone, not fetched each time.

   Three small rules earn their keep:
     1. a ground and a ghost of the emblem behind the photograph, so a panel is
        never an empty box — on a slow first visit or with the aerial down;
     2. a compositor layer per frame, so the dissolve and the drift are handled
        by the phone's graphics chip rather than its main thread;
     3. backface hiding, which stops a hairline flicker on some Androids. */
.shot{background:radial-gradient(130% 110% at 72% 8%,#14523B 0%,#0B3D2E 52%,#07231A 100%)}
.shot::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:url("img/mark.svg") center / 84px auto no-repeat;
  opacity:.14;
}
.shot__img,.shot--seq .stage{
  transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

/* ---------------------------------------------------------------------------
   CSACLEAN — the front page, rebuilt plainly.

   The photographic card tops and the layered seals were fighting each other:
   pictures collapsing to white bands, text escaping under the next block, the
   wordmark breaking into boxes. This replaces the whole experiment with one
   controlled system — a card with a coloured ground, an icon plate, a number,
   a title, a sentence and a link on the floor — and a masthead that cannot
   wrap into itself.
   ------------------------------------------------------------------------- */

/* ---- the masthead ------------------------------------------------------ */
.top .brand{
  display:flex;align-items:center;gap:10px;min-width:0;
  background:none;border:0;padding:0;
}
.top .brandmark{width:34px;height:34px;flex:none;border-radius:50%}
.top .brand__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.top .brand__name{
  font-family:var(--wordmark);font-size:1.08rem;font-weight:600;
  line-height:1.02;letter-spacing:.004em;white-space:nowrap;
  color:#0B3D2E;background:none;
}
.top .brand__name em{font-style:italic;font-weight:600;color:#B9924A;background:none}
.top .brand__tag{
  display:block;font-family:var(--wordmark);font-style:italic;font-weight:600;
  font-size:8.4px;line-height:1.1;letter-spacing:.055em;
  color:#7B8A80;background:none;white-space:nowrap;
}
.top .brand .ver{display:none !important}

/* ---- the field note holds its own content ------------------------------ */
.scene{height:auto;overflow:hidden}

/* ---- the doors: a photograph, then the words --------------------------- */

.arenas{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0 18px;align-items:stretch}
@media (max-width:380px){.arenas{grid-template-columns:1fr}}

.arena{
  position:relative;display:flex;flex-direction:column;gap:9px;
  padding:15px 14px 13px;border-radius:16px;
  background:#FFFDF7;border:1px solid #E6DFCC;
  box-shadow:0 1px 2px rgba(24,38,29,.05);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.arena:hover{transform:translateY(-1px);box-shadow:0 10px 24px -14px rgba(24,38,29,.5);border-color:#D8D0BA}
.arena:active{transform:translateY(0)}

.arena h3{
  font-family:var(--serif);font-size:1.02rem;line-height:1.2;
  letter-spacing:-.01em;margin:0;color:#0B3D2E;
}
.arena p{font-size:.8rem;line-height:1.5;color:#5C6B62;margin:0}
.arena__go{
  margin-top:auto;padding-top:9px;
  font-size:.775rem;font-weight:700;letter-spacing:.005em;color:#2C7A5B;
  display:inline-flex;align-items:center;gap:4px;
}

.arena__ico{
  width:40px;height:40px;border-radius:13px;margin:0;flex:none;
  display:grid;place-items:center;
  background:linear-gradient(160deg,#EAF3EC,#D6E8DB);color:#1E6B45;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.arena:nth-child(2) .arena__ico{background:linear-gradient(160deg,#FBF1DA,#F2E1B9);color:#8A6A16}
.arena:nth-child(4) .arena__ico{background:linear-gradient(160deg,#E7EFF7,#D4E1EF);color:#2A4F86}
.arena:nth-child(5) .arena__ico{background:linear-gradient(160deg,#F8EAE3,#EFD9CD);color:#9A4A22}

.arena__n{
  position:absolute;top:13px;right:12px;
  font-size:.545rem;font-weight:700;letter-spacing:.12em;
  font-variant-numeric:tabular-nums;
  color:#8A968C;background:#F6F3E9;border:1px solid #E9E3D2;
  border-radius:99px;padding:2px 7px;
}

/* the lab is the one that carries weight */
.arena--accent{
  background:linear-gradient(158deg,#12523B 0%,#0B3D2E 58%,#082E23 100%);
  border-color:#0B3D2E;color:#FBF8F1;
  box-shadow:0 10px 26px -16px rgba(11,61,46,.9);
}
.arena--accent h3{color:#FBF8F1}
.arena--accent p{color:rgba(251,248,241,.78)}
.arena--accent .arena__ico{
  background:linear-gradient(160deg,rgba(228,197,91,.24),rgba(228,197,91,.1));
  color:#EFD08A;box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.arena--accent .arena__n{
  color:#E4C55B;background:rgba(228,197,91,.12);border-color:rgba(228,197,91,.34);
}
.arena--accent .arena__go{color:#E4C55B}

/* the lab spans the full width of the grid, as before */
.arena--accent{grid-column:1 / -1}

/* ---------------------------------------------------------------------------
   CSAWORD2 — the name, set as a name.

   "CS" is small caps, tracked open, in the dark green of the paper. "Agritech @26"
   takes the italic with a brass gradient cut into the letters themselves, so
   the gold reads as foil rather than as a coloured word. The two sit on one
   baseline with a hair of air between them.

   The tagline leaves the serif: a spaced small-cap sans underneath a serif
   name is the classic engraved-plate pairing, and it stops the two lines
   competing for the same voice.
   ------------------------------------------------------------------------- */
.top .brand__name{
  display:inline-flex;align-items:baseline;gap:.34em;
  font-family:var(--wordmark);font-size:1.13rem;font-weight:600;
  letter-spacing:-.008em;line-height:1;white-space:nowrap;color:#0B3D2E;
}
.top .brand__name .cs{
  font-size:.845em;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:#123F2F;
}
.top .brand__name em{
  font-family:var(--wordmark);font-style:italic;font-weight:600;
  font-size:1.04em;letter-spacing:.002em;padding-right:.05em;
  background:linear-gradient(178deg,#E0BB63 8%,#B98B2A 62%,#9A6F1C 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:#B98B2A;
}
.top .brand__tag{
  font-family:var(--sans);font-style:normal;
  font-size:8.1px;font-weight:650;letter-spacing:.19em;text-transform:uppercase;
  color:#7E8E83;line-height:1.2;margin-top:3px;
}
@media (max-width:460px){
  .top .brand__name{font-size:1.06rem}
  .top .brand__tag{font-size:7.6px;letter-spacing:.16em}
}

/* ---------------------------------------------------------------------------
   CSAARENA2 — the five doors, given a spine.

   A coloured edge down the left of each card ties it to its subject; a large
   ghost numeral sits under the sentence; the link stays on the floor. Nothing
   floats, nothing is masked, nothing overlaps. The lab keeps its dark ground
   and gold spine.
   ------------------------------------------------------------------------- */
.arena{
  position:relative;overflow:hidden;
  padding:15px 14px 14px 17px;
  border-radius:15px;
  background:#FFFDF7;border:1px solid #E6DFCC;
  --acc:#2C7A5B;
  box-shadow:inset 4px 0 0 var(--acc), 0 1px 2px rgba(24,38,29,.05);
  transition:transform .16s ease, box-shadow .18s ease;
}
.arena:nth-child(2){--acc:#C08F22}
.arena:nth-child(4){--acc:#2A4F86}
.arena:nth-child(5){--acc:#9A4A22}
.arena:hover{
  transform:translateY(-1px);
  box-shadow:inset 4px 0 0 var(--acc), 0 12px 26px -16px rgba(24,38,29,.55);
}
.arena__ico{width:38px;height:38px;border-radius:12px;box-shadow:none;border:0}
.arena h3{font-size:1.05rem;letter-spacing:-.012em}
.arena p{position:relative;z-index:1}
.arena__go{position:relative;z-index:1}

/* the numeral, as a watermark rather than a tag */
.arena__n{
  position:absolute;right:10px;bottom:2px;top:auto;
  font-family:var(--serif);font-size:2.7rem;font-weight:600;line-height:.9;
  letter-spacing:-.02em;color:rgba(11,61,46,.07);
  background:none;border:0;padding:0;z-index:0;
}
.arena--accent{
  --acc:#E4C55B;
  background:linear-gradient(158deg,#12523B 0%,#0B3D2E 58%,#082E23 100%);
  border-color:#0B3D2E;
  box-shadow:inset 4px 0 0 rgba(228,197,91,.85), 0 10px 26px -16px rgba(11,61,46,.9);
}
.arena--accent .arena__n{color:rgba(228,197,91,.16)}
.arena--accent:hover{box-shadow:inset 4px 0 0 #E4C55B, 0 14px 30px -16px rgba(11,61,46,1)}

/* ---------------------------------------------------------------------------
   CSAFIX — the real cause of the overlap.

   The field-note card is a <div class="scene">. A rule left over from the old
   drawn-SVG scene said `.scene{position:absolute;inset:0;width:100%;height:100%}`
   and it was still matching that card — lifting it out of the flow entirely, so
   it hovered over the page while the doors below arranged themselves under it.
   That is what was showing through behind the cards.

   Scoped back to the picture, and the card returned to the flow.
   ------------------------------------------------------------------------- */
.scene{
  position:relative;inset:auto;
  width:auto;height:auto;
  overflow:hidden;
}
/* the picture inside the band is the only absolutely placed thing */
.fact__scene .scene{position:absolute;inset:0;width:100%;height:100%}

/* ---- flatter boxes ----------------------------------------------------- */
.arena{
  border-radius:12px;
  border:1px solid #E7E1D0;
  box-shadow:inset 4px 0 0 var(--acc);
  transition:border-color .16s ease, background .16s ease;
}
.arena:hover{
  transform:none;
  border-color:#D6CEB8;
  box-shadow:inset 4px 0 0 var(--acc);
}
.arena--accent{
  border-radius:12px;
  box-shadow:inset 4px 0 0 rgba(228,197,91,.8);
}
.arena--accent:hover{box-shadow:inset 4px 0 0 #E4C55B}
.arena__ico{border-radius:11px}
.arena__n{font-size:2.25rem}

/* the note card, flatter too — it was a heavy slab */
.scene{border-radius:16px;box-shadow:none}

/* ---- the name, closer together ---------------------------------------- */
.top .brand__name{gap:.14em}
.top .brand__name em{padding-right:0;margin-left:-.01em}

/* ---------------------------------------------------------------------------
   CSAHARVEST — the harvest teaser, which until now had no styling at all.

   It was falling back to the browser's default button: a grey hairline box with
   three spans wrapping into each other and a stray chevron at the end of the
   first line. It is now a card that says what it is in one glance — a mark, a
   kicker, a title, a line of explanation, and a door on the right.
   ------------------------------------------------------------------------- */
.hv-teaser{
  display:flex;align-items:center;gap:12px;
  width:100%;margin:12px 0 0;padding:12px 12px 12px 13px;
  background:#FBF4E2;border:1px solid #EADFC2;border-radius:13px;
  text-align:left;cursor:pointer;box-shadow:none;font:inherit;
  transition:background .16s ease, border-color .16s ease;
  -webkit-tap-highlight-color:transparent;
}
.hv-teaser:hover{background:#F9F0D7;border-color:#DFD0A9}
.hv-teaser:active{background:#F7EDD0}

.hv-teaser__ico{
  flex:none;width:38px;height:38px;border-radius:11px;
  display:grid;place-items:center;
  background:rgba(201,154,44,.17);color:#8A6A16;
}
.hv-teaser__ico svg{width:19px;height:19px}

.hv-teaser__text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.hv-teaser__k{
  font-size:8.6px;font-weight:700;letter-spacing:.155em;text-transform:uppercase;
  color:#9A7B2A;line-height:1.3;
}
.hv-teaser__b{
  font-family:var(--serif);font-size:1rem;line-height:1.2;
  letter-spacing:-.008em;color:#0B3D2E;
}
.hv-teaser__n{font-size:11px;line-height:1.38;color:#7E7A5C}

.hv-teaser__go{
  flex:none;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;
  background:#0B3D2E;color:#F2D079;
}
.hv-teaser__go svg{
  width:14px;height:14px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  margin-left:1px;
}

/* ---------------------------------------------------------------------------
   CSATIGHT — the welcome card, closed up.

   Every element was sized for a full screen of its own: a headline at display
   scale, role chips in three ragged rows, three bullets with paragraph spacing.
   The reader had to scroll to find the door. This tightens each part without
   shrinking the type below what is comfortable on a phone.
   ------------------------------------------------------------------------- */
.welcome__card .welcome__hi{
  font-size:.88rem;margin:0 0 5px;
}
.welcome__card .welcome__head{
  font-size:clamp(1.14rem,4.9vw,1.36rem);
  line-height:1.13;letter-spacing:-.014em;margin:0 0 5px;
}
.welcome__card .welcome__sub{
  font-size:.785rem;line-height:1.42;max-width:31ch;margin:0 auto;
}
.welcome__card #whoBox{margin:9px 0 0}
.welcome__card #whoBox .chip,
.welcome__card .who__chips .chip{
  padding:6px 11px;font-size:.735rem;line-height:1.1;
  min-height:0;border-radius:999px;
}
.welcome__card .welcome__card__k,
.welcome__card #whoBox .who__label{
  font-size:8.4px;letter-spacing:.16em;margin:0 0 6px;
}
.welcome__card .langpick{margin:8px 0 0}
.welcome__card .langpick__label{font-size:8.4px;letter-spacing:.15em;margin:0 0 6px}
.welcome__card .langball{height:33px;padding:0 12px;font-size:10.6px}
.welcome__card .langpick__row{gap:7px;padding:2px 26px 4px 2px}
.welcome__card .langpick__count{font-size:9.6px;margin:5px 0 0}
.welcome__card .welcome__list{
  font-size:.765rem;line-height:1.4;
  margin:9px 0 10px;padding-left:13px;
}
.welcome__card .welcome__list li{margin:0 0 3px}
.welcome__card .welcome__list li::marker{color:#C9A227}
.welcome__card .place{margin:9px 0 8px;padding:9px 11px}
.welcome__card .place__text b{font-size:.94rem}
.welcome__card .place__text span{font-size:10.6px}
.welcome__card .welcome__start{height:44px;font-size:.92rem;margin-top:2px}
.welcome__card .welcome__free{font-size:10.4px;line-height:1.35;margin:8px 0 0}

/* ---------------------------------------------------------------------------
   CSADIVIDE — the break between asking and reading.

   Two different things were stacked flush against each other: a card that asks
   the reader to act, and a card that asks them to read. Without a breath between
   them they looked like one long column, and the eye had no signal that the
   subject had changed. A hairline with a brass diamond does that work — quiet,
   but unmistakable.
   ------------------------------------------------------------------------- */
.divider{
  display:flex;align-items:center;justify-content:center;
  margin:18px 2px 16px;position:relative;height:9px;
}
.divider::before,.divider::after{
  content:'';height:1px;flex:1;
  background:linear-gradient(90deg,rgba(11,61,46,0),rgba(11,61,46,.16));
}
.divider::after{background:linear-gradient(90deg,rgba(11,61,46,.16),rgba(11,61,46,0))}
.divider i{
  width:6px;height:6px;margin:0 9px;flex:none;
  background:linear-gradient(150deg,#DFBE63,#B4861F);
  transform:rotate(45deg);border-radius:1px;
  box-shadow:0 0 0 3px rgba(201,154,44,.10);
}

/* the ask card: a proper door, not a floating word */
.help-card{
  margin:10px 0 0;padding:11px 12px 11px 13px;
  display:flex;align-items:center;gap:11px;
  background:#FFFDF8;border:1px solid #E4DDC9;border-radius:13px;
  box-shadow:none;text-align:left;font:inherit;cursor:pointer;width:100%;
}
.help-card:hover{border-color:#D6CDB2;background:#FFFCF4}
.help-card__ico{
  flex:none;width:36px;height:36px;border-radius:11px;
  display:grid;place-items:center;
  background:rgba(44,122,91,.12);color:#1E6B45;
  font-family:var(--serif);font-size:1.02rem;font-weight:600;
}
.help-card__txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.help-card__txt b{
  font-family:var(--serif);font-size:.95rem;line-height:1.2;
  letter-spacing:-.008em;color:#0B3D2E;
}
.help-card__txt span{font-size:11.4px;line-height:1.35;color:#6E7C72}
.help-card__go{
  flex:none;align-self:center;
  padding:7px 12px;border-radius:999px;
  border:1px solid #C9DFCF;background:#F1F8F3;color:#1E6B45;
  font-size:.72rem;font-weight:700;letter-spacing:.01em;white-space:nowrap;
}

/* ---------------------------------------------------------------------------
   CSAHARV — the harvest table, drawn as a statistical exhibit.

   The numbers were already there; nothing was arranging them, so "Sugar
   cane4,893,718 t" arrived as one string and the year sat against the label.
   This gives the block the structure a published figure deserves: two headline
   figures, a ranked bar chart, a change chip per crop, and a source line set
   apart as a citation rather than a paragraph.
   ------------------------------------------------------------------------- */
#hvBody{padding:0}

.hv-head{
  display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:0 0 14px;
}
.hv-head > div{
  padding:10px 11px 9px;border-radius:12px;
  background:#F7F4E9;border:1px solid #EAE3D0;
}
.hv-head .hv-total{
  background:linear-gradient(160deg,#12523B,#0B3D2E);
  border-color:#0B3D2E;
}
.hv-k{
  display:block;font-size:8.4px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#8C9A90;line-height:1.3;
}
.hv-total .hv-k{color:rgba(242,208,121,.85)}
.hv-year,.hv-total b{
  display:block;font-family:var(--serif);font-weight:600;
  font-size:1.42rem;line-height:1.06;letter-spacing:-.02em;
  color:#0B3D2E;font-variant-numeric:tabular-nums;margin-top:2px;
}
.hv-total b{color:#FBF8F1;font-size:1.24rem}

.hv-rows{list-style:none;margin:0;padding:0;counter-reset:hv}
.hv-rows li{
  counter-increment:hv;
  position:relative;padding:9px 0 8px 22px;
  border-top:1px solid #EFEAD9;
}
.hv-rows li:first-child{border-top:0;padding-top:6px}
.hv-rows li::before{
  content:counter(hv,decimal-leading-zero);
  position:absolute;left:0;top:11px;
  font-size:9px;font-weight:700;letter-spacing:.04em;
  color:#B9C3B9;font-variant-numeric:tabular-nums;
}
.hv-rows li:first-child::before{top:8px}

.hv-row__top{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
}
.hv-row__top b{
  font-size:.865rem;font-weight:650;color:#17352A;letter-spacing:-.002em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hv-row__t{
  font-size:.845rem;font-weight:700;color:#0B3D2E;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}

.hv-bar{
  height:5px;margin:5px 0 5px;border-radius:3px;
  background:#EDE8D8;overflow:hidden;
}
.hv-bar i{
  display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,#3D9A70,#2C7A5B);
  transition:width .5s cubic-bezier(.2,.7,.3,1);
}
.hv-rows li:first-child .hv-bar i{
  background:linear-gradient(90deg,#E4C55B,#C9A227);
}

.hv-row__bot{
  display:flex;align-items:center;gap:7px;
  font-size:10.4px;color:#87958A;line-height:1.2;
  font-variant-numeric:tabular-nums;
}
.hv-change{
  display:inline-flex;align-items:center;gap:3px;
  padding:2px 7px;border-radius:999px;
  font-size:10px;font-weight:700;letter-spacing:.01em;
}
.hv-change.is-up{background:rgba(44,122,91,.12);color:#1E6B45}
.hv-change.is-down{background:rgba(154,74,34,.11);color:#9A4A22}

.hv-src{
  margin:12px 0 0;padding:8px 0 0;
  border-top:1px solid #EFEAD9;
  font-size:10.4px;line-height:1.45;color:#8C9A90;
}
.hv-src em{color:#9A4A22;font-style:normal;font-weight:600}

.hv-note{
  margin:8px 0 0;padding:9px 10px;
  background:#F7F4E9;border-radius:10px;
  font-size:10.6px;line-height:1.5;color:#6E7C72;
}

/* ---------------------------------------------------------------------------
   CSADOCK — the tab bar, redrawn as a dock.

   Six icons on a white shelf, the current one marked with a short gold rule,
   looked like a system toolbar. A dock reads better: the shelf floats, and the
   door you are standing in is a soft green capsule behind its own icon.
   ------------------------------------------------------------------------- */
.tabs{
  display:grid;grid-template-columns:repeat(6,1fr);
  gap:0;padding:7px 6px calc(7px + env(safe-area-inset-bottom,0px));
  background:rgba(255,253,247,.975);
  border-top:1px solid #E7E0CE;
  box-shadow:0 -6px 18px rgba(11,61,46,.055);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.tab{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:5px 0 2px;border:0;background:none;cursor:pointer;
  font-family:var(--sans);font-size:10.2px;font-weight:600;letter-spacing:.015em;
  color:#8A968C;transition:color .16s ease;
  -webkit-tap-highlight-color:transparent;
}
.tab svg{
  width:21px;height:21px;fill:none;stroke:currentColor;
  stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;
  position:relative;z-index:1;transition:transform .18s ease,stroke-width .18s ease;
}
.tab.is-on{color:#0B5C3B;font-weight:700}
.tab.is-on::before{
  content:'';position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:44px;height:29px;border-radius:999px;
  background:linear-gradient(180deg,rgba(44,122,91,.17),rgba(44,122,91,.08));
  border:1px solid rgba(44,122,91,.15);
}
.tab.is-on::after{content:none}            /* the old gold rule stands down */
.tab.is-on svg{transform:translateY(-1px);stroke-width:1.95}
.tab:active svg{transform:scale(.93)}

/* the retry inside the map's own note */
.ar-retry{
  display:inline-block;margin-left:6px;padding:5px 11px;
  border-radius:999px;border:1px solid #C9DFCF;background:#F1F8F3;
  color:#1E6B45;font-size:11.5px;font-weight:700;cursor:pointer;
  font-family:inherit;
}
.ar-retry:active{background:#E4F1E8}
#arMapNote b{font-weight:700;color:#1E6B45}

/* ---------------------------------------------------------------------------
   CSAHV2 — the harvest table, measured properly.

   The figures were set in a nowrap span with no allowance to shrink, so
   "4,893,718 t" pushed the row wider than the phone; the card grew, the page
   scrolled sideways, and every number was clipped at the right edge. A flex
   child must be told it may shrink before it will.
   ------------------------------------------------------------------------- */
#hvBody{max-width:100%;overflow-x:hidden}
#hvBody .hv-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
#hvBody .hv-head > div{min-width:0;overflow:hidden}
#hvBody .hv-k{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hvBody .hv-year,#hvBody .hv-total b{white-space:nowrap}

#hvBody .hv-rows li{min-width:0;overflow:hidden}
#hvBody .hv-row__top{gap:8px;min-width:0}
#hvBody .hv-row__top b{flex:1 1 auto;min-width:0}
#hvBody .hv-row__t{flex:0 0 auto;font-size:.8rem}

#hvBody .hv-bar{width:100%;height:6px;margin:6px 0 4px}
#hvBody .hv-row__bot{min-width:0;flex-wrap:wrap;gap:5px 6px}
#hvBody .hv-change{flex:0 0 auto;font-size:9.6px;padding:2px 6px;letter-spacing:.005em}
#hvBody .hv-vs{flex:0 0 auto;font-size:9.8px;color:#9AA79E;font-variant-numeric:tabular-nums}

@media (max-width:360px){
  #hvBody .hv-row__t{font-size:.755rem}
  #hvBody .hv-row__top b{font-size:.82rem}
}

/* ---------------------------------------------------------------------------
   CSAHV3 — the harvest, drawn as a composition rather than a list.

   A ranked list of bars can only say "this one is bigger". A single band says
   the more useful thing: how the national harvest divides, and how little of it
   is anything but sugar, cassava and maize.
   ------------------------------------------------------------------------- */
.hv-hero{
  padding:2px 0 12px;border-bottom:1px solid #EFEAD9;margin-bottom:2px;
}
.hv-eyebrow{
  margin:0;font-size:8.6px;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:#9A7B2A;
}
.hv-figure{
  margin:3px 0 0;font-family:var(--serif);font-weight:600;
  font-size:2.5rem;line-height:.98;letter-spacing:-.03em;color:#0B3D2E;
  font-variant-numeric:tabular-nums;
}
.hv-figure small{font-size:.42em;font-weight:500;letter-spacing:0;color:#7C8A80;margin-left:3px}
.hv-caption{margin:5px 0 0;font-size:10.8px;line-height:1.4;color:#7C8A80}

.hv-stack{
  display:flex;height:15px;margin:13px 0 15px;border-radius:8px;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(11,61,46,.08);
}
.hv-stack i{display:block;height:100%}
.hv-stack i + i{box-shadow:-1px 0 0 #FFFDF7}

.hv-crops{list-style:none;margin:0;padding:0}
.hv-crop{
  display:grid;grid-template-columns:9px minmax(0,1fr) auto 44px;
  align-items:center;gap:9px;
  padding:8px 0;border-top:1px solid #F1ECDC;
}
.hv-crop:first-child{border-top:0;padding-top:2px}
.hv-sw{width:9px;height:9px;border-radius:3px}
.hv-nm{
  min-width:0;display:flex;flex-direction:column;gap:1px;
  font-size:.845rem;font-weight:650;color:#17352A;line-height:1.15;
}
.hv-nm em{
  font-style:normal;font-size:9.4px;font-weight:500;
  color:#9AA79E;letter-spacing:.01em;
}
.hv-tn{
  font-size:.815rem;font-weight:700;color:#0B3D2E;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.hv-tn small{font-size:.82em;font-weight:500;color:#8C9A90}
.hv-chg{
  justify-self:end;display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;padding:2px 5px;border-radius:999px;
  font-size:9.6px;font-weight:700;letter-spacing:.005em;
  font-variant-numeric:tabular-nums;
}
.hv-chg.is-up{background:rgba(44,122,91,.12);color:#1E6B45}
.hv-chg.is-down{background:rgba(154,74,34,.11);color:#9A4A22}
.hv-chg.is-none{background:none;color:#B9C3B9}

#hvBody .hv-src{
  margin:12px 0 0;padding-top:9px;border-top:1px solid #EFEAD9;
  font-size:10.2px;line-height:1.45;color:#8C9A90;
}
#hvBody .hv-note{
  margin:9px 0 0;padding:9px 10px;background:#F7F4E9;border-radius:10px;
  font-size:10.4px;line-height:1.5;color:#6E7C72;
}

/* ---------------------------------------------------------------------------
   CSAHELP — the ask-for-help page, which had no styling of any kind.

   Labels sat inline before their inputs, the agent's name, role and number ran
   together on one line, "Call" was a bare blue link, and the whole form floated
   on the field with nothing behind it.
   ------------------------------------------------------------------------- */

/* the paper: a veil over the field, so type always has a ground */
#app{background:rgba(253,251,245,.86)}

/* ---- the agent, as a card ---------------------------------------------- */
.hp-agentcard{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:11px;
  padding:13px 13px;margin:0 0 14px;
  background:linear-gradient(160deg,#12523B,#0B3D2E);
  border:1px solid #0B3D2E;border-radius:14px;
  box-shadow:0 2px 8px rgba(11,61,46,.14);
}
.hp-agentcard__ico{
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(242,208,121,.16);color:#F2D079;
  border:1px solid rgba(242,208,121,.35);
  font-family:var(--serif);font-size:15px;font-weight:600;letter-spacing:.02em;
}
.hp-agentcard b{
  display:block;font-family:var(--serif);font-size:1.02rem;line-height:1.15;
  color:#FBF8F1;letter-spacing:-.008em;
}
.hp-agentcard small{
  display:block;margin-top:2px;font-size:10.4px;line-height:1.35;
  color:rgba(251,248,241,.7);letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
}
.hp-call{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  min-height:36px;padding:0 15px;border-radius:999px;
  background:#F2D079;color:#0B3D2E;text-decoration:none;
  font-size:.78rem;font-weight:750;letter-spacing:.01em;
}
.hp-call:active{transform:scale(.97)}

/* ---- the form ---------------------------------------------------------- */
.hp-form{display:flex;flex-direction:column;gap:11px;margin:0 0 6px}
.hp-form label{
  display:flex;flex-direction:column;gap:5px;
  font-size:9.4px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:#6E7C72;
}
.hp-form input,.hp-form select,.hp-form textarea{
  width:100%;font-family:var(--sans);font-size:16px;font-weight:400;
  letter-spacing:0;text-transform:none;color:#17352A;
  background:#FFFDF8;border:1px solid #E2DBC8;border-radius:11px;
  padding:11px 12px;line-height:1.3;
  -webkit-appearance:none;appearance:none;
}
.hp-form input::placeholder,.hp-form textarea::placeholder{color:#A8B2A9}
.hp-form textarea{min-height:84px;resize:vertical}
.hp-form select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E7C72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5 12 15.5 18 9.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:16px;
  padding-right:36px;
}
.hp-form input:focus,.hp-form select:focus,.hp-form textarea:focus{
  outline:none;border-color:#7FBF9F;box-shadow:0 0 0 3px rgba(44,122,91,.12);
}
.of-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.of-row label{min-width:0}

.hp-send{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:2px}
.hp-send .btn{
  min-height:44px;border-radius:11px;font-size:.82rem;font-weight:650;
  font-family:var(--sans);border:1px solid #E2DBC8;background:#FFFDF8;color:#0B3D2E;
}
.hp-send .btn--primary{
  grid-column:1 / -1;
  background:linear-gradient(160deg,#12523B,#0B3D2E);border-color:#0B3D2E;color:#FBF8F1;
}
.hp-send .btn:active{transform:scale(.985)}

.hp-form .hp-agent{margin-top:2px}
.hp-hint{
  margin:0;padding:9px 10px;border-radius:10px;
  background:rgba(154,74,34,.09);color:#8A431E;
  font-size:11.4px;line-height:1.45;
}

/* ---- requests sent ----------------------------------------------------- */
.hp-list{display:flex;flex-direction:column;gap:7px;margin:0 0 10px}
.hp-item{
  display:flex;align-items:center;gap:10px;justify-content:space-between;
  padding:10px 11px;border-radius:11px;
  background:#FFFDF8;border:1px solid #EAE3D0;
}
.hp-item b{display:block;font-size:.82rem;font-weight:650;color:#17352A;line-height:1.25}
.hp-item span{display:block;margin-top:2px;font-size:10.2px;color:#8C9A90;line-height:1.3}
.hp-item em{
  flex:none;font-style:normal;font-size:10px;font-weight:700;
  padding:3px 8px;border-radius:999px;
  background:rgba(44,122,91,.11);color:#1E6B45;
}
.hp-item.is-late em{background:rgba(154,74,34,.11);color:#9A4A22}

/* the photograph at the head of a Field School lesson */
.lesson-fig{
  margin:0 0 16px;border-radius:14px;overflow:hidden;
  background:#EFEAD9;border:1px solid #E7E0CD;
}
.lesson-fig img{
  display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
}
.lesson-fig figcaption{
  padding:9px 11px 10px;background:#FBF8F1;
  font-size:11px;line-height:1.45;color:#5F6E64;
}
.lesson-fig figcaption span{
  display:block;margin-top:3px;
  font-size:8.8px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:#9AA79E;
}

/* three pictures at the head of a lesson: one lead, two beneath it */
.lesson-gallery{margin:0 0 18px}
.lesson-gallery .lesson-fig{margin:0}
.lesson-gallery__pair{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:10px;margin-top:10px;
}
.lesson-gallery__pair .lesson-fig figcaption{padding:7px 9px 8px;font-size:10px}
.lesson-gallery__pair .lesson-fig figcaption span{
  margin-top:2px;font-size:8px;letter-spacing:.1em;
}

.lesson-gallery__pair--one{grid-template-columns:1fr}

/* ==========================================================================
   Official documents — ".st"
   One sheet, used by the Statement of Farm Records and by the Farm Input &
   Enterprise Budget. It is written to look like paper an office would accept:
   a serif masthead, ruled tables, a reference number, two signature lines.
   Screen: a card. Print: a clean A4 page and nothing else.
   ========================================================================== */

#printRoot{display:none}

.st{
  --st-ink:#15231C;
  --st-rule:#C9CFC6;
  --st-hair:#E4E6DF;
  background:#fff;
  color:var(--st-ink);
  border:1px solid var(--st-rule);
  border-radius:6px;
  padding:18px 16px 16px;
  font-family:var(--serif,Georgia,'Times New Roman',serif);
  font-size:13px;
  line-height:1.45;
}
.st *{box-sizing:border-box}

/* masthead ----------------------------------------------------------------- */
.st__head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding-bottom:8px;margin-bottom:12px;border-bottom:2px solid #0B3D2E
}
.st__head b{display:block;font-size:16px;line-height:1.2;letter-spacing:-.01em}
.st__head span{
  display:block;margin-top:3px;font-family:system-ui,-apple-system,sans-serif;
  font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:#6C7A6F
}
.st__who{
  flex:none;text-align:right;font-family:system-ui,-apple-system,sans-serif;
  font-size:9.5px;color:#4A5A50;line-height:1.5
}
.st__who small{display:block;margin-top:2px;color:#8A968C}

/* who and where ------------------------------------------------------------ */
.st__meta{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 12px}
.st__meta div{border-left:2px solid var(--st-hair);padding-left:8px;min-width:0}
.st__meta span{
  display:block;font-family:system-ui,-apple-system,sans-serif;font-size:8px;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;color:#8A968C;margin-bottom:2px
}
.st__meta b{display:block;font-size:12.5px;font-weight:600;overflow-wrap:anywhere}

.st__period{margin:0 0 4px;font-size:12px;color:#3D4A41}
.st__period b{font-weight:700;color:#0B3D2E}

/* section headings --------------------------------------------------------- */
.st h3{
  font-family:system-ui,-apple-system,sans-serif;font-size:8.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:.13em;color:#0B3D2E;
  margin:16px 0 6px;padding-bottom:3px;border-bottom:1px solid var(--st-hair)
}

/* the three headline figures ---------------------------------------------- */
.st__figs{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--st-rule)}
.st__figs div{padding:8px 9px;border-right:1px solid var(--st-rule)}
.st__figs div:last-child{border-right:0}
.st__figs span{
  display:block;font-family:system-ui,-apple-system,sans-serif;font-size:8px;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;color:#8A968C;margin-bottom:3px;line-height:1.3
}
.st__figs b{display:block;font-size:13px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* ruled tables ------------------------------------------------------------- */
.st__t{width:100%;border-collapse:collapse;margin:0}
.st__t th{
  font-family:system-ui,-apple-system,sans-serif;font-size:8px;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;color:#6C7A6F;text-align:left;
  padding:0 0 4px;border-bottom:1px solid #111
}
.st__t td{padding:4px 0;border-bottom:1px solid var(--st-hair);font-size:11.5px;vertical-align:top}
.st__t .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:12px}
.st__t tr.st__total td{
  border-top:1.5px solid #111;border-bottom:0;font-weight:700;font-size:12px;padding-top:5px
}

/* the caveat and the signatures ------------------------------------------- */
.st__note{
  margin:14px 0 0;padding:8px 10px;background:#F6F7F2;border-left:2px solid #0B3D2E;
  font-family:system-ui,-apple-system,sans-serif;font-size:9px;line-height:1.55;color:#4A5A50
}
.st__note b{color:#0B3D2E}
.st__sign{display:flex;gap:26px;margin-top:24px}
.st__sign div{flex:1;min-width:0}
.st__sign span{
  display:block;font-family:system-ui,-apple-system,sans-serif;font-size:8px;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;color:#8A968C
}
.st__sign i{display:block;height:26px;border-bottom:1px solid #333}

.pd__foot{
  display:flex;justify-content:space-between;gap:14px;margin-top:14px;padding-top:6px;
  border-top:1px solid var(--st-rule,#C9CFC6);
  font-family:system-ui,-apple-system,sans-serif;font-size:8px;color:#6C7A6F;letter-spacing:.02em
}

/* --------------------------------------------------------------------------
   Print. The app chrome is already hidden by the statement printer; here we
   make sure the sheet itself is the only thing on the page, A4, uncropped.
   `body.print-doc > *:not(#printRoot)` carries two ids so it outranks
   `body > *:not(#report)` in styles.css without !important gymnastics.
   -------------------------------------------------------------------------- */
@media print{
  @page{size:A4;margin:14mm 14mm 16mm}

  body.print-doc > *:not(#printRoot){display:none !important}
  body.print-doc > #printRoot{display:block !important}
  html body.print-doc{background:#fff !important;padding:0 !important}

  #printRoot .st{
    border:0;border-radius:0;padding:0;font-size:10.5pt;line-height:1.4;
    box-shadow:none;max-width:none;width:100%
  }
  #printRoot .st h3{font-size:7.5pt;margin-top:4.5mm}
  #printRoot .st__head b{font-size:15pt}
  #printRoot .st__head span,#printRoot .st__who{font-size:7.5pt}
  #printRoot .st__meta b{font-size:10pt}
  #printRoot .st__meta span,#printRoot .st__figs span{font-size:6.5pt}
  #printRoot .st__figs b{font-size:11pt}
  #printRoot .st__t td{font-size:9.5pt;padding:1.4mm 0}
  #printRoot .st__t th{font-size:6.5pt}
  #printRoot .st__note{font-size:7.5pt;background:#F6F7F2 !important;color:#3D4A41 !important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;break-inside:avoid}
  #printRoot .st__sign{margin-top:7mm}
  #printRoot .pd__foot{font-size:6.5pt;margin-top:4mm}

  #printRoot .st__figs,
  #printRoot .st__sign,
  #printRoot .st__meta,
  #printRoot .st__t tr{break-inside:avoid;page-break-inside:avoid}
  #printRoot .st__t{page-break-inside:auto}
}

/* --------------------------------------------------------------------------
   Holding details, declaration and stamp — the parts a Zambian lender or an
   extension officer looks for before reading a single figure.
   -------------------------------------------------------------------------- */
.st__kv{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;margin:0}
.st__kv div{padding:4px 0;border-bottom:1px solid var(--st-hair,#E4E6DF);min-width:0}
.st__kv span{
  display:block;font-family:system-ui,-apple-system,sans-serif;font-size:8px;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;color:#8A968C;margin-bottom:1px
}
.st__kv b{display:block;font-size:11.5px;font-weight:600;overflow-wrap:anywhere}
.st__declare{
  margin:0;font-size:10.5px;line-height:1.55;color:#3D4A41;
  border-left:2px solid var(--st-hair,#E4E6DF);padding-left:9px
}
.st__note--tight{margin-top:8px;background:transparent;border-left:0;padding:0;color:#5D6B60}
.st__sign{gap:16px;align-items:flex-end}
.st__sign em{
  display:block;font-family:system-ui,-apple-system,sans-serif;font-style:normal;
  font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;color:#8A968C;margin-top:3px
}
.st__stamp{
  flex:0 0 34mm;min-height:24mm;border:1px dashed #9AA79E;border-radius:2px;
  display:flex;align-items:flex-end;justify-content:center;padding:4px
}
.st__stamp span{
  font-family:system-ui,-apple-system,sans-serif;font-size:7px;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;color:#9AA79E
}

/* --------------------------------------------------------------------------
   The preview sheet. Same markup, same stylesheet, 210mm wide — so the phone
   shows the page, not an impression of the page.
   -------------------------------------------------------------------------- */
.dpv{position:fixed;inset:0;z-index:140;display:flex;flex-direction:column;background:#E7EBE4}
.dpv[hidden]{display:none !important}
.dpv__bar{
  flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;background:#0B3D2E;color:#F7F3E8
}
.dpv__title{font-family:system-ui,-apple-system,sans-serif;font-size:13px;font-weight:700;line-height:1.2}
.dpv__title span{
  display:block;margin-top:1px;font-size:9.5px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:#A9C3B4
}
.dpv__x{
  width:34px;height:34px;flex:none;border-radius:50%;border:0;background:rgba(255,255,255,.14);
  color:#fff;font-size:22px;line-height:1;cursor:pointer
}
.dpv__scroll{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;padding:12px}
.dpv__paper{background:#fff;box-shadow:0 8px 26px rgba(11,61,46,.22);padding:14mm;box-sizing:border-box}
.dpv__paper .st{border:0;border-radius:0;padding:0;box-shadow:none;background:#fff}
.dpv__act{
  flex:none;display:grid;grid-template-columns:1fr 1.5fr;gap:8px;padding:10px 12px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid #D8DED6
}
html.dpv-open,html.dpv-open body{overflow:hidden}

/* --------------------------------------------------------------------------
   The print contract, for every document in the app.
   Whatever is on screen, only #printRoot reaches the paper. This is the rule
   that keeps page furniture — step headers, crop guide, tab bar, forms — off
   a document that somebody is going to sign.
   -------------------------------------------------------------------------- */
@media print{
  .dpv{display:none !important}

  body.print-doc > *:not(#printRoot){display:none !important}
  body.print-doc > #printRoot{display:block !important;margin:0;padding:0}
  body.print-doc #view-guide,
  body.print-doc #view-plan,
  body.print-doc main#app{display:none !important}
}

/* record sheets (sheets.js) print through the same engine with their own
   class names; they get the same paper, not an unstyled table */
.dpv__paper .pd,
#printRoot .pd{
  background:#fff;color:#15231C;font-family:system-ui,-apple-system,sans-serif;
  font-size:10.5pt;line-height:1.45
}
.pd__head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding-bottom:7px;margin-bottom:10px;border-bottom:2px solid #0B3D2E
}
.pd__title{margin:0;font-family:var(--serif,Georgia,serif);font-size:14pt;color:#0B3D2E;letter-spacing:-.01em}
.pd__meta{text-align:right;font-size:8.5pt;color:#4A5A50;line-height:1.5}
.pd table{width:100%;border-collapse:collapse;margin:0}
.pd th{
  font-size:7.5pt;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#6C7A6F;
  text-align:left;padding:0 4px 4px 0;border-bottom:1px solid #111
}
.pd td{font-size:9pt;padding:4px 4px 4px 0;border-bottom:1px solid #E4E6DF;vertical-align:top}
.pd .pd__foot{
  display:flex;justify-content:space-between;gap:12px;margin-top:12px;padding-top:6px;
  border-top:1px solid #C9CFC6;font-size:7.5pt;color:#6C7A6F
}
.dpv__paper .pd__foot{border-top:1px solid #C9CFC6}

/* zoom cue */
.dpv__paper{cursor:zoom-in}
.dpv__paper.is-zoomed{cursor:zoom-out}

@media print{
  .dpv__paper .pd,
  #printRoot .pd{font-size:10.5pt}
  #printRoot .pd table{page-break-inside:auto}
  #printRoot .pd tr{break-inside:avoid}
}

/* --------------------------------------------------------------------------
   Media that is still on the phone. A picture or a voice note is drawn at its
   final size before the bytes are attached, so a chat repaint does not jump
   the thread around while blobs are read from IndexedDB.
   -------------------------------------------------------------------------- */
.vox-slot{display:block;min-height:52px;min-width:190px;border-radius:14px;background:#EDF1EA}
.msg-b__img[data-mid]{background:#E7EBE4;min-height:140px}

/* --------------------------------------------------------------------------
   A photograph is served as WebP with the JPEG behind it. `picture` must not
   become a box of its own, or every img{width:100%} measures itself against
   the wrapper instead of the frame.
   -------------------------------------------------------------------------- */
picture{display:contents}

/* ==========================================================================
   Account, and the co-operative / officer consoles.
   These two screens shipped with markup and no stylesheet: every class below
   was referenced in JavaScript and defined nowhere, so the settings page read
   as a wall of unstyled inputs. Kept deliberately plain — a form and a ledger,
   not a dashboard.
   ========================================================================== */

.ac-who{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 0 12px;border-bottom:1px solid var(--line,#DDE3DA)}
.ac-k{font-size:.64rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#8A968C}
.ac-exp{
  font-size:.66rem;font-weight:700;padding:3px 8px;border-radius:999px;
  background:#F1F6F0;border:1px solid #D9E6D7;color:#2F6B4F
}
.ac-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--line,#DDE3DA)
}
.ac-row:last-of-type{border-bottom:0}
.ac-danger{color:#9E3B28;border-color:#E8CEC6}
.ac-danger:hover{background:#FDF5F2}
.ac-status{margin:8px 0 0;font-size:.76rem;color:#5D6B60;min-height:1.2em}
.ac-note{
  margin:10px 0 0;font-size:.74rem;line-height:1.5;color:#7C8A80;
  border-left:2px solid #E1E6DE;padding-left:9px
}

.ac-seg{
  display:grid;grid-template-columns:1fr 1fr;gap:3px;margin:14px 0 12px;
  background:#EDF1EA;border-radius:999px;padding:3px
}
.ac-seg__b{
  border:0;background:transparent;padding:9px 10px;border-radius:999px;
  font:inherit;font-size:.8rem;font-weight:700;color:#5D6B60;cursor:pointer
}
.ac-seg__b.is-on{background:#fff;color:#0B3D2E;box-shadow:0 1px 2px rgba(11,61,46,.14)}

.ac-pane{display:block;margin:0}
.ac-lead{margin:0 0 12px;font-size:.79rem;line-height:1.55;color:#4A5A50}
.ac-field{display:block;margin:0 0 10px;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7C8A80}
.ac-field input{
  display:block;width:100%;margin-top:4px;padding:10px 11px;
  border:1px solid #D8DED6;border-radius:10px;background:#FCFDFB;
  font:inherit;font-size:.88rem;font-weight:400;letter-spacing:0;text-transform:none;color:#15231C
}
.ac-field input:focus{outline:none;border-color:#2F6B4F;background:#fff;box-shadow:0 0 0 3px rgba(47,107,79,.14)}
.ac-field input.is-bad{border-color:#B4472F;background:#FDF6F3}
.ac-err{display:block;margin-top:3px;font-size:.7rem;font-weight:600;letter-spacing:0;text-transform:none;color:#9E3B28}
.ac-err:empty{display:none}
.ac-opt{
  font-size:.62rem;font-weight:600;letter-spacing:.04em;text-transform:none;
  color:#8A968C;margin-left:4px
}
.ac-pw{position:relative;display:block}
.ac-pw input{padding-right:58px}
.ac-eye{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  border:0;background:transparent;padding:6px 8px;border-radius:8px;
  font:inherit;font-size:.7rem;font-weight:700;color:#2F6B4F;cursor:pointer;text-transform:none;letter-spacing:0
}
.ac-eye:hover{background:#F1F6F0}
.ac-go{margin-top:6px}
.ac-fine{margin:10px 0 0;font-size:.7rem;line-height:1.5;color:#8A968C}
.ac-fine a{color:#2F6B4F}

/* ---- co-operative and officer consoles ---------------------------------- */
.of-h{
  font-family:var(--serif,Georgia,serif);font-size:1rem;margin:18px 0 8px;
  color:#0B3D2E;letter-spacing:-.01em
}
.of-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 8px}
.of-row input{
  width:100%;padding:9px 10px;border:1px solid #D8DED6;border-radius:9px;
  background:#FCFDFB;font:inherit;font-size:.84rem
}
@media (max-width:430px){.of-row{grid-template-columns:1fr}}
.of-status{
  margin:8px 0;padding:8px 10px;border-radius:9px;font-size:.77rem;
  background:#F1F7F1;color:#204834;border-left:3px solid #2F6B4F
}
.of-status[hidden]{display:none}
.of-note{margin:8px 0;font-size:.77rem;color:#5D6B60}
.of-list{display:grid;gap:6px;margin:0 0 8px}
.of-item{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 11px;border:1px solid var(--line,#DDE3DA);border-radius:11px;background:#fff
}
.of-item b{display:block;font-size:.82rem;color:#15231C}
.of-item span{display:block;font-size:.72rem;color:#7C8A80}
.of-x{
  flex:none;width:28px;height:28px;border-radius:50%;border:1px solid #E8CEC6;
  background:#fff;color:#9E3B28;font-size:16px;line-height:1;cursor:pointer
}
.of-x:hover{background:#FDF5F2}

/* ---- small empties and document lists ---------------------------------- */
.hv-empty{
  margin:14px 0;padding:18px 14px;text-align:center;border:1px dashed #D8DED6;
  border-radius:12px;color:#7C8A80;font-size:.8rem;line-height:1.5;background:#FBFCFA
}
.st__steps{margin:0 0 0 16px;padding:0 0 0 6px}
.st__steps li{font-size:10.5px;line-height:1.5;margin:0 0 3px;color:#3D4A41}
@media print{#printRoot .st__steps li{font-size:9.5pt}}

/* ==========================================================================
   The sheet editor, the co-operative ledger, the officer return, the dry-spell
   bar and the privacy notice. All of these shipped with classes and no rules.
   ========================================================================== */

/* ---- a sheet being filled in ------------------------------------------- */
.sh-bar{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:11px 13px;margin:0 0 10px;background:#fff;border:1px solid var(--line,#DDE3DA);
  border-left:3px solid #2F6B4F;border-radius:12px
}
.sh-bar b{display:block;font-family:var(--serif,Georgia,serif);font-size:.96rem;color:#0B3D2E}
.sh-bar span{display:block;margin-top:2px;font-size:.74rem;line-height:1.4;color:#6C7A6F;max-width:44ch}
.sh-actions{display:flex;gap:6px;flex-wrap:wrap}

.sh-gloss{
  margin:0 0 10px;padding:10px 12px;background:#FBFCFA;border:1px solid #E6ECE2;border-radius:11px;
  font-size:.74rem;line-height:1.5;color:#4A5A50
}
.sh-gloss b{color:#2F4A3B}
.sh-tip{margin:6px 0 0;color:#7C8A80;font-style:italic}

.sh-wrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;background:#fff;
  border:1px solid var(--line,#DDE3DA);border-radius:12px
}
.sh{width:100%;border-collapse:collapse;font-size:.79rem;min-width:520px}
.sh thead th{
  position:sticky;top:0;z-index:1;background:#F4F7F2;text-align:left;white-space:nowrap;
  font-family:system-ui,-apple-system,sans-serif;font-size:.62rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:#6C7A6F;padding:8px 6px;border-bottom:1px solid #DDE3DA
}
.sh td{border-bottom:1px solid #EEF1EC;padding:0;vertical-align:middle}
.sh tbody tr:last-child td{border-bottom:0}
.sh-n{width:30px;text-align:right;padding:8px 6px !important;color:#9AA79E;font-variant-numeric:tabular-nums}
.sh td input{
  width:100%;min-width:64px;border:0;background:transparent;padding:9px 7px;
  font:inherit;font-size:.8rem;color:#15231C;border-radius:0
}
.sh td input:focus{outline:none;background:#F4FBF3;box-shadow:inset 0 0 0 2px rgba(47,107,79,.35)}
.sh-calc{
  padding:9px 7px !important;text-align:right;font-variant-numeric:tabular-nums;
  color:#2F4A3B;background:#FAFCF8;white-space:nowrap
}
.sh tfoot td{background:#F4F7F2;font-weight:700;border-top:1px solid #DDE3DA}
.sh-total{text-align:right;padding:8px 7px;font-variant-numeric:tabular-nums;color:#0B3D2E}
.sh-x{
  width:26px;height:26px;margin:0 4px;border-radius:50%;border:1px solid #E8CEC6;background:#fff;
  color:#9E3B28;font-size:15px;line-height:1;cursor:pointer
}
.sh-x:hover{background:#FDF5F2}

/* the old "prepare" document, kept legible if it is ever opened */
.signoff{margin-top:16px;padding-top:10px;border-top:1px solid #DDE3DA}
.sig{width:100%;border-collapse:collapse;margin-top:8px}
.sig td{padding:10px 6px 2px;font-size:10px;color:#3D4A41}
.sig .line{border-bottom:1px solid #333;min-width:110px;display:inline-block;height:16px;width:100%}
.sig .line.short{min-width:64px}
.small{font-size:9.5px;color:#6C7A6F;margin-top:6px}

/* ---- co-operative console ---------------------------------------------- */
.gp-setup,.gp-form{
  display:grid;gap:8px;padding:11px 12px;margin:0 0 12px;
  background:#FBFCFA;border:1px solid #E6ECE2;border-radius:12px
}
.gp-form input,.gp-setup input,.gp-setup select{
  width:100%;padding:9px 10px;border:1px solid #D8DED6;border-radius:9px;background:#fff;font:inherit;font-size:.84rem
}
.gp-kpis,.of-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 12px}
@media (max-width:430px){.gp-kpis,.of-kpis{grid-template-columns:1fr 1fr}}
.gp-kpis > div,.of-kpis > div{
  padding:9px 10px;border:1px solid #E1E6DE;border-radius:11px;background:#fff
}
.gp-kpis span,.of-kpis span{
  display:block;font-size:.6rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#8A968C
}
.gp-kpis b,.of-kpis b{display:block;margin-top:2px;font-size:.95rem;color:#15231C;font-variant-numeric:tabular-nums}

.gp-table{overflow-x:auto;border:1px solid var(--line,#DDE3DA);border-radius:12px;background:#fff;margin:0 0 10px}
.gp-table table{width:100%;border-collapse:collapse;font-size:.78rem;min-width:420px}
.gp-table th{
  text-align:left;padding:8px 10px;background:#F4F7F2;border-bottom:1px solid #DDE3DA;
  font-size:.6rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#6C7A6F;white-space:nowrap
}
.gp-table td{padding:8px 10px;border-bottom:1px solid #EEF1EC;color:#24352C}
.gp-table tr:last-child td{border-bottom:0}
.gp-actions{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 8px}
.gp-import{margin:10px 0;padding:10px 12px;border:1px dashed #D8DED6;border-radius:11px;background:#FBFCFA;font-size:.76rem;color:#6C7A6F}
.gp-import input{margin-top:6px}

/* ---- officer return ----------------------------------------------------- */
.of-form{
  display:grid;gap:8px;padding:11px 12px;margin:0 0 12px;
  background:#FBFCFA;border:1px solid #E6ECE2;border-radius:12px
}
.of-form input,.of-form select,.of-form textarea{
  width:100%;padding:9px 10px;border:1px solid #D8DED6;border-radius:9px;background:#fff;font:inherit;font-size:.84rem
}
.of-return{margin:0 0 12px}
.of-due{margin:8px 0;padding:9px 11px;border-radius:10px;background:#FDF6E8;border-left:3px solid #C08A2E;font-size:.76rem;color:#5A4520}
.of-camp{margin:8px 0;font-size:.76rem;color:#6C7A6F}

/* ---- dry spell: the bar on the home page, and the tool ------------------ */
.dry-bar{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:12px 13px;margin:0 0 12px;cursor:pointer;font:inherit;
  background:linear-gradient(150deg,#F4F8FB,#EAF1F6);border:1px solid #D5E2EC;border-radius:14px
}
.dry-bar:hover{border-color:#BFD6E5}
.dry-bar__ico{font-size:18px;line-height:1;flex:none}
.dry-bar__txt{flex:1;min-width:0}
.dry-bar__txt b{display:block;font-size:.85rem;color:#1F3A4A}
.dry-bar__txt span{display:block;font-size:.72rem;color:#5A7285;line-height:1.35;margin-top:1px}
.dry-bar__go{flex:none;font-size:.72rem;font-weight:800;color:#2B5F7A}

.dry-step{
  padding:11px 12px;margin:0 0 8px;background:#fff;border:1px solid #E1E6DE;border-radius:12px
}
.dry-step b{display:block;font-size:.84rem;color:#15231C;margin-bottom:2px}
.dry-step span{display:block;font-size:.76rem;line-height:1.5;color:#5D6B60}
.dry-crop{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.dry-pick{
  padding:7px 11px;border-radius:999px;border:1px solid #D8DED6;background:#fff;
  font:inherit;font-size:.75rem;font-weight:650;color:#2F4A3B;cursor:pointer
}
.dry-pick.is-on{background:#0B3D2E;border-color:#0B3D2E;color:#F7F3E8}
.dry-warn{margin:8px 0;padding:9px 11px;border-radius:10px;background:#FBF0E9;border-left:3px solid #B4472F;font-size:.76rem;color:#5A2A1C}
.dry-note{margin:8px 0 0;font-size:.72rem;color:#7C8A80;line-height:1.5}
.dry-src{margin:6px 0 0;font-size:.68rem;color:#96A099}

/* ---- privacy notice ----------------------------------------------------- */
.pv{background:#fff;border:1px solid var(--line,#DDE3DA);border-radius:14px;padding:14px;margin:0 0 12px}
.pv h2,.pv h3{font-family:var(--serif,Georgia,serif);color:#0B3D2E;margin:14px 0 6px}
.pv h3{font-size:.95rem}
.pv p{font-size:.79rem;line-height:1.6;color:#3D4A41;margin:0 0 8px}
.pv__note{
  margin:10px 0;padding:10px 12px;border-radius:10px;background:#F6F8F4;
  border-left:3px solid #0B3D2E;font-size:.76rem;line-height:1.55;color:#3D4A41
}
.pv__foot{margin:12px 0 0;padding-top:9px;border-top:1px solid #E8ECE5;font-size:.72rem;color:#8A968C}

/* ---- small shared pieces that had no rules ----------------------------- */
.st-actions{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 4px}
.ls-card--wide{grid-column:1 / -1}
.ls-map{margin:0}
.ac-card,.hv-card,.card--credit{
  padding:13px 14px;margin:0 0 12px;background:#fff;border:1px solid var(--line,#DDE3DA);border-radius:14px
}
.ac-card h3,.hv-card h3{font-family:var(--serif,Georgia,serif);font-size:.98rem;margin:0 0 4px;color:#0B3D2E}
.ac-card p,.hv-card p,.card--credit p{font-size:.78rem;line-height:1.5;color:#5D6B60;margin:0}
.ac-benefits{margin:8px 0 0;padding:0 0 0 16px}
.ac-benefits li{font-size:.76rem;line-height:1.5;color:#4A5A50;margin:0 0 3px}
.splash__inner{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.as-hero__copy{font-size:.8rem;line-height:1.5;color:#4A5A50}

/* ==========================================================================
   THE DOORS — final authority.

   brand.css carries three earlier redesign passes for `.arena`, each overriding
   the last. Rather than edit history and hope, the door is defined once here,
   at the end of the file, and wins by order.

   Shape: a fixed 96px photograph, an icon straddling the seam, then the words
   in normal flow. No absolutely positioned text, no ghost numeral, nothing
   that can drift over a picture.
   ========================================================================== */

.arena{
  position:relative;display:flex;flex-direction:column;gap:0;
  padding:0;overflow:hidden;border-radius:16px;
  background:#fff;border:1px solid #E1E6DE;
  box-shadow:0 1px 2px rgba(11,61,46,.05);
  transition:transform .15s ease, box-shadow .18s ease, border-color .15s ease
}
.arena:hover{transform:translateY(-1px);border-color:#CDD8CF;box-shadow:0 10px 24px -16px rgba(11,61,46,.5)}
.arena:active{transform:translateY(0)}

.arena__ph{
  display:block;position:relative;flex:0 0 96px;width:100%;
  height:96px;min-height:96px;max-height:96px;
  margin:0;overflow:hidden;background-color:#0B3D2E;
  background-size:cover;background-position:center 45%
}
.arena__ph::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,61,46,.02) 45%,rgba(11,61,46,.32))
}

.arena__ico{
  position:relative;z-index:2;flex:none;margin:-20px 14px 8px;
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:#fff;border:1px solid #E1E6DE;color:#0B3D2E;
  box-shadow:0 3px 10px rgba(11,61,46,.12)
}
.arena__ico svg{width:21px;height:21px}

.arena h3{padding:0 14px;margin:0;font-family:var(--serif,Georgia,serif);font-size:1.02rem;line-height:1.24;color:#0B3D2E}
.arena p{padding:0 14px;margin:3px 0 0;font-size:.79rem;line-height:1.48;color:#5C6B62}
.arena__go{padding:7px 14px 14px;margin-top:auto;font-size:.76rem;font-weight:700;color:#2F6B4F}

.arena__n{
  position:absolute;top:10px;right:10px;z-index:2;
  font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 7px;border-radius:6px;color:#FBF8F1;background:rgba(8,42,32,.58);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)
}

.arena--accent{background:linear-gradient(150deg,#0F3E30,#0B3227);border-color:#0B3227}
.arena--accent .arena__ico{background:#14453A;border-color:rgba(255,255,255,.18);color:#E4C55B}
.arena--accent h3{color:#FBF8F1}
.arena--accent p{color:rgba(247,243,232,.74)}
.arena--accent .arena__go{color:#E4C55B}
.arena--accent .arena__n{background:rgba(251,248,241,.18);color:#FBF8F1}

@media (max-width:360px){
  .arena__ph{flex-basis:84px;height:84px;min-height:84px;max-height:84px}
  .arena p{font-size:.76rem}
}

/* a picture that fails to load leaves a calm panel, never a broken glyph */
.ln-item__pic,.sh-card__media,.ls-launch__media,.arena__ph{background-color:#E7EBE4}
img.img-missing{opacity:0}


/* ---------------------------------------------------- moving a book between devices */
.xfer{margin-top:14px;border:1px solid var(--line);background:#fff}
.xfer h2{font-family:var(--serif);font-size:1.02rem;margin:0 0 6px;color:var(--green)}
.xfer-sub{font-size:.8rem;line-height:1.55;color:var(--muted);margin:0 0 12px}
.xfer-actions{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.xfer-drop{font-size:.72rem;color:var(--muted);margin:0;font-style:italic}
.xfer.is-over{outline:2px dashed var(--gold);outline-offset:-6px;background:var(--gold-soft)}
.xfer-preview{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.xfer-lead{font-size:.82rem;color:var(--ink);margin:0 0 8px}
.xfer-list{margin:0 0 10px;padding-left:18px;font-size:.8rem;line-height:1.7;color:var(--muted)}
.xfer-list b{color:var(--green)}
.xfer-note{font-size:.74rem;line-height:1.55;color:var(--muted);margin:0 0 12px}
.xfer-bad{font-size:.82rem;color:#8A2B1E;background:#FBEDE9;border:1px solid #F0D3CB;border-radius:8px;padding:10px;margin:8px 0 0}
.xfer-toast{font-size:.78rem;color:var(--green);margin:10px 0 0}
@media (max-width:520px){.xfer-actions .btn{width:100%}}


/* ------------------------------------------- forms, spreadsheets and paper */
.docs{margin-top:14px;border:1px solid var(--line);background:#fff}
.docs h2{font-family:var(--serif);font-size:1.02rem;margin:0 0 6px;color:var(--green)}
.doc-sub{font-size:.8rem;line-height:1.55;color:var(--muted);margin:0 0 12px}
.doc-actions{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
.doc-preview{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.doc-lead{font-size:.84rem;color:var(--ink);margin:0 0 10px}
.doc-bad{font-size:.84rem;color:#8A2B1E;background:#FBEDE9;border:1px solid #F0D3CB;border-radius:8px;padding:10px;margin:0 0 10px}
.doc-note{font-size:.74rem;line-height:1.55;color:var(--muted);margin:10px 0 0}
.doc-more{font-size:.72rem;color:var(--muted);margin:6px 0 0;font-style:italic}
.doc-table{overflow-x:auto;border:1px solid var(--line);border-radius:8px}
.doc-table table{border-collapse:collapse;width:100%;font-size:.74rem}
.doc-table th,.doc-table td{padding:6px 8px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap;color:var(--ink)}
.doc-table th{background:#F6F4EC;font-weight:600;color:var(--green)}
.doc-problems{margin:10px 0 0;padding-left:18px;font-size:.74rem;color:#8A2B1E;line-height:1.6}
.doc-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 0}
.doc-field{display:flex;flex-direction:column;gap:3px;font-size:.7rem;color:var(--muted)}
.doc-field input{font:inherit;font-size:.82rem;padding:7px 9px;border:1px solid var(--line);border-radius:8px;color:var(--ink);background:#fff}
.doc-toast{font-size:.78rem;color:var(--green);margin:10px 0 0}
@media (max-width:520px){.doc-fields{grid-template-columns:1fr}.doc-actions .btn{width:100%}}


/* -------------------------------------------------- backup and sealing */
.xfer-seal{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.xfer-pass{margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:10px;background:#FBFAF5}
.xfer-label{display:flex;flex-direction:column;gap:4px;font-size:.72rem;color:var(--muted);margin:0 0 10px}
.xfer-label input{font:inherit;font-size:.84rem;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}

/* ------------------------------------------------- plain-language failures */
.shield{position:fixed;left:0;right:0;bottom:0;z-index:9999;display:flex;justify-content:center;padding:12px;
  background:linear-gradient(to top,rgba(20,35,28,.16),rgba(20,35,28,0))}
.shield__card{width:100%;max-width:520px;background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 40px -24px rgba(20,35,28,.5);padding:16px 16px 14px}
.shield__title{font-family:var(--serif);font-size:1rem;color:var(--green);margin:0 0 6px}
.shield__what{font-size:.82rem;line-height:1.55;color:var(--ink);margin:0 0 6px}
.shield__fix{font-size:.8rem;line-height:1.55;color:var(--muted);margin:0 0 10px}
.shield__more{margin:0 0 10px}
.shield__more summary{font-size:.74rem;color:var(--muted);cursor:pointer}
.shield__more code{display:block;margin-top:6px;font-size:.7rem;line-height:1.5;color:#5D6B60;
  background:#F6F4EC;border-radius:6px;padding:8px;word-break:break-word}
.shield__acts{display:flex;gap:8px;flex-wrap:wrap}

/* ------------------------------------------------- the ground under a note
   When a photograph is present it covers this. When it is not, the card still
   breathes: a slow drift of colour that belongs to the subject, so a missing
   picture reads as weather, not as a broken file. */
.shot__ground{
  position:absolute;inset:-14%;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,#0F3A2C,#0B3D2E 50%,#07231A);
  animation:gDrift 52s ease-in-out infinite alternate;
  will-change:transform;
}
.shot__ground::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(60% 55% at 30% 25%,rgba(255,255,255,.14),transparent 70%);
  animation:gSheen 40s ease-in-out infinite alternate;
}
.shot__img,.shot__sheen,.shot__grain{z-index:1}

.shot__ground[data-mood="Regions"]{background:
  radial-gradient(85% 65% at 22% 18%,rgba(150,190,160,.42),transparent 62%),
  radial-gradient(70% 55% at 78% 32%,rgba(226,220,180,.30),transparent 66%),
  linear-gradient(180deg,#123C2E,#0E3327 48%,#07231A)}
.shot__ground[data-mood="Water"]{background:
  radial-gradient(80% 60% at 70% 20%,rgba(140,175,185,.40),transparent 62%),
  linear-gradient(180deg,#123A3A,#0E2E30 55%,#07201F)}
.shot__ground[data-mood="Land"]{background:
  radial-gradient(80% 60% at 30% 22%,rgba(214,182,120,.42),transparent 64%),
  linear-gradient(180deg,#1B3A2A,#123024 55%,#08211A)}
.shot__ground[data-mood="Pests"]{background:
  radial-gradient(75% 60% at 72% 26%,rgba(168,186,120,.36),transparent 62%),
  linear-gradient(180deg,#14351F,#0E2A1C 55%,#061A12)}
.shot__ground[data-mood="Storage"]{background:
  radial-gradient(80% 60% at 40% 24%,rgba(212,170,96,.40),transparent 64%),
  linear-gradient(180deg,#2A2A16,#1E2413 55%,#101508)}
.shot__ground[data-mood="Soil"]{background:
  radial-gradient(80% 60% at 60% 22%,rgba(150,112,78,.42),transparent 64%),
  linear-gradient(180deg,#2A2016,#20180F 55%,#120D08)}
.shot__ground[data-mood="Seed"]{background:
  radial-gradient(75% 60% at 35% 26%,rgba(196,178,110,.38),transparent 62%),
  linear-gradient(180deg,#23301A,#1A2413 55%,#0C130A)}
.shot__ground[data-mood="Rotation"]{background:
  radial-gradient(80% 60% at 65% 24%,rgba(160,196,140,.40),transparent 64%),
  linear-gradient(180deg,#123A26,#0E2C1E 55%,#06180F)}
.shot__ground[data-mood="Records"]{background:
  radial-gradient(80% 60% at 30% 26%,rgba(226,214,180,.34),transparent 64%),
  linear-gradient(180deg,#1E2E24,#17241C 55%,#0A120D)}
.shot__ground[data-mood="Fertiliser"]{background:
  radial-gradient(80% 60% at 60% 22%,rgba(150,186,168,.38),transparent 64%),
  linear-gradient(180deg,#14322A,#0F2A22 55%,#071710)}

@keyframes gDrift{
  from{transform:scale(1.03) translate3d(-1.4%,-1%,0)}
  to{transform:scale(1.11) translate3d(1.4%,1%,0)}
}
@keyframes gSheen{
  from{opacity:.35;transform:translate3d(-3%,-2%,0) scale(1)}
  to{opacity:.7;transform:translate3d(4%,3%,0) scale(1.08)}
}
@media (prefers-reduced-motion:reduce){
  .shot__ground,.shot__ground::after{animation:none}
}

/* ------------------------------------------------------------ the new name
   "CS Agritech @26" is longer than the old wordmark was. The header keeps the whole
   name rather than clipping it, by giving the word a little less size and
   dropping the desk line on narrow phones. */
.top .brand__name{font-size:.95rem;letter-spacing:-.015em}
@media (max-width:430px){
  .top .brand__name{font-size:.82rem}
  .top .brand__tag{display:none}
}
@media (max-width:359px){
  .top .brand__name{font-size:.75rem}
}
.splash__name{font-size:2.1rem}
@media (max-width:430px){.splash__name{font-size:1.7rem}}

/* ------------------------------------------------------- sunlight mode */
.sun-card .sun-sub{margin:0 0 12px;font-size:.86rem;line-height:1.55;color:#5D6B60}
.sun-switch{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.sun-switch input{width:22px;height:22px;margin-top:2px;accent-color:#0B3D2E;flex:none}
.sun-switch span{display:flex;flex-direction:column;gap:2px}
.sun-switch b{font-size:.95rem}
.sun-switch em{font-style:normal;font-size:.78rem;color:#5D6B60}

/* the mode itself: ink dark, paper solid, outlines honest */
html.sun body{font-weight:500}
html.sun .card,html.sun .ls-card,html.sun .shot,html.sun .ar-photo{background:#FFFFFF !important;border-color:#111 !important;box-shadow:none !important}
html.sun .muted,html.sun .lead,html.sun .sun-sub,html.sun .sun-switch em{color:#1A1A1A !important}
html.sun .btn,html.sun button{border-width:2px}
html.sun .nav a,html.sun .nav button{font-weight:700}
html.sun .brand__name em{color:#6B4A00}
html.sun .sat-verdictbar{filter:saturate(.85)}
html.sun *{text-shadow:none !important}
@media (prefers-contrast: more){
  body{font-weight:500}
  .card,.ls-card{border-color:#111;box-shadow:none}
  .muted,.lead{color:#1A1A1A}
}