/* CS AgriHub — 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
}
.welcome__card .langpick__row{
  display:flex;gap:6px;overflow-x:auto;padding-bottom:3px;
  scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch
}
.welcome__card .langpick__row::-webkit-scrollbar{display:none}
.welcome__card .langchip{
  flex:none;border:1px solid #E1DAC6;background:#fff;color:#3B4A40;border-radius:99px;
  padding:6px 11px;font:inherit;font-size:.71rem;font-weight:600;line-height:1.2;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s
}
.welcome__card .langchip:hover{border-color:#C9D8C6}
.welcome__card .langchip[aria-pressed="true"]{background:#0B3D2E;border-color:#0B3D2E;color:#F7F3E8}

.welcome__head{
  margin:2px 0 9px;font-family:var(--serif,Georgia,serif);
  font-size:clamp(1.44rem,6.4vw,1.82rem);line-height:1.14;letter-spacing:-.022em;color:#0B3D2E;
  text-wrap:balance
}
.welcome__sub{
  margin:0;font-size:.87rem;line-height:1.55;color:#5D6B60;max-width:38ch
}

.welcome__card #whoBox{margin:15px 0 4px}
.welcome__card .who__ask{font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:#9AA69B;font-weight:700;margin-bottom:7px}
.welcome__card .who{display:flex;flex-wrap:wrap;gap:6px}
.welcome__card .who__b{
  border:1px solid #E1DAC6;background:#fff;color:#3B4A40;border-radius:99px;padding:7px 12px;
  font:inherit;font-size:.75rem;font-weight:600;cursor:pointer
}
.welcome__card .who__b.is-on{background:#0B3D2E;border-color:#0B3D2E;color:#F7F3E8}

.welcome__list{
  list-style:none;margin:15px 0 16px;padding:12px 0 0;border-top:1px solid #E7E0CE;
  display:flex;flex-direction:column;gap:8px
}
.welcome__list li{
  position:relative;padding-left:17px;font-size:.82rem;line-height:1.45;color:#3B4A40
}
.welcome__list li:before{
  content:"";position:absolute;left:0;top:.55em;width:9px;height:2px;border-radius:2px;background:#C99A2C
}
.welcome__list li b{color:#0B3D2E}

.welcome__start{
  display:block;width:100%;padding:15px 16px;border:0;border-radius:14px;cursor:pointer;
  background:linear-gradient(180deg,#12503B,#0B3D2E);color:#F7F3E8;
  font:inherit;font-size:1rem;font-weight:700;letter-spacing:.01em;
  box-shadow:0 12px 26px -16px rgba(11,61,46,.85),inset 0 1px 0 rgba(255,255,255,.10);
  transition:transform .12s ease,box-shadow .12s ease
}
.welcome__start:active{transform:translateY(1px);box-shadow:0 6px 14px -12px rgba(11,61,46,.8)}
.welcome__free{
  margin:9px 0 0;text-align:center;font-size:.65rem;line-height:1.45;color:#93A095
}

@media (max-width:340px){
  .welcome__band{padding:15px}
  .welcome__body{padding:15px}
  .welcome__seal{display:none}
}

/* specificity pass: the card's base rules set centred text and a small h2 */
.welcome__card .welcome__band{text-align:left}
.welcome__card .welcome__body{text-align:left}
.welcome__card .welcome__head{
  font-size:clamp(1.5rem,6.6vw,1.9rem);line-height:1.12;letter-spacing:-.024em;max-width:20ch;margin:2px 0 9px
}
.welcome__card .welcome__sub{font-size:.88rem;line-height:1.55;max-width:40ch}
.welcome__card .langpick__row{flex-wrap:nowrap}
.welcome__card .welcome__list li{font-size:.83rem;line-height:1.45}
.welcome__card .welcome__free{text-align:center}
.welcome__card .welcome__seal{line-height:1.3}

.welcome__card .welcome__sub{text-align:left}
.welcome__card .who{justify-content:flex-start;text-align:left}
.welcome__card .who__ask{text-align:left}
.welcome__card .welcome__head{max-width:24ch;font-size:clamp(1.46rem,6.2vw,1.8rem)}
.welcome__card .langpick__row{
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 22px),transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 22px),transparent 100%)
}

/* short phones: the Start button has to be on the card, not below the fold */
@media (max-width:360px){
  .welcome__card .welcome__band{padding:14px}
  .welcome__card .welcome__body{padding:14px}
  .welcome__card .welcome__head{font-size:1.34rem;line-height:1.13;margin-bottom:8px}
  .welcome__card .welcome__sub{font-size:.82rem;line-height:1.45}
  .welcome__card .who__b{font-size:.7rem;padding:6px 10px}
  .welcome__card .welcome__list{gap:6px;margin:12px 0;padding-top:10px}
  .welcome__card .welcome__list li{font-size:.78rem}
  .welcome__card .welcome__start{padding:13px}
  .welcome__card .welcome__free{font-size:.6rem}
  .welcome__card .langpick{margin-bottom:12px}
}

@media (max-width:360px){
  /* on a very short phone, five roles in one scrolling line beat two rows */
  .welcome__card .who{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
  .welcome__card .who::-webkit-scrollbar{display:none}
  .welcome__card .who__b{flex:none;padding:7px 11px;font-size:.72rem}
}
@media (max-width:360px){
  .welcome__card .who{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 18px),transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 18px),transparent 100%)}
}

/* ---------- one wordmark, wherever it appears ---------- */
.top .brand__text em{
  background:none;padding:0;border-radius:0;font-size:inherit;font-weight:inherit;
  letter-spacing:inherit;color:inherit
}
.top .brand__name{
  font-family:var(--serif);font-weight:600;font-size:1.05rem;letter-spacing:.005em;color:#0B3D2E
}
.top .brand__name em{font-style:italic;color:#B8892A}
.top .brand__tag{
  font-style:normal;font-size:.49rem;letter-spacing:.19em;text-transform:uppercase;
  color:#93A095;margin-top:2px;white-space:nowrap
}
@media (max-width:399px){.top .brand__tag{display:none}}
.top .brand__text{min-width:0}

.splash__name{font-family:var(--serif);font-weight:600;letter-spacing:.01em}
.splash__name em{font-style:italic;color:#C99A2C}

/* ---------- header lockup: name, then tagline beneath ---------- */
.top .brand__text{display:flex;flex-direction:column;align-items:flex-start;gap:0;min-width:0}
.top .brand__tag{
  display:block;font-size:.5rem;line-height:1.1;letter-spacing:.2em;color:#98A39A;
  margin-top:3px;white-space:nowrap
}
.top .ver{font-size:.55rem;color:#B6BFB7;letter-spacing:.04em;margin-left:2px;align-self:flex-start;margin-top:4px}

/* ---------- the five arenas, tidied ---------- */
.front__intro{font-size:.97rem;line-height:1.58;max-width:34ch;color:#5D6B60}

.arena{
  position:relative;display:flex;flex-direction:column;gap:7px;min-height:188px;
  padding:15px 14px 13px;border-radius:18px;border:1px solid #E6DFCC;background:#fff;
  text-align:left;box-shadow:0 1px 2px rgba(11,61,46,.04);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease
}
.arena:hover{transform:translateY(-2px);border-color:#D9D1B9;box-shadow:0 16px 30px -26px rgba(11,61,46,.6)}
.arena__n{
  position:absolute;top:13px;right:14px;font-family:var(--serif,Georgia,serif);font-size:.6rem;
  letter-spacing:.12em;color:#C3CBBF
}
.arena__ico{
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:none;
  background:#EDF3EA;color:#2C7A5B;box-shadow:inset 0 0 0 1px rgba(44,122,91,.06)
}
.arena__ico svg{width:22px;height:22px}
.arena h3{margin:6px 0 0;font-family:var(--serif,Georgia,serif);font-size:1.07rem;line-height:1.2;color:#0B3D2E}
.arena p{margin:0;font-size:.79rem;line-height:1.45;color:#5D6B60;flex:1}
.arena__go{margin-top:6px;font-size:.74rem;font-weight:700;color:#0B3D2E;letter-spacing:.005em}

.arenas .arena:nth-child(2) .arena__ico{background:#FBF3E1;color:#A87B1E}
.arenas .arena:nth-child(4) .arena__ico{background:#EAF1F5;color:#2B5F7A}
.arenas .arena:nth-child(5) .arena__ico{background:#F8EEE6;color:#A45A32}
.arenas .arena--accent .arena__ico{background:rgba(255,255,255,.09);color:#E4C55B;box-shadow:none}
.arena--accent{min-height:0}
@media (max-width:399px){.top .brand__tag{display:none}}

/* the tagline is an <em>: beat the generic brand em rule on size */
.top .brand__text em.brand__tag{
  font-size:.5rem !important;font-style:normal;font-weight:600;line-height:1.1;
  letter-spacing:.2em;color:#98A39A;margin-top:3px;display:block
}
.top .ver{display:none}
@media (max-width:399px){.top .brand__text em.brand__tag{display:none}}

/* the accent arena keeps its dark panel */
.arena.arena--accent{
  background:
    radial-gradient(130% 150% at 85% -20%,rgba(228,197,91,.18),rgba(228,197,91,0) 55%),
    linear-gradient(158deg,#12503B 0%,#0C3A2D 58%,#092E24 100%);
  border-color:#0A3126;color:#F7F3E8
}
.arena.arena--accent h3{color:#FBF8F1}
.arena.arena--accent p{color:rgba(247,243,232,.78)}
.arena.arena--accent .arena__n{color:rgba(247,243,232,.35)}
.arena.arena--accent .arena__go{color:#E4C55B}

/* five quick actions: show that the row continues */
.quick{position:relative}
.quick:after{
  content:"";position:absolute;top:0;right:-1px;bottom:0;width:26px;pointer-events:none;
  background:linear-gradient(90deg,rgba(251,248,241,0),var(--cream,#FBF8F1))
}
.quick__b{padding:10px 12px;font-size:.72rem;gap:5px}
.quick__b svg{width:16px;height:16px}

/* ---------- the harvest ---------- */
.hv-teaser{
  display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;
  margin:2px 0 16px;padding:13px 15px;border-radius:16px;cursor:pointer;
  border:1px solid #E1D8BE;background:linear-gradient(180deg,#FCF8EB,#F6F0DC)
}
.hv-teaser__k{font-size:.55rem;letter-spacing:.15em;text-transform:uppercase;color:#A08A4E;font-weight:700}
.hv-teaser__b{font-family:var(--serif);font-size:1.05rem;color:#0B3D2E}
.hv-teaser__b em{font-style:normal;color:#B8892A}
.hv-teaser__n{font-size:.72rem;color:#6E7B70}

.hv-card{padding:16px}
.hv-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:14px}
.hv-k{display:block;font-size:.55rem;letter-spacing:.13em;text-transform:uppercase;color:#9AA69B;font-weight:700}
.hv-year{font-family:var(--serif);font-size:1.9rem;line-height:1;color:#0B3D2E}
.hv-total{text-align:right}
.hv-total b{font-family:var(--serif);font-size:1.1rem;color:#0B3D2E}
.hv-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.hv-row__top{display:flex;justify-content:space-between;align-items:baseline;font-size:.85rem;color:#3B4A40}
.hv-row__top b{color:#0B3D2E}
.hv-row__t{font-variant-numeric:tabular-nums;color:#5D6B60}
.hv-bar{height:8px;border-radius:99px;background:#F0EBDC;margin:4px 0 3px;overflow:hidden}
.hv-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#2C7A5B,#3F9A6E)}
.hv-row__bot{display:flex;justify-content:space-between;font-size:.66rem;color:#93A095}
.hv-change{font-weight:700}
.hv-change.is-up{color:#1F5C3F}
.hv-change.is-down{color:#8A3A24}
.hv-src{margin:14px 0 0;font-size:.63rem;color:#93A095}
.hv-note{margin:8px 0 0;font-size:.7rem;line-height:1.5;color:#6E7B70}
.hv-empty{margin:0;font-size:.82rem;color:#8A968C;line-height:1.5}

/* ---------- account ---------- */
.ac-card{padding:16px}
.ac-lead{margin:0 0 12px;font-size:.86rem;line-height:1.5;color:#3B4A40}
.ac-lead b{color:#0B3D2E}
.ac-field{display:flex;flex-direction:column;gap:4px;margin-bottom:9px;font-size:.6rem;letter-spacing:.07em;text-transform:uppercase;color:#8A968C;font-weight:700}
.ac-field input{padding:11px 12px;border-radius:11px;border:1px solid var(--line);background:#FDFBF5;font:inherit;font-size:.95rem;color:var(--ink);letter-spacing:0;text-transform:none}
.ac-field input:focus{outline:2px solid rgba(44,122,91,.22);border-color:#9CBFAC}
.ac-row{display:flex;gap:8px;margin-top:8px}
.ac-row .btn{flex:1}
.ac-who{display:flex;flex-direction:column;gap:2px;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid #EFEBDD}
.ac-k{font-size:.55rem;letter-spacing:.13em;text-transform:uppercase;color:#9AA69B;font-weight:700}
.ac-who b{font-family:var(--serif);font-size:1.2rem;color:#0B3D2E;letter-spacing:.02em}
.ac-exp{font-size:.7rem;color:#6E7B70}
.ac-status{margin:10px 0 0;font-size:.76rem;line-height:1.45;color:#3B4A40}
.ac-status.is-ok{color:#1F5C3F}
.ac-status.is-warn{color:#8A5A24}
.ac-note{margin:8px 0 0;font-size:.68rem;line-height:1.5;color:#93A095}

/* ---------- account: two panes, one card ---------- */
.ac-seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:#EFEBDD;border-radius:12px;padding:4px;margin:0 0 14px}
.ac-seg__b{border:0;background:transparent;border-radius:9px;padding:9px 6px;font:inherit;font-size:.8rem;font-weight:700;color:var(--muted);cursor:pointer}
.ac-seg__b.is-on{background:#fff;color:var(--green);box-shadow:0 1px 3px rgba(20,35,28,.12)}
.ac-pane[hidden]{display:none}
.ac-field{position:relative}
.ac-opt{position:absolute;top:0;right:0;font-size:.55rem;letter-spacing:.08em;color:#B0B9AF;font-weight:600}
.ac-pw{position:relative;display:flex;align-items:center}
.ac-pw input{flex:1;padding-right:64px}
.ac-eye{position:absolute;right:6px;border:0;background:transparent;color:#2C7A5B;font:inherit;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:8px 8px;cursor:pointer;border-radius:8px}
.ac-eye:active{background:#EAF1EC}
.ac-err{display:block;margin:0;font-size:.68rem;line-height:1.35;letter-spacing:0;text-transform:none;color:#A33A25;font-weight:600}
.ac-err:empty{display:none}
.ac-field input.is-bad{border-color:#D9A79B;background:#FDF6F4}
.ac-field input.is-bad:focus{outline:2px solid rgba(163,58,37,.18);border-color:#C9877A}
.ac-go{margin-top:6px}
.ac-go[aria-busy="true"]{opacity:.72;cursor:progress}
.ac-fine{margin:8px 0 0;font-size:.68rem;line-height:1.5;color:#93A095}
.ac-fine a{color:#2C7A5B}
.ac-benefits h2{margin-top:0}
.ac-benefits ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.ac-benefits li{padding-left:12px;border-left:2px solid #E4D9BE}
.ac-benefits b{display:block;font-size:.86rem;color:#0B3D2E}
.ac-benefits span{font-size:.77rem;color:#5D6B60;line-height:1.45}

.guest-banner{
  display:flex;flex-direction:column;gap:6px;margin:0 0 14px;padding:13px 14px;border-radius:15px;
  background:#FCF3E0;border:1px solid #EBD9B2
}
.guest-banner b{font-size:.86rem;color:#7A5423}
.guest-banner span{font-size:.77rem;color:#7A6440;line-height:1.45}
.gb-acts{display:flex;gap:8px;margin-top:4px}
.gb-acts .btn{flex:1}

/* ---------- lender statement ---------- */
.st{background:#fff;border:1px solid #E3DCC9;border-radius:14px;padding:18px;color:#15231C}
.st__head{display:flex;justify-content:space-between;gap:12px;border-bottom:2px solid #0B3D2E;padding-bottom:10px;margin-bottom:12px}
.st__head b{display:block;font-family:var(--serif);font-size:1.1rem;color:#0B3D2E}
.st__head span{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:#8A968C}
.st__who{text-align:right;font-size:.72rem;color:#3B4A40}
.st__who small{display:block;color:#8A968C;font-size:.6rem}
.st__period{font-size:.74rem;color:#3B4A40;margin:0 0 12px}
.st__figs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.st__figs div{background:#F4F1E6;border-radius:10px;padding:9px}
.st__figs span{display:block;font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;color:#8A968C}
.st__figs b{font-family:var(--serif);font-size:1rem;color:#0B3D2E}
.st h3{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:#8A968C;margin:14px 0 6px}
.st__t{width:100%;border-collapse:collapse;font-size:.76rem}
.st__t th{text-align:left;font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:#8A968C;border-bottom:1px solid #E3DCC9;padding:4px 2px}
.st__t td{padding:5px 2px;border-bottom:1px solid #F0EBDF}
.st__t .n{text-align:right;font-variant-numeric:tabular-nums}
.st__note{font-size:.66rem;color:#6E7B70;line-height:1.5;margin:12px 0 0}
.st__sign{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}
.st__sign span{font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;color:#8A968C}
.st__sign i{display:block;border-bottom:1px solid #9AA69B;height:22px}
.st-actions{margin:0 0 10px}
@media print{
  body:not(.print-doc) .top,body:not(.print-doc) .tabs,body:not(.print-doc) .st-actions,body:not(.print-doc) .page-row{display:none!important}
  body{background:#fff}
  main{padding:0;max-width:none}
  .st{border:0;padding:0}
  .view[hidden]{display:none!important}
}

/* ---------- officer mode ---------- */
.of-camp{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.of-camp label,.of-form label{display:flex;flex-direction:column;gap:4px;font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:#8A968C;font-weight:700}
.of-camp input,.of-form input,.of-form select,.of-form textarea{padding:9px 10px;border:1px solid #DDD5C2;border-radius:10px;font:inherit;font-size:.82rem;color:#15231C;background:#fff}
.of-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:6px}
.of-kpis div{background:#fff;border:1px solid #E3DCC9;border-radius:12px;padding:10px;text-align:center}
.of-kpis b{display:block;font-family:var(--serif);font-size:1.3rem;color:#0B3D2E}
.of-kpis span{font-size:.54rem;letter-spacing:.08em;text-transform:uppercase;color:#8A968C}
.of-h{font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:#8A968C;margin:18px 0 7px}
.of-form{background:#fff;border:1px solid #E3DCC9;border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:8px}
.of-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.of-status{font-size:.72rem;color:#2C7A5B;margin:2px 0 0}
.of-list{border:1px solid #E3DCC9;border-radius:12px;background:#fff;overflow:hidden}
.of-item{display:flex;justify-content:space-between;align-items:center;padding:9px 11px;border-bottom:1px solid #F0EBDF}
.of-item:last-child{border-bottom:0}
.of-item b{display:block;font-size:.84rem;color:#15231C}
.of-item span{font-size:.64rem;color:#8A968C}
.of-x{border:0;background:none;font-size:1.1rem;color:#B3BDB4;padding:4px 6px;cursor:pointer}
.of-due{display:flex;flex-direction:column;gap:6px}
.of-due div{background:#FBF3E2;border:1px solid #EBD9AE;border-radius:10px;padding:8px 10px}
.of-due b{font-size:.8rem}.of-due span{display:block;font-size:.62rem;color:#8A6A2E}
.of-note{font-size:.72rem;color:#6E7B70;margin:0 0 8px;line-height:1.5}
@media print{
  body.printing-officer .top,body.printing-officer .tabs,body.printing-officer .page-row,body.printing-officer #ofBody>*:not(#ofReturn){display:none!important}
  body.printing-officer{background:#fff}
  body.printing-officer main{padding:0;max-width:none}
}
#view-officer{padding-bottom:96px}

/* ---------- student exercises ---------- */
.sd-score{display:flex;align-items:center;gap:8px;margin:0 0 12px}
.sd-score b{font-family:var(--serif);font-size:1.6rem;color:#0B3D2E}
.sd-score span{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:#8A968C;flex:1}
.sd-ex{position:relative;background:#fff;border:1px solid #E3DCC9;border-radius:14px;padding:14px 14px 12px;margin-bottom:10px}
.sd-ex h3{font-family:var(--serif);font-size:1rem;color:#0B3D2E;margin:0 0 4px}
.sd-ex p{font-size:.82rem;line-height:1.5;color:#3B4A40;margin:0 0 10px}
.sd-ex__n{position:absolute;top:10px;right:12px;font-family:var(--serif);font-size:.8rem;color:#C2CABF}
.sd-answer{display:flex;gap:6px;align-items:center}
.sd-answer input{flex:1;min-width:0;padding:9px 10px;border:1px solid #DDD5C2;border-radius:10px;font:inherit;font-size:.9rem}
.sd-answer span{font-size:.7rem;color:#8A968C}
.sd-feedback{margin-top:10px;font-size:.78rem;line-height:1.5;color:#3B4A40;border-top:1px dashed #E3DCC9;padding-top:9px}
.sd-feedback b{color:#0B3D2E}
.sd-feedback ol{margin:6px 0 0 16px;padding:0}
.sd-feedback li{margin-bottom:3px}
.sd-ex.is-right{border-color:#BFDCC6;background:#F6FBF7}
.sd-ex.is-wrong{border-color:#E7C9A6;background:#FDF8F2}
.st__steps{margin:0 0 10px 16px;padding:0;font-size:.76rem;color:#3B4A40}
.st__steps li{margin-bottom:3px}
@media print{
  body.printing-student .top,body.printing-student .tabs,body.printing-student .page-row,body.printing-student #stBody{display:none!important}
  body.printing-student{background:#fff}
  body.printing-student main{padding:0;max-width:none}
  #sdSheet .st{border:0;padding:0}
}

/* ---------- group book ---------- */
.gp-setup{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.gp-setup label{display:flex;flex-direction:column;gap:4px;font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:#8A968C;font-weight:700}
.gp-setup input,.gp-form input,.gp-form select{padding:9px 10px;border:1px solid #DDD5C2;border-radius:10px;font:inherit;font-size:.82rem;background:#fff;color:#15231C}
.gp-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:6px}
.gp-kpis div{background:#fff;border:1px solid #E3DCC9;border-radius:12px;padding:10px;text-align:center}
.gp-kpis b{display:block;font-family:var(--serif);font-size:1.2rem;color:#0B3D2E}
.gp-kpis span{font-size:.53rem;letter-spacing:.08em;text-transform:uppercase;color:#8A968C}
.gp-form{background:#fff;border:1px solid #E3DCC9;border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:8px}
.gp-table{background:#fff;border:1px solid #E3DCC9;border-radius:12px;overflow:auto}
.gp-table table{width:100%;border-collapse:collapse;font-size:.78rem}
.gp-table th{text-align:left;font-size:.54rem;letter-spacing:.1em;text-transform:uppercase;color:#8A968C;padding:8px 10px;border-bottom:1px solid #E3DCC9}
.gp-table td{padding:8px 10px;border-bottom:1px solid #F0EBDF;color:#15231C}
.gp-table td small{display:block;font-size:.62rem;color:#8A968C}
.gp-table .n{text-align:right;font-variant-numeric:tabular-nums}
.gp-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.gp-import{cursor:pointer;display:inline-flex;align-items:center}
#view-group{padding-bottom:96px}
@media print{
  body.printing-group .top,body.printing-group .tabs,body.printing-group .page-row,body.printing-group #gpBody>*:not(#gpSheet){display:none!important}
  body.printing-group{background:#fff}
  body.printing-group main{padding:0;max-width:none}
}

/* ---------- privacy + consent ---------- */
.pv{background:#fff;border:1px solid #E3DCC9;border-radius:14px;padding:16px}
.pv h2{font-family:var(--serif);font-size:.98rem;color:#0B3D2E;margin:16px 0 5px}
.pv h2:first-child{margin-top:0}
.pv p{font-size:.8rem;line-height:1.6;color:#3B4A40;margin:0 0 8px}
.pv__note{background:#F4F1E6;border-radius:10px;padding:9px 11px;font-size:.74rem!important}
.pv__foot{font-size:.72rem!important;color:#6E7B70;border-top:1px solid #E3DCC9;padding-top:10px;margin-top:14px!important}
.ac-consent{display:flex;gap:8px;align-items:flex-start;font-size:.72rem;line-height:1.45;color:#3B4A40;margin:2px 0 8px}
.ac-consent input{margin-top:2px}
.ac-consent a{color:#2C7A5B;text-decoration:underline}
.ac-danger{color:#A4452F!important;border-color:#E3C3B9!important}

/* ---------- ask for help ---------- */
.help-card{display:flex;align-items:center;gap:11px;width:100%;text-align:left;margin:10px 0 4px;padding:12px 13px;
  background:linear-gradient(180deg,#FFFDF7,#FBF5E6);border:1px solid #EADFC2;border-radius:14px;font:inherit;color:inherit;cursor:pointer}
.help-card__ico{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:#0B3D2E;color:#E4C55B;font-family:var(--serif);font-size:1.05rem;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:.95rem;color:#0B3D2E}
.help-card__txt span{font-size:.71rem;line-height:1.35;color:#6E7B70}
.help-card__go{flex:none;font-size:.68rem;font-weight:700;color:#A87B1E;letter-spacing:.02em}
.hp-lead p{margin:0 0 12px;font-size:.86rem;line-height:1.55;color:#3B4A40}
.hp-form{background:#fff;border:1px solid #E3DCC9;border-radius:14px;padding:13px;display:flex;flex-direction:column;gap:9px}
.hp-form label{display:flex;flex-direction:column;gap:4px;font-size:.57rem;letter-spacing:.08em;text-transform:uppercase;color:#8A968C;font-weight:700}
.hp-form input,.hp-form select,.hp-form textarea{padding:10px;border:1px solid #DDD5C2;border-radius:10px;font:inherit;font-size:.84rem;background:#fff;color:#15231C}
.hp-send{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.hp-send .btn{width:100%;padding:10px 6px;font-size:.74rem}
.hp-hint{font-size:.7rem;color:#A4452F;margin:0}
.hp-agent{margin-top:2px}
.hp-list{display:flex;flex-direction:column;gap:7px}
.hp-item{display:flex;justify-content:space-between;align-items:center;gap:8px;background:#fff;border:1px solid #E3DCC9;border-radius:11px;padding:9px 11px}
.hp-item b{display:block;font-size:.8rem;color:#15231C}
.hp-item span{font-size:.62rem;color:#8A968C}
.hp-item em{font-style:normal;font-size:.62rem;color:#2C7A5B;white-space:nowrap}
.hp-item.is-late{border-color:#E7C9A6;background:#FDF8F2}
.hp-item.is-late em{color:#A4452F}
#view-help{padding-bottom:96px}

/* the region strip: label, value and action on a quiet card */
.rchip{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px 11px;width:100%;
  padding:12px 13px;border-radius:16px;border:1px solid #E3DCC9;border-left:4px solid #2C7A5B;background:#fff;
  text-align:left;font:inherit;color:inherit;cursor:pointer;box-shadow:0 1px 2px rgba(11,61,46,.05);margin:8px 0 0}
.rchip__pin{grid-row:1/3;width:15px;height:15px;color:#8A968C}
.rchip__pin svg{width:15px;height:15px}
.rchip__body{display:flex;flex-direction:column;gap:1px;min-width:0}
.rchip small{font-size:.53rem;letter-spacing:.14em;text-transform:uppercase;color:#8A968C}
.rchip b{font-family:var(--serif);font-size:1.02rem;color:#0B3D2E;line-height:1.2}
.rchip__go{grid-row:1/3;grid-column:3;background:#0B3D2E;color:#FBF8F1;border-radius:999px;padding:8px 11px;font-size:.64rem;font-weight:700;white-space:nowrap}
.hp-agentcard{display:flex;align-items:center;gap:11px;background:#0B3D2E;color:#FBF8F1;border-radius:14px;padding:12px 13px;margin:0 0 12px}
.hp-agentcard__ico{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;background:rgba(228,197,91,.16);color:#E4C55B;font-family:var(--serif);font-size:.85rem;font-weight:700}
.hp-agentcard b{display:block;font-family:var(--serif);font-size:.95rem}
.hp-agentcard small{font-size:.66rem;color:rgba(247,243,232,.7)}
.hp-call{margin-left:auto;flex:none;background:#E4C55B;color:#0B3D2E;border-radius:999px;padding:7px 13px;font-size:.7rem;font-weight:700;text-decoration:none}

/* ---------- dry spell ---------- */
.dry-bar{display:flex;align-items:center;gap:11px;width:100%;text-align:left;margin:0 0 10px;padding:11px 13px;
  background:#FBF6E9;border:1px solid #EADCBB;border-radius:13px;font:inherit;color:inherit;cursor:pointer}
.dry-bar__ico{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;background:#fff;font-size:.95rem}
.dry-bar__txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.dry-bar__txt b{font-family:var(--serif);font-size:.9rem;color:#0B3D2E}
.dry-bar__txt span{font-size:.68rem;color:#7A6A45}
.dry-bar__go{font-size:.66rem;font-weight:700;color:#A87B1E}
.dry-pick{display:grid;grid-template-columns:1.4fr 1fr;gap:8px;margin-bottom:6px}
.dry-pick label{display:flex;flex-direction:column;gap:3px;font-size:.55rem;letter-spacing:.09em;text-transform:uppercase;color:#8A968C;font-weight:700}
.dry-pick select{padding:9px;border:1px solid #DDD5C2;border-radius:10px;font:inherit;font-size:.8rem;background:#fff;color:#15231C}
.dry-note{font-size:.72rem;color:#6E7B70;margin:0 0 10px}
.dry-crop{background:#0B3D2E;color:#FBF8F1;border-radius:12px;padding:11px 12px;margin-bottom:10px}
.dry-crop b{display:block;font-family:var(--serif);font-size:.95rem;color:#E4C55B}
.dry-crop span{font-size:.75rem;line-height:1.5;color:rgba(247,243,232,.85)}
.dry-step{background:#fff;border:1px solid #E3DCC9;border-radius:12px;padding:12px;margin-bottom:9px}
.dry-step h3{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:#8A968C;margin:0 0 7px}
.dry-step ol{margin:0 0 0 16px;padding:0;font-size:.8rem;line-height:1.55;color:#24342A}
.dry-step li{margin-bottom:5px}
.dry-warn{background:#FDF8F2;border:1px solid #E7C9A6;border-radius:12px;padding:11px;font-size:.74rem;line-height:1.5;color:#5A3A24;margin:10px 0}
.dry-src{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.dry-src li{font-size:.74rem}
.dry-src a{color:#2C7A5B;font-weight:600;text-decoration:none}
.dry-src span{display:block;font-size:.66rem;color:#8A968C}
#view-dry{padding-bottom:96px}

/* ---------- sheets: templates and grid ---------- */
.sh-head{display:flex;align-items:baseline;gap:8px;margin:2px 0 8px}
.sh-head h2{font-family:var(--serif);font-size:1.1rem;color:#0B3D2E;margin:0}
.sh-head span{font-size:.62rem;color:#8A968C;letter-spacing:.06em;text-transform:uppercase}
.sh-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px}
.sh-card{display:flex;flex-direction:column;text-align:left;border:1px solid #E3DCC9;border-radius:12px;overflow:hidden;background:#fff;font:inherit;color:inherit;cursor:pointer;padding:0}
.sh-card__band{display:flex;flex-direction:column;gap:1px;padding:9px 10px;color:#fff}
.sh-card__band b{font-size:.74rem;line-height:1.2;font-weight:700}
.sh-card__band i{font-style:normal;font-size:.52rem;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.sh-card__body{display:flex;flex-direction:column;gap:4px;padding:9px 10px}
.sh-card__body span{font-size:.68rem;line-height:1.4;color:#5D6B60}
.sh-card__body em{font-style:normal;font-size:.56rem;letter-spacing:.06em;text-transform:uppercase;color:#A8B3A9}
.sh-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;border-left:4px solid #2C7A5B;background:#fff;border-radius:12px;padding:11px 12px;margin-bottom:10px}
.sh-bar>div:first-child{flex:1;min-width:150px}
.sh-bar b{display:block;font-family:var(--serif);font-size:.95rem;color:#0B3D2E}
.sh-bar span{font-size:.7rem;color:#6E7B70;line-height:1.4}
.sh-actions{display:flex;gap:5px;flex-wrap:wrap}
.sh-wrap{overflow:auto;border:1px solid #E3DCC9;border-radius:12px;background:#fff;-webkit-overflow-scrolling:touch}
.sh{border-collapse:collapse;font-size:.72rem;width:100%}
.sh th{position:sticky;top:0;background:#F7F3E8;text-align:left;font-size:.55rem;letter-spacing:.08em;text-transform:uppercase;color:#8A968C;padding:7px 6px;border-bottom:1px solid #E3DCC9;white-space:nowrap}
.sh td{border-bottom:1px solid #F0EBDF;padding:0;vertical-align:middle}
.sh input{border:0;background:transparent;font:inherit;font-size:.72rem;padding:7px 6px;width:100%;min-width:100%;color:#15231C}
.sh input:focus{outline:2px solid #BFDCC6;outline-offset:-2px;background:#FBFDF9}
.sh-n{width:26px;text-align:center;color:#A8B3A9;font-size:.6rem;padding:0 4px}
.sh-calc{padding:7px 6px;text-align:right;font-variant-numeric:tabular-nums;color:#0B3D2E;font-weight:600;white-space:nowrap}
.sh-x{border:0;background:none;color:#C2CABF;font-size:.9rem;padding:2px 6px;cursor:pointer}
.sh-total{text-align:right;font-weight:700;color:#0B3D2E;padding:7px 6px;border-top:2px solid #E3DCC9}
#view-sheet{padding-bottom:96px}
@media print{
  body.printing-sheet .top,body.printing-sheet .tabs,body.printing-sheet .page-row,body.printing-sheet #sheetBody{display:none!important}
  body.printing-sheet{background:#fff}
  body.printing-sheet main{padding:0;max-width:none}
}
.sh-gloss{background:#F7F3E8;border:1px solid #E7DFC9;border-radius:11px;padding:9px 11px;margin:0 0 9px}
.sh-gloss p{margin:0;font-size:.7rem;line-height:1.5;color:#4A5A4E}
.sh-gloss b{color:#0B3D2E;font-weight:700}
.sh-gloss b:after{content:" — ";font-weight:400;color:#8A968C}
.sh-tip{margin-top:5px!important;font-size:.68rem!important;color:#8A6A2E!important}

/* ---------- printing: one document, nothing else ---------- */
#printRoot{display:none}
body.print-doc > *{display:none!important}
body.print-doc #printRoot{display:block!important}
#printRoot .pd{padding:0;color:#15231C;font-size:11pt}
#printRoot .pd__head{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:2px solid #0B3D2E;padding-bottom:6px;margin-bottom:10px}
#printRoot .pd__title{font-family:var(--serif);font-size:15pt;color:#0B3D2E;margin:0}
#printRoot .pd__meta{font-size:8pt;color:#5D6B60;text-align:right;line-height:1.5}
#printRoot table{width:100%;border-collapse:collapse;font-size:8.5pt}
#printRoot th{text-align:left;font-size:7pt;letter-spacing:.06em;text-transform:uppercase;color:#5D6B60;border-bottom:1px solid #B9C2B9;padding:4px 3px}
#printRoot td{border-bottom:1px solid #E3DCC9;padding:4px 3px;vertical-align:top}
#printRoot .pd__foot{margin-top:12px;padding-top:6px;border-top:1px solid #E3DCC9;font-size:7.5pt;color:#5D6B60;display:flex;justify-content:space-between}
#printRoot .pd__sign{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:26px;font-size:7.5pt;color:#5D6B60}
#printRoot .pd__sign i{display:block;border-bottom:1px solid #9AA69B;height:20px;margin-bottom:3px}
@page{margin:14mm}

/* the document, and nothing but the document */
@media print{
  body.print-doc #app,body.print-doc #top,body.print-doc .top,body.print-doc .tabs,
  body.print-doc #welcome,body.print-doc #splash,body.print-doc #toast,body.print-doc .fab{display:none!important}
  body.print-doc #printRoot{display:block!important}
}

/* ---------- document editor ---------- */
.doc-bar{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;background:#fff;border:1px solid #E3DCC9;border-left:4px solid #C99A2C;border-radius:12px;padding:10px 12px;margin-bottom:10px}
.doc-bar>div:first-child{flex:1;min-width:150px}
.doc-bar b{display:block;font-family:var(--serif);font-size:.92rem;color:#0B3D2E}
.doc-bar span{font-size:.66rem;color:#6E7B70}
.doc-actions{display:flex;gap:6px}
.doc-sheet{background:#fff;border:1px solid #C9BFA6;border-radius:4px;padding:22px 18px;min-height:320px;
  box-shadow:0 2px 10px rgba(11,61,46,.07);outline:none;font-size:.82rem;color:#15231C;line-height:1.5}
.doc-sheet:focus{box-shadow:0 0 0 2px #BFDCC6, 0 2px 10px rgba(11,61,46,.07)}
.doc-sheet h1{font-family:var(--serif);font-size:1.1rem;color:#0B3D2E;margin:0 0 6px}
.doc-sheet table{width:100%;border-collapse:collapse;font-size:.72rem;margin-top:6px}
.doc-sheet th{text-align:left;font-size:.55rem;letter-spacing:.06em;text-transform:uppercase;color:#5D6B60;border-bottom:1px solid #B9C2B9;padding:5px 4px}
.doc-sheet td{border-bottom:1px solid #E3DCC9;padding:5px 4px;vertical-align:top}
.doc-foot{margin-top:10px;display:flex;justify-content:flex-end}
.doc-seal{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 12px;border:1px solid #E3DCC9;border-radius:10px;background:#FBF8F1}
.doc-seal span{font-size:.55rem;letter-spacing:.06em;text-transform:uppercase;color:#8A968C}
#view-doc{padding-bottom:96px}
.doc-page{background:#fff;border:1px solid #C9BFA6;border-radius:4px;padding:14px 16px 18px;box-shadow:0 2px 10px rgba(11,61,46,.07)}
.doc-mast{display:flex;justify-content:flex-end;border-bottom:2px solid #0B3D2E;padding-bottom:8px;margin-bottom:10px}
.doc-mast .doc-seal{border:0;background:none;padding:0;align-items:flex-end}
.doc-page .doc-sheet{border:0;box-shadow:none;padding:0;min-height:260px;border-radius:0}
.doc-page .doc-sheet:focus{box-shadow:none}
.doc-mast img{width:150px!important;height:auto!important;max-width:52%}
.doc-mast img{width:150px!important;height:auto!important}
.signoff{margin-top:16px;border-top:1px solid #E3DCC9;padding-top:9px;font-size:.72rem;color:#3B4A40}
.signoff p{margin:0 0 6px;line-height:1.45}
.signoff .small{font-size:.62rem;color:#6E7B70}
.sig{width:100%;border-collapse:collapse;margin-top:4px}
.sig td{padding:12px 4px 2px;font-size:.6rem;color:#6E7B70;border:0;white-space:nowrap}
.sig .line{border-bottom:1px solid #9AA69B;min-width:80px}
.sig .line.short{min-width:50px}

/* ---------- empty book: a start card, not a blank one ---------- */
.hero__empty ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.hero__empty li{position:relative;padding-left:26px;font-size:.78rem;line-height:1.45}
.hero__empty li::before{
  content:"✓";position:absolute;left:0;top:0;width:17px;height:17px;border-radius:50%;
  background:#0B3D2E;color:#E4C55B;font-size:.6rem;display:grid;place-items:center;font-weight:700
}
.hero__empty li b{display:block;font-family:var(--serif);font-size:.86rem;color:#0B3D2E;font-weight:600}
.hero__empty li b::before{content:none}

/* ---------- typographic polish: one rhythm across the app ---------- */
body{line-height:1.58;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.page{letter-spacing:-.022em;line-height:1.08}
.page__sub{font-size:.88rem;line-height:1.6;max-width:46ch}
.card{border-radius:16px}
.sect h2{font-family:var(--serif);letter-spacing:-.012em}
.btn{letter-spacing:.005em}
.foot{letter-spacing:.01em;font-size:.66rem}
.ac-consent input[type="checkbox"]{width:16px!important;height:16px!important;flex:none;margin:2px 0 0;accent-color:#0B3D2E}
.ac-consent{display:flex;gap:9px;align-items:flex-start;font-size:.72rem;line-height:1.5}
#acAgree{width:17px!important;height:17px!important;min-width:17px;flex:0 0 17px;margin:1px 0 0;accent-color:#2C7A5B}
.ac-consent{align-items:flex-start!important}
.ac-consent>span,.ac-consent>label{flex:1;min-width:0}

/* the consent tick was rendering as a tall oval on Samsung Internet */
.ac-consent input[type="checkbox"]{
  width:18px!important;height:18px!important;min-height:0!important;
  padding:0!important;border-radius:4px!important;
  -webkit-appearance:checkbox!important;appearance:auto!important;
  flex:0 0 18px;margin:1px 0 0
}