@charset "UTF-8";
/* ==========================================================================
   Furrow — theme layer
   Loads after vendor/bootstrap.min.css. Bootstrap supplies the reset, grid,
   navbar, dropdown, accordion, buttons and utilities; everything here is
   either a token bridge into its --bs-* API or a component it has no match
   for. Selector conventions and a known scoping caveat: see README.txt.

    1 Tokens            6 Header         11 Risk        15 Footer
    2 Bootstrap bridge  7 Hero           12 Fee model  15a Forms
    3 Base              8 Plot cards    12a About      15b Auth
   3a Icon font         9 Flow           13 Growers    15c Plot detail
    4 Helpers          10 Plots grid     14 FAQ        15d About
    5 Buttons & pills                                  15e Dashboard
                                                       15f Blog       
                                                       15g Docs, contact, 404
                                                       15h App pages
                                                        16 Motion
                                                        17 Responsive
                                                        19 Overlays
                                                        20 Text animation

   Section order matters: a component must be defined BEFORE 17, because
   media queries add no specificity and 17 would otherwise lose to a later
   unconditional rule.
   ========================================================================== */

/* 1 · Tokens ============================================================= */
:root {
  /* the photo wash from the team cards: a sprout tint at the top, clear through
     the middle, deep field green at the foot. Every large photo carries it. */
  --photo-wash: linear-gradient(
    180deg,
    rgba(71, 178, 107, 0.16) 0%,
    rgba(18, 161, 105, 0) 42%,
    rgb(16, 129, 83) 100%
  );
  --ink: #0e241b;
  --field: #16513a;
  --field-deep: #0f3a29;
  --field-abyss: #0a2a1d;
  --sprout: #47b26b;
  --sprout-lit: #5bc77e;
  --wheat: #d9b26b;
  --haze: #eaf2eb;
  --haze-deep: #dce9de;
  --line: #d3e1d6;
  --line-soft: #e6eee7;
  --paper: #fbfcfa;
  --canvas: #ffffff;
  --soil: #8a6f4e;
  --soil-haze: #f3ede4;
  --muted: #4d5c54;
  --muted-soft: #5e6b63;
  /* body copy that carries a rule or a promise: darker than --muted so it
     does not read as a caption */
  --ink-soft: #2f3f37;

  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --body: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  /* small uppercase data labels — body face, tracked out, not a monospace */
  --label: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  /* --hand: the grower's voice. Used twice, in one section only. */
  --hand: "Caveat", ui-rounded, cursive;

  --container: 1350px;
  --gutter: 24px;
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;
  --lift-1: 0 1px 2px rgba(14, 36, 27, 0.05);
  --lift-2: 0 12px 32px -12px rgba(14, 36, 27, 0.16);
  --lift-3: 0 28px 60px -28px rgba(14, 36, 27, 0.3);
  --lift-panel: 0 34px 70px -24px rgba(10, 42, 29, 0.34);

  --rail-h: 38px;
  --bar-h: 74px;
  --header-h: calc(var(--rail-h) + var(--bar-h));
  /* section-heading index column — the gutter offset derives from these */
  --mark-size: 72px;
  --index-gap: 20px;
  --head-gap: 40px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 2 · Bootstrap bridge =================================================== */
/* Feeds the tokens into Bootstrap's --bs-* API. Edit section 1, not this. */
:root {
  --bs-primary: var(--field);
  --bs-primary-rgb: 22, 81, 58;
  --bs-body-bg: var(--paper);
  --bs-body-color: var(--ink);
  --bs-body-font-family: var(--body);
  --bs-body-font-size: 16px;
  --bs-body-line-height: 1.62;
  --bs-emphasis-color: var(--ink);
  --bs-secondary-color: var(--muted);
  --bs-border-color: var(--line);
  --bs-border-radius: var(--r-md);
  --bs-link-color: var(--field);
  --bs-link-color-rgb: 22, 81, 58;
  --bs-link-hover-color: var(--field-deep);
  --bs-heading-color: var(--ink);
  --bs-focus-ring-color: rgba(22, 81, 58, 0.35);
}

/* Bootstrap stops the container at 1140px here, which leaves the app pages
   short of room between 1200 and 1400. */
@media (min-width: 1200px) {
  .container {
    max-width: 1200px;
  }
}
@media (min-width: 1400px) {
  .container {
    max-width: var(--container);
  }
}

/* 3 · Base =============================================================== */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar-h) + 20px);
}
h1,
h2,
h3,
h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.028em;
  margin: 0;
  color: var(--ink);
}
p {
  margin: 0;
  font-weight: 500;
}
a {
  color: inherit;
  text-decoration: none;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
svg {
  display: block;
  max-width: 100%;
}
button,
input,
select {
  font: inherit;
  color: inherit;
}
::selection {
  background: var(--sprout);
  color: #fff;
}
/* Focus indicators suppressed site-wide, by choice. Keyboard users get no
   visible focus position; re-enable this rule to restore it.

   No border-radius here: it only ever shaped the outline, which the line
   above already removes, but it also squared off the element itself - text
   inputs, nav links and accordion headers all lost their corners on focus. */
:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 2000;
  background: var(--sprout);
  color: #06231a;
  padding: 10px 18px;
  border-radius: var(--r-sm);
  font-size: 15px;
  font-weight: 600;
  transition: top 0.2s var(--ease);
}
.skip-link:focus {
  top: 16px;
}

/* 3a · Icon font ========================================================= */
/* Remix Icon 4.9.1 (Apache-2.0), subset to the 56 glyphs used here.
   Adding an icon means regenerating the subset - see README.txt. */
@font-face {
  font-family: "remixicon";
  src: url("../fonts/remixicon-subset.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
[class^="ri-"],
[class*=" ri-"] {
  font-family: "remixicon";
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  display: inline-block;
  vertical-align: -0.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ri-add-circle-line::before {
  content: "\ea11";
}
.ri-alarm-warning-line::before {
  content: "\ea1d";
}
.ri-alert-line::before {
  content: "\ea21";
}
.ri-arrow-down-s-line::before {
  content: "\ea4e";
}
.ri-arrow-left-line::before {
  content: "\ea60";
}
.ri-arrow-right-line::before {
  content: "\ea6c";
}
.ri-arrow-right-s-line::before {
  content: "\ea6e";
}
.ri-arrow-up-line::before {
  content: "\ea76";
}
.ri-arrow-up-s-line::before {
  content: "\ea78";
}
.ri-bank-card-line::before {
  content: "\ea92";
}
.ri-bank-line::before {
  content: "\ea94";
}
.ri-camera-line::before {
  content: "\eb31";
}
.ri-chat-3-line::before {
  content: "\eb51";
}
.ri-check-line::before {
  content: "\eb7b";
}
.ri-close-line::before {
  content: "\eb99";
}
.ri-double-quotes-l::before {
  content: "\ec51";
}
.ri-download-2-line::before {
  content: "\ec54";
}
.ri-download-line::before {
  content: "\ec5a";
}
.ri-drop-line::before {
  content: "\ec6a";
}
.ri-error-warning-line::before {
  content: "\eca1";
}
.ri-eye-line::before {
  content: "\ecb5";
}
.ri-eye-off-line::before {
  content: "\ecb7";
}
.ri-file-check-line::before {
  content: "\f438";
}
.ri-file-copy-line::before {
  content: "\ecd5";
}
.ri-file-text-line::before {
  content: "\ed0f";
}
.ri-flood-line::before {
  content: "\ed45";
}
.ri-folder-line::before {
  content: "\ed6a";
}
.ri-home-4-line::before {
  content: "\ee1d";
}
.ri-information-line::before {
  content: "\ee59";
}
.ri-key-2-line::before {
  content: "\ee6f";
}
.ri-layout-grid-line::before {
  content: "\ee90";
}
.ri-link::before {
  content: "\eeb2";
}
.ri-linkedin-fill::before {
  content: "\eeb5";
}
.ri-list-check::before {
  content: "\eeba";
}
.ri-list-unordered::before {
  content: "\eebe";
}
.ri-lock-line::before {
  content: "\eece";
}
.ri-logout-box-r-line::before {
  content: "\eeda";
}
.ri-macbook-line::before {
  content: "\eee8";
}
.ri-mail-line::before {
  content: "\eef6";
}
.ri-notification-3-line::before {
  content: "\ef94";
}
.ri-percent-line::before {
  content: "\efe6";
}
.ri-plant-line::before {
  content: "\f007";
}
.ri-profile-line::before {
  content: "\f02d";
}
.ri-question-line::before {
  content: "\f045";
}
.ri-refund-2-line::before {
  content: "\f066";
}
.ri-search-line::before {
  content: "\f0d1";
}
.ri-shield-check-line::before {
  content: "\f100";
}
.ri-smartphone-line::before {
  content: "\f15a";
}
.ri-star-line::before {
  content: "\f18b";
}
.ri-time-line::before {
  content: "\f20f";
}
.ri-twitter-x-line::before {
  content: "\f3e6";
}
.ri-upload-2-line::before {
  content: "\f24a";
}
.ri-upload-line::before {
  content: "\f250";
}
.ri-user-follow-line::before {
  content: "\f261";
}
.ri-user-line::before {
  content: "\f264";
}
.ri-wallet-3-line::before {
  content: "\f2ac";
}

/* icon sizes, by where the icon sits */
.tape__val i {
  font-size: 13px;
  margin-right: 3px;
  vertical-align: -1px;
}
.nav__caret {
  font-size: 15px;
}
.btn__icon {
  font-size: 16px;
}
.hero__risk i {
  font-size: 15px;
  flex-shrink: 0;
  line-height: inherit;
}
.plot-nav button i,
.falert__go i,
.sec-head__action i {
  font-size: 16px;
}
.flow__icon i,
.arrange__icon i,
.risk__icon i {
  font-size: 20px;
}
.pick__btn i {
  font-size: 15px;
}
.growers__qmark {
  font-size: 34px;
}
.falert__icon {
  font-size: 17px;
}

/* the app pages: each size follows the SVG icon the glyph replaced */
.appicon > [class*="ri-"] {
  font-size: 16px;
}
.appuser > [class*="ri-"] {
  font-size: 10px;
}
.appwallet__icon > [class*="ri-"] {
  font-size: 15px;
}
.chart__delta > [class*="ri-"] {
  font-size: 10px;
}
.copybtn > [class*="ri-"] {
  font-size: 12px;
}
.drop__file > [class*="ri-"] {
  font-size: 13px;
}
.drop__icon > [class*="ri-"] {
  font-size: 20px;
}
.filerow__get > [class*="ri-"] {
  font-size: 16px;
}
.filerow__icon > [class*="ri-"] {
  font-size: 15px;
}
.hold__go > [class*="ri-"] {
  font-size: 16px;
}
.kpi__top > [class*="ri-"] {
  font-size: 22px;
}
.method__icon > [class*="ri-"] {
  font-size: 16px;
}
.method__tick > [class*="ri-"] {
  font-size: 12px;
}
.msg__file > [class*="ri-"] {
  font-size: 14px;
}
.notice__icon > [class*="ri-"] {
  font-size: 16px;
}
.nrow__icon > [class*="ri-"] {
  font-size: 16px;
}
.pager__nav > a > [class*="ri-"],
.pager__nav > button > [class*="ri-"] {
  font-size: 14px;
}
.phead__tick > [class*="ri-"] {
  font-size: 12px;
}
.pnav__link > [class*="ri-"] {
  font-size: 16px;
}
.rep__dot > [class*="ri-"] {
  font-size: 15px;
}
.result__icon > [class*="ri-"] {
  font-size: 25px;
}
.setrow__icon > [class*="ri-"] {
  font-size: 16px;
}
.share__row > a > [class*="ri-"],
.share__row > button > [class*="ri-"] {
  font-size: 14px;
}
.statebar__label > [class*="ri-"] {
  font-size: 13px;
}
.stmt__ico > [class*="ri-"] {
  font-size: 14px;
}
.ticks > li > [class*="ri-"] {
  font-size: 14px;
}
.tl__label > [class*="ri-"] {
  font-size: 14px;
}
.wbal__icon > [class*="ri-"] {
  font-size: 16px;
}
.btn > [class*="ri-"]:not(.btn__icon) {
  font-size: 14px;
}
.art ul li > [class*="ri-"] {
  font-size: 14px;
}

/* 4 · Helpers ============================================================ */
.section {
  padding-block: 96px;
}
.section--tight {
  padding-block: 76px;
}
.section--paper {
  background: var(--paper);
}
.section--canvas {
  background: var(--canvas);
  border-block: 1px solid var(--line-soft);
}
.section--field {
  background: var(--field);
  color: #fff;
}

.eyebrow {
  font-family: var(--label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
}
.data-key {
  font-family: var(--label);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-soft);
}
.data-val {
  font-family: var(--label);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Section heading — brand mark as the index. Modifiers: --action (baseline
   link), --center (stacked, centred). Green sections inherit colour. */
.sec-head {
  position: relative;
  margin-bottom: 52px;
}

/* The index mark sits outside the container and takes no part in layout, so
   the heading starts at the container edge whether the mark is there or not.
   It needs mark + gap + rule + head-gap of clear gutter beside the container;
   below that there is no room, so it is hidden rather than crowding the text. */
.sec-head__index {
  display: none;
}
@media (min-width: 1620px) {
  .sec-head__index {
    position: absolute;
    top: 0;
    right: 100%;
    height: 100%;
    margin-right: var(--head-gap);
    display: flex;
    align-items: stretch;
    gap: var(--index-gap);
  }
}
/* PNG, not SVG, so the colour comes from the file: sec-mark-dark.png on light
   sections, sec-mark-light.png on the green ones. Set in the markup. */
.sec-head__mark {
  display: block;
  width: var(--mark-size);
  height: var(--mark-size);
  flex-shrink: 0;
}
.sec-head__rule {
  width: 1px;
  background: var(--line);
}
.sec-head__body {
  max-width: 100%;
}
.sec-head .eyebrow {
  display: block;
  margin-bottom: 14px;
}
.sec-head h2 {
  font-size: clamp(2rem, 3.5vw, 2.85rem);
  margin-bottom: 16px;
}
.sec-head p {
  font-size: 18px;
  color: var(--muted);
  font-weight: 500;
}

/* only the button drops to the baseline; the index column keeps stretching */
.sec-head--action {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--head-gap);
  align-items: stretch;
}
.sec-head__action {
  align-self: end;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  margin-bottom: 4px;
  transition:
    border-color 0.2s var(--ease),
    background 0.2s var(--ease);
}
.sec-head__action:hover {
  border-color: var(--field);
  background: var(--canvas);
}
.sec-head__action i {
  transition: transform 0.22s var(--ease);
}
.sec-head__action:hover i {
  transform: translateX(3px);
}

.sec-head--center {
  text-align: center;
}
/* centred heads keep their mark: it stacks above the text inside the
   container, so it never needed the gutter in the first place */
.sec-head--center .sec-head__index {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: auto;
  gap: 16px;
  margin: 0 0 24px;
}
.sec-head--center .sec-head__rule {
  width: 50px;
  height: 1px;
}
.sec-head--center .sec-head__body {
  max-width: 640px;
  /* .sec-head is no longer a grid, so the box needs centring itself */
  margin-inline: auto;
}
.sec-head--center p {
  margin-inline: auto;
  max-width: 54ch;
}
.section--field .sec-head .eyebrow {
  color: rgba(255, 255, 255, 0.72);
}
.section--field .sec-head h2 {
  color: #fff;
}
.section--field .sec-head p {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 500;
}
.section--field .sec-head__rule {
  background: rgba(255, 255, 255, 0.22);
}
.section--field .sec-head__action {
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
.section--field .sec-head__action:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
}

/* 5 · Buttons & pills ==================================================== */
/* Bootstrap's .btn via --bs-btn-*. Base sets shape, variants set colour. */
.btn {
  --bs-btn-padding-y: 13px;
  --bs-btn-padding-x: 22px;
  --bs-btn-font-family: var(--body);
  --bs-btn-font-size: 15px;
  --bs-btn-font-weight: 600;
  --bs-btn-line-height: 1.5;
  --bs-btn-border-radius: var(--r-pill);
  --bs-btn-border-width: 1px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transition:
    background-color 0.18s var(--ease),
    border-color 0.18s var(--ease),
    transform 0.18s var(--ease),
    box-shadow 0.18s var(--ease);
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--lift-2);
}
.btn:active {
  transform: translateY(0);
}
/* Disabled: keep the variant's own colour and just dim it. Bootstrap's own
   fallbacks are transparent, which would strip the button back to an
   outline and lose the shape entirely. */
.btn:disabled,
.btn.disabled {
  --bs-btn-disabled-bg: var(--bs-btn-bg);
  --bs-btn-disabled-border-color: var(--bs-btn-border-color);
  --bs-btn-disabled-color: var(--bs-btn-color);
  --bs-btn-disabled-opacity: 0.45;
}
.btn:disabled:hover,
.btn.disabled:hover {
  transform: none;
  box-shadow: none;
}
.btn-sm {
  --bs-btn-padding-y: 10px;
  --bs-btn-padding-x: 18px;
  --bs-btn-font-size: 15px;
}

/* --- Variants ----------------------------------------------------------- */
.btn-field {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--field);
  --bs-btn-border-color: var(--field);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--field-deep);
  --bs-btn-hover-border-color: var(--field-deep);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--field-deep);
  --bs-btn-active-border-color: var(--field-deep);
}
.btn-sprout {
  --bs-btn-color: #06231a;
  --bs-btn-bg: var(--sprout);
  --bs-btn-border-color: var(--sprout);
  --bs-btn-hover-color: #06231a;
  --bs-btn-hover-bg: var(--sprout-lit);
  --bs-btn-hover-border-color: var(--sprout-lit);
  --bs-btn-active-color: #06231a;
  --bs-btn-active-bg: var(--sprout-lit);
  --bs-btn-active-border-color: var(--sprout-lit);
}
.btn-ghost {
  --bs-btn-color: var(--ink);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--line);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-bg: var(--canvas);
  --bs-btn-hover-border-color: var(--field);
  --bs-btn-active-color: var(--ink);
  --bs-btn-active-bg: var(--canvas);
  --bs-btn-active-border-color: var(--field);
}
.btn-paper {
  --bs-btn-color: var(--field);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #fff;
  --bs-btn-hover-color: var(--field);
  --bs-btn-hover-bg: var(--haze);
  --bs-btn-hover-border-color: var(--haze);
  --bs-btn-active-color: var(--field);
  --bs-btn-active-bg: var(--haze);
  --bs-btn-active-border-color: var(--haze);
}
.btn-outline-light {
  --bs-btn-color: #fff;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: rgba(255, 255, 255, 0.34);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgba(255, 255, 255, 0.08);
  --bs-btn-active-border-color: #fff;
}

.btn__icon {
  transition: transform 0.22s var(--ease);
}
.btn:hover .btn__icon {
  transform: translateX(3px);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px 5px 11px;
  border-radius: var(--r-pill);
  background: var(--haze);
  border: 1px solid var(--line);
  font-family: var(--label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--field);
}
.pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sprout);
  box-shadow: 0 0 0 3px rgba(71, 178, 107, 0.22);
}
.pill--live .pill__dot {
  animation: pulse 2.4s var(--ease) infinite;
}
.pill--closed {
  background: var(--soil-haze);
  border-color: #e4d8c6;
  color: var(--soil);
}
.pill--closed .pill__dot {
  background: var(--soil);
  box-shadow: 0 0 0 3px rgba(138, 111, 78, 0.18);
}
/* on a green surface the pill inverts — used in the hero and the footer CTA */
.pill--onfield {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}
@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 0 3px rgba(71, 178, 107, 0.22);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(71, 178, 107, 0.06);
  }
}

/* 6 · Header ============================================================= */
/* Tier 1: live plot tape. Tier 2: Bootstrap navbar on crop-row texture. */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1030;
  color: #fff;
  /* backstop: any sub-pixel seam between the tiers shows header green,
     never the page scrolling underneath */
  background: var(--field);
}

/* --- Tier 1 · Live tape ------------------------------------------------- */
.header__rail {
  position: relative;
  height: var(--rail-h);
  /* a deeper middle and a sprout hairline on top: the strip reads as its own
     surface rather than a flat bar */
  background:
    radial-gradient(120% 300% at 50% 0%, rgba(71, 178, 107, 0.16), transparent 60%),
    linear-gradient(90deg, var(--field-abyss), #0b2a1d 50%, var(--field-abyss));
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  /* visible so the rail dropdowns can escape; the tape does its own
     clipping. Only the collapsed state needs to hide overflow. */
  overflow: visible;
  transition:
    height 0.3s var(--ease),
    opacity 0.25s var(--ease);
}
.header__rail::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(71, 178, 107, 0.55), transparent);
}
.rail__inner {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.rail__label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-right: 18px;
  margin-right: 8px;
  flex-shrink: 0;
  font-family: var(--label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}
.rail__beacon {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sprout-lit);
  box-shadow:
    0 0 0 3px rgba(71, 178, 107, 0.22),
    0 0 12px rgba(91, 199, 126, 0.8);
  animation: pulse 2.4s var(--ease) infinite;
}

.tape {
  position: relative;
  flex: 1;
  overflow: hidden;
  height: 100%;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 24px,
    #000 calc(100% - 40px),
    transparent
  );
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 40px), transparent);
}
.tape__track {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
  animation: tape 52s linear infinite;
}
.tape:hover .tape__track,
.tape:focus-within .tape__track {
  animation-play-state: paused;
}
@keyframes tape {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}
/* soft pills with a dot between them, rather than hard rules */
.tape__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-block: 7px;
  padding-inline: 18px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  font-family: var(--label);
  font-size: 13px;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.7);
  transition:
    color 0.18s var(--ease),
    background 0.18s var(--ease);
}
.tape__item::after {
  content: "";
  position: absolute;
  right: -2px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}
.tape__item:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
}
.tape__id {
  color: var(--sprout-lit);
  font-weight: 700;
  letter-spacing: 0.06em;
}
.tape__crop {
  color: rgba(255, 255, 255, 0.62);
  font-weight: 400;
}
/* the figure sits in a chip, so the eye finds it first */
.tape__val {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: rgba(71, 178, 107, 0.16);
  font-weight: 700;
  color: var(--sprout-lit);
  font-variant-numeric: tabular-nums;
}
.tape__val--paid {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.86);
}
.tape__val--soil {
  color: var(--wheat);
}
.tape__val i {
  display: inline-block;
  vertical-align: -1px;
  margin-right: 3px;
}

.rail__aside {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-left: 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.13);
}
/* ghost pills: they draw themselves only on hover */
.rail__link {
  font-family: var(--label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  transition:
    color 0.18s var(--ease),
    background-color 0.18s var(--ease);
}
.rail__link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.rail__link + .rail__link {
  margin-left: 2px;
}

/* --- Tier 2 · Navbar ---------------------------------------------------- */
.header__bar {
  position: relative;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  background: var(--field);
  transition:
    height 0.3s var(--ease),
    box-shadow 0.3s var(--ease),
    background 0.3s var(--ease);
}
/* crop-row texture running through the bar */
.header__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.045) 0,
      rgba(255, 255, 255, 0.045) 1px,
      transparent 1px,
      transparent 9px
    ),
    radial-gradient(120% 180% at 88% 0%, rgba(71, 178, 107, 0.28), transparent 62%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000);
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000);
}
/* bottom edge — a single hairline that fades at the shoulders */
.header__bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.03),
    rgba(255, 255, 255, 0.15) 22%,
    rgba(255, 255, 255, 0.15) 78%,
    rgba(255, 255, 255, 0.03)
  );
}
.site-header.is-stuck .header__rail {
  height: 0;
  opacity: 0;
  overflow: hidden;
  /* width, not just colour: box-sizing:border-box keeps a bordered element
     1px tall at height:0, which showed the page through as a hairline */
  border-bottom-width: 0;
}
.site-header.is-stuck .header__bar {
  height: 64px;
  background: var(--field-deep);
  box-shadow: 0 10px 30px -14px rgba(10, 42, 29, 0.5);
}

/* the navbar itself is transparent — .header__bar paints the surface */
.header__bar .navbar {
  --bs-navbar-padding-y: 0;
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0;
  height: 100%;
}
.header__bar .navbar > .container {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 100%;
  flex-wrap: nowrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
  padding: 0;
  margin: 0;
}
.brand__mark {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 10px;
}
/* The wordmark already carries the sprouts, so the square mark stays hidden
   beside it and only comes back where a header drops the wordmark. */
.brand__logo {
  display: block;
  width: auto;
  height: 60px;
}
.brand .brand__mark {
  display: none;
}

.header__bar .navbar-collapse {
  height: 100%;
  flex-grow: 1;
}
.header__bar .navbar-nav {
  margin-inline-start: auto;
  height: 100%;
  align-items: center;
  gap: 2px;
  flex-direction: row;
}
/* The same links in the dashboard bar, straight after the logo. Desktop only:
   below 1200 the bar keeps its own menu button, as the site header does. */
.topbar__nav {
  display: flex;
  align-self: stretch;
  flex-shrink: 0;
}
.topbar__nav .navbar-nav {
  height: 100%;
  align-items: center;
  gap: 2px;
  flex-direction: row;
}
/* Bootstrap keeps .navbar-nav menus static unless they sit inside a
   .navbar-expand-* navbar, which the dashboard bar is not */
.topbar__nav .navbar-nav .dropdown-menu {
  position: absolute;
}
@media (max-width: 1199.98px) {
  .topbar__nav {
    display: none;
  }
}
/* Right-aligned like the public navbar, with the same thin divider before
   the bell and profile. From 1200 only: below it the links are hidden and
   the bell and profile keep their own push to the right. */
@media (min-width: 1200px) {
  .topbar__nav {
    margin-left: auto;
  }
  .topbar__nav ~ .topbar__end {
    margin-left: 0;
    padding-left: 22px;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
  }
}
.header__bar .navbar-nav .nav-item,
.topbar__nav .navbar-nav .nav-item {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}
.header__bar .navbar-nav .nav-link,
.topbar__nav .navbar-nav .nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 15px;
  border-radius: var(--r-sm);
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.76);
  white-space: nowrap;
  transition: color 0.18s var(--ease);
}
.header__bar .navbar-nav .nav-link:hover,
.header__bar .navbar-nav .nav-link:focus,
.header__bar .navbar-nav .nav-link.show,
.header__bar .navbar-nav .nav-link[aria-current="page"],
.header__bar .navbar-nav .nav-link.is-current,
.topbar__nav .navbar-nav .nav-link:hover,
.topbar__nav .navbar-nav .nav-link:focus,
.topbar__nav .navbar-nav .nav-link.show,
.topbar__nav .navbar-nav .nav-link[aria-current="page"],
.topbar__nav .navbar-nav .nav-link.is-current {
  color: #fff;
}
/* Bootstrap's dropdown-toggle draws its own caret — ours is an inline SVG */
.header__bar .navbar-nav .dropdown-toggle::after,
.topbar__nav .navbar-nav .dropdown-toggle::after {
  display: none;
}
.header__bar .navbar-nav .nav-link::before,
.topbar__nav .navbar-nav .nav-link::before {
  content: "";
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: -2px;
  height: 2px;
  background: var(--sprout-lit);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.26s var(--ease);
}
.header__bar .navbar-nav .nav-link:hover::before,
.header__bar .navbar-nav .nav-link.show::before,
.header__bar .navbar-nav .nav-link[aria-current="page"]::before,
.header__bar .navbar-nav .nav-link.is-current::before,
.topbar__nav .navbar-nav .nav-link:hover::before,
.topbar__nav .navbar-nav .nav-link.show::before,
.topbar__nav .navbar-nav .nav-link.is-current::before {
  transform: scaleX(1);
}
.nav__caret {
  transition: transform 0.24s var(--ease);
  opacity: 0.7;
}
.header__bar .navbar-nav .nav-link.show .nav__caret,
.topbar__nav .navbar-nav .nav-link.show .nav__caret {
  transform: rotate(180deg);
}
.nav__count {
  font-family: var(--label);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(71, 178, 107, 0.22);
  color: var(--sprout-lit);
}

.bar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding-left: 24px;
  margin-left: 4px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.bar__signin {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  padding: 9px 14px;
  border-radius: var(--r-sm);
  transition:
    color 0.18s var(--ease),
    background 0.18s var(--ease);
}
.bar__signin:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

/* --- Mobile toggle ------------------------------------------------------ */
.nav__mobile-actions {
  display: none;
}
.header__bar .navbar-toggler {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  cursor: pointer;
  box-shadow: none;
}
.header__bar .navbar-toggler:focus {
  box-shadow: none;
}
.nav-toggle__bars {
  display: block;
  width: 17px;
  height: 11px;
  position: relative;
}
.nav-toggle__bars i {
  position: absolute;
  left: 0;
  height: 1.6px;
  width: 100%;
  background: #fff;
  border-radius: 2px;
  transition:
    transform 0.28s var(--ease),
    opacity 0.18s var(--ease);
}
.nav-toggle__bars i:nth-child(1) {
  top: 0;
}
.nav-toggle__bars i:nth-child(2) {
  top: 50%;
  margin-top: -0.8px;
}
.nav-toggle__bars i:nth-child(3) {
  bottom: 0;
}
.header__bar .navbar-toggler[aria-expanded="true"] i:nth-child(1) {
  transform: translateY(4.7px) rotate(45deg);
}
.header__bar .navbar-toggler[aria-expanded="true"] i:nth-child(2) {
  opacity: 0;
}
.header__bar .navbar-toggler[aria-expanded="true"] i:nth-child(3) {
  transform: translateY(-4.7px) rotate(-45deg);
}

/* 7 · Hero =============================================================== */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--field);
  color: #fff;
  padding-top: calc(var(--header-h) + 72px);
  padding-bottom: 0;
}

/* the header bar's own texture, so hero and chrome share one surface */
.hero__texture {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.045) 0,
      rgba(255, 255, 255, 0.045) 1px,
      transparent 1px,
      transparent 9px
    ),
    radial-gradient(120% 150% at 88% 0%, rgba(71, 178, 107, 0.26), transparent 60%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000);
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000);
}

/* parcel hairlines — the field divided, structurally */
.hero__parcels {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: calc(100% / 6) 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 72%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 72%, transparent);
}

/* 64px column gap — wider than any Bootstrap g-* utility, so set outright */
.hero__grid {
  --bs-gutter-x: 64px;
  position: relative;
  align-items: center;
  padding-bottom: 88px;
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}
.hero__eyebrow-rule {
  flex: 1;
  max-width: 96px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.32), transparent);
}
.hero .eyebrow {
  color: rgba(255, 255, 255, 0.72);
}

/* first two clauses lead in at half size; the payoff takes the weight */
.hero__title {
  margin: 0 0 26px;
  color: #fff;
}
.hero__lead {
  display: block;
  font-size: clamp(1.4rem, 2.2vw, 2.5rem);
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 10px;
}
.hero__pay {
  display: block;
  font-size: clamp(2.8rem, 4.8vw, 4.45rem);
  letter-spacing: -0.042em;
  line-height: 1.04;
}
.hero__pay em {
  font-style: normal;
  color: var(--sprout-lit);
  position: relative;
}
.hero__pay em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.06em;
  height: 0.08em;
  background: var(--sprout);
  opacity: 0.42;
  border-radius: 2px;
}

.hero__lede {
  font-size: 18px;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.74);
  max-width: 50ch;
  margin-bottom: 34px;
  font-weight: 500;
}
.hero__lede strong {
  color: #fff;
  font-weight: 600;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.hero__risk {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
  max-width: 58ch;
}
.hero__risk i {
  flex-shrink: 0;
  /* same line box as the text, so the glyph centres on the first line */
  line-height: inherit;
}

/* stats strip, welded to the base of the hero — same surface as the header bar */
.hero__stats {
  position: relative;
  overflow: hidden;
  background: var(--field);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.hero__stats::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.045) 0,
      rgba(255, 255, 255, 0.045) 1px,
      transparent 1px,
      transparent 9px
    ),
    radial-gradient(120% 180% at 88% 0%, rgba(71, 178, 107, 0.28), transparent 62%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000);
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000);
}
.hero__stats .container {
  position: relative;
  z-index: 1;
}
/* The strip as a panel inside a page container (track record), not the
   full-bleed band of the home page: rounded, the first stat padded like the
   rest so its icon clears the edge, and spaced from the next section. */
.hero__stats--panel {
  border-top: 0;
  border-radius: var(--r-lg);
  margin-bottom: 64px;
}
.hero__stats--panel .hstat--c1 {
  padding-inline-start: 30px;
}
@media (max-width: 991.98px) {
  /* The calculator list is 318px wide and hangs off an inline word, so from
     here down it would run past the right edge and push the page sideways.
     It anchors to the setup box instead. Only in the calculator: the app pages
     reuse .pick for form fields, where the list belongs to its own field. */
  .setup .pick {
    position: static;
  }
  .setup .pick__list {
    left: 16px;
    right: 16px;
    width: auto;
    min-width: 0;
  }
  .hero__stats--panel .hstat--c1,
  .hero__stats--panel .hstat--c3 {
    padding-inline-start: 20px;
  }
}
@media (max-width: 767.98px) {
  .hero__stats--panel .hstat {
    padding-inline: 20px;
  }
}

.hstat {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 28px 30px;
  height: 100%;
  border-inline-start: 1px solid rgba(255, 255, 255, 0.12);
}
.hstat--c1 {
  border-inline-start: 0;
  padding-inline-start: 0;
}

/* icon runs alongside the figure — no tile, no frame */
/* PNG icons: the colour is baked into the file, the size comes from here */
.hstat__icon {
  display: block;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  margin-top: -1px;
}

.hstat__num {
  display: flex;
  align-items: baseline;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.1rem, 2.9vw, 2.6rem);
  letter-spacing: -0.012em;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
  margin-bottom: 9px;
}
.hstat__num sup {
  font-family: var(--label);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  align-self: flex-start;
  margin-top: 0.28em;
  margin-left: 4px;
  color: var(--sprout-lit);
}
.hstat__num .unit {
  font-size: 0.62em;
  letter-spacing: -0.005em;
  margin-left: 2px;
}

.hstat__label {
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.76);
  max-width: 26ch;
  font-weight: 500;
}

/* 8 · Plot cards ========================================================= */
/* .plot-hero — meter-led, hero only.  .plot-card — framed, listings grid. */
/* plot photograph fills its frame; the dark ground shows while it loads */
.pc__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pc__id {
  font-family: var(--label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.pc__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--field);
}
.pc__status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sprout);
}
.pc__status--closed {
  color: var(--soil);
}
.pc__status--closed i {
  background: var(--soil);
}
.pc__track {
  display: block;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--haze-deep);
  overflow: hidden;
}
.pc__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--field), var(--sprout));
  transition: width 1.4s var(--ease);
}
.pc__fill--closed {
  background: linear-gradient(90deg, #7a6244, var(--soil));
}
.pc__grower {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.pc__av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--soil-haze);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
  color: var(--soil);
}
.pc__who {
  font-size: 13px;
  line-height: 1.35;
  color: var(--muted);
  min-width: 0;
  font-weight: 400;
}
.pc__who b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Hero card · peek slider -------------------------------------------- */
.plot-slider {
  width: 100%;
  max-width: 418px;
  margin-left: auto;
}
.plot-deck {
  position: relative;
  height: 572px;
}
.plot-hero {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 40px 84px -30px rgba(0, 0, 0, 0.62),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  opacity: 0;
  transform: translateX(70px) scale(0.92);
  pointer-events: none;
  transition:
    opacity 0.4s var(--ease),
    transform 0.45s var(--ease);
  will-change: transform, opacity;
}
/* the queue steps back: current, next, then the third further out */
.plot-hero.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  z-index: 3;
}
.plot-hero.is-next {
  opacity: 0.45;
  transform: translateX(84px) scale(0.93);
  z-index: 2;
}
.plot-hero.is-far {
  opacity: 0.2;
  transform: translateX(154px) scale(0.86);
  z-index: 1;
}

.plot-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
}
.plot-bar b {
  font-family: var(--label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.72);
  font-variant-numeric: tabular-nums;
}
.plot-bar .track {
  flex: 1;
  height: 3px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}
.plot-bar .track i {
  display: block;
  height: 100%;
  background: var(--sprout);
  transition: width 0.4s var(--ease);
}
.plot-nav {
  display: flex;
  gap: 8px;
}
.plot-nav button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #fff;
  transition:
    background 0.18s var(--ease),
    border-color 0.18s var(--ease);
}
.plot-nav button:hover {
  background: var(--sprout);
  border-color: var(--sprout);
  color: #06231a;
}
.plot-hero__meter {
  height: 6px;
  background: var(--haze-deep);
}
.plot-hero__meter i {
  display: block;
  height: 100%;
  width: 0;
  transition: width 1.4s var(--ease);
  background: linear-gradient(90deg, var(--field), var(--sprout));
}
.plot-hero__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 18px 0;
}
.plot-hero__pct {
  font-family: var(--display);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--field);
}
.plot-hero__pct span {
  display: block;
  font-family: var(--label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-soft);
  margin-top: 7px;
}
.plot-hero__raised {
  text-align: right;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.plot-hero__raised em {
  display: block;
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  color: var(--muted-soft);
}
/* The card is a flex column, so without flex-shrink:0 the image is squashed
   to fit instead of keeping its ratio — which then means .plot-deck must be
   tall enough to hold the whole card. Change the ratio and the three
   .plot-deck heights have to move with it. */
.plot-hero__media {
  position: relative;
  aspect-ratio: 16/7;
  flex-shrink: 0;
  overflow: hidden;
  margin: 16px 18px 0;
  border-radius: 10px;
  background: var(--field-deep);
}
.plot-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--photo-wash);
}
.plot-hero__body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.plot-hero__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 3px;
}
.plot-hero__head h2 {
  font-size: 21px;
  letter-spacing: -0.03em;
}
.plot-hero__place {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 16px;
  font-weight: 500;
}
.plot-hero__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 14px 0;
  border-block: 1px solid var(--line-soft);
  margin-bottom: 18px;
}
.plot-hero__facts div {
  padding-left: 14px;
  border-left: 1px solid var(--line-soft);
}
.plot-hero__facts div:first-child {
  padding-left: 0;
  border-left: 0;
}
.plot-hero__facts dt {
  font-family: var(--label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-soft);
  margin-bottom: 4px;
}
.plot-hero__facts dd {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
.plot-hero__facts .is-key {
  color: var(--field);
}
.plot-hero__cta {
  margin-top: auto;
}
.plot-hero__cta .btn {
  width: 100%;
}
.plot-hero__foot {
  display: flex;
  align-items: center;
  padding: 12px 18px;
  background: var(--paper);
  border-top: 1px solid var(--line-soft);
}

/* --- Listing card ------------------------------------------------------- */
.plot-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px;
  color: var(--ink);
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--lift-1);
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}
.plot-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--lift-2);
}
.plot-card__media {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 12px;
  background: var(--field-deep);
}
/* the dark top shade keeps the id and status legible; the wash sits under it */
.plot-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 22, 15, 0.5), transparent 42%), var(--photo-wash);
}
.plot-card__media .pc__id {
  position: absolute;
  top: 11px;
  left: 13px;
  z-index: 2;
  color: rgba(255, 255, 255, 0.9);
}
.plot-card__media .pc__status {
  position: absolute;
  top: 10px;
  right: 11px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.94);
  color: var(--field);
}
.plot-card__body {
  padding: 18px 10px 10px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.plot-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 3px;
}
.plot-card__head h3 {
  font-size: 22px;
  letter-spacing: -0.03em;
}
.plot-card__term {
  font-family: var(--label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-soft);
  white-space: nowrap;
}
.plot-card__place {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 18px;
  font-weight: 500;
}
.plot-card__place span {
  color: var(--soil);
  font-weight: 500;
}
.plot-card__fundtop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.plot-card__raised {
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.plot-card__raised em {
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  color: var(--muted-soft);
}
.plot-card__pct {
  font-family: var(--label);
  font-size: 13px;
  font-weight: 700;
  color: var(--field);
}
.plot-card__pct--closed {
  color: var(--soil);
}
.plot-card__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 18px 0;
}
.plot-card__facts div {
  background: var(--haze);
  border-radius: 10px;
  padding: 12px 13px;
}
.plot-card__facts dt {
  font-family: var(--label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-soft);
  margin-bottom: 4px;
}
.plot-card__facts dd {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
.plot-card__facts .is-key {
  color: var(--field);
}
.plot-card__facts .is-land {
  color: var(--soil);
}
.plot-card__cta {
  margin-top: auto;
}
.plot-card__cta .btn {
  width: 100%;
}
.plot-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 8px 4px;
  margin-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.plot-card__min {
  font-family: var(--label);
  font-size: 12px;
  color: var(--muted-soft);
  line-height: 1.3;
  text-align: right;
  font-weight: 400;
}
.plot-card__min b {
  display: block;
  font-size: 15px;
  color: var(--ink);
  font-weight: 700;
}

/* 9 · Flow =============================================================== */
/* Four chevrons interlocking on a .row.g-0, deepening to solid at the end.
   Chevron shaping is xl and up; below that each step is a rounded card. */
.flow__step {
  position: relative;
  height: 100%;
  background: var(--haze);
  border-radius: 14px;
}
.flow__inner {
  padding: 24px 26px 26px;
  height: 100%;
}
.flow__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 26px;
}
.flow__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(22, 81, 58, 0.09);
  color: var(--field);
}
.flow__step--pending .flow__icon {
  background: rgba(138, 111, 78, 0.12);
  color: var(--soil);
}
.flow__num {
  font-family: var(--label);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.11em;
  color: var(--muted-soft);
}

/* money state — the primary line of each step */
.flow__state {
  display: block;
  font-family: var(--label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--field);
  margin-bottom: 10px;
}
.flow__step--pending .flow__state {
  color: var(--soil);
}

.flow__step h3 {
  font-size: 22px;
  line-height: 1.22;
  letter-spacing: -0.025em;
  margin-bottom: 14px;
  font-weight: 700;
}
.flow__step p {
  font-size: 15px;
  line-height: 1.68;
  color: var(--muted);
  font-weight: 500;
}

/* tone ramp — the second step lifts, the fourth goes solid */
.flow__step--lift {
  background: #e1ede4;
}
.flow__step--solid {
  background: var(--field);
}
.flow__step--solid .flow__icon {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.flow__step--solid .flow__num {
  color: rgba(255, 255, 255, 0.7);
}
.flow__step--solid .flow__state {
  color: var(--sprout-lit);
}
.flow__step--solid h3 {
  color: #fff;
}
.flow__step--solid p {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 500;
}

@media (min-width: 1200px) {
  .flow__step {
    margin-left: -22px;
    border-radius: 0;
    clip-path: polygon(
      0 0,
      calc(100% - 26px) 0,
      100% 50%,
      calc(100% - 26px) 100%,
      0 100%,
      26px 50%
    );
  }
  .flow > [class*="col"]:first-child .flow__step {
    margin-left: 0;
    clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%);
  }
  .flow > [class*="col"]:last-child .flow__step {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 26px 50%);
  }
  .flow__inner {
    padding: 26px 40px 28px 50px;
  }
  .flow > [class*="col"]:first-child .flow__inner {
    padding-left: 38px;
  }
}

/* 10 · Plots grid ======================================================== */
/* Pure Bootstrap: .row.g-4 > .col-12.col-md-6.col-xl-4. No custom CSS. */

/* 11 · Risk ============================================================== */
.section--field {
  overflow: hidden;
}

.risk {
  --bs-gutter-x: 64px;
}
/* the heading lives inside the left column, so it scales to that column */
.risk .sec-head {
  margin-bottom: 40px;
}
.risk .sec-head h2 {
  font-size: clamp(1.9rem, 2.9vw, 2.5rem);
}
.risk .sec-head__body {
  max-width: none;
}

.risk__list {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.risk__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.risk__icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.09);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--sprout-lit);
}
.risk__item h3 {
  font-size: 18px;
  color: #fff;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}
.risk__item p {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.66);
  font-weight: 500;
}

/* photograph runs off the right edge of the viewport */
.risk__media {
  position: relative;
  min-height: 560px;
  height: 100%;
  overflow: hidden;
  border-radius: 20px 0 0 20px;
  /* out to the window edge: the margin beside the container plus the
     container's own side padding, which Bootstrap sets to half its
     gutter. --bs-gutter-x is no use here: the row inside overrides it. */
  margin-right: calc(-1 * ((100vw - min(var(--container), 100vw)) / 2 + var(--gutter) / 2));
}
.risk__fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #2c8552, #0c3020);
}
.risk__fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    112deg,
    rgba(255, 255, 255, 0.05) 0,
    rgba(255, 255, 255, 0.05) 2px,
    transparent 2px,
    transparent 16px
  );
}
/* over the photo, under the note (z-index 3) */
.risk__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--photo-wash);
  z-index: 2;
}
/* drop a real photograph in and it takes over; if it 404s the fill stays */
.risk__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.7s var(--ease);
}
.risk.has-img .risk__photo {
  opacity: 1;
}

.risk__note {
  position: absolute;
  z-index: 3;
  left: 32px;
  right: 32px;
  bottom: 32px;
  padding: 20px 22px;
  border-radius: 14px;
  /* Fully opaque, and no backdrop-filter: at 94% the blur pulled green up
     from the photo and the panel rendered cream rather than white. */
  background: #fff;
  border: 1px solid var(--line-soft);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.55);
}
.risk__note b {
  display: block;
  font-family: var(--label);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--field);
  margin-bottom: 8px;
}
.risk__note p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  font-weight: 500;
}

/* 12 · Fee model ========================================================= */
/* Controls read as a sentence: a stepper and an inline plot picker. */
.setup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 16px;
  padding: 18px 22px;
  border-radius: 16px;
  margin-bottom: 26px;
  font-size: 18px;
  background: var(--canvas);
  border: 1px solid var(--line);
}
.setup__txt {
  color: var(--muted);
  font-weight: 400;
}

.stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--haze);
  border: 1px solid var(--line);
}
.stepper button {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  background: var(--canvas);
  border: 1px solid var(--line);
  color: var(--field);
  font-size: 18px;
  line-height: 1;
  transition:
    background 0.18s var(--ease),
    border-color 0.18s var(--ease);
  font-weight: 400;
}
.stepper button:hover {
  background: var(--field);
  border-color: var(--field);
  color: #fff;
}
.stepper output {
  min-width: 104px;
  text-align: center;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

/* the trigger is part of the sentence — underlined text, not a boxed control */
.pick {
  position: relative;
  display: inline-flex;
}
.pick__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 3px;
  background: none;
  border: 0;
  border-bottom: 2px solid var(--sprout);
  cursor: pointer;
  font-family: var(--body);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  transition: border-color 0.18s var(--ease);
}
.pick__btn:hover,
.pick[data-open] .pick__btn {
  border-bottom-color: var(--field);
}
.pick__btn i {
  color: var(--muted-soft);
  transition: transform 0.22s var(--ease);
}
.pick[data-open] .pick__btn i {
  transform: rotate(180deg);
}
.pick__list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 14px);
  left: -12px;
  min-width: 318px;
  max-height: 288px;
  overflow-y: auto;
  padding: 8px;
  margin: 0;
  list-style: none;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 52px -20px rgba(14, 36, 27, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity 0.18s var(--ease),
    transform 0.18s var(--ease),
    visibility 0.18s;
}
.pick[data-open] .pick__list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.pick__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.14s var(--ease);
}
.pick__opt:hover,
.pick__opt.is-active {
  background: var(--paper);
}
.pick__opt[aria-selected="true"] {
  background: var(--haze);
}
.pick__opt b {
  display: block;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}
.pick__opt small {
  display: block;
  font-size: 13px;
  color: var(--muted-soft);
  margin-top: 1px;
  font-weight: 400;
}
.pick__opt[aria-selected="true"] b {
  color: var(--field);
}
.pick__num {
  font-family: var(--label);
  font-size: 13px;
  font-weight: 700;
  color: var(--field);
  white-space: nowrap;
  flex-shrink: 0;
}
/* the notch under the picker, as on every other dropdown */
.pick::after {
  content: "";
  position: absolute;
  z-index: 21;
  left: 50%;
  top: calc(100% + 7px);
  width: 12px;
  height: 12px;
  background: var(--canvas);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: 3px 0 0 0;
  transform: translateX(-50%) rotate(45deg);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.18s var(--ease),
    visibility 0.18s;
}
.pick[data-open]::after {
  opacity: 1;
  visibility: visible;
}

/* --- Dashboard selects --------------------------------------------------
   A form field built by main.js (section 36) from a <select>: the button wears
   the field's own box and the list is the picker's. The select stays in the
   form underneath, out of sight. */
.sel {
  display: flex;
  width: 100%;
}
.sel > select {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
/* the button draws its own caret, so the field's drawn one goes */
.inp--select.sel::after {
  content: "";
  font-family: inherit;
  right: 20px;
  left: auto;
  top: calc(100% + 1px);
  z-index: 31;
  transform: rotate(45deg);
}
.sel .pick__btn {
  justify-content: space-between;
  width: 100%;
  height: 50px;
  padding: 0 14px 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--canvas);
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  transition:
    border-color 0.18s var(--ease),
    box-shadow 0.18s var(--ease);
}
.sel .pick__btn:hover {
  border-color: var(--haze-deep);
}
.sel[data-open] .pick__btn,
.sel .pick__btn:focus-visible {
  border-color: var(--field);
  box-shadow: 0 0 0 3px rgba(71, 178, 107, 0.16);
  outline: 0;
}
.sel .pick__val {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sel .pick__btn i {
  font-size: 20px;
}
.sel .pick__list {
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  min-width: 0;
  z-index: 30;
}
.sel .pick__opt b {
  font-size: 15px;
  font-weight: 500;
}
.sel .pick__opt[aria-selected="true"] b {
  font-weight: 600;
}

/* --- The split ---------------------------------------------------------- */
.split {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--lift-2);
}
.split__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 32px;
  padding: 26px 32px 0;
}
.split__head .eyebrow {
  margin: 0;
}
.split__whole {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.split__whole em {
  font-style: normal;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 400;
  color: var(--muted-soft);
  margin-left: 10px;
}
.split__bar {
  display: flex;
  gap: 4px;
  height: 76px;
  margin: 24px 32px 34px;
}
.split__bar i {
  display: block;
  border-radius: 8px;
  transition: width 0.35s var(--ease);
}
.split__bar .p {
  background: var(--field);
}
.split__bar .n {
  background: var(--sprout);
}
.split__bar .f {
  background: var(--soil);
  min-width: 7px;
}

/* row sits inside the panel's 32px padding: margins zeroed, cols make it up */
.split__keys {
  padding: 0 24px 32px;
  margin-inline: 0;
}
.split__key {
  position: relative;
  overflow: hidden;
  height: 100%;
  border-radius: 14px;
  padding: 22px 22px 24px;
  background: var(--haze);
  border: 1px solid var(--line-soft);
}
.split__key::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}
.split__key--principal::before {
  background: var(--field);
}
.split__key--margin::before {
  background: var(--sprout);
}
.split__key--fee::before {
  background: var(--soil);
}
.split__key--margin {
  background: rgba(71, 178, 107, 0.11);
  border-color: rgba(71, 178, 107, 0.2);
}
.split__key--fee {
  background: var(--soil-haze);
  border-color: #eadcc6;
}
.split__key__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.split__key__name {
  font-family: var(--label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-soft);
  margin: 0;
}
/* PNG icons: each card's colour is baked into its own file */
.split__icon {
  display: block;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  margin-top: -2px;
}
.split__key__val {
  display: block;
  font-family: var(--display);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin: 0 0 12px;
}
.split__key--principal .split__key__val {
  color: var(--field);
}
.split__key--fee .split__key__val {
  color: var(--soil);
}
.split__key p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  font-weight: 500;
}

.split__foot {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  padding: 24px 32px;
  background: var(--paper);
  border-top: 1px solid var(--line-soft);
}
.split__foot p {
  font-size: 15px;
  line-height: 1.62;
  color: var(--muted);
  max-width: 62ch;
  font-weight: 500;
}
.split__foot b {
  color: var(--ink);
  font-weight: 600;
}
.split__total {
  text-align: right;
}
.split__total span {
  display: block;
  font-family: var(--label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-soft);
  margin-bottom: 7px;
}
.split__total b {
  font-family: var(--display);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.05em;
  color: var(--field);
  font-variant-numeric: tabular-nums;
}

/* 12a · About ============================================================ */
.about {
  --bs-gutter-x: 60px;
}

/* Portrait panel. Stacked, it keeps a 4:5 shape; once the columns sit side by
   side it takes its height from the text column instead, so the two line up.
   The row stretches by default, which is what makes height:100% resolve. */
.about__media {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(160deg, #2c8552, #0c3020);
  border: 1px solid var(--line);
}
@media (min-width: 992px) {
  .about__media {
    aspect-ratio: auto;
    height: 100%;
  }
}
.about__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    112deg,
    rgba(255, 255, 255, 0.05) 0,
    rgba(255, 255, 255, 0.05) 2px,
    transparent 2px,
    transparent 16px
  );
}
.about__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--photo-wash);
}
.about__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.7s var(--ease);
}
.about.has-img .about__photo {
  opacity: 1;
}

.about__lede {
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 20px;
  max-width: 44ch;
  font-weight: 500;
}
.about__body p {
  font-size: 16px;
  line-height: 1.72;
  color: var(--muted);
  max-width: 54ch;
  font-weight: 500;
}
.about__body p + p {
  margin-top: 16px;
}

/* timeline — the year sits against the rail as a scale, not a third heading */
.tline {
  --rail-x: 74px;
  position: relative;
  margin-top: 36px;
}
.tline::before {
  content: "";
  position: absolute;
  left: var(--rail-x);
  top: 10px;
  bottom: 16px;
  width: 1px;
  background: linear-gradient(180deg, var(--line), var(--line) 34%, var(--sprout));
}
.tline__item {
  position: relative;
  display: grid;
  grid-template-columns: var(--rail-x) 1fr;
  column-gap: 26px;
  padding-bottom: 34px;
}
.tline__item:last-child {
  padding-bottom: 0;
}
.tline__item::before {
  content: "";
  position: absolute;
  left: calc(var(--rail-x) - 5.5px);
  top: 5px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  z-index: 2;
  background: var(--canvas);
  border: 2px solid var(--line);
}
.tline__item--now::before {
  background: var(--sprout);
  border-color: var(--sprout);
  box-shadow: 0 0 0 5px rgba(71, 178, 107, 0.16);
}
.tline__year {
  grid-row: 1/3;
  align-self: start;
  text-align: right;
  padding-right: 18px;
  line-height: 1;
  margin-top: 2px;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--muted-soft);
  font-variant-numeric: tabular-nums;
}
.tline__item--now .tline__year {
  color: var(--field);
}
.tline__item--now .tline__year::after {
  content: "Now";
  display: block;
  margin-top: 9px;
  font-family: var(--label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sprout);
}
.tline h3 {
  grid-column: 2;
  font-size: 17px;
  line-height: 1.3;
  margin-bottom: 7px;
}
.tline p {
  grid-column: 2;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 44ch;
  font-weight: 500;
}

/* the arrangement — same interlocking chevrons as the money flow */
/* breathing room between the About block above and the chevron strip */
.arrange {
  margin-top: 76px;
}
.arrange__cell {
  position: relative;
  height: 100%;
  background: var(--haze);
  border-radius: 14px;
}
.arrange__inner {
  padding: 24px 26px 26px;
  height: 100%;
}
.arrange__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(22, 81, 58, 0.09);
  color: var(--field);
  margin-bottom: 26px;
}
/* the dt/dd pair is its own list so the cell can also hold an icon and a
   line of copy, which a <dl> may not contain directly */
.arrange__pair {
  margin: 0;
}
.arrange__cell dt {
  font-family: var(--label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--field);
  margin-bottom: 10px;
}
.arrange__cell dd {
  margin: 0 0 14px;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.025em;
}
.arrange__cell p {
  font-size: 15px;
  line-height: 1.68;
  color: var(--muted);
  font-weight: 500;
}

.arrange__cell--lift {
  background: #e1ede4;
}
.arrange__cell--solid {
  background: var(--field);
}
.arrange__cell--solid .arrange__icon {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.arrange__cell--solid dt {
  color: var(--sprout-lit);
}
.arrange__cell--solid dd {
  color: #fff;
}
.arrange__cell--solid p {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 500;
}

@media (min-width: 1200px) {
  .arrange__cell {
    margin-left: -22px;
    border-radius: 0;
    clip-path: polygon(
      0 0,
      calc(100% - 26px) 0,
      100% 50%,
      calc(100% - 26px) 100%,
      0 100%,
      26px 50%
    );
  }
  .arrange > [class*="col"]:first-child .arrange__cell {
    margin-left: 0;
    clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%);
  }
  .arrange > [class*="col"]:last-child .arrange__cell {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 26px 50%);
  }
  .arrange__inner {
    padding: 26px 27px 28px 58px;
  }
  .arrange > [class*="col"]:first-child .arrange__inner {
    padding-left: 38px;
  }
}

/* 13 · Growers =========================================================== */
/* Quote and signature share one hand — the same person writing. */
#growers {
  position: relative;
  overflow: hidden;
}
#growers::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.04) 0,
      rgba(255, 255, 255, 0.04) 1px,
      transparent 1px,
      transparent 9px
    ),
    radial-gradient(120% 160% at 88% 0%, rgba(71, 178, 107, 0.24), transparent 62%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000);
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000);
}
#growers > .container {
  position: relative;
  z-index: 1;
}

/* bordered panel on a .row: margins zeroed, 32px inset split with the gutter */
.growers {
  --bs-gutter-x: 40px;
  align-items: center;
  padding: 28px 12px;
  border-radius: 18px;
  margin: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.growers__left {
  display: grid;
  gap: 20px;
}

.growers__quote {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
}
.growers__qmark {
  flex-shrink: 0;
  margin-top: 9px;
  color: var(--sprout);
  opacity: 0.85;
}
.growers__text {
  font-size: 1.6rem;
  font-weight: 400;
  font-style: italic;
  line-height: 1.5;
  letter-spacing: 0;
  color: #fff;
  max-width: 50ch;
  margin-left: 10px;
  margin-top: 12px;
}

.sign {
  display: flex;
  align-items: flex-end;
  gap: 20px;
}
.sign__mark {
  font-family: var(--hand);
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  color: var(--sprout-lit);
  transform: rotate(-2.5deg);
  transform-origin: left bottom;
  padding-bottom: 8px;
  padding-right: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
.sign__meta {
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.7);
  padding-bottom: 4px;
  font-weight: 400;
}
.sign__meta b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
}

.growers__figs {
  display: flex;
  margin: 0;
}
.growers__fig {
  padding: 0 26px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}
.growers__fig:first-child {
  border-left: 0;
  padding-left: 0;
}
.growers__fig:last-child {
  padding-right: 0;
}
.growers__fig dt {
  font-family: var(--label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
  margin-bottom: 7px;
}
.growers__fig dd {
  margin: 0;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #fff;
}

/* 14 · FAQ =============================================================== */
.faq {
  max-width: 820px;
  margin-inline: auto;
  --bs-accordion-bg: transparent;
  --bs-accordion-border-width: 0;
  --bs-accordion-border-radius: 0;
  --bs-accordion-btn-padding-x: 0;
  --bs-accordion-btn-padding-y: 24px;
  --bs-accordion-body-padding-x: 0;
  --bs-accordion-body-padding-y: 0;
  --bs-accordion-active-bg: transparent;
  --bs-accordion-active-color: var(--ink);
  --bs-accordion-btn-focus-box-shadow: none;
}
.faq .accordion-item {
  background: transparent;
  border-bottom: 1px solid var(--line);
}
.faq .accordion-item:first-of-type {
  border-top: 1px solid var(--line);
}
.faq .accordion-header {
  margin: 0;
}
.faq .accordion-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  box-shadow: none;
  font-family: var(--display);
  font-size: 18px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--ink);
}
.faq .accordion-button:hover {
  color: var(--field);
}
.faq .accordion-button:not(.collapsed) {
  background: none;
  box-shadow: none;
  color: var(--ink);
}
/* replace Bootstrap's chevron with the plus/minus sign */
.faq .accordion-button::after {
  display: none;
}
.faq__sign {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  background: var(--sprout);
  border-radius: 2px;
  transition: transform 0.28s var(--ease);
}
.faq__sign::before {
  left: 0;
  top: 9px;
  width: 20px;
  height: 2px;
}
.faq__sign::after {
  left: 9px;
  top: 0;
  width: 2px;
  height: 20px;
}
.faq .accordion-button:not(.collapsed) .faq__sign::after {
  transform: rotate(90deg);
}
.faq .accordion-body p {
  padding-bottom: 26px;
  font-size: 16px;
  line-height: 1.68;
  color: var(--muted);
  max-width: 68ch;
  font-weight: 500;
}

/* 15 · Footer ============================================================ */
.footer {
  position: relative;
  overflow: hidden;
  background: var(--field);
  color: #fff;
}

/* light falling in from the top right, as in the header bar */
.footer::after {
  content: "";
  position: absolute;
  top: -240px;
  right: -160px;
  width: 800px;
  height: 660px;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(71, 178, 107, 0.2), transparent 64%);
}

/* watermark — the brand mark blown up and bled off the right edge */
.footer__mark {
  position: absolute;
  right: -90px;
  bottom: -120px;
  width: 620px;
  height: 620px;
  pointer-events: none;
  opacity: 0.06;
  -webkit-mask-image: radial-gradient(70% 70% at 40% 40%, #000, transparent 78%);
  mask-image: radial-gradient(70% 70% at 40% 40%, #000, transparent 78%);
}
.footer > .container {
  position: relative;
  z-index: 1;
}

/* --- 1 · Call to action ------------------------------------------------- */
/* the rule must stop at the container edge: row margins and end padding zeroed */
.fcta {
  align-items: end;
  margin-inline: 0;
  padding-block: 76px 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.fcta > [class*="col"]:first-child {
  padding-inline-start: 0;
}
.fcta > [class*="col"]:last-child {
  padding-inline-end: 0;
}
.fcta__eyebrow {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 20px;
}
.fcta__rule {
  width: 44px;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
}
.fcta h2 {
  font-size: clamp(2.1rem, 3.7vw, 3.1rem);
  color: #fff;
  max-width: 17ch;
  letter-spacing: -0.035em;
}
.fcta p {
  margin-top: 16px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.66);
  max-width: 46ch;
  font-weight: 500;
}
.fcta .eyebrow {
  color: rgba(255, 255, 255, 0.7);
}
.fcta__side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 4px;
}
.fcta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.fcta__fine {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.66);
  font-weight: 500;
}
.fcta__fine i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
}

/* --- 2 · Directory ------------------------------------------------------ */
.fmain {
  margin-inline: 0;
  padding-block: 56px 48px;
}
.fmain__col {
  padding-inline: 36px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.fmain__col:first-child {
  padding-inline-start: 0;
  border-left: 0;
  padding-inline-end: 48px;
}
.fmain__col:last-child {
  padding-inline-end: 0;
}

.fbrand p {
  margin: 18px 0 24px;
  font-size: 15px;
  line-height: 1.66;
  color: rgba(255, 255, 255, 0.62);
  max-width: 36ch;
  font-weight: 500;
}
/* --- Season alerts ------------------------------------------------------ */
.falert {
  max-width: 400px;
}
.falert__field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 5px 5px 14px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition:
    border-color 0.2s var(--ease),
    background 0.2s var(--ease);
}
.falert__field:focus-within {
  border-color: var(--sprout);
  background: rgba(255, 255, 255, 0.1);
}
/* set by main.js when the address does not look like one */
.falert__field.is-bad {
  border-color: #c0643a;
}
.falert__icon {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.64);
  transition: color 0.2s var(--ease);
}
.falert__field:focus-within .falert__icon {
  color: var(--sprout-lit);
}
.falert input {
  flex: 1;
  min-width: 0;
  padding: 9px 0;
  border: 0;
  background: none;
  outline: none;
  color: #fff;
  font-size: 15px;
}
.falert input::placeholder {
  color: rgba(255, 255, 255, 0.62);
}
.falert__go {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: var(--sprout);
  color: #06231a;
  cursor: pointer;
  transition:
    background 0.18s var(--ease),
    transform 0.18s var(--ease);
}
.falert__go:hover {
  background: var(--sprout-lit);
  transform: translateX(2px);
}

.fmain h3 {
  font-family: var(--label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66);
  margin-bottom: 18px;
}
.fmain li + li {
  margin-top: 12px;
}
.fmain a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: rgb(255 255 255 / 80%);
  transition: color 0.18s var(--ease);
  font-weight: 400;
}
.fmain a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  background: var(--sprout-lit);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.26s var(--ease);
}
.fmain a:hover {
  color: #fff;
}
.fmain a:hover::after {
  transform: scaleX(1);
}
.fmain__flag {
  font-family: var(--label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(71, 178, 107, 0.2);
  color: var(--sprout-lit);
}

/* --- 3 · Base ----------------------------------------------------------- */
.fbase {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-block: 22px 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.fbase p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.71);
  font-weight: 500;
}
.fbase nav {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.fbase nav a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.18s var(--ease);
  font-weight: 400;
}
.fbase nav a:hover {
  color: #fff;
}
.fbase__note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-family: var(--label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.fbase__note i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--wheat);
}

/* 15a · Forms =========================================================== */
/* Form primitives, not auth-only: reuse them on a contact or apply page.
   Bootstrap's form classes are deliberately unused - its .form-control sizing
   and focus glow fight the theme, and overriding them costs more than this.

   Focus: the global :focus-visible rule in section 3 clears outlines and
   shadows site-wide. Fields signal focus by turning the border green
   instead, which that rule does not touch. See README.txt. */

.field {
  display: grid;
  gap: 7px;
}
.field label {
  font-family: var(--label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.field__hint {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted-soft);
}

/* --- Text inputs and selects -------------------------------------------- */
.inp {
  position: relative;
  display: flex;
  align-items: center;
}
.inp input,
.inp select {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  border-radius: var(--r-md);
  background: var(--canvas);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  font-weight: 500;
  transition: border-color 0.18s var(--ease);
}
.inp input::placeholder {
  color: var(--muted-soft);
  font-weight: 500;
}
.inp input:focus,
.inp select:focus {
  border-color: var(--field);
}
/* Chrome paints its own pale-yellow fill over autofilled fields. A long
   inset shadow repaints the canvas colour without touching the value. */
.inp input:-webkit-autofill,
.inp input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 40px var(--canvas) inset;
  -webkit-text-fill-color: var(--ink);
}

/* select: hide the OS control and draw our own caret from the icon font */
.inp select {
  appearance: none;
  padding-right: 44px;
  cursor: pointer;
}
.inp--select::after {
  content: "\ea4e";
  font-family: "remixicon";
  position: absolute;
  right: 15px;
  font-size: 18px;
  color: var(--muted);
  pointer-events: none;
}

/* --- Password field ----------------------------------------------------- */
.inp--pw input {
  padding-right: 52px;
}
.inp__peek {
  position: absolute;
  right: 7px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted-soft);
  font-size: 19px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition:
    background-color 0.18s var(--ease),
    color 0.18s var(--ease);
}
.inp__peek:hover {
  background: var(--haze);
  color: var(--field);
}
.inp__peek.is-on {
  color: var(--field);
}

/* --- Password strength -------------------------------------------------- */
/* Four segments; main.js sets .is-1 to .is-4 on the meter. */
.pwmeter {
  display: flex;
  gap: 5px;
  margin-top: 2px;
}
.pwmeter i {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--haze-deep);
  transition: background-color 0.25s var(--ease);
}
.pwmeter.is-1 i:nth-child(1) {
  background: #c4703f;
}
.pwmeter.is-2 i:nth-child(-n + 2) {
  background: var(--wheat);
}
.pwmeter.is-3 i:nth-child(-n + 3) {
  background: var(--sprout);
}
.pwmeter.is-4 i {
  background: var(--field);
}
.pwmeter__note {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted-soft);
}

/* --- Checkbox ----------------------------------------------------------- */
/* The real input is hidden and the square is drawn next to it, so the tick
   can be an icon glyph and the box can carry the theme's radius. */
.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 11px;
  align-items: start;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--muted);
}
.check input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.check__box {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--canvas);
  color: #fff;
  font-size: 13px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition:
    background-color 0.16s var(--ease),
    border-color 0.16s var(--ease);
}
.check__box::before {
  opacity: 0;
  transition: opacity 0.16s var(--ease);
}
.check input:checked + .check__box {
  background: var(--field);
  border-color: var(--field);
}
.check input:checked + .check__box::before {
  opacity: 1;
}
.check b {
  font-weight: 600;
  color: var(--ink);
}
.check a {
  color: var(--field);
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.check a:hover {
  border-bottom-color: var(--field);
}

/* --- Consent box -------------------------------------------------------- */
/* The risk acknowledgement, on soil rather than green: it is a warning to
   read, not another green call to action. */
.consent {
  padding: 16px;
  border: 1px solid #eadcc6;
  border-radius: var(--r-md);
  background: var(--soil-haze);
}
.consent .check {
  font-size: 14px;
  color: #5a462d;
}
.consent .check__box {
  border-color: #dec9a6;
}
.consent .check b {
  color: #3f3120;
}
.consent .check input:checked + .check__box {
  background: var(--soil);
  border-color: var(--soil);
}

/* 15b · Auth ============================================================ */
/* Sign in and sign up. Two full-height panels: the left one argues, the
   right one collects. Not a Bootstrap .row - the grid here is viewport
   furniture rather than content, and .row's gutters would break the
   full-bleed edge the green panel needs. Form parts come from section 18. */

.auth {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 100vh;
  min-height: 100dvh;
}

/* --- Left: the argument -------------------------------------------------- */
.auth__aside {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: 38px 56px 42px;
  background: var(--field);
  color: #fff;
}
/* the same tape texture and corner glow the hero uses */
.auth__aside::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.04) 0,
      rgba(255, 255, 255, 0.04) 1px,
      transparent 1px,
      transparent 9px
    ),
    radial-gradient(120% 150% at 88% 0%, rgba(71, 178, 107, 0.26), transparent 60%);
}
.auth__aside > * {
  position: relative;
  z-index: 1;
}
.auth__mark {
  position: absolute;
  right: -90px;
  bottom: -110px;
  width: 520px;
  opacity: 0.07;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(70% 70% at 40% 40%, #000, transparent 78%);
  mask-image: radial-gradient(70% 70% at 40% 40%, #000, transparent 78%);
}
.auth__body {
  max-width: 44ch;
}
.auth__body h1 {
  /* section 3 pins headings to --ink; on the green panel they follow it */
  color: inherit;
  font-family: var(--display);
  font-size: clamp(2rem, 2.9vw, 2.7rem);
  font-weight: 600;
  letter-spacing: -0.042em;
  line-height: 1.1;
  max-width: 16ch;
  margin: 0;
}
.auth__body h1 em {
  font-style: normal;
  color: var(--sprout-lit);
}

.auth__proof {
  list-style: none;
  display: grid;
  gap: 14px;
  margin: 30px 0 0;
  padding: 0;
}
.auth__proof li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 13px;
  align-items: start;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.8);
}
.auth__proof i {
  flex-shrink: 0;
  /* same line box as the text, so the glyph centres on the first line */
  line-height: inherit;
  color: var(--sprout-lit);
}
.auth__proof b {
  font-weight: 600;
  color: #fff;
}

.auth__foot {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: 22px;
  margin: 0;
}
.auth__foot > div {
  padding: 0 26px;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}
.auth__foot > div:first-child {
  border-left: 0;
  padding-left: 0;
}
.auth__foot dt {
  font-family: var(--label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.58);
  margin-bottom: 7px;
}
.auth__foot dd {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.04em;
  margin: 0;
}

/* --- Right: the form ----------------------------------------------------- */
.auth__pane {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px var(--gutter);
  background: var(--paper);
}
/* The banner's own way back, off until the two panels stack. Above 992 the
   corner link does this job; below it the link is hidden and this takes over,
   so there is only ever one of them on the page. */
.auth__home {
  display: none;
}
.auth__back {
  position: absolute;
  top: 34px;
  right: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  transition: color 0.18s var(--ease);
}
.auth__back:hover {
  color: var(--field);
}
.auth__form {
  width: min(430px, 100%);
}
.auth__top {
  margin-bottom: 28px;
}
.auth__top .eyebrow {
  display: block;
  margin-bottom: 11px;
}
.auth__top h2 {
  font-family: var(--display);
  font-size: 29px;
  font-weight: 600;
  letter-spacing: -0.038em;
  margin: 0;
}
.auth__top p {
  font-size: 16px;
  font-weight: 500;
  color: var(--muted);
  margin: 10px 0 0;
}
.auth__top a {
  color: var(--field);
  font-weight: 600;
  border-bottom: 1px solid var(--line);
  /* the underline butts against the question mark otherwise */
  margin-left: 5px;
}
.auth__top a:hover {
  border-bottom-color: var(--field);
}

.auth__fields {
  display: grid;
  gap: 16px;
}
.auth__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.auth__link {
  font-size: 15px;
  font-weight: 600;
  color: var(--field);
}
.auth__link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.auth__legal {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--muted-soft);
  text-align: center;
  margin: 26px 0 0;
}
.auth__legal a {
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.auth__legal a:hover {
  border-bottom-color: var(--muted);
}

/* 15c · Plot detail ====================================================== */
/* The single-plot page. Five components live here; everything else on that
   page reuses the header, footer, buttons, pills and section heads. */

/* --- Masthead ----------------------------------------------------------- */
.pmast {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-h) + 34px) 0 40px;
  background: var(--field);
  color: #fff;
}
/* the same tape texture the hero uses, so the two pages share one surface */
.pmast::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.04) 0,
      rgba(255, 255, 255, 0.04) 1px,
      transparent 1px,
      transparent 9px
    ),
    radial-gradient(120% 160% at 88% 0%, rgba(71, 178, 107, 0.22), transparent 62%);
}
.pmast > .container {
  position: relative;
  z-index: 1;
}
.pmast h1 {
  color: inherit;
  font-size: clamp(2rem, 3.8vw, 3rem);
  letter-spacing: -0.042em;
  margin: 0;
}
.pmast__where {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.68);
  max-width: 60ch;
  margin: 14px 0 0;
}
.pmast__foot {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

/* status: the state reads solid, the deadline is a quieter extension */
.status {
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  margin-bottom: 18px;
  border-radius: var(--r-pill);
  font-family: var(--label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.status__state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: var(--sprout);
  color: #06231a;
}
/* block, not flex: as flex items the text and the <b> wrapped separately on
   a phone, stacking "6 plots / closing in" beside "11 / days" */
.status__when {
  display: block;
  padding: 7px 15px;
  background: rgba(71, 178, 107, 0.16);
  color: #fff;
}
.status__when b {
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: -0.02em;
  /* keep "11 days" together when the badge wraps */
  white-space: nowrap;
}

/* --- Breadcrumb --------------------------------------------------------- */
.crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.crumbs a {
  color: rgba(255, 255, 255, 0.58);
  transition: color 0.16s var(--ease);
}
.crumbs a:hover {
  color: #fff;
}
.crumbs b {
  color: #fff;
  font-weight: 600;
}
.crumbs i {
  color: rgba(255, 255, 255, 0.32);
  font-size: 15px;
  line-height: 1;
}
.crumbs__home {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 13px;
}

/* --- Listing toolbar ----------------------------------------------------- */
/* Filters, sort and view for the plots index. Sticky, so the controls stay
   reachable while the grid scrolls under them. */
.ptools {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--canvas);
  border-bottom: 1px solid var(--line);
}
.ptools__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding-block: 16px;
}
.ptools__div {
  width: 1px;
  height: 26px;
  background: var(--line);
}

.fgroup {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}
.fgroup > .eyebrow {
  margin-right: 3px;
}
.pchip {
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--canvas);
  cursor: pointer;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  transition:
    border-color 0.16s var(--ease),
    background-color 0.16s var(--ease),
    color 0.16s var(--ease);
}
.pchip:hover {
  border-color: var(--field);
  color: var(--field);
}
.pchip[aria-pressed="true"] {
  background: var(--field);
  border-color: var(--field);
  color: #fff;
}

/* sort menu — the rail dropdown pattern, reused */
.psort {
  position: relative;
  margin-left: auto;
}
.psort__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--canvas);
  cursor: pointer;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.psort__btn:hover,
.psort__btn[aria-expanded="true"] {
  border-color: var(--field);
}
.psort__btn em {
  font-style: normal;
  font-weight: 500;
  color: var(--muted);
}
.psort__btn i {
  font-size: 16px;
  color: var(--muted);
  transition: transform 0.22s var(--ease);
}
.psort__btn[aria-expanded="true"] i {
  transform: rotate(180deg);
}
/* the button draws its own chevron; Bootstrap's caret would be a second one */
.psort .dropdown-toggle::after {
  display: none;
}
.psort__menu {
  --bs-dropdown-min-width: 232px;
  --bs-dropdown-padding-y: 6px;
  --bs-dropdown-bg: var(--canvas);
  --bs-dropdown-border-color: var(--line);
  --bs-dropdown-border-radius: var(--r-md);
  margin-top: 6px;
  box-shadow: var(--lift-panel);
}
.psort__opt {
  display: block;
  width: 100%;
  padding: 9px 14px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}
.psort__opt:hover {
  background: var(--haze);
}
.psort__opt[aria-selected="true"] {
  background: var(--haze);
  color: var(--field);
  font-weight: 600;
}

/* grid / list switch */
.pview {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--haze);
}
.pview button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 32px;
  border: 0;
  border-radius: 5px;
  background: none;
  cursor: pointer;
  font-size: 16px;
  color: var(--muted);
}
.pview button[aria-pressed="true"] {
  background: var(--canvas);
  color: var(--field);
  box-shadow: var(--lift-1);
}

/* result count line */
.pcount {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 14px;
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
}
.pcount b {
  color: var(--ink);
  font-weight: 600;
}
.pclear {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  color: var(--field);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- List view ----------------------------------------------------------- */
/* A modifier on the same card, not a second component: the photo moves to
   the side and the fact grid drops out. */
/* the row is still a 3-up grid, so the columns have to go full width
   before the card can lay itself out sideways */
.is-list > [class*="col-"] {
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
}
/* side-by-side needs real width: a 250px photo plus a 190px button leaves
   too little for the text until about 992 */
@media (min-width: 992px) {
  .is-list .plot-card {
    flex-direction: row;
    align-items: stretch;
    gap: 20px;
  }
  .is-list .plot-card__media {
    width: 250px;
    flex-shrink: 0;
    aspect-ratio: 16 / 10;
  }
  .is-list .plot-card__body {
    display: grid;
    grid-template-columns: 1.3fr 1fr auto;
    gap: 0 28px;
    align-items: center;
    flex: 1;
    padding: 4px 6px 4px 0;
  }
  .is-list .plot-card__head {
    margin-bottom: 2px;
  }
  .is-list .plot-card__place {
    margin-bottom: 0;
  }
  .is-list .plot-card__facts,
  .is-list .plot-card__foot {
    display: none;
  }
  .is-list .plot-card__cta {
    margin: 0;
    width: 190px;
  }
}

/* --- Empty state --------------------------------------------------------- */
/* A card grid whose cards are all filtered out stays in the page with zero
   height but keeps Bootstrap's negative top margin (-1.5rem on .g-4), which
   pulled the empty state up over the count line. The empty state gives the
   margin back. It is hidden whenever cards show, so nothing else moves. */
.row + .pempty {
  margin-top: 1.5rem;
}
.pempty {
  padding: 64px 24px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
}
.pempty > i {
  display: block;
  font-size: 34px;
  color: var(--line);
  margin-bottom: 16px;
}
.pempty b {
  display: block;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.pempty p {
  font-size: 16px;
  font-weight: 500;
  color: var(--muted);
  max-width: 44ch;
  margin: 8px auto 20px;
}

.pmore {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}

/* --- Page body ---------------------------------------------------------- */
.pbody {
  /* padding-block, not the shorthand: .container carries the side padding
     and a shorthand here would zero it, letting the row margins escape */
  padding-block: 44px 72px;
}
.pblock {
  padding-top: 40px;
  margin-top: 40px;
  border-top: 1px solid var(--line);
}
.pblock:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}
.pblock__head {
  margin-bottom: 22px;
}
.pblock__head .eyebrow {
  display: block;
  margin-bottom: 10px;
}
.pblock__head h2 {
  font-size: 23px;
  letter-spacing: -0.03em;
  margin: 0;
}
.pblock__head p {
  font-size: 16px;
  color: var(--muted);
  max-width: 62ch;
  margin: 10px 0 0;
}

/* the aerial */
.pshot {
  position: relative;
  overflow: hidden;
  aspect-ratio: 12 / 5;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--field-deep);
}
.pshot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pshot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--photo-wash);
}
.pshot__stamp {
  position: absolute;
  z-index: 1;
  left: 18px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.94);
  font-family: var(--label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--field);
}

/* fact grid - hairline cells rather than separate cards */
.pfacts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--line-soft);
}
.pfacts > div {
  background: var(--canvas);
  padding: 16px 18px;
}
.pfacts dt {
  font-family: var(--label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.pfacts dd {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

/* --- Grower ------------------------------------------------------------- */
.pgrower {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: center;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
}
.pgrower__av {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--soil-haze);
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  color: var(--soil);
}
.pgrower b {
  display: block;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.pgrower small {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
  margin-top: 4px;
}

/* --- Table -------------------------------------------------------------- */
/* First table in the template. Kept general: reuse it anywhere.
   Always wrap it: a table cannot reflow, so on a phone it scrolls in its own
   box rather than pushing the page sideways. */
/* Both axes are named: overflow-x:auto beside a visible overflow-y forces y
   to auto, which reserves a gutter and shows a scrollbar for nothing. */
.tbl-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.tbl th {
  text-align: left;
  padding: 12px 16px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  font-family: var(--label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.tbl td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 15px;
  font-weight: 500;
}
.tbl tr:last-child td {
  border-bottom: 0;
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-family: var(--label);
  font-size: 12px;
  font-weight: 600;
}
.tag--ok {
  background: rgba(71, 178, 107, 0.16);
  color: var(--field);
}
.tag--late {
  background: var(--soil-haze);
  color: #5a462d;
}

/* --- Reports and gated content ------------------------------------------ */
.prep {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 18px;
  padding: 18px 0;
  border-top: 1px solid var(--line-soft);
}
.prep:first-of-type {
  padding-top: 0;
  border-top: 0;
}
.prep__thumb {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--r-md);
}
.prep__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.prep h3 {
  font-size: 17px;
  letter-spacing: -0.025em;
  margin: 0 0 6px;
}
.prep p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

/* the locked state - dashed, so it reads as "not yet" rather than an error */
.locked {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  margin-top: 22px;
  padding: 22px 24px;
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
}
.locked > i {
  font-size: 22px;
  color: var(--muted);
}
.locked b {
  display: block;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.locked small {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
  margin-top: 3px;
}

.docs {
  list-style: none;
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
}
.docs li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-radius: var(--r-sm);
  background: var(--paper);
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
}
.docs i {
  flex-shrink: 0;
  font-size: 17px;
}

/* --- Invest panel ------------------------------------------------------- */
.ipanel {
  position: sticky;
  top: calc(var(--bar-h) + 20px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--canvas);
  box-shadow: var(--lift-2);
}
.ipanel__top {
  padding: 22px 22px 20px;
}
.ipanel__raised {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}
.ipanel__raised b {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}
.ipanel__raised em {
  font-style: normal;
  font-family: var(--label);
  font-size: 13px;
  font-weight: 600;
  color: var(--field);
}
.ipanel__track {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--haze-deep);
}
.ipanel__track i {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--field), var(--sprout));
}
.ipanel__of {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  margin: 10px 0 0;
}
.ipanel__rows {
  padding: 0 22px;
}
.ipanel__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 15px;
}
.ipanel__row span {
  color: var(--muted);
  font-weight: 500;
}
.ipanel__row b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ipanel__row .is-key {
  color: var(--field);
}
.ipanel__cta {
  padding: 20px 22px 22px;
}
.ipanel__risk {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  padding: 16px 22px;
  border-top: 1px solid #eadcc6;
  background: var(--soil-haze);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
  color: #5a462d;
}
.ipanel__risk i {
  flex-shrink: 0;
  line-height: inherit;
}

/* 15d · About =========================================================== */
/* Three components the other pages do not need: the limits list, the team
   grid, and the contact block. Everything else on that page reuses
   .sec-head, .about, .tline, .hstat, .arrange and .fcta. */

/* --- The limits ---------------------------------------------------------- */
/* Each row strikes out a practice and names what replaced it. No boxes: the
   rule does the dividing, and the strike is the only motion. */
.lims {
  border-top: 1px solid var(--line);
}
.lim {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 0.9fr) auto minmax(0, 1.35fr);
  gap: 0 26px;
  align-items: center;
  padding: 26px 4px;
  border-bottom: 1px solid var(--line);
}
.lim::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--paper);
  opacity: 0;
  transition: opacity 0.26s var(--ease);
}
.lim:hover::before {
  opacity: 1;
}
.lim__n {
  font-family: var(--label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.lim__no {
  position: relative;
  /* a grid item stretches by default, and the strike is drawn on this box -
     without this it runs the width of the column instead of the words */
  justify-self: start;
  display: inline-block;
  font-family: var(--display);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  color: var(--muted);
}
/* the strike is drawn on scroll, by main.js */
.lim__no::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  top: 52%;
  height: 2px;
  border-radius: 2px;
  background: var(--soil);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.16, 0.84, 0.34, 1);
}
.lim.is-struck .lim__no::after {
  transform: scaleX(1);
}
.lim__arrow {
  flex-shrink: 0;
  font-size: 21px;
  color: var(--line);
  transition: color 0.2s var(--ease);
}
.lim:hover .lim__arrow {
  color: var(--sprout);
}
.lim__yes b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.lim__yes p {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--muted);
  max-width: 52ch;
  margin-top: 7px;
}

@media (prefers-reduced-motion: reduce) {
  .lim__no::after {
    transform: scaleX(1);
    transition: none;
  }
}

/* --- Team ---------------------------------------------------------------- */
/* Offset portraits: every other tile drops, so the row reads as people
   rather than as a table of headshots. */
.omem {
  display: block;
}
.omem__ph {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, #2c8552, #0a2a1d);
  transition:
    transform 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}
/* the same crop-row texture the hero uses, so the placeholder reads as ours */
.omem__ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* a green wash, light over the faces and deeper at the foot: it pulls four
   different photographs into one set and ties them to the palette */
.omem__ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--photo-wash);
  transition: opacity 0.4s var(--ease);
}
/* lift the wash on hover so the photograph reads on its own */
.omem:hover .omem__ph::after {
  opacity: 0.45;
}
.omem:hover .omem__ph {
  transform: translateY(-6px);
  box-shadow: var(--lift-3);
}
/* A heading, so each team card carries its own name in the outline — but the
   heading rule's 1.2 is too tight for a row holding a name beside a role, so
   the line-height goes back to the body value the <div> used to inherit. */
.omem__name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  line-height: var(--bs-body-line-height);
  margin-top: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.omem__name b {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.omem__name em {
  font-style: normal;
  font-family: var(--label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--muted);
  white-space: nowrap;
}
.omem small {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  margin-top: 9px;
}
.omem p {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 8px;
}

/* --- Contact ------------------------------------------------------------- */
/* floating labels: the label sits in the field until there is something in it */
.fl {
  position: relative;
}
.fl input,
.fl textarea {
  width: 100%;
  padding: 26px 16px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  font-family: var(--body);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  transition:
    border-color 0.2s var(--ease),
    background-color 0.2s var(--ease);
}
.fl textarea {
  min-height: 128px;
  line-height: 1.6;
  resize: vertical;
}
.fl input:focus,
.fl textarea:focus {
  border-color: var(--field);
  background: var(--canvas);
}
.fl input::placeholder,
.fl textarea::placeholder {
  color: transparent;
}
.fl__label {
  position: absolute;
  left: 17px;
  top: 17px;
  pointer-events: none;
  font-size: 16px;
  font-weight: 500;
  color: var(--muted);
  transform-origin: left top;
  transition:
    transform 0.2s var(--ease),
    color 0.2s var(--ease);
}
.fl input:focus + .fl__label,
.fl input:not(:placeholder-shown) + .fl__label,
.fl textarea:focus + .fl__label,
.fl textarea:not(:placeholder-shown) + .fl__label {
  transform: translateY(-10px) scale(0.76);
  color: var(--field);
  font-weight: 600;
  letter-spacing: 0.08em;
}
.fl.is-bad input,
.fl.is-bad textarea {
  border-color: #b4562f;
}
.fl__err {
  display: none;
  font-size: 13px;
  font-weight: 600;
  color: #b4562f;
  margin-top: 7px;
}
.fl.is-bad .fl__err {
  display: block;
}

.cform {
  display: grid;
  gap: 16px;
}

/* The office cards under the form: their own strip on the page tone, with
   room above and below, but no heading of their own. */
.addrband {
  padding-block: 72px;
  background: var(--paper);
}
@media (max-width: 767.98px) {
  .addrband {
    padding-block: 52px;
  }
}

/* --- Contact: the office cards ------------------------------------------- */
.desk {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-1);
  transition: border-color 0.2s var(--ease);
}
.desk:hover {
  border-color: var(--field);
}
.desk__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 16px;
  border-radius: var(--r-md);
  background: var(--haze);
  color: var(--field);
  font-size: 20px;
}
.desk b {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.desk p {
  flex: 1;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  margin: 8px 0 16px;
}
.desk__mail {
  font-size: 15px;
  font-weight: 600;
  color: var(--field);
  border-bottom: 1px solid var(--line);
  align-self: flex-start;
  transition: border-color 0.18s var(--ease);
}
.desk__mail:hover {
  border-color: var(--field);
}
.desk__sla {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  font-family: var(--label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-soft);
}

/* the photograph beside the form, same wash as every other photo */
.cphoto {
  position: relative;
  overflow: hidden;
  margin: 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--field-deep);
}
/* From 992 the photo is as tall as the form beside it and runs off the right
   edge of the container, the way the risk panel does on the home page. The
   band clips it, so the page never scrolls sideways. */
.cband {
  overflow: hidden;
}
@media (min-width: 992px) {
  .cphoto {
    height: 100%;
    aspect-ratio: auto;
    border-right: 0;
    border-radius: var(--r-lg) 0 0 var(--r-lg);
    /* out to the window edge: the margin beside the container plus the
       container's own side padding, which Bootstrap sets to half its
       gutter. --bs-gutter-x is no use here: the row inside overrides it. */
    margin-right: calc(-1 * ((100vw - min(var(--container), 100vw)) / 2 + var(--gutter) / 2));
  }
}
.cphoto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cphoto::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--photo-wash);
}

.cform__send {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 12px;
}
.cform__send small {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
}
.cdone {
  display: none;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  padding: 22px 24px;
  border: 1px solid rgba(71, 178, 107, 0.28);
  border-radius: var(--r-md);
  background: rgba(71, 178, 107, 0.1);
}
.cdone.is-on {
  display: grid;
}
.cdone > i {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--field);
  color: #fff;
  font-size: 20px;
}
.cdone b {
  display: block;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.cdone p {
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
  margin-top: 3px;
}

/* 15e · Dashboard ======================================================== */
/* The one application page. Its shell is a full-width header plus a page-level
   nav column, NOT a fixed rail: see README.txt.

   Bootstrap owns the three layout splits (nav/content, the panel row, the KPI
   strip) so they are edited in the markup like every other page. Everything
   here is a component Bootstrap has no match for: the KPI strip, the season
   timeline, the value chart and the statement table.

   .tbl-scroll is scoped to .shell because the name is borrowed from the
   marketing pages; unscoped it would restyle every other page. */

/* =====================================================================
   15e · Dashboard  —  TEMPORARY HOME
   Moves into assets/css/style.css, before section 17, at integration.
   Nothing here redefines a token, .container, .btn or .eyebrow: the
   theme owns those, and a second definition would fight the marketing
   pages.

   The app shell is a sticky top bar, a page head and the content grid.
   Each band is full width; its content sits in a .container, the same
   1350px measure and Bootstrap steps as the marketing pages.
   ===================================================================== */

/* --- Shell -----------------------------------------------------------
   No rail. The header bands run the full width of the window and the
   navigation lives inside the content grid, so the page reads as one
   document rather than as chrome wrapped around a document. */
.shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.shell > main {
  flex: 1;
  min-width: 0;
}

/* --- Content grid ---------------------------------------------------- */
/* Bootstrap owns the nav/content split, the panel row and the gutter between
   them: a buyer edits col-lg-3 in the markup rather than a pixel value in
   here. .layout is only the band; its .container sets the width. */
.layout {
  padding-block: 30px 36px;
}

/* --- Page navigation -------------------------------------------------
   A plain list on the page's own ground: no card and no border, so it
   reads as navigation rather than as one more panel. It sticks below the
   top bar so it stays reachable while the content scrolls. */
.pnav {
  position: sticky;
  top: 104px;
  align-self: start;
}
.pnav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
  transition:
    background-color 0.18s var(--ease),
    color 0.18s var(--ease);
}
.pnav__link + .pnav__link {
  margin-top: 2px;
}
.pnav__link > i {
  flex-shrink: 0;
  opacity: 0.75;
}
.pnav__link:hover {
  background: var(--haze);
  color: var(--ink);
}
.pnav__link.is-on {
  background: var(--haze);
  color: var(--field);
  font-weight: 600;
}
.pnav__link.is-on > i {
  opacity: 1;
  color: var(--field);
}
/* the rail marks the page you are on without shifting the row */
.pnav__link.is-on::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 22px;
  border-radius: 0 3px 3px 0;
  background: var(--sprout);
}
.pnav__tag {
  margin-left: auto;
  font-family: var(--label);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(71, 178, 107, 0.16);
  color: var(--field);
}

/* off-canvas backdrop, only ever visible below 992 */
.pnav__scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 65;
  background: rgba(6, 26, 18, 0.5);
  border: 0;
  padding: 0;
}

/* --- Top bar -------------------------------------------------------
   Light, against the dark sidebar: two dark bands stacked would read as
   one heavy corner. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  height: 84px;
  flex-shrink: 0;
  background: var(--field);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  --ctl: 42px;
}
/* the bar's row: the brand, the menu button, the site links and the controls */
.topbar__inner {
  display: flex;
  align-items: center;
  gap: 22px;
  height: 100%;
}
/* the crop-row texture the marketing header uses, so the app reads as
   the same product */
.topbar::before,
.phead::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.045) 0,
      rgba(255, 255, 255, 0.045) 1px,
      transparent 1px,
      transparent 9px
    ),
    radial-gradient(120% 150% at 88% 0%, rgba(71, 178, 107, 0.26), transparent 60%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000);
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000);
}
.topbar > *,
.phead > * {
  position: relative;
  z-index: 1;
}
/* the controls are the anchor for their popups on a phone (see .appmenu) */
.topbar__end {
  position: relative;
}
.topbar__end {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.topbar .brand {
  flex-shrink: 0;
}
.topbar__burger {
  display: none;
  width: var(--ctl);
  height: var(--ctl);
  border-radius: var(--r-md);
  place-items: center;
  cursor: pointer;
  color: #fff;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.topbar__burger i {
  display: block;
  width: 16px;
  height: 10px;
  position: relative;
}
.topbar__burger i::before,
.topbar__burger i::after,
.topbar__burger i span {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.6px;
  background: currentColor;
  border-radius: 2px;
}
.topbar__burger i::before {
  top: 0;
}
.topbar__burger i span {
  top: 50%;
  margin-top: -0.8px;
}
.topbar__burger i::after {
  bottom: 0;
}

.appicon {
  position: relative;
  width: var(--ctl);
  height: var(--ctl);
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #fff;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition:
    background-color 0.18s var(--ease),
    border-color 0.18s var(--ease);
}
.appicon:hover,
.appmenu[data-open] .appicon {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
}
.appicon__dot {
  position: absolute;
  top: 8px;
  right: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sprout);
  box-shadow: 0 0 0 2px var(--field);
}

.appuser {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--ctl);
  padding: 0 14px 0 5px;
  border-radius: var(--r-pill);
  cursor: pointer;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition:
    background-color 0.18s var(--ease),
    border-color 0.18s var(--ease);
}
.appuser:hover,
.appmenu[data-open] .appuser {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
}
.appuser__av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--sprout);
  color: #06231a;
  font-size: 13px;
  font-weight: 700;
}
.appuser__name {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}
.appuser > i {
  color: rgba(255, 255, 255, 0.5);
  transition: transform 0.22s var(--ease);
}
.appmenu[data-open] .appuser > i {
  transform: rotate(180deg);
}

/* --- Bar menus ------------------------------------------------------ */
.appmenu {
  position: relative;
}
.appmenu__pop {
  /* --line is too close to both the white panel and the shadow halo outside it
     to register as an edge at 1px; this holds the same green cast a shade
     deeper so the panel closes properly against the page. */
  --pop-line: rgba(22, 81, 58, 0.22);
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  width: 310px;
  padding: 8px;
  background: var(--canvas);
  color: var(--ink);
  border: 1px solid var(--pop-line);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity 0.18s var(--ease),
    transform 0.18s var(--ease),
    visibility 0.18s;
}
.appmenu[data-open] .appmenu__pop {
  opacity: 1;
  visibility: visible;
  transform: none;
}
/* the notification popup carries three columns per row, so it is wider than
   the account menu - but never wider than the screen it opens on */
.appmenu__pop:has(.notif) {
  width: min(360px, calc(100vw - 36px));
  /* the head and the action run to the edges, so the rows carry the inset */
  padding: 0;
  /* three layers rather than one: a contact shadow, the body of the lift and a
     wide soft pool, so the panel sits off the page instead of on it */
  box-shadow: var(--lift-1), var(--lift-2), var(--lift-3);
}
.appmenu__pop:has(.notif) .appmenu__head {
  padding: 15px 16px;
  margin: 0;
  background: linear-gradient(180deg, var(--canvas), var(--paper));
  border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
}
.appmenu__pop:has(.notif) .notif {
  margin-inline: 6px;
}
.appmenu__pop:has(.notif) .notif:first-of-type {
  margin-top: 6px;
}
/* the strip above the action does the separating */
.appmenu__pop:has(.notif) .appmenu__sep {
  display: none;
}
.appmenu__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 8px;
}
.appmenu__head .appuser__av {
  background: var(--field);
  color: #fff;
  width: 40px;
  height: 40px;
  font-size: 15px;
}
.appmenu__head b {
  display: block;
  font-size: 16px;
  font-weight: 600;
}
.appmenu__head small {
  font-size: 13px;
  color: var(--muted-soft);
}
.appmenu__count {
  margin-left: auto;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(71, 178, 107, 0.14);
  box-shadow: inset 0 0 0 1px rgba(22, 81, 58, 0.1);
  font-family: var(--label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--field);
}
/* the plain rows of the account menu. The notification rows carry their own
   grid below, so they are kept out of this one - it used to win on
   specificity and lay them out as flex. */
.appmenu__pop > a:not(.notif) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  font-size: 15px;
  transition: background-color 0.14s var(--ease);
}
.appmenu__pop > a:hover {
  background: var(--haze);
}
.appmenu__pop > a:not(.notif) em {
  font-style: normal;
  font-family: var(--label);
  font-size: 12px;
  font-weight: 700;
  color: var(--field);
}
.appmenu__sep {
  height: 1px;
  background: var(--line-soft);
  margin: 8px 4px;
}

.notif {
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: 12px;
  align-items: start;
  padding: 10px;
  border-radius: var(--r-md);
  transition: background-color 0.14s var(--ease);
}
.notif:hover {
  background: var(--haze);
}
/* the kind of notice, in the same chip the cards elsewhere use */
.notif__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--haze);
  color: var(--muted);
  font-size: 16px;
  position: relative;
  transition: background-color 0.14s var(--ease);
}
/* unread: a live chip and a dot on its corner, ringed so it reads against
   both the chip and the row behind it */
.notif.is-new .notif__icon {
  background: rgba(71, 178, 107, 0.16);
  color: var(--field);
}
.notif.is-new .notif__icon::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sprout);
  box-shadow: 0 0 0 2px var(--canvas);
}
.notif:hover .notif__icon {
  background: var(--haze-deep);
}
.notif.is-new:hover .notif__icon {
  background: rgba(71, 178, 107, 0.24);
}
.notif b {
  display: block;
  padding-top: 1px;
  font-size: 15px;
  font-weight: 600;
}
.notif small {
  display: block;
  font-size: 13px;
  color: var(--muted-soft);
  margin-top: 2px;
}
.notif em {
  font-style: normal;
  font-family: var(--label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--muted-soft);
  white-space: nowrap;
  margin-top: 3px;
}

/* Mark all as read closes the popup, so it is centred and reads as the one
   action rather than as another row. */
.appmenu__pop:has(.notif) > a:not(.notif) {
  justify-content: center;
  margin: 6px 0 0;
  padding: 13px 12px;
  border-radius: 0 0 calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px);
  background: var(--paper);
  border-top: 1px solid var(--line-soft);
  font-size: 14px;
  font-weight: 600;
  color: var(--field);
}
.appmenu__pop:has(.notif) > a:not(.notif):hover {
  background: var(--haze);
}

/* --- Wallet chip and panel ---------------------------------------------
   The balance, on every dashboard page. The chip sits with the bell and the
   profile; the panel is the Overview's wallet card with the two money
   actions under it. */
.appwallet {
  display: flex;
  align-items: center;
  gap: 9px;
  height: var(--ctl);
  padding: 0 16px 0 5px;
  border-radius: var(--r-pill);
  cursor: pointer;
  color: #fff;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition:
    background-color 0.18s var(--ease),
    border-color 0.18s var(--ease);
}
.appwallet:hover,
.appmenu[data-open] .appwallet {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
}
.appwallet__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--sprout-lit);
  background: rgba(91, 199, 126, 0.16);
  box-shadow: inset 0 0 0 1px rgba(91, 199, 126, 0.28);
}
.appwallet__txt {
  display: grid;
  text-align: left;
  line-height: 1.05;
}
.appwallet__txt small {
  font-family: var(--label);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.appwallet__txt b {
  margin-top: 2px;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.appwallet__cents {
  font-size: 0.78em;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.62);
}

/* --- The bar, sized to the screen ------------------------------------------
   One set of sizes from 360 to 1920 made the bar read small on a monitor and
   heavy on a phone. Three steps instead: roomier from 1600, the middle sizes
   as the default, and tighter below 992. --ctl drives the round controls, so
   the bell, the menu button and the profile follow it. */
@media (min-width: 1600px) {
  .topbar {
    --ctl: 46px;
  }
  .topbar .brand__logo {
    height: 32px;
  }
  .topbar__nav .navbar-nav .nav-link {
    font-size: 16px;
  }
  .appwallet__txt b {
    font-size: 16.5px;
  }
  .appwallet__txt small {
    font-size: 10.5px;
  }
  .appuser__name {
    font-size: 16px;
  }
  .appuser__av {
    width: 34px;
    height: 34px;
    font-size: 14px;
  }
  .rail__label,
  .rail__link {
    font-size: 13px;
  }
  .tape__item {
    font-size: 14px;
  }
}
@media (max-width: 991.98px) {
  .topbar {
    --ctl: 40px;
  }
  .topbar .brand__logo {
    height: 28px;
  }
  .appwallet__txt b {
    font-size: 14.5px;
  }
  .rail__label,
  .rail__link {
    font-size: 11.5px;
  }
  .tape__item {
    font-size: 12.5px;
  }
}
/* On a phone the balance is a round button like the bell: the figure is in the
   panel one tap away, and the bar keeps its room for the menu and the profile.
   The text stays in the markup, clipped rather than removed, so the button is
   still announced as "Balance $2,416.00". */
@media (max-width: 575.98px) {
  .topbar {
    --ctl: 38px;
  }
  .appwallet {
    width: var(--ctl);
    height: var(--ctl);
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    gap: 0;
  }
  .appwallet__icon {
    display: grid;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: none;
    box-shadow: none;
    font-size: 18px;
  }
  .appwallet__txt {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .appuser__av {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }
}

.walletpop {
  width: min(320px, calc(100vw - 36px));
  padding: 0;
  box-shadow: var(--lift-1), var(--lift-2), var(--lift-3);
}
/* the card runs to the panel's edges; its own frame would double the border */
.walletpop__card {
  border: 0;
  box-shadow: none;
  border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
}
.walletpop__acts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 14px 14px 12px;
}
.walletpop__foot a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  border-top: 1px solid var(--line-soft);
  border-radius: 0 0 calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px);
  background: var(--paper);
  font-size: 14px;
  font-weight: 600;
  color: var(--field);
  transition: background-color 0.14s var(--ease);
}
.walletpop__foot a:hover {
  background: var(--haze);
}
.walletpop__foot i {
  transition: transform 0.16s var(--ease);
}
.walletpop__foot a:hover i {
  transform: translateX(2px);
}
/* From 1200 the bar also carries the site links. Until the container reaches
   its full 1350px at 1400, the links, the balance and a named profile do not
   all fit, so the profile drops to its initials - the balance is the one that
   has to stay readable. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .appuser__name {
    display: none;
  }
  .appuser {
    padding-right: 8px;
  }
}
/* The bar tightens its own gaps on the narrowest phones. */
@media (max-width: 419.98px) {
  /* "Browse open plots" fills its half here, so the pair loses a little side
     padding rather than the label losing its breathing room */
  .nav__mobile-actions .btn {
    --bs-btn-padding-x: 10px;
  }
  /* the container keeps a 24px gutter here, so the bar tightens its own gaps */
  .topbar__inner {
    gap: 10px;
  }
  .topbar__end {
    gap: 6px;
  }
}

/* --- Page body ------------------------------------------------------
   Each block keeps its own breathing room and a rule between it and the
   next, so the column still reads as separate sections. The side padding
   belongs to .layout now. */
.band {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-block: 30px;
}
.band:first-child {
  padding-top: 0;
}
.band:last-child {
  padding-bottom: 0;
}
.band + .band {
  border-top: 1px solid var(--line);
}
/* the shorter panel used to stop early and leave a hole under it;
   Bootstrap columns stretch, and .panel--fill takes the full height */

/* --- Page head ------------------------------------------------------
   The greeting keeps its size: this is the one line on the page that
   says whose money this is. */
/* A band, not a card: it sits outside .wrap so it runs the full width
   of the work area. Its side padding matches .wrap so the greeting
   lines up with the content below it. */
.phead {
  position: relative;
  overflow: hidden;
  padding-block: 30px;
  background: var(--field);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.phead__inner {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}
.phead__pic {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, var(--sprout), #2c8552);
  color: #06231a;
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  box-shadow: 0 0 0 5px rgba(71, 178, 107, 0.18);
}
.phead__tick {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--sprout);
  color: #06231a;
  box-shadow: 0 0 0 3px var(--field);
}
/* h1 is pinned to --ink by the theme (--bs-heading-color), and that
   direct declaration beats inheriting #fff from .phead: without this the
   greeting renders dark green on dark green. */
.phead__name {
  color: inherit;
  font-family: var(--display);
  font-size: clamp(1.9rem, 2.6vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin: 0;
}
.phead__name em {
  font-style: normal;
  color: var(--sprout-lit);
}
.phead__sub {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 10px 0 0;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.62);
}
.phead__sub b {
  font-weight: 600;
  color: #fff;
}
/* Direct children only. The word animation wraps every word in
   <span class="w"><i>…</i></span>, so a bare "i" here would size each
   word to 4px and stack the whole line on one spot. */
.phead__sub > i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}
.phead__acts {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-left: auto;
}

/* --- Section head --------------------------------------------------- */
.shead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.shead h2 {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin: 7px 0 0;
}
.golink {
  font-size: 15px;
  font-weight: 600;
  color: var(--field);
  white-space: nowrap;
}
/* the same link look on a button that runs an action instead of navigating */
button.golink {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
button.golink:hover {
  text-decoration: underline;
}

.segment {
  display: inline-flex;
  padding: 4px;
  background: var(--haze);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
.segment button {
  padding: 8px 16px;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  transition: background-color 0.18s var(--ease);
}
.segment button.is-on {
  background: var(--field);
  color: #fff;
}

/* --- Panel ---------------------------------------------------------- */
/* No overflow clipping: a dropdown or picker inside a panel has to be able to
   open past its edge. The pieces that paint to the rounded corners instead
   take the corner radius themselves, below. */
.panel {
  --panel-in: calc(var(--r-lg) - 1px);
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-1);
}
.panel > :first-child {
  border-top-left-radius: var(--panel-in);
  border-top-right-radius: var(--panel-in);
}
.panel > :last-child {
  border-bottom-left-radius: var(--panel-in);
  border-bottom-right-radius: var(--panel-in);
}
/* bands one level down that still reach the panel's corners: the timeline's
   month header and total, and the reply box at the foot of a ticket */
.panel .tl__months {
  border-top-left-radius: var(--panel-in);
  border-top-right-radius: var(--panel-in);
}
.panel .tl__sum,
.panel .reply {
  border-bottom-left-radius: var(--panel-in);
  border-bottom-right-radius: var(--panel-in);
}
.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line-soft);
}
.panel__head h2 {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin: 0;
}
.panel__head small {
  display: block;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted-soft);
  margin-top: 3px;
}
.panel__act {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--field);
  white-space: nowrap;
}
.panel__body {
  padding: 22px;
}
/* a second part inside one panel body, ruled off from the first */
.panel__sub {
  margin: 24px 0 2px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-soft);
}
.panel--fill {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* A side panel next to a long form: it keeps its own height rather than
   stretching into empty space, and stays in view while the form scrolls. */
@media (min-width: 1200px) {
  .panel--stick {
    position: sticky;
    top: calc(84px + 20px);
  }
}
.panel__body--grow,
.panel__list {
  flex: 1;
}
.panel__list {
  display: flex;
  flex-direction: column;
}
.panel__list .rep {
  flex: 1;
}
.panel__foot {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  padding: 14px 22px;
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.panel__foot--note {
  display: block;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted-soft);
}
/* a label above its figure — the shape the KPI keys use, in miniature */
.kfig {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kfig em {
  font-style: normal;
  font-family: var(--label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-soft);
}
.kfig b {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

/* --- KPI row -------------------------------------------------------
   Sparklines were decoration; every cell shows the figure's own
   composition instead. */
.kpis {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--lift-1);
  margin: 0;
}
.kpi {
  padding: 22px 24px 24px;
  border-left: 1px solid var(--line-soft);
}
.kpi:first-child {
  border-left: 0;
}
.kpi--accent {
  background: linear-gradient(180deg, rgba(71, 178, 107, 0.07), transparent 60%);
}
.kpi__top {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 16px;
}
.kpi__top > i {
  flex-shrink: 0;
  color: var(--field);
}
.kpi--soil .kpi__top > i {
  color: var(--soil);
}
.kpi__label {
  font-family: var(--label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-soft);
}
.kpi__fig {
  display: block;
  margin: 0 0 16px;
  font-family: var(--display);
  font-size: clamp(1.9rem, 2.5vw, 1.1rem);
  font-weight: 700;
  letter-spacing: -0.048em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.kpi--soil .kpi__fig {
  color: var(--soil);
}
/* Four across inside the 1140px container, a long label such as "Available
   balance" takes two lines and drops its figure below its neighbours. Every
   label keeps room for two lines here, so the figures stay on one line. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .layout .kpi__top {
    min-height: 39px;
  }
}
.kpi__bar {
  display: flex;
  gap: 3px;
  height: 8px;
  margin-bottom: 12px;
}
.kpi__bar i {
  display: block;
  border-radius: 3px;
}
.kpi__key i {
  width: 8px;
  height: 8px;
  border-radius: 3px;
  flex-shrink: 0;
}
/* one colour scale, used by both the bar and its key */
.kpi .a {
  background: var(--field);
}
.kpi .b {
  background: var(--sprout);
}
.kpi .c {
  background: var(--sprout-lit);
}
.kpi .d {
  background: var(--haze-deep);
}
.kpi .s {
  background: var(--soil);
}
.kpi__key {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 13px;
  color: var(--muted-soft);
}
.kpi__key span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
/* A sentence, not a swatch legend. inline-flex would make every bare text
   node its own flex item and push them apart by the gap, which breaks the
   line up. */
.kpi__key--text {
  display: block;
  line-height: 1.5;
}
.kpi__key--text span {
  display: inline;
}
.kpi__key--text b {
  font-weight: 600;
  color: var(--ink);
}
.kpi__key b {
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.kpi__note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted-soft);
  margin-top: 12px;
}
.kpi__note b {
  font-weight: 600;
  color: var(--field);
}
.kpi--soil .kpi__note b {
  color: var(--soil);
}

/* The wallet: the one cell that is money the investor can act on today, so it
   leads the row in the product's own ground rather than as another white
   cell. Same texture as the page head above it. */
.kpi--wallet {
  position: relative;
  isolation: isolate;
  background: linear-gradient(160deg, var(--field) 0%, var(--field-deep) 100%);
  color: #fff;
  /* swatches for the split: cash bright, committed money quiet, money on its
     way out in a warm soil tone that still reads on the green */
  --w-cash: var(--sprout-lit);
  --w-held: rgba(255, 255, 255, 0.3);
  --w-out: #d2b48a;
}
.kpi--wallet::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.04) 0,
      rgba(255, 255, 255, 0.04) 1px,
      transparent 1px,
      transparent 9px
    ),
    radial-gradient(120% 90% at 100% 0%, rgba(91, 199, 126, 0.28), transparent 60%);
}
.kpi--wallet .kpi__top > i {
  color: var(--sprout-lit);
}
.kpi--wallet .kpi__label {
  color: rgba(255, 255, 255, 0.72);
}
.kpi--wallet .kpi__fig {
  margin-bottom: 6px;
  color: #fff;
}
/* the cents step down, so the whole figure still reads at a glance */
.kpi--wallet dd small {
  font-size: 0.56em;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.62);
}
.kpi__sub {
  margin: 0 0 16px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.66);
}
.kpi__sub b {
  font-weight: 600;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
/* a quiet way into the full wallet, pinned to the right of the label. Icon
   only: a text pill pushed the label onto a second line and dropped the
   balance out of line with the figures in the cells beside it. */
.kpi__link {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin: -4px -4px -4px auto;
  border-radius: 50%;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  transition:
    background-color 0.16s var(--ease),
    color 0.16s var(--ease);
}
.kpi__link i {
  transition: transform 0.16s var(--ease);
}
.kpi__link:hover {
  color: var(--field-deep);
  background: var(--sprout-lit);
}
.kpi__link:hover i {
  transform: translateX(2px);
}
.kpi--wallet .w {
  background: var(--w-cash);
}
.kpi--wallet .v {
  background: var(--w-held);
}
.kpi--wallet .p {
  background: var(--w-out);
}
/* read as a short statement: label left, amount right, one line each */
.kpi--wallet .kpi__key {
  display: grid;
  gap: 7px;
  color: rgba(255, 255, 255, 0.7);
}
.kpi--wallet .kpi__key span {
  display: flex;
}
.kpi--wallet .kpi__key b {
  margin-left: auto;
}
.kpi--wallet .kpi__key b {
  color: #fff;
}
.kpi--wallet .kpi__note {
  color: rgba(255, 255, 255, 0.66);
}
.kpi--wallet .kpi__note b {
  color: var(--sprout-lit);
}

/* --- Value chart ----------------------------------------------------
   A hand-written SVG, on purpose: the template ships no charting
   library, and one line and one fill do not need 40KB of JavaScript.
   Replace the path data from your own series. */
/* label column + plot area. The plot box spans exactly $6k to $12k, so
   the three gridlines line up with the three labels. */
.chart {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  gap: 6px 12px;
}
.chart__y {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: right;
  font-family: var(--label);
  font-size: 11px;
  font-weight: 700;
  color: var(--muted-soft);
  /* half a line, so each label centres on its rule */
  margin-block: -9px;
}
.chart__plot {
  position: relative;
  height: 168px;
  border-bottom: 1px solid var(--line-soft);
  background-image: linear-gradient(var(--line-soft) 1px, transparent 1px);
  background-size: 100% 50%;
}
.chart__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.chart__fill {
  fill: url(#chartFill);
}
.chart__line {
  fill: none;
  stroke: var(--field);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.chart__dot {
  fill: var(--sprout);
  stroke: var(--canvas);
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
}
.chart__scale {
  grid-column: 2;
  display: flex;
  justify-content: space-between;
  font-family: var(--label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-soft);
}
.chart__now {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 18px;
}
.chart__now b {
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.048em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.chart__delta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  background: rgba(71, 178, 107, 0.14);
  color: var(--field);
  font-family: var(--label);
  font-size: 13px;
  font-weight: 700;
}

/* --- Field reports --------------------------------------------------- */
.rep {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line-soft);
  color: inherit;
  transition: background-color 0.16s var(--ease);
}
.rep:last-child {
  border-bottom: 0;
}
.rep:hover {
  background: var(--paper);
}
.rep__dot {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--haze);
  color: var(--field);
}
.rep__dot--green {
  background: rgba(71, 178, 107, 0.14);
  color: var(--field);
}
.rep__dot--soil {
  background: var(--soil-haze);
  color: var(--soil);
}
.rep__dot--blue {
  background: rgba(22, 81, 58, 0.09);
  color: var(--field-deep);
}
.rep__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
}
.rep__meta em {
  font-style: normal;
  font-family: var(--label);
  font-size: 11px;
  font-weight: 700;
  color: var(--field);
  white-space: nowrap;
}
.rep__meta i {
  font-style: normal;
  font-size: 11px;
  font-family: var(--label);
  font-weight: 700;
  color: var(--muted-soft);
}
.rep b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}
.rep small {
  display: block;
  font-size: 13px;
  color: var(--muted-soft);
  margin-top: 2px;
}
.rep em {
  font-style: normal;
  font-size: 12px;
  font-family: var(--label);
  font-weight: 700;
  color: var(--muted-soft);
  white-space: nowrap;
}

/* --- Season timeline -----------------------------------------------
   Twelve columns, not eighteen: the longest plot has eleven months to
   run, so the extra six were empty grid. */
.tl {
  --months: 12;
}
.tl__months {
  display: grid;
  grid-template-columns: 252px 1fr 132px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.tl__spacer {
  border-right: 1px solid var(--line-soft);
}
.tl__spacer--end {
  border-right: 0;
  border-left: 1px solid var(--line-soft);
}
.tl__scale {
  display: grid;
  grid-template-columns: repeat(var(--months), 1fr);
}
.tl__m {
  position: relative;
  padding: 13px 0 11px;
  text-align: center;
  font-family: var(--label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-soft);
}
.tl__m.is-year {
  color: var(--field);
}
.tl__m em {
  display: block;
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted-soft);
  margin-top: 3px;
}
.tl__m + .tl__m::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--line-soft);
}
.tl__row {
  display: grid;
  grid-template-columns: 252px 1fr 132px;
  align-items: stretch;
  border-bottom: 1px solid var(--line-soft);
  color: inherit;
  transition: background-color 0.18s var(--ease);
}
.tl__row:last-of-type {
  border-bottom: 0;
}
.tl__row:hover {
  background: var(--paper);
}
.tl__label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 14px 15px 22px;
  border-right: 1px solid var(--line-soft);
}
.tl__label > div {
  min-width: 0;
  flex: 1;
}
.tl__label b {
  display: block;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.25;
}
.tl__label small {
  display: block;
  font-size: 13px;
  color: var(--muted-soft);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tl__meta {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 8px;
}
.tl__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-family: var(--label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tl__chip i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.tl__chip--green {
  background: rgba(71, 178, 107, 0.14);
  color: var(--field);
}
.tl__chip--green i {
  background: var(--sprout);
}
.tl__chip--pale {
  background: rgba(15, 58, 41, 0.1);
  color: var(--field-deep);
}
.tl__chip--pale i {
  background: var(--field-deep);
}
.tl__chip--soil {
  background: var(--soil-haze);
  color: var(--soil);
}
.tl__chip--soil i {
  background: var(--soil);
}
.tl__left {
  font-family: var(--label);
  font-size: 12px;
  font-weight: 700;
  color: var(--muted-soft);
}
.tl__go {
  flex-shrink: 0;
  color: var(--line);
  transition:
    color 0.18s var(--ease),
    transform 0.18s var(--ease);
}
.tl__row:hover .tl__go {
  color: var(--field);
  transform: translateX(2px);
}
/* The bar is proportional only. The soil rule at the left edge is today,
   and the figure lives in its own column so a long bar cannot clip it. */
.tl__track {
  position: relative;
  display: flex;
  align-items: center;
  padding: 16px 0;
  --col: calc(100% / var(--months));
  background-image:
    linear-gradient(
      90deg,
      transparent calc(var(--col) * 4 - 1px),
      var(--line) calc(var(--col) * 4 - 1px),
      var(--line) calc(var(--col) * 4),
      transparent calc(var(--col) * 4)
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent calc(var(--col) - 1px),
      var(--line-soft) calc(var(--col) - 1px),
      var(--line-soft) var(--col)
    );
}
.tl__track::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--soil);
  opacity: 0.55;
}
.tl__bar {
  height: 30px;
  border-radius: 0 8px 8px 0;
  flex-shrink: 0;
}
.tl__bar--green {
  background: linear-gradient(90deg, var(--field), var(--sprout));
}
.tl__bar--pale {
  background: linear-gradient(90deg, var(--field-deep), #3e9a63);
}
.tl__bar--soil {
  background: linear-gradient(90deg, #7a6244, var(--wheat));
}
.tl__end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  padding-right: 22px;
  white-space: nowrap;
}
.tl__end b {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.035em;
}
.tl__end em {
  font-style: normal;
  font-family: var(--label);
  font-size: 13px;
  font-weight: 700;
  color: var(--muted-soft);
}
.tl__sum {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 15px 22px;
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.tl__sum span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: var(--muted);
}
.tl__sum i {
  width: 20px;
  height: 8px;
  border-radius: 4px;
  flex-shrink: 0;
}
.tl__sum b {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.tl__total {
  margin-left: auto;
}
.tl__key--green {
  background: linear-gradient(90deg, var(--field), var(--sprout));
}
.tl__key--pale {
  background: linear-gradient(90deg, var(--field-deep), #3e9a63);
}
.tl__key--soil {
  background: linear-gradient(90deg, #7a6244, var(--wheat));
}

/* --- Statement ------------------------------------------------------
   Below its min-width this scrolls sideways inside .tbl-scroll rather
   than stacking: a stacked row loses its column headers entirely. */
/* The wrapper is .tbl-scroll. overflow-x:auto beside a visible
   overflow-y forces y to auto and reserves a gutter, so both axes are
   named. The min-width is the point below which the columns genuinely
   stop fitting — set it higher and you get a scrollbar for nothing. */
.shell .tbl-scroll {
  overflow-y: hidden;
}
.stmt {
  width: 100%;
  min-width: 560px;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
}
/* the movement cell carries the same icon-plus-two-lines shape as the
   field reports panel, so the two read as one family */
.stmt__mv {
  display: flex;
  align-items: center;
  gap: 13px;
}
.stmt__ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
}
.stmt__ico--in {
  background: rgba(71, 178, 107, 0.14);
  color: var(--field);
}
.stmt__ico--out {
  background: var(--haze);
  color: var(--muted);
}
.stmt__mv b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}
.stmt__mv small {
  display: block;
  font-size: 12.5px;
  color: var(--muted-soft);
  margin-top: 1px;
}
.stmt__plot {
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-family: var(--label);
  font-size: 12px;
  font-weight: 700;
  color: var(--field);
  white-space: nowrap;
  transition:
    border-color 0.16s var(--ease),
    background-color 0.16s var(--ease);
}
a.stmt__plot:hover {
  border-color: var(--field);
  background: var(--haze);
}
.stmt__plot--none {
  border-color: transparent;
  background: none;
  color: var(--muted-soft);
}
.stmt thead th {
  text-align: left;
  padding: 14px 22px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  font-family: var(--label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-soft);
}
.stmt th.num,
.stmt td.num {
  text-align: right;
}
.stmt tbody td {
  padding: 13px 22px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 15px;
  vertical-align: middle;
}
.stmt tbody tr:last-child td {
  border-bottom: 0;
}
.stmt tbody tr {
  transition: background-color 0.16s var(--ease);
}
.stmt tbody tr:hover {
  background: var(--paper);
}
.stmt__date {
  color: var(--muted-soft);
  white-space: nowrap;
  width: 120px;
}
.stmt__desc {
  font-weight: 500;
}
.stmt__plot {
  font-family: var(--label);
  font-size: 13px;
  font-weight: 700;
  color: var(--field);
  white-space: nowrap;
}
.stmt__amt {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.stmt__amt--in {
  color: var(--field);
}
.stmt tfoot td {
  padding: 14px 22px;
  background: var(--paper);
  border-top: 1px solid var(--line);
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}
.stmt tfoot .num {
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* --- Footer ---------------------------------------------------------
   The homepage footer, reused wholesale, container and all. */

/* --- Responsive ----------------------------------------------------
   Bootstrap's own breakpoints, matching the rest of the template. */

@media (max-width: 1199.98px) {
  /* The timeline holds twelve months plus a name column and a payout column:
     narrower than this they run into each other, so it keeps its own width and
     scrolls sideways instead.
     Both axes are named on purpose: overflow-x:auto next to a shorthand
     overflow:hidden forces overflow-y to auto, which shows a stray
     vertical scrollbar. */
  .tl {
    overflow-x: auto;
    overflow-y: hidden;
  }
  .tl__months,
  .tl__row,
  .tl__sum {
    min-width: 860px;
  }
  /* Same for the app tables: below this the columns squeeze and the movement
     names wrap to three lines. They keep the width their longest line needs
     (the widest is the transactions table at 869px) and scroll in their box. */
  .shell .tbl-scroll table {
    min-width: 880px;
  }
  .kpi:nth-child(odd) {
    border-left: 0;
  }
  .kpi:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line-soft);
  }
}

/* The result screens keep their buttons full size on a desktop and on a phone,
   where they have the room. Between them the column is narrow enough that the
   pair reads better at the small button metrics. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .result__acts .btn {
    --bs-btn-padding-y: 10px;
    --bs-btn-padding-x: 18px;
  }
}

@media (max-width: 991.98px) {
  /* one column: the nav slides in over the page instead */
  .layout {
    padding-block: 22px 28px;
  }
  .pnav {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 70;
    width: 272px;
    /* the sheet runs the full height of the screen and scrolls inside itself:
       seventeen links are taller than a phone. dvh follows the browser bars as
       they collapse; vh is the fallback where dvh is not supported. top and
       bottom alone do not stretch it here, so the height is set outright. */
    height: 100vh;
    height: 100dvh;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--canvas);
    border-right: 1px solid var(--line);
    transform: translateX(-100%);
    transition: transform 0.3s var(--ease);
    box-shadow: 0 0 60px rgba(6, 26, 18, 0.25);
  }
  .pnav.is-open {
    transform: none;
  }
  .shell:has(.pnav.is-open) ~ .pnav__scrim {
    display: block;
  }
  .topbar__burger {
    display: grid;
  }
  .topbar {
    height: 74px;
  }
  .topbar__inner {
    gap: 14px;
  }
  .phead {
    padding-block: 22px;
  }
}

@media (max-width: 767.98px) {
  .phead__inner {
    gap: 18px;
  }
  .phead__acts {
    width: 100%;
    margin-left: 0;
  }
  /* the balance chip needs the room below 768 */
  .appuser__name {
    display: none;
  }
  .appuser {
    padding-right: 8px;
  }
}

@media (max-width: 575.98px) {
  /* the borders assume a stack, which col-12 gives below 576 */
  .kpi,
  .kpi:nth-child(-n + 2) {
    border-left: 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .kpi:last-child {
    border-bottom: 0;
  }
  /* the wordmark gives way to the mark, as the public header does on a phone,
     so the balance chip still fits beside the bell and the profile */
  .topbar .brand__logo {
    display: none;
  }
  .topbar .brand .brand__mark {
    display: block;
  }
  .layout {
    padding-block: 18px 24px;
  }
  .phead {
    padding-block: 18px;
  }
  /* The bell sits well inside the bar at this width, so a popup anchored to it
     hangs off the left edge of the screen. Dropping the positioning on .appmenu
     anchors it to the control cluster instead, which ends where the bar does.
     The cluster is the same height as the bell and centred the same way, so the
     popup keeps the vertical position it has on a desktop. */
  .appmenu {
    position: static;
  }
  .phead__pic {
    width: 60px;
    height: 60px;
    font-size: 22px;
  }
  .phead__acts .btn {
    flex: 1;
  }
  .segment {
    width: 100%;
  }
  .segment button {
    flex: 1;
  }
  .shead {
    gap: 14px;
  }
  .panel__head {
    flex-wrap: wrap;
    gap: 10px;
  }
  .appmenu__pop {
    width: min(300px, calc(100vw - 32px));
  }
}

/* --- Small phones: one step down -------------------------------------------
   Everything here was sized for a laptop and reads oversized on a 360-479px
   screen: the display figures, the headings, the control padding, the field
   height and the icon tiles all come down a step. Three things deliberately
   do not move: body copy and labels (already at their floor), the 16px field
   text (anything smaller makes iOS zoom the page when a field takes focus),
   and the tap targets, which stay at 40px and over. Scoped to the app shell;
   the marketing pages have their own phone sizes. */
@media (max-width: 479.98px) {
  /* headings and figures */
  .shell .phead__name {
    font-size: 26px;
  }
  .shell .shead h2 {
    font-size: 19px;
  }
  .shell .panel__head h2,
  .shell .panel__head h2 small {
    font-size: 17px;
  }
  .shell .panel__head h2 small {
    font-size: 13px;
  }
  .shell .result h2 {
    font-size: 21px;
  }
  .shell .kpi__fig {
    font-size: 26px;
  }
  .shell .wbal b {
    font-size: 17px;
  }
  .shell .wbal__after b {
    font-size: 14px;
  }
  .shell .amt {
    padding: 8px 14px;
  }
  .shell .amt input {
    font-size: 24px;
  }

  /* controls: narrower, not shorter than a thumb */
  /* :not(.btn-sm) so the small variant is not pushed back up to full size */
  .shell .btn:not(.btn-sm) {
    --bs-btn-padding-y: 10px;
    --bs-btn-padding-x: 16px;
  }
  .shell .btn-sm {
    --bs-btn-padding-y: 8px;
    --bs-btn-padding-x: 13px;
  }
  .shell .pchip {
    padding: 8px 13px;
  }
  .shell .inp input,
  .shell .inp select,
  .shell .sel .pick__btn {
    height: 44px;
  }
  .shell .otp input {
    width: 34px;
    height: 44px;
    font-size: 17px;
  }

  /* icon tiles, and the glyphs inside them */
  .shell .phead__pic {
    width: 52px;
    height: 52px;
    font-size: 20px;
  }
  .shell .avup__pic {
    width: 60px;
    height: 60px;
    font-size: 22px;
  }
  .shell .result__icon {
    width: 50px;
    height: 50px;
  }
  .shell .tfa__shield {
    width: 44px;
    height: 44px;
  }
  .shell .hold__img {
    width: 44px;
    height: 44px;
  }
  .shell .drop__icon {
    width: 40px;
    height: 40px;
  }
  .shell .method__icon,
  .shell .setrow__icon {
    width: 36px;
    height: 36px;
  }
  .shell .nrow__icon,
  .shell .filerow__icon {
    width: 34px;
    height: 34px;
  }
  .shell .notice__icon,
  .shell .stmt__ico,
  .shell .toaster__icon {
    width: 30px;
    height: 30px;
  }
  .shell .kpi__top > [class*="ri-"] {
    font-size: 20px;
  }
  .shell .result__icon > [class*="ri-"] {
    font-size: 22px;
  }
  .shell .tfa__shield > [class*="ri-"] {
    font-size: 20px;
  }
  .shell .drop__icon > [class*="ri-"] {
    font-size: 18px;
  }
  .shell .method__icon > [class*="ri-"],
  .shell .setrow__icon > [class*="ri-"],
  .shell .nrow__icon > [class*="ri-"],
  .shell .filerow__icon > [class*="ri-"] {
    font-size: 15px;
  }
  .shell .notice__icon > [class*="ri-"],
  .shell .toaster__icon > [class*="ri-"] {
    font-size: 14px;
  }
}

/* 15f · Blog ============================================================= */
/* The two blog pages. Most of the listing is borrowed rather than rebuilt:
   .pmast and .crumbs for the page head, .ptools/.pchip/.pcount for the topic
   filter, .pempty and .pmore for the empty and load-more states. Only the card
   and the article are new.

   .note-card mirrors .plot-card: block class in full, elements abbreviated
   (.nc__*), the same convention section 8 uses. */

/* --- The note card ------------------------------------------------------- */
.note-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px;
  color: var(--ink);
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-1);
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}
.note-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--lift-2);
}

.nc__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-md);
}
.nc__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nc__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 22, 15, 0.5), transparent 42%), var(--photo-wash);
}
.nc__read {
  position: absolute;
  top: 11px;
  left: 13px;
  z-index: 2;
  font-family: var(--label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}
.nc__topic {
  position: absolute;
  top: 10px;
  right: 11px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.94);
  color: var(--field);
  font-family: var(--label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nc__topic i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sprout);
}

.nc__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 10px 10px;
}
.nc__body h3 {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.25;
  margin: 0;
}
.nc__body h3 a {
  transition: color 0.18s var(--ease);
}
.nc__body h3 a:hover {
  color: var(--field);
}
.nc__ex {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  margin: 10px 0 20px;
}
.nc__cta {
  margin-top: auto;
}
.nc__cta .btn {
  width: 100%;
}
.nc__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 8px 4px;
  margin-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.nc__by {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.nc__av {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--haze);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
  color: var(--field);
}
.nc__who b {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nc__date {
  font-family: var(--label);
  font-size: 13px;
  font-weight: 700;
  color: var(--muted-soft);
}

/* --- The byline in the page head ----------------------------------------- */
.byline {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.62);
}
.byline b {
  font-weight: 600;
  color: #fff;
}
/* the dots between name, date and read time: a space is too narrow in this face */
.byline__sep {
  margin-inline: 10px;
  color: rgba(255, 255, 255, 0.4);
}
.byline__av {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--sprout);
  color: #06231a;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
}

/* --- Reading progress ----------------------------------------------------- */
.prog {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 60;
  height: 3px;
  background: transparent;
}
.prog i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--field), var(--sprout));
}

/* --- The article --------------------------------------------------------- */
/* The lede plate: the article cover, below the green head like every other page. */
.lede {
  position: relative;
  aspect-ratio: 21 / 8;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--field-abyss);
  /* sits below the head like every other page: .pbody already gives 44px */
  margin: 0 0 44px;
}
.lede img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lede::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--photo-wash);
}

.reader {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

.toc {
  position: sticky;
  top: 34px;
}
.toc__t,
.share__t {
  font-family: var(--label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-soft);
  margin-bottom: 16px;
}
.toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 2px solid var(--line);
}
.toc li a {
  display: block;
  padding: 9px 0 9px 18px;
  margin-left: -2px;
  border-left: 2px solid transparent;
  font-size: 15px;
  line-height: 1.45;
  color: var(--muted);
  transition:
    color 0.2s var(--ease),
    border-color 0.2s var(--ease);
}
.toc li a:hover {
  color: var(--field);
}
.toc li a.is-on {
  color: var(--field);
  font-weight: 600;
  border-left-color: var(--sprout);
}

.share {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.share__t {
  margin-bottom: 12px;
}
.share__row {
  display: flex;
  gap: 8px;
}
.share__row a,
.share__row button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition:
    border-color 0.18s var(--ease),
    color 0.18s var(--ease);
}
.share__row a:hover,
.share__row button:hover {
  border-color: var(--field);
  color: var(--field);
}

/* --- Article typography ---------------------------------------------------
   Scoped to .art throughout. figure and figcaption are element selectors, so
   without the scope they would restyle every figure in the template. */
.art > p {
  font-size: 18px;
  line-height: 1.78;
  color: var(--ink);
}
.art > p + p {
  margin-top: 20px;
}
.art .stand {
  font-size: 21px;
  line-height: 1.66;
  color: var(--muted);
  padding-bottom: 26px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--line);
}
.art h2 {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  margin: 44px 0 16px;
  scroll-margin-top: calc(var(--header-h) + 20px);
}
.art h3 {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin: 30px 0 12px;
}
.art a.in {
  color: var(--field);
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.art a.in:hover {
  border-color: var(--field);
}
.art ul {
  display: grid;
  gap: 11px;
  margin: 18px 0;
  padding: 0;
  list-style: none;
}
.art ul li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 13px;
  font-size: 17px;
  line-height: 1.7;
}
.art ul i {
  margin-top: 7px;
  flex-shrink: 0;
  color: var(--sprout);
}
.art figure {
  margin: 38px 0;
}
.art figure .ph {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--field-abyss);
}
.art figure .ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.art figure .ph::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--photo-wash);
}
.art figcaption {
  font-size: 14px;
  color: var(--muted-soft);
  margin-top: 11px;
}

.pull {
  margin: 38px 0;
  padding: 28px 0 28px 30px;
  border-left: 3px solid var(--sprout);
}
.pull p {
  font-family: var(--display);
  font-size: clamp(1.35rem, 2vw, 1.65rem);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.42;
  color: var(--ink);
  max-width: 34ch;
}
.pull cite {
  display: block;
  font-style: normal;
  font-size: 15px;
  color: var(--muted-soft);
  margin-top: 14px;
}

/* A fact strip inside an article, in the same step cards as the season flow
   on the plot page (.flow, section 7). */
.artflow {
  margin: 38px 0;
}
.artflow__label {
  display: block;
  font-family: var(--label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--field);
  margin-bottom: 14px;
}
/* .art h3 styles article subheads; inside a step card the card title wins */
.art .flow__step h3 {
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.025em;
}
@media (max-width: 575.98px) {
  .art .flow__step h3 {
    font-size: 1.2rem;
  }
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.tags a {
  padding: 7px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  transition:
    border-color 0.18s var(--ease),
    color 0.18s var(--ease);
}
.tags a:hover {
  border-color: var(--field);
  color: var(--field);
}

.author {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: center;
  margin-top: 34px;
  padding: 24px;
  border-radius: var(--r-lg);
  background: var(--canvas);
  border: 1px solid var(--line);
}
/* a portrait, where the author has one; initials otherwise */
.nc__av img,
.byline__av img,
.author__av img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}
.author__av {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--haze);
  border: 1px solid var(--line);
  font-family: var(--display);
  font-size: 21px;
  font-weight: 700;
  color: var(--field);
}
.author b {
  display: block;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.author small {
  display: block;
  font-family: var(--label);
  font-size: 13px;
  font-weight: 700;
  color: var(--muted-soft);
  margin: 3px 0 9px;
}
.author p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

.nextprev {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 20px;
}
.np {
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--canvas);
  transition: border-color 0.2s var(--ease);
}
.np:hover {
  border-color: var(--field);
}
.np span {
  font-family: var(--label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-soft);
}
.np b {
  display: block;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.3;
  margin-top: 8px;
}
.np--next {
  text-align: right;
}

/* --- Responsive ----------------------------------------------------------
   Bootstrap's breakpoints, as everywhere else in this file. */
@media (max-width: 1199.98px) {
  .reader {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }
  /* the contents becomes a row of pills above the article */
  .toc {
    position: static;
    padding-bottom: 6px;
  }
  .toc ol {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-left: 0;
  }
  .toc li a {
    margin-left: 0;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-left: 0;
    border-radius: var(--r-pill);
  }
  .toc li a.is-on {
    border-color: var(--field);
  }
  .lede {
    aspect-ratio: 16 / 9;
  }
  .nextprev {
    grid-template-columns: minmax(0, 1fr);
  }
  .np--next {
    text-align: left;
  }
}

@media (max-width: 575.98px) {
  .lede {
    border-radius: var(--r-md);
  }
  .pull {
    margin: 28px 0;
    padding: 20px 0 20px 20px;
  }
  .author {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
}

/* 15g · Documents, contact & 404 ========================================= */
/* One layout carries all five policy pages: terms, privacy, cookies, the risk
   statement and complaints. The page head, the breadcrumb and the contents
   rail are borrowed (.pmast, .crumbs, .toc, .reader from 15f) — only the
   document body and the switcher between documents are new. */

/* --- Which document you are reading -------------------------------------- */
.docnav {
  display: grid;
  gap: 2px;
  margin-bottom: 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.docnav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--r-md);
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
  transition:
    background-color 0.16s var(--ease),
    color 0.16s var(--ease);
}
.docnav a:hover {
  background: var(--haze);
  color: var(--ink);
}
.docnav a.is-on {
  background: var(--haze);
  color: var(--field);
  font-weight: 600;
}
.docnav i {
  color: var(--muted-soft);
}
.docnav a.is-on i {
  color: var(--field);
}

/* --- The document -------------------------------------------------------- */
.doc__meta {
  display: flex;
  align-items: center;
  gap: 10px 18px;
  flex-wrap: wrap;
  padding-bottom: 24px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  color: var(--muted);
}
.doc__meta b {
  font-weight: 600;
  color: var(--ink);
}
.doc__meta i.dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--line);
}

.doc h2 {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  margin: 40px 0 14px;
  scroll-margin-top: calc(var(--header-h) + 20px);
}
.doc h2:first-child {
  margin-top: 0;
}
.doc h3 {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin: 26px 0 10px;
}
.doc p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--muted);
}
.doc p + p {
  margin-top: 16px;
}
.doc p b {
  font-weight: 600;
  color: var(--ink);
}
.doc a {
  color: var(--field);
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.doc a:hover {
  border-color: var(--field);
}
.doc ul {
  display: grid;
  gap: 10px;
  margin: 16px 0;
  padding: 0;
  list-style: none;
}
.doc ul li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
}
.doc ul li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 11px;
  border-radius: 50%;
  background: var(--sprout);
}

/* a definition row, for the cookie table and the data list */
.doc dl {
  display: grid;
  margin: 20px 0;
  border-top: 1px solid var(--line);
}
.doc dl > div {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 8px 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
}
.doc dt {
  font-family: var(--label);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--field);
}
.doc dd {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted);
}

/* the standing caveat at the foot of every policy */
.doc__note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  margin-top: 40px;
  padding: 22px 24px;
  border-radius: var(--r-lg);
  background: var(--soil-haze);
}
.doc__note i {
  color: var(--soil);
  font-size: 18px;
  line-height: 1;
  margin-top: 2px;
}
.doc__note p {
  font-size: 15px;
  line-height: 1.62;
  color: var(--muted);
}
.doc__note b {
  font-weight: 600;
  color: var(--ink);
}

/* --- Contact: the form and the offices beside it -------------------------- */
.contact-row {
  margin-top: 52px;
}
.cbox {
  height: 100%;
  padding: 30px;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-1);
}
.cbox--quiet {
  background: var(--paper);
  box-shadow: none;
}
.cbox__head {
  margin-bottom: 24px;
}
.cbox__head h2 {
  font-family: var(--display);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.035em;
  margin: 7px 0 0;
}
.cbox__head p {
  font-size: 15px;
  line-height: 1.62;
  color: var(--muted);
  margin-top: 10px;
}

.offices {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.offices li {
  padding: 18px 0;
  border-bottom: 1px solid var(--line-soft);
}
/* when the list closes the card (no note after it), drop the last divider */
.offices:last-child li:last-child {
  border-bottom: 0;
}
/* when the list opens the card (no heading above it), drop the top rule */
.offices:first-child {
  border-top: 0;
}
.offices b {
  display: block;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.offices span {
  display: block;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 5px;
}
.offices em {
  display: block;
  font-style: normal;
  font-family: var(--label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-soft);
  margin-top: 8px;
}
.offices__note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  margin-top: 20px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted-soft);
}
.offices__note i {
  color: var(--soil);
  font-size: 15px;
  line-height: 1.4;
}

@media (max-width: 575.98px) {
  .cbox {
    padding: 22px 20px;
  }
}

/* --- Track record: the per-crop bars -------------------------------------- */
.crop + .crop {
  margin-top: 18px;
}
.crop__top {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.crop__top b {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.crop__top span {
  font-size: 13px;
  color: var(--muted-soft);
}
.crop__top em {
  margin-left: auto;
  font-style: normal;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--field);
  font-variant-numeric: tabular-nums;
}
.crop__track {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: var(--haze-deep);
  overflow: hidden;
}
.crop__track i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--field), var(--sprout));
}

/* --- 404 -----------------------------------------------------------------
   Full-bleed green, like the auth aside: there is no page behind it to frame,
   so the chrome would only be something else to get wrong. */
.lost {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 40px var(--gutter);
  background: var(--field);
  color: #fff;
  text-align: center;
}
.lost::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.04) 0,
      rgba(255, 255, 255, 0.04) 1px,
      transparent 1px,
      transparent 9px
    ),
    radial-gradient(90% 70% at 50% 0%, rgba(71, 178, 107, 0.26), transparent 62%);
}
.lost__inner {
  position: relative;
  z-index: 1;
  max-width: 560px;
}
.lost__mark {
  width: 52px;
  height: 52px;
  margin: 0 auto 30px;
}
.lost__num {
  font-family: var(--display);
  font-size: clamp(5rem, 18vw, 9rem);
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 0.9;
  color: var(--sprout-lit);
  margin: 0;
}
.lost h1 {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.15;
  color: #fff;
  margin: 20px 0 0;
}
/* a class, not ".lost p": a descendant selector here outranks .lost__num
   and would size the big number like body copy */
.lost__text {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.66);
  margin: 14px auto 0;
  max-width: 46ch;
}
.lost__acts {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 30px;
}
/* the four places worth offering instead of a dead end */
.lost__links {
  display: flex;
  justify-content: center;
  gap: 8px 26px;
  flex-wrap: wrap;
  margin-top: 38px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.lost__links a {
  font-family: var(--label);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  transition: color 0.18s var(--ease);
}
.lost__links a:hover {
  color: #fff;
}

@media (max-width: 991.98px) {
  .doc dl > div {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 15h · App pages ======================================================== */
/* The account pages behind the dashboard nav: plots, the invest flow, the
   wallet, verification, profile and security. They sit in the 15e shell and
   reuse its parts (.phead, .layout, .pnav, .band, .panel, .kpis, .stmt, .rep)
   plus the form primitives from 15a. What is new here is what an app needs
   and a marketing page does not: status badges, a demo state switcher, a step
   indicator, a method picker, an amount field, upload boxes and settings rows.

   Every "state" on these pages (pending, approved, failed) is a demo view.
   main.js section 26 swaps them so a buyer can see each screen without a
   backend. Drive the real state from your server and delete the .statebar. */

/* --- Page head on an inner page ------------------------------------------- */
/* the section badge above an inner page's title: the .status badge from the
   plot pages, with its solid segment only */
.phead .status {
  margin-bottom: 12px;
}

/* --- The nav, once it is a long list -------------------------------------
   Seventeen links are taller than a laptop screen. A sticky column taller
   than the viewport can never show its last items, so above 992 it scrolls
   inside itself. The side padding keeps the active rail (left:-12px) from
   being clipped by that overflow. */
@media (min-width: 992px) {
  .pnav {
    max-height: calc(100vh - 124px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding-left: 12px;
    margin-left: -12px;
  }
}

/* --- Demo state switcher ---------------------------------------------------- */
.statebar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-bottom: 24px;
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  background: var(--canvas);
}
.statebar__label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-right: 4px;
  font-family: var(--label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-soft);
}

/* --- Status badge --------------------------------------------------------- */
.state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  background: var(--haze);
  color: var(--muted);
  font-family: var(--label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.state i {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: currentColor;
}
.state--ok {
  background: rgba(71, 178, 107, 0.14);
  color: var(--field);
}
.state--wait {
  background: var(--soil-haze);
  color: #6f5534;
}
.state--bad {
  background: rgba(180, 86, 47, 0.12);
  color: #9a4524;
}
.state--info {
  background: rgba(15, 58, 41, 0.08);
  color: var(--field-deep);
}

/* --- Inline notice ------------------------------------------------------- */
.notice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
}
.notice + .notice {
  margin-top: 12px;
}
.notice__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--haze);
  color: var(--field);
}
.notice b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.notice p {
  margin: 3px 0 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink-soft);
}
.notice--ok {
  background: rgba(71, 178, 107, 0.08);
  border-color: rgba(71, 178, 107, 0.28);
}
.notice--ok .notice__icon {
  background: rgba(71, 178, 107, 0.18);
}
.notice--wait {
  background: var(--soil-haze);
  border-color: #e6d9c4;
}
.notice--wait .notice__icon {
  background: #ebdfcd;
  color: var(--soil);
}
.notice--bad {
  background: rgba(180, 86, 47, 0.07);
  border-color: rgba(180, 86, 47, 0.26);
}
.notice--bad .notice__icon {
  background: rgba(180, 86, 47, 0.14);
  color: #9a4524;
}

/* --- Key / value list ------------------------------------------------------ */
.kv {
  display: grid;
  margin: 0;
}
.kv > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}
.kv > div:last-child {
  border-bottom: 0;
}
.kv dt {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
}
.kv dd {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.kv > .kv__total {
  margin-top: 4px;
  border-top: 1px solid var(--line);
}
.kv__total dt {
  font-weight: 600;
  color: var(--ink);
}
.kv__total dd {
  font-family: var(--display);
  font-size: 21px;
  letter-spacing: -0.035em;
}
.kv__up {
  color: var(--field);
}

.copybtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 10px;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--canvas);
  font-family: var(--label);
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  vertical-align: middle;
  cursor: pointer;
  transition:
    border-color 0.16s var(--ease),
    color 0.16s var(--ease),
    background-color 0.16s var(--ease);
}
.copybtn:hover {
  border-color: var(--field);
  color: var(--field);
}
.copybtn.is-done {
  border-color: var(--sprout);
  background: rgba(71, 178, 107, 0.1);
  color: var(--field);
}

/* --- Amount field --------------------------------------------------------- */
.amt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  transition:
    border-color 0.2s var(--ease),
    background-color 0.2s var(--ease);
}
.amt:focus-within {
  border-color: var(--field);
  background: var(--canvas);
}
.amt__cur {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 600;
  color: var(--muted-soft);
}
.amt input {
  flex: 1;
  min-width: 0;
  padding: 4px 0;
  border: 0;
  background: none;
  outline: none;
  font-family: var(--display);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.amt__presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.amt__note {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--muted-soft);
  transition: color 0.18s var(--ease);
}
.amt__note.is-bad {
  color: #9a4524;
}

/* The balance at the amount field: what the wallet holds now, and what it
   will hold once this amount moves. Same ground as the wallet card. */
.wbal {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px 16px 12px 12px;
  border-radius: var(--r-md);
  color: #fff;
  background: linear-gradient(160deg, var(--field) 0%, var(--field-deep) 100%);
}
.wbal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.04) 0,
      rgba(255, 255, 255, 0.04) 1px,
      transparent 1px,
      transparent 9px
    ),
    radial-gradient(120% 140% at 100% 0%, rgba(91, 199, 126, 0.26), transparent 60%);
}
.wbal__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  color: var(--sprout-lit);
  background: rgba(91, 199, 126, 0.16);
  box-shadow: inset 0 0 0 1px rgba(91, 199, 126, 0.28);
}
.wbal__now,
.wbal__after {
  display: grid;
  gap: 3px;
  line-height: 1.1;
}
.wbal__after {
  margin-left: auto;
  text-align: right;
}
.wbal small {
  font-family: var(--label);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.wbal b {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wbal__now b span {
  font-size: 0.66em;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.62);
}
/* the figure it will become is quieter than the figure it is */
.wbal__after b {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.86);
}
/* below 420 the icon costs the room that keeps both labels on one line; the
   bar chip drops its icon at the same width */
@media (max-width: 419.98px) {
  .wbal {
    padding-left: 14px;
  }
  .wbal__icon {
    display: none;
  }
}

/* more than the wallet holds: say by how much, and where to fix it. The
   sentence sits in its own span - bare text in a flex row splits into items. */
.amt__short {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: var(--r-md);
  font-size: 13px;
  color: #9a4524;
  background: #fbf1ea;
  box-shadow: inset 0 0 0 1px #f0d9c9;
}
.amt__short b {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.amt__short a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  font-weight: 700;
  color: var(--field);
}
.amt__short a i {
  transition: transform 0.16s var(--ease);
}
.amt__short a:hover i {
  transform: translateX(2px);
}
/* a held button says so, rather than looking merely pale */
.btn[data-amt-guard]:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* --- Method picker (radio cards) ----------------------------------------- */
.methods {
  display: grid;
  gap: 10px;
}
/* cards side by side that wrap by content width, not by a fixed column count:
   a label never breaks before the row does */
.methods--row {
  display: flex;
  flex-wrap: wrap;
}
.methods--row > .method {
  flex: 1 1 200px;
}
.method {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--canvas);
  cursor: pointer;
  transition:
    border-color 0.18s var(--ease),
    background-color 0.18s var(--ease),
    box-shadow 0.18s var(--ease);
}
.method:hover {
  border-color: var(--field);
}
/* no icon: two columns, so short labels like "Driving licence" stay on one line */
.method--compact {
  grid-template-columns: minmax(0, 1fr) auto;
  padding-block: 13px;
}
.method input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.method__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 11px;
  background: var(--haze);
  color: var(--field);
}
.method__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* a payment provider's mark: on white, framed, at its own proportions */
.method__icon--brand {
  background: var(--canvas);
  box-shadow: inset 0 0 0 1px var(--line);
}
.method__icon--brand img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.method b {
  display: block;
  font-size: 15px;
  font-weight: 600;
}
.method small {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--muted-soft);
}
.method__tick {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  color: transparent;
  transition:
    background-color 0.18s var(--ease),
    border-color 0.18s var(--ease),
    color 0.18s var(--ease);
}
/* the sibling selector covers browsers without :has() */
.method input:checked ~ .method__tick {
  border-color: var(--field);
  background: var(--field);
  color: #fff;
}
.method:has(input:checked) {
  border-color: var(--field);
  background: rgba(71, 178, 107, 0.05);
  box-shadow: inset 0 0 0 1px var(--field);
}
.method:has(input:focus-visible) {
  box-shadow:
    inset 0 0 0 1px var(--field),
    0 0 0 3px rgba(22, 81, 58, 0.22);
}

/* --- Step indicator -------------------------------------------------------- */
.wizard {
  display: flex;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}
.wizard li {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted-soft);
  white-space: nowrap;
}
.wizard li:last-child {
  flex: 0 0 auto;
}
.wizard li:not(:last-child)::after {
  content: "";
  flex: 1;
  min-width: 16px;
  height: 2px;
  margin-inline: 10px 4px;
  border-radius: 2px;
  background: var(--line);
}
.wizard__n {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  background: var(--canvas);
  font-family: var(--label);
  font-size: 13px;
  font-weight: 700;
  color: var(--muted-soft);
}
.wizard li.is-on {
  color: var(--ink);
}
.wizard li.is-on .wizard__n {
  border-color: var(--field);
  background: var(--field);
  color: #fff;
}
.wizard li.is-done .wizard__n {
  border-color: var(--sprout);
  background: rgba(71, 178, 107, 0.14);
  color: var(--field);
}
.wizard li.is-done::after {
  background: var(--sprout);
}

/* --- Upload box ------------------------------------------------------------ */
.drop {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 28px 20px;
  text-align: center;
  border: 1.5px dashed var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  cursor: pointer;
  transition:
    border-color 0.18s var(--ease),
    background-color 0.18s var(--ease),
    box-shadow 0.18s var(--ease);
}
.drop:hover,
.drop.is-over {
  border-color: var(--field);
  background: rgba(71, 178, 107, 0.05);
}
.drop:focus-within {
  border-color: var(--field);
  box-shadow: 0 0 0 3px rgba(22, 81, 58, 0.18);
}
/* the input covers the box, so a click or a dropped file lands on it */
.drop input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.drop__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--haze);
  color: var(--field);
}
.drop b {
  font-size: 15px;
  font-weight: 600;
}
.drop small {
  font-size: 13px;
  color: var(--muted-soft);
}
.drop__file {
  display: none;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--canvas);
  font-size: 13px;
  font-weight: 600;
  color: var(--field);
}
.drop.has-file .drop__file {
  display: inline-flex;
}

/* --- Settings row and toggle -------------------------------------------------- */
.setrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line-soft);
}
.setrow:last-child {
  border-bottom: 0;
}
.setrow__main {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
/* with badges under it the text runs well past the icon, which then belongs
   beside the name rather than the middle */
.setrow__main:has(.setrow__badges) {
  align-items: flex-start;
}
.setrow__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 11px;
  background: var(--haze);
  color: var(--field);
}
.setrow b {
  display: block;
  font-size: 15px;
  font-weight: 600;
}
.setrow small {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--muted-soft);
}
.setrow__end {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 10px;
}

.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}
.switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.switch__track {
  position: relative;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--haze-deep);
  transition:
    background-color 0.2s var(--ease),
    border-color 0.2s var(--ease);
}
.switch__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(14, 36, 27, 0.25);
  transition: transform 0.2s var(--ease);
}
.switch input:checked + .switch__track {
  border-color: var(--field);
  background: var(--field);
}
.switch input:checked + .switch__track::after {
  transform: translateX(18px);
}
.switch input:focus-visible + .switch__track {
  box-shadow: 0 0 0 3px rgba(22, 81, 58, 0.25);
}
.switch input:disabled + .switch__track {
  opacity: 0.55;
}

/* --- Holding rows (My plots) ----------------------------------------------- */
.hold {
  display: grid;
  grid-template-columns:
    minmax(0, 1.7fr) minmax(0, 0.85fr) minmax(0, 0.85fr) minmax(0, 1.3fr)
    20px;
  grid-template-areas: "crop comm exp prog go";
  gap: 18px;
  align-items: center;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line-soft);
  color: inherit;
  transition: background-color 0.16s var(--ease);
}
.hold:last-of-type {
  border-bottom: 0;
}
a.hold:hover {
  background: var(--paper);
}
/* the same header as the Overview statement table */
.hold--head {
  padding-block: 14px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  font-family: var(--label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-soft);
}
.hold__crop {
  grid-area: crop;
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}
/* with a status badge under the name the text outgrows the photo, which then
   lines up with the name */
.hold__crop:has(.state) {
  align-items: flex-start;
}
.hold__img {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  border-radius: 12px;
  object-fit: cover;
}
.hold__crop > span {
  min-width: 0;
}
.hold__crop b {
  display: block;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.hold__crop small {
  display: block;
  overflow: hidden;
  margin: 1px 0 6px;
  font-size: 13px;
  color: var(--muted-soft);
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* My plots: the status gets a column of its own between the plot and the
   figures, instead of sitting under the plot's name */
.hold--stat {
  grid-template-columns:
    minmax(0, 1.55fr) minmax(0, 0.7fr) minmax(0, 0.75fr) minmax(0, 0.75fr) minmax(0, 1.3fr)
    20px;
  grid-template-areas: "crop stat comm exp prog go";
}
.hold__stat {
  grid-area: stat;
}
.hold--stat .hold__crop small {
  margin-bottom: 0;
}
.hold__comm {
  grid-area: comm;
}
.hold__exp {
  grid-area: exp;
}
.hold__prog {
  grid-area: prog;
}
.hold__go {
  grid-area: go;
  color: var(--line);
  transition:
    color 0.18s var(--ease),
    transform 0.18s var(--ease);
}
a.hold:hover .hold__go {
  color: var(--field);
  transform: translateX(2px);
}
.hold__fig em {
  display: block;
  font-style: normal;
  font-family: var(--label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-soft);
}
.hold__fig b {
  display: block;
  margin-top: 2px;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.hold__fig b.is-up {
  color: var(--field);
}
.hold__progtop {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted-soft);
}
.hbar {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--haze-deep);
}
.hbar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--field), var(--sprout));
}
.hbar--soil i {
  background: linear-gradient(90deg, #7a6244, var(--wheat));
}
.hbar--done i {
  background: var(--haze-deep);
}

/* --- Season stages (a plot position) -------------------------------------- */
.season {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.season li {
  position: relative;
  padding: 26px 10px 0 0;
  font-size: 13px;
  color: var(--muted-soft);
}
.season li::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--line);
}
.season li::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 0;
  width: 15px;
  height: 15px;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: var(--canvas);
}
.season li b {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}
.season li.is-done::before,
.season li.is-done::after {
  border-color: var(--sprout);
  background: var(--sprout);
}
.season li.is-on::before {
  background: linear-gradient(90deg, var(--sprout) 45%, var(--line) 45%);
}
.season li.is-on::after {
  border-color: var(--field);
  background: var(--field);
  box-shadow: 0 0 0 4px rgba(71, 178, 107, 0.22);
}
.season li.is-on b {
  color: var(--ink);
}

/* --- Downloadable document rows -------------------------------------------- */
.filerow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 13px 22px;
  border-bottom: 1px solid var(--line-soft);
  color: inherit;
  transition: background-color 0.16s var(--ease);
}
.filerow:last-child {
  border-bottom: 0;
}
.filerow:hover {
  background: var(--paper);
}
.filerow__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--haze);
  color: var(--field);
}
.filerow b {
  display: block;
  font-size: 15px;
  font-weight: 600;
}
.filerow small {
  display: block;
  margin-top: 1px;
  font-size: 13px;
  color: var(--muted-soft);
}
.filerow__get {
  color: var(--muted-soft);
  transition: color 0.18s var(--ease);
}
.filerow:hover .filerow__get {
  color: var(--field);
}

/* --- Result card: the end of a flow ---------------------------------------- */
/* A finished step. Full width and read left to right on a tinted ground: the
   mark and the message, then the receipt (or the notice), with the actions
   under the message. Stacks below 992. The tint follows the outcome. */
.result {
  --res-bg: linear-gradient(120deg, rgba(71, 178, 107, 0.15), rgba(71, 178, 107, 0.05) 65%);
  --res-line: rgba(71, 178, 107, 0.3);
  --res-mark: var(--field);
  --res-ring: rgba(71, 178, 107, 0.35);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "icon"
    "head"
    "text"
    "side"
    "acts";
  gap: 0;
  margin: 0;
  padding: 28px 24px;
  text-align: left;
  background: var(--res-bg);
  border: 1px solid var(--res-line);
  border-radius: var(--r-lg);
}
.result--wait {
  --res-bg: linear-gradient(120deg, #f4ebdd, #faf6f0 65%);
  --res-line: #e6d5bd;
  --res-mark: var(--soil);
  --res-ring: #dcc6a6;
}
.result--bad {
  --res-bg: linear-gradient(120deg, #f8e6dd, #fcf5f1 65%);
  --res-line: #ebcdbf;
  --res-mark: #9a4524;
  --res-ring: #e2b9a6;
}
.result__icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--canvas);
  color: var(--res-mark);
  box-shadow: inset 0 0 0 1px var(--res-ring);
  font-size: 26px;
}
.result h2 {
  grid-area: head;
  margin: 0;
  font-family: var(--display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.035em;
}
/* direct children only: a descendant "p" would also restyle the notices */
.result > p {
  grid-area: text;
  max-width: 52ch;
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
}
/* the receipt reads as a slip laid on the tint */
.result .kv,
.result .notice {
  grid-area: side;
  margin: 22px 0 0;
}
.result .kv {
  padding: 2px 18px;
  background: var(--canvas);
  border: 1px solid var(--res-line);
  border-radius: var(--r-md);
}
.result .notice {
  background: var(--canvas);
  border-color: var(--res-line);
}
.result__acts {
  grid-area: acts;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
/* The mark moves beside the heading from 768. Narrower than that the heading
   and its line of text need the full width, so the mark sits above them. */
@media (min-width: 768px) {
  .result {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "icon head"
      "icon text"
      "side side"
      "acts acts";
    column-gap: 22px;
    padding: 30px;
  }
  .result__icon {
    margin-bottom: 0;
    align-self: start;
  }
}
/* The receipt moves beside the message only when there is room for both: from
   1200. Between 992 and 1200 the block reads down the page instead, so the
   message keeps the full width and the two buttons sit on one line. */
@media (min-width: 1200px) {
  .result {
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 0.9fr);
    /* the empty rows above and below centre the message on the receipt */
    grid-template-rows: 1fr auto auto auto 1fr;
    /* the mark takes the message rows only, so it lines up with the heading
       rather than the middle of the block */
    grid-template-areas:
      ". . side"
      "icon head side"
      "icon text side"
      "icon acts side"
      ". . side";
    column-gap: 28px;
    padding: 34px 36px;
  }
  .result__icon {
    align-self: start;
  }
  .result .kv,
  .result .notice {
    margin: 0;
    align-self: center;
  }
}

/* --- Small parts ----------------------------------------------------------- */
.formacts {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}
.formacts--split {
  justify-content: space-between;
}
.ticks {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ticks li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink-soft);
}
.ticks li > i {
  margin-top: 2px;
  color: var(--sprout);
}
.panel__body > .notice {
  margin-top: 18px;
}
.panel__body > .ticks + .notice {
  margin-top: 20px;
}
.stack > * + * {
  margin-top: 24px;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  background: var(--paper);
  font-size: 14px;
  color: var(--muted);
}
.pager__nav {
  display: flex;
  gap: 6px;
}
.pager__nav a,
.pager__nav button,
.pager__nav > span,
.pager__nav .is-off {
  display: grid;
  place-items: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--canvas);
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  transition:
    border-color 0.16s var(--ease),
    color 0.16s var(--ease);
}
/* the first and last pages have nowhere to go: the arrow is drawn but it
   is not a link, so it is a <span> the screen reader skips */
.pager__nav .is-off {
  opacity: 0.4;
  pointer-events: none;
}
.pager__nav button {
  cursor: pointer;
}
.pager__nav button:disabled {
  opacity: 0.4;
  cursor: default;
}
.pager__nav a:hover,
.pager__nav button:not(:disabled):hover {
  border-color: var(--field);
  color: var(--field);
}
.pager__nav a[aria-current="page"],
.pager__nav button[aria-current="page"],
.pager__nav > span[aria-current="page"] {
  border-color: var(--field);
  background: var(--field);
  color: #fff;
}

/* the photo lines up with "Profile photo", not the middle of the buttons */
.avup {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line-soft);
}
.avup__pic {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--sprout), #2c8552);
  color: #06231a;
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
}
.avup b {
  display: block;
  font-size: 15px;
  font-weight: 600;
}
.avup small {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--muted-soft);
}
.avup__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.avup__acts label {
  position: relative;
  overflow: hidden;
}
.avup__acts label input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* --- Two-factor ------------------------------------------------------------
   Off, set-up and on are demo states (section 26). Set-up is three numbered
   steps down a rule, each with its own heading. */
/* the shield sits beside the heading; only the button stays centred on the row */
.tfa__status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
}
.tfa__status > .btn {
  align-self: center;
}
.tfa__status b {
  display: block;
  font-size: 16px;
  font-weight: 600;
}
.tfa__status p {
  margin: 3px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.tfa__status .golink {
  display: inline-block;
  margin-top: 8px;
  font-size: 14px;
}
.tfa__shield {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  font-size: 24px;
  color: var(--field);
  background: rgba(71, 178, 107, 0.16);
}
.tfa__shield--off {
  color: var(--soil);
  background: var(--soil-haze);
}
.tfa__steps {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tfa__step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  padding-bottom: 24px;
}
.tfa__step:last-child {
  padding-bottom: 0;
}
/* the rule that joins the numbers */
.tfa__step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 34px;
  bottom: 4px;
  width: 2px;
  border-radius: 1px;
  background: var(--line-soft);
}
.tfa__num {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-family: var(--label);
  font-size: 14px;
  font-weight: 700;
  color: var(--field);
  background: var(--haze);
  box-shadow: inset 0 0 0 1px var(--line);
}
.tfa__step > div {
  padding-top: 4px;
}
.tfa__step b {
  display: block;
  font-size: 15px;
  font-weight: 600;
}
.tfa__step p {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.tfa__apps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.tfa__apps span {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
  font-size: 13px;
  font-weight: 500;
}
.tfa__scan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--paper);
}
.tfa__scan .qr {
  width: 120px;
  height: 120px;
  padding: 8px;
}
.tfa__key {
  display: grid;
  justify-items: start;
  gap: 8px;
}
.tfa__key small {
  font-family: var(--label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-soft);
}
.tfa__key .copybtn {
  margin-left: 0;
}
.otp {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.otp input {
  width: 46px;
  height: 54px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--canvas);
  text-align: center;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  transition:
    border-color 0.16s var(--ease),
    box-shadow 0.16s var(--ease);
}
.otp input:focus {
  outline: 0;
  border-color: var(--field);
  box-shadow: 0 0 0 3px rgba(71, 178, 107, 0.16);
}
.otp.is-full input {
  border-color: rgba(71, 178, 107, 0.5);
}
.otp__gap {
  width: 8px;
  height: 2px;
  border-radius: 1px;
  background: var(--line);
}
.tfa__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.tfa__acts .btn[disabled] {
  opacity: 0.5;
}
@media (max-width: 575.98px) {
  .tfa__status {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .tfa__status > .btn {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .otp {
    gap: 5px;
  }
  .otp input {
    width: 38px;
    height: 48px;
    font-size: 19px;
  }
}

/* a chosen photo replaces the initials, in the form and in the bar */
.has-photo {
  background-size: cover !important;
  background-position: center !important;
  color: transparent !important;
}
.qr {
  display: grid;
  place-items: center;
  width: 140px;
  height: 140px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
  color: var(--ink);
}
.qr svg {
  width: 100%;
  height: 100%;
  shape-rendering: crispEdges;
}
.secret {
  display: inline-block;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--ink);
}

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 1199.98px) {
  .hold {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 20px;
    grid-template-areas:
      "crop crop go"
      "comm exp go"
      "prog prog go";
    gap: 12px 18px;
  }
  .hold--head {
    display: none;
  }
  .hold--stat {
    grid-template-areas:
      "crop stat go"
      "comm exp go"
      "prog prog go";
  }
  .hold--stat .hold__stat {
    justify-self: end;
  }
}
/* where the header names the columns, the rows need not name them again */
@media (min-width: 1200px) {
  .hold__fig em {
    display: none;
  }
}
@media (max-width: 575.98px) {
  .hold--stat {
    grid-template-areas:
      "crop crop go"
      "stat stat go"
      "comm exp go"
      "prog prog go";
  }
  .hold--stat .hold__stat {
    justify-self: start;
  }
}

@media (max-width: 767.98px) {
  .season {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .season li {
    padding: 0 0 0 28px;
  }
  .season li::before {
    top: 0;
    bottom: -14px;
    left: 6px;
    right: auto;
    width: 3px;
    height: auto;
  }
  .season li:last-child::before {
    display: none;
  }
  .season li.is-on::before {
    background: linear-gradient(180deg, var(--sprout) 45%, var(--line) 45%);
  }
}

@media (max-width: 575.98px) {
  .wizard li:not(.is-on) .wizard__label {
    display: none;
  }
  .result {
    padding: 26px 20px;
  }
  .setrow {
    flex-wrap: wrap;
  }
  .setrow__end {
    width: 100%;
    padding-left: 54px;
  }
  .amt input {
    font-size: 28px;
  }
  .tfa {
    grid-template-columns: minmax(0, 1fr);
  }
  .kv > div {
    flex-wrap: wrap;
  }
}

/* --- 15h, continued: round two ------------------------------------------ */
/* Watchlist, payment methods, field reports, statements, notifications and
   support tickets. Same shell, same parts; only these are new. */

/* a textarea inside .inp, matching the inputs from 15a */
.inp textarea {
  width: 100%;
  min-height: 140px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.55;
  resize: vertical;
  transition: border-color 0.18s var(--ease);
}
.inp textarea:focus {
  border-color: var(--field);
  outline: none;
}
.inp textarea::placeholder {
  color: var(--muted-soft);
}
.inp input[readonly] {
  background: var(--paper);
  color: var(--muted);
}

/* a square icon-only button */
.btn.btn-sq {
  justify-content: center;
  width: 38px;
  padding-inline: 0;
}

/* a file input dressed as a button */
.attach {
  position: relative;
  overflow: hidden;
}
.attach input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* --- Watchlist: a holding row with actions at the end --------------------- */
/* a fixed last column, not auto: every row is its own grid, so an auto column
   sized to "Invest" in one row and "View" in the next pushes the figures out
   of line from row to row */
.hold--watch {
  grid-template-columns:
    minmax(0, 1.7fr) minmax(0, 0.7fr) minmax(0, 0.7fr) minmax(0, 1.25fr)
    132px;
}
.hold__crop a {
  color: inherit;
  transition: color 0.18s var(--ease);
}
.hold__crop a:hover {
  color: var(--field);
}
.watch__acts {
  grid-area: go;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* --- Payment methods -------------------------------------------------------- */
.setrow__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.setrow.is-default {
  background: rgba(71, 178, 107, 0.05);
}

/* --- Field reports ---------------------------------------------------------- */
.freps {
  display: grid;
  gap: 16px;
}
.frep {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 22px;
  padding: 20px;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-1);
}
.frep__ph {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-md);
}
.frep__ph img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.frep__ph::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--photo-wash);
}
.frep__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-size: 13px;
  color: var(--muted-soft);
}
.frep h3 {
  margin: 10px 0 6px;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.frep__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}
.frep__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}
.frep__facts dt {
  font-family: var(--label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-soft);
}
.frep__facts dd {
  margin: 2px 0 0;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.frep__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}
.person {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--muted);
}
.person b {
  font-weight: 600;
  color: var(--ink);
}
.person img {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}

/* --- Notifications ------------------------------------------------------------ */
.nrow {
  display: grid;
  grid-template-columns: 8px auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 15px 22px;
  border-bottom: 1px solid var(--line-soft);
  color: inherit;
  transition: background-color 0.16s var(--ease);
}
.nrow:last-child {
  border-bottom: 0;
}
.nrow:hover {
  background: var(--paper);
}
.nrow__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.nrow.is-new {
  background: rgba(71, 178, 107, 0.05);
}
.nrow.is-new .nrow__dot {
  background: var(--sprout);
}
.nrow__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--haze);
  color: var(--field);
}
.nrow b {
  display: block;
  font-size: 15px;
  font-weight: 600;
}
.nrow small {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--muted-soft);
}
.nrow time {
  font-family: var(--label);
  font-size: 12px;
  font-weight: 700;
  color: var(--muted-soft);
  white-space: nowrap;
}
.setrow__end .switch + .switch {
  margin-left: 10px;
}

/* --- A support ticket --------------------------------------------------------- */
.thread {
  display: grid;
  gap: 18px;
  padding: 22px;
}
.msg {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.msg__av {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--sprout), #2c8552);
  color: #06231a;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
}
.msg__av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.msg__card {
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 4px var(--r-lg) var(--r-lg) var(--r-lg);
  background: var(--paper);
}
/* staff replies carry a sprout edge so the two voices separate at a glance */
.msg--staff .msg__card {
  border-color: rgba(71, 178, 107, 0.35);
  background: var(--canvas);
  box-shadow: inset 3px 0 0 var(--sprout);
}
.msg__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-bottom: 6px;
}
.msg__head b {
  font-size: 15px;
  font-weight: 600;
}
.msg__role {
  font-family: var(--label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--field);
}
.msg__head time {
  margin-left: auto;
  font-size: 13px;
  color: var(--muted-soft);
}
.msg__card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
}
.msg__card p + p {
  margin-top: 10px;
}
.msg__file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--canvas);
  font-size: 13px;
  font-weight: 600;
  color: var(--field);
}
.thread__event {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-soft);
}
.thread__event::before,
.thread__event::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-soft);
}
.reply {
  padding: 20px 22px;
  border-top: 1px solid var(--line);
  background: var(--paper);
}
.reply > .notice,
/* the status notice sits inside its state wrapper, so the wrapper carries the
   gap before the reply field */
.reply > [data-state] {
  margin-bottom: 18px;
}

/* --- Round two, responsive ------------------------------------------------------ */
@media (max-width: 1199.98px) {
  .hold--watch {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "crop crop"
      "comm exp"
      "prog prog"
      "go go";
  }
  .watch__acts {
    justify-content: flex-start;
  }
}

@media (max-width: 767.98px) {
  .frep {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .frep__ph {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 575.98px) {
  .nrow {
    grid-template-columns: 8px auto minmax(0, 1fr);
    padding-inline: 16px;
  }
  .nrow time {
    grid-column: 3;
  }
  .thread {
    padding: 18px 16px;
  }
  .msg {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .msg__av {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
  .reply {
    padding-inline: 16px;
  }
}

/* 16 · Motion ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .tape__track {
    animation: none;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
.reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: rise 0.7s var(--ease) forwards;
}
.reveal[data-delay="1"] {
  animation-delay: 0.06s;
}
.reveal[data-delay="2"] {
  animation-delay: 0.12s;
}
.reveal[data-delay="3"] {
  animation-delay: 0.18s;
}
.reveal[data-delay="4"] {
  animation-delay: 0.26s;
}
@keyframes rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 17 · Responsive ======================================================== */
/* Bootstrap's breakpoints carry the grid; these rules cover the bespoke
   components only. */
@media (max-width: 1399.98px) {
  .rail__aside {
    display: none;
  }
  .header__bar .navbar-nav .nav-link {
    padding: 0 12px;
    font-size: 15px;
  }
  .bar__actions {
    padding-left: 16px;
  }
}
@media (max-width: 1199.98px) {
  /* .risk is stacked by now: a gutter wider than 2x the container padding
     overflows. The hero is still 7+5, so it only needs a narrower column
     gap - 64px eats too much of a 992px container. */
  .risk {
    --bs-gutter-x: var(--gutter);
  }
  .hero__grid {
    --bs-gutter-x: 40px;
    padding-bottom: 72px;
  }
  .hero__title {
    max-width: 18ch;
  }
  .hstat__icon {
    width: 35px;
    height: 35px;
  }
  .arrange {
    margin-top: 50px;
  }
  .hero__parcels {
    background-size: calc(100% / 4) 100%;
  }
  .risk__media {
    margin-right: 0;
    border-radius: 20px;
    min-height: 380px;
    margin-top: 60px;
    /* the base rule stretches it with height:100%; keeping that here would
       push the bottom edge past the column and eat the section padding */
    height: auto;
  }
  /* the panel is a wide band here rather than a tall one, so a centred crop
     would cut the head off; hold the top of the frame instead */
  .risk__photo {
    object-position: 50% 6%;
  }
  .split__bar {
    margin: 24px 24px 30px;
  }
  .split__head,
  .split__foot {
    padding-inline: 24px;
  }
  .split__keys {
    padding: 0 16px 24px;
  }
  .split__foot {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .split__total {
    text-align: left;
  }
  /* the side column is ~292px here, so the three notes read as a list
     rather than three squeezed columns. The dots only separate items on
     one line, so they go. */
  .fcta__fine {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .fcta__fine i {
    display: none;
  }
  .growers__figs {
    flex-wrap: wrap;
    gap: 20px 0;
    /* the columns stack from here, and the row carries no y-gutter, so the
       figures would sit straight under the signature */
    margin-top: 30px;
  }
  .growers__quote {
    gap: 8px;
  }
  .growers__qmark {
    width: 28px;
    height: 22px;
    margin-top: 7px;
  }
  .growers__text {
    font-size: 1.4rem;
    margin-left: 0;
  }

  /* The aside keeps all three stats on a narrower column here: the dividers
     move in so "Seasons closed" and "Paid on time" stay on one row instead of
     wrapping the third figure under the first two. */
  .auth__foot > div {
    padding: 0 15px;
  }

  /* --- Header: the navbar collapses to the sheet from here down --------
     Moved with the expand-xl switch. Seven items plus the actions never
     fit a 960px container, so tablets get the toggler instead. */
  .bar__signin {
    display: none;
  }
  .header__bar .navbar-toggler {
    display: inline-flex;
  }
  .bar__actions {
    border-left: 0;
    padding-left: 0;
    margin-left: auto;
  }
  /* Mobile panel — stays green, full sheet */
  .header__bar .navbar-collapse {
    position: fixed;
    /* bottom:auto so the sheet ends with its content; max-height keeps a
       long menu scrollable instead of running off the screen */
    inset: var(--header-h) 0 auto 0;
    max-height: calc(100dvh - var(--header-h));
    margin: 0;
    height: auto;
    padding: 22px var(--gutter) 34px;
    background: var(--field);
    overflow-y: auto;
  }
  .header__bar .navbar-collapse.show,
  .header__bar .navbar-collapse.collapsing {
    animation: sheetIn 0.28s var(--ease);
  }
  /* Bootstrap reuses .collapsing on the way out, which would replay sheetIn
     and then cut to display:none. main.js flags the closing pass instead. */
  .header__bar .navbar-collapse.is-closing {
    animation: sheetOut 0.24s var(--ease) forwards;
  }
  .site-header.is-stuck .header__bar .navbar-collapse {
    inset: 64px 0 auto 0;
    max-height: calc(100dvh - 64px);
  }
  .header__bar .navbar-nav {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    gap: 0;
    margin-inline-start: 0;
  }
  .header__bar .navbar-nav .nav-item {
    height: auto;
    display: block;
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  }
  .header__bar .navbar-nav .nav-link {
    width: 100%;
    height: auto;
    padding: 12px 2px;
    justify-content: space-between;
    border-radius: 0;
    color: #fff;
  }
  .header__bar .navbar-nav .nav-link::before {
    display: none;
  }
  /* the Pages and Dashboard lists open inside the green sheet: no white card
     and no scroll of their own, since the sheet already scrolls */
  .header__bar .nav__menu {
    position: static;
    max-height: none;
    overflow: visible;
    margin: 0 0 14px;
    padding: 4px 0;
    border: 0;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: none;
  }
  .header__bar .nav__opt {
    color: rgba(255, 255, 255, 0.86);
    white-space: normal;
  }
  .header__bar .nav__opt:hover,
  .header__bar .nav__opt[aria-current="page"] {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
  }
  .header__bar .nav__group {
    color: rgba(255, 255, 255, 0.55);
  }
  /* the column panels stack back into one list inside the sheet */
  .header__bar .nav__panel.show {
    display: block;
    width: auto;
    padding: 14px 4px 8px;
  }
  .header__bar .nav__col + .nav__col {
    margin-top: 14px;
    padding-left: 0;
    border-left: 0;
  }
  /* full-height rows for touch, ruled off from each other the way the links
     above them are: inside the sheet these are rows in a list, not options
     floating in a panel */
  .header__bar .nav__panel .nav__opt {
    padding-block: 11px;
    border-radius: 0;
  }
  .header__bar .nav__panel .nav__list li:not(:last-child) .nav__opt {
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  }
  /* the two actions share the row: side by side, an equal half each */
  .nav__mobile-actions {
    display: flex;
    gap: 10px;
    margin-top: 24px;
  }
  .nav__mobile-actions .btn {
    flex: 1 1 0;
    min-width: 0;
  }
}
@media (max-width: 991.98px) {
  /* Stacked from here: these rows carry no y-gutter, so the two halves sat
     flush against each other. .risk and .growers already space themselves
     from the inside, so they are left alone. */
  .about {
    --bs-gutter-x: var(--gutter);
    --bs-gutter-y: 40px;
  }
  .fcta {
    --bs-gutter-y: 30px;
  }
  /* hero stacks from here: full-width column, so the slider leads from the
     left rather than sitting against the right edge of a 5-column slot */
  .hero__grid {
    --bs-gutter-x: var(--gutter);
    --bs-gutter-y: 40px;
  }
  .plot-deck {
    height: 596px;
  }
  .plot-slider {
    max-width: 460px;
    margin-left: 0;
  }
  /* The three figures stack from here down: side by side in a card this narrow
     the labels wrap onto two lines and the tiles lose their rhythm. One column,
     and the tiles lose a little height now that each holds a single line. */
  .plot-card__facts {
    grid-template-columns: auto;
  }
  .plot-card__facts div {
    padding: 10px 13px;
  }
  /* auth: the two panels stack, and the aside keeps only its headline */
  .auth {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  /* Stacked, the aside is a banner rather than a column: the logo and the
     headline centre in it, and the back link centres under them — it is the
     first thing in the pane below, so it reads as the banner's own footer. */
  .auth__aside {
    padding: 30px var(--gutter) 34px;
    gap: 22px;
    align-items: center;
    text-align: center;
  }
  .auth__body {
    max-width: none;
  }
  .auth__body h1 {
    font-size: 1.7rem;
  }
  .auth__proof,
  .auth__foot,
  .auth__mark {
    display: none;
  }
  .auth__pane {
    padding: 34px var(--gutter) 56px;
    justify-content: flex-start;
  }
  .auth__back {
    display: none;
  }
  .auth__home {
    display: inline-flex;
  }

  .hstat {
    padding: 24px 20px;
    gap: 14px;
  }
  .section {
    padding-block: 72px;
  }
  .sec-head--action {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .sec-head__action {
    align-self: start;
    /* the head is one column here, and a grid item stretches by default */
    justify-self: start;
    margin-bottom: 0;
  }
  /* the stats strip drops to two-up: kill the rule on the new first column */
  .hstat--c3 {
    border-inline-start: 0;
    padding-inline-start: 0;
  }
  .hstat--c1,
  .hstat--c2 {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  .fmain__col {
    padding-inline: 32px;
  }
  .fmain__col:nth-child(odd) {
    padding-inline-start: 0;
    border-left: 0;
  }
  .fmain__col:first-child {
    padding-inline-end: 0;
    padding-bottom: 36px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .fcta {
    padding-block: 60px 48px;
  }
  /* full-width column again: the notes fit on one line, dots and all */
  .fcta__fine {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
  .fcta__fine i {
    display: block;
  }
}
@keyframes sheetIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes sheetOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}
@media (max-width: 767.98px) {
  /* narrow again: back to one note per line, as in the 992-1199 band */
  .fcta__fine {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .fcta__fine i {
    display: none;
  }
  /* one-up: every tile gets a top rule instead of a side rule */
  .hstat {
    border-inline-start: 0;
    padding-inline: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  .hstat--c4 {
    border-bottom: 0;
  }
  /* A table cannot reflow: squeezed this far the headings break a word per
     line and the figures follow. It keeps whatever width its own columns
     need — max-content, so a buyer who adds a column gets the right width
     without editing a pixel value — and scrolls sideways in .tbl-scroll.
     A table that already fits, like the four-column one on the plot page,
     is unaffected and shows no scrollbar. */
  .tbl {
    min-width: max-content;
  }
  /* Six facts, two to a line: at three across "Contracted volume" and
     "Agreement signed" each wrap to two lines and the cells stop matching. */
  .pfacts {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575.98px) {
  /* --- Phone type and rhythm ------------------------------------------
     The desktop scale is tuned for a 1350px container; at this width the
     headings, buttons and section gaps all read oversized. Every clamp
     below has already bottomed out, so these are flat overrides. */
  .hero__lead {
    font-size: 1.15rem;
  }
  .hero__pay {
    font-size: 1.95rem;
  }
  .sec-head h2,
  .risk .sec-head h2,
  .fcta h2 {
    font-size: 1.6rem;
  }
  .plot-hero h2,
  .plot-card h3,
  .flow__step h3 {
    font-size: 1.2rem;
  }
  .sec-head {
    margin-bottom: 34px;
  }
  /* the label and the total were sharing a line and both wrapping; stacked
     they each get the full width */
  .split__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .section {
    padding-block: 52px;
  }
  .btn {
    --bs-btn-padding-y: 11px;
    --bs-btn-padding-x: 18px;
    --bs-btn-font-size: 14px;
  }
  .btn-sm {
    --bs-btn-padding-y: 9px;
    --bs-btn-padding-x: 15px;
    --bs-btn-font-size: 14px;
  }

  :root {
    --rail-h: 34px;
  }
  .auth__top h2 {
    font-size: 25px;
  }
  .inp input,
  .inp select {
    height: 48px;
  }
  .rail__label {
    font-size: 11px;
    letter-spacing: 0.1em;
    padding-right: 12px;
    margin-right: 10px;
  }
  .tape__item {
    padding-inline: 12px;
    font-size: 12px;
  }
  .brand__logo {
    height: 60px;
	width:100%;
  }
  .brand__mark {
     height: 40px;
	  width:100%;
  }
  .hero {
    padding-top: calc(var(--header-h) + 40px);
  }
  /* The card art is 16:7, so the deck requirement tracks the width. Three
     steps down from here, each measured against the tallest slide. */
  .plot-deck {
    height: 592px;
  }
  .hero__grid {
    padding-bottom: 56px;
  }
  .hero__lede {
    font-size: 17px;
  }
  .hero__parcels {
    display: none;
  }
  .hero__cta-item {
    flex: 1;
  }
  .hero__cta-item .btn {
    width: 100%;
  }
  .plot-card__min {
    text-align: left;
  }
  .setup {
    font-size: 16px;
    padding: 16px;
    position: relative;
  }
  .pick,
  .pick__btn {
    max-width: 100%;
  }
  .footer__mark {
    right: -180px;
    bottom: -160px;
    width: 440px;
    height: 440px;
    opacity: 0.05;
  }
  .fmain__col {
    padding-inline: 0;
    border-left: 0;
    padding-bottom: 28px;
  }
  .fmain__col:first-child {
    padding-bottom: 32px;
  }
  .fbase {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  /* The four columns still fit here, but only just: the number column and the
     gaps give up the room the two text columns need. */
  .lim {
    grid-template-columns: 30px minmax(0, 0.9fr) auto minmax(0, 1.35fr);
    gap: 0 15px;
  }
}

/* Not a Bootstrap breakpoint - the three grower figures stop fitting side
   by side here, well before 576px is reached. */
@media (max-width: 506.98px) {
  .growers__fig {
    padding: 0 15px;
  }
  .growers__fig dd {
    font-size: 20px;
  }
}

/* The header brand drops to the mark alone, freeing room for the actions.
   The footer and auth wordmarks are untouched - they have space. */
@media (max-width: 479.98px) {
  .plot-deck {
    height: 580px;
  }
  /* The masthead: the h1 clamp bottomed out at 2rem well above this width,
     so it is a flat override. It stays a step above the 1.6rem section
     headings, and the standfirst comes down with it. */
  .pmast h1 {
    font-size: 1.75rem;
  }
  .pmast__where {
    font-size: 16px;
  }
  /* The two halves stack: side by side they took most of the line and left
     the deadline squeezed against the edge. Stacked, the badge is no longer
     wider than it is tall, so a pill radius would read as a lozenge — it
     takes a plain corner instead. */
  .status {
    flex-direction: column;
    border-radius: 10px;
  }
  /* one fact per line: two across leaves each label about 14 characters */
  .pfacts {
    grid-template-columns: 1fr;
  }
  /* The locked archive stacks: side by side, the sentence was down to about
     28 characters and the button was squeezing it further. Icon, then the
     text, then the button — each on its own line, left-aligned like the
     reports above it. justify-items keeps the button its own width instead
     of stretching it across the box. */
  .locked {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 14px;
  }
  .header__bar .brand__logo {
    display: none;
  }
  .header__bar .brand__mark {
    display: block;
  }

  /* The grower quote: at this width the quote mark was taking a whole grid
     column off a line already down to ~21 characters, and the signature and
     its caption were being squeezed side by side. Both go vertical. */
  .growers__quote {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .growers__qmark {
    font-size: 26px;
    margin-top: 0;
  }
  .growers__text {
    font-size: 1.2rem;
    margin-top: 4px;
  }
  .sign {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .sign__mark {
    font-size: 30px;
    padding-right: 0;
  }
  .sign__meta {
    padding-bottom: 0;
  }
}

/* Narrow phones: the card art is 16:7, so it loses height faster than the
   text below it. Without this the deck keeps space the card no longer uses. */
@media (max-width: 399.98px) {
  .plot-deck {
    height: 544px;
  }
}

/* The hero and footer eyebrows: the pill and the season label stop sharing
   a line comfortably here - the pill was wrapping its own text. Stacked, the
   connecting rule has nothing to connect, so it goes with them. */
@media (max-width: 472px) {
  .hero__eyebrow,
  .fcta__eyebrow {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .hero__eyebrow-rule,
  .fcta__rule {
    display: none;
  }
  /* stop the pill breaking its own label across two lines */
  .pill {
    white-space: nowrap;
  }
}

/* 19 · Overlays ========================================================== */
/* Preloader, back-to-top and the cookie notice. All three sit above the
   page; z-index order is cookie < preloader so a slow load never reveals a
   half-drawn banner. */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  background: var(--field);
  transition:
    opacity 0.45s var(--ease),
    visibility 0.45s var(--ease);
}
.preloader.is-done {
  opacity: 0;
  visibility: hidden;
}
.preloader__inner {
  display: grid;
  justify-items: center;
  gap: 22px;
}
.preloader__mark {
  display: block;
  width: 54px;
  height: 54px;
  border-radius: 14px;
}
.preloader__bar {
  display: block;
  width: 132px;
  height: 3px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}
.preloader__bar i {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: inherit;
  background: var(--sprout-lit);
  animation: preload 1.1s var(--ease) infinite;
}
@keyframes preload {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(330%);
  }
}

/* --- Back to top, bottom left ------------------------------------------ */
.to-top {
  position: fixed;
  left: var(--gutter);
  bottom: var(--gutter);
  z-index: 1000;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: var(--field);
  color: #fff;
  cursor: pointer;
  box-shadow: var(--lift-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 0.25s var(--ease),
    transform 0.25s var(--ease),
    visibility 0.25s,
    background 0.18s var(--ease),
    bottom 0.3s var(--ease);
}
.to-top.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.to-top:hover {
  background: var(--field-deep);
}
.to-top i {
  font-size: 20px;
}

/* --- Toasts ----------------------------------------------------------------
   Confirmations in the dashboard, bottom right (back-to-top is bottom left).
   Built by main.js. Not ".toast": Bootstrap owns that name and hides it
   unless .show is set. The bar along the foot runs down with the five seconds
   and stops while the toast is hovered. */
.toaster {
  position: fixed;
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: 1090;
  display: grid;
  gap: 10px;
  width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}
.toaster__item {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 14px 12px 16px 14px;
  background: var(--canvas);
  border: 1px solid rgba(22, 81, 58, 0.16);
  border-radius: var(--r-md);
  box-shadow: var(--lift-1), var(--lift-2), var(--lift-3);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  transition:
    opacity 0.26s var(--ease),
    transform 0.26s var(--ease);
}
.toaster__item.is-in {
  opacity: 1;
  transform: none;
}
.toaster__item.is-out {
  opacity: 0;
  transform: translateX(18px);
}
.toaster__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 18px;
  color: var(--field);
  background: rgba(71, 178, 107, 0.16);
}
.toaster__item--info .toaster__icon {
  background: var(--haze);
}
.toaster__item--bad .toaster__icon {
  color: #9a4524;
  background: rgba(180, 86, 47, 0.12);
}
.toaster__body {
  padding-top: 1px;
}
.toaster__body b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.toaster__body p {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.toaster__close {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: -4px -2px 0 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted-soft);
  font-size: 17px;
  cursor: pointer;
  transition:
    background-color 0.16s var(--ease),
    color 0.16s var(--ease);
}
.toaster__close:hover {
  background: var(--haze);
  color: var(--ink);
}
.toaster__timer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--sprout);
  transform-origin: left;
  animation: toaster-time 5s linear forwards;
}
.toaster__item--info .toaster__timer {
  background: var(--field);
}
.toaster__item--bad .toaster__timer {
  background: #c0643a;
}
.toaster__item.is-paused .toaster__timer {
  animation-play-state: paused;
}
@keyframes toaster-time {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}
@media (max-width: 575.98px) {
  .toaster {
    left: 16px;
    right: 16px;
    bottom: 16px;
    width: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .toaster__item {
    transition: none;
  }
}

/* --- Cookie notice ------------------------------------------------------ */
/* A card, not a full-width bar: it sits on the page rather than sealing off
   the bottom of it, and the preferences open in place instead of throwing a
   second dialog at someone who only wanted to say no. */
.cookie {
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: 1100;
  max-width: 940px;
  margin-inline: auto;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--lift-3);
  transform: translateY(calc(100% + var(--gutter)));
  transition: transform 0.42s var(--ease);
}
.cookie.is-on {
  transform: none;
}
.cookie__bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 18px 22px;
}
.cookie__icon {
  font-size: 22px;
  color: var(--field);
}
.cookie__text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  font-weight: 500;
}
.cookie a {
  color: var(--field);
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.cookie a:hover {
  border-bottom-color: var(--field);
}
.cookie__actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}
/* the caret flips when the panel is open */
[data-cookie-toggle][aria-expanded="true"] .btn__icon {
  transform: rotate(180deg);
}

/* --- preferences panel, expanded in place --- */
.cookie__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.36s var(--ease);
}
.cookie.is-open .cookie__panel {
  grid-template-rows: 1fr;
}
.cookie__panel > div {
  overflow: hidden;
}
.cookie__prefs {
  padding: 4px 22px 20px;
  margin-top: 4px;
  border-top: 1px solid var(--line-soft);
}
.cookie__cat {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 15px 0;
  border-top: 1px solid var(--line-soft);
}
.cookie__cat:first-child {
  border-top: 0;
}
.cookie__cat b {
  display: block;
  font-size: 15px;
  font-weight: 600;
}
.cookie__cat small {
  display: block;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  margin-top: 3px;
  max-width: 56ch;
}
.cookie__switch {
  position: relative;
  width: 46px;
  height: 26px;
  flex-shrink: 0;
  border-radius: var(--r-pill);
  background: var(--haze-deep);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.cookie__switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--canvas);
  box-shadow: var(--lift-1);
  transition: transform 0.22s var(--ease);
}
.cookie__switch[aria-checked="true"] {
  background: var(--sprout);
  border-color: var(--sprout);
}
.cookie__switch[aria-checked="true"]::after {
  transform: translateX(20px);
}
.cookie__switch:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.cookie__save {
  padding-top: 16px;
}

/* The notice is a centred 940px card, so it only reaches the button on
   narrower screens. Above that the button has no reason to move. */
@media (max-width: 1103.98px) {
  body.has-cookie .to-top {
    /* --cookie-h is measured in main.js, so this also tracks the card
       growing when the preferences panel opens */
    bottom: calc(var(--gutter) + var(--cookie-h, 96px) + 12px);
  }
}
/* The three-column bar needs real width; below this the notice reads as
   text first, then the three buttons on their own row. */
@media (max-width: 991.98px) {
  .cookie__bar {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .cookie__icon {
    display: none;
  }
  .cookie__actions {
    flex-wrap: wrap;
  }
  .cookie__actions .btn {
    flex: 1;
  }
}

/* --- Top-rail controls -------------------------------------------------- */
/* The rail links are real controls: a jump link and two dropdowns. */
.rail__menu {
  display: flex;
  align-items: center;
}
.rail__menu .rail__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--label);
}
.rail__menu .dropdown-toggle::after {
  display: none;
}
.rail__menu .rail__link i {
  font-size: 14px;
  opacity: 0.75;
  transition: transform 0.24s var(--ease);
}
.rail__menu .rail__link.show i {
  transform: rotate(180deg);
}
/* --- Nav dropdowns -------------------------------------------------------
   Plain lists, not mega panels: these group pages rather than preview them.
   Same --bs-dropdown-* bridge as the topbar menu. */
.nav__menu {
  --bs-dropdown-min-width: 210px;
  --bs-dropdown-padding-y: 6px;
  --bs-dropdown-bg: var(--canvas);
  --bs-dropdown-border-color: var(--line);
  --bs-dropdown-border-radius: var(--r-md);
  margin-top: 6px;
  box-shadow: var(--lift-panel);
}
.nav__opt {
  display: block;
  padding: 9px 14px;
  border-radius: var(--r-sm);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  transition:
    background-color 0.16s var(--ease),
    color 0.16s var(--ease);
}
.nav__opt:hover {
  background: var(--haze);
  color: var(--field);
}
/* the page you are on */
.nav__opt[aria-current="page"] {
  background: var(--haze);
  color: var(--field);
  font-weight: 600;
}
/* Pages and Dashboard: a short, wide panel of columns rather than one long
   list. Each column is a group label over its links.
   (.nav-link.is-current marks "Pages" in the bar when you are on one.) */
/* max-content: the panel hangs off a narrow nav item, so without it the
   browser shrinks it to min-content and long labels overflow their column */
.nav__panel {
  width: max-content;
  padding: 18px 12px 12px;
}
.nav__panel.show {
  display: grid;
  column-gap: 10px;
}
.nav__panel--pages {
  grid-template-columns: repeat(3, minmax(150px, auto));
}
.nav__panel--dash {
  grid-template-columns: repeat(4, minmax(140px, auto));
}
/* Dashboard is the last item in the bar, so its panel opens leftward from
   the right edge of the item and stays on screen at 1200. Class plus
   attribute, because Bootstrap sets left:0 on .dropdown-menu[data-bs-popper]. */
.header__bar .nav__panel--dash[data-bs-popper],
.topbar__nav .nav__panel--dash[data-bs-popper] {
  left: auto;
  right: 0;
}
/* Pull the panel up so it overlaps the bottom of the bar. Bootstrap leaves a
   2px spacer below the item, and a pointer moving down slowly landed in it,
   left the item and closed the panel. Desktop only: in the phone sheet the
   panel is static. Class plus attribute to beat Bootstrap's spacer rule. */
@media (min-width: 1200px) {
  .header__bar .nav__menu[data-bs-popper],
  .topbar__nav .nav__menu[data-bs-popper] {
    margin-top: -10px;
  }
}
.nav__col {
  min-width: 0;
}

/* --- Dropdown notch --------------------------------------------------------
   Every dropdown points at the button that opened it: the site menus, the
   strip's currency and help menus, the plot sort, and the dashboard bar's
   wallet, notification and profile panels.
   The notch hangs off the button's own wrapper rather than the panel, so it
   centres on the button whichever side the panel opens to. Its top is the
   panel's top edge less 7px, which puts the square's centre on the border:
   panels sit 2px below the strip menus and the sort, 10px up into the site
   bar from 1200, and 12px below the dashboard bar controls. */
.rail__menu,
.psort,
.appmenu {
  --notch-bg: var(--canvas);
  --notch-line: var(--line);
}
.rail__menu::after,
.psort::after,
.header__bar .nav-item.dropdown::after,
.topbar__nav .nav-item.dropdown::after,
.appmenu::after {
  content: "";
  position: absolute;
  left: 50%;
  z-index: 1001;
  width: 12px;
  height: 12px;
  background: var(--notch-bg, var(--canvas));
  border-top: 1px solid var(--notch-line, var(--line));
  border-left: 1px solid var(--notch-line, var(--line));
  border-radius: 3px 0 0 0;
  transform: translateX(-50%) rotate(45deg);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
.rail__menu::after {
  top: calc(100% - 5px);
}
/* the sort menu opens 12px under its button, so the notch has room to show
   between the two. Class plus attribute to beat Bootstrap's 2px spacer. */
.psort__menu[data-bs-popper] {
  margin-top: 12px;
}
.psort::after {
  top: calc(100% + 5px);
}
.rail__menu:has(> .dropdown-menu.show)::after,
.psort:has(> .dropdown-menu.show)::after {
  opacity: 1;
  visibility: visible;
}
/* the site menus are panels in the phone sheet below 1200, with nothing to point at */
@media (min-width: 1200px) {
  .header__bar .nav-item.dropdown::after,
  .topbar__nav .nav-item.dropdown::after {
    top: calc(100% - 16px);
  }
  .header__bar .nav-item.dropdown:has(> .dropdown-menu.show)::after,
  .topbar__nav .nav-item.dropdown:has(> .dropdown-menu.show)::after {
    opacity: 1;
    visibility: visible;
  }
}
/* the dashboard panels fade in, so the notch fades with them. Their edge is
   the stronger --pop-line, which lives on the panel, so it is repeated here. */
.appmenu {
  --notch-line: rgba(22, 81, 58, 0.22);
}
.appmenu::after {
  top: calc(100% + 6px);
  transition:
    opacity 0.18s var(--ease),
    visibility 0.18s;
}
/* the wallet panel opens on its dark card, so its notch is the card's green.
   Its outline is the light edge the panel shows against the dark bar, so the
   notch and the panel read as one shape. */
.appmenu:has(.walletpop) {
  --notch-bg: #226344;
  --notch-line: #ccd9d4;
}
/* below 576 the panels span the bar rather than hang off a button */
@media (min-width: 576px) {
  .appmenu[data-open]::after {
    opacity: 1;
    visibility: visible;
  }
}
.nav__col + .nav__col {
  padding-left: 8px;
  border-left: 1px solid var(--line-soft);
}
.nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__list + .nav__group {
  margin-top: 14px;
}
.nav__group {
  display: block;
  padding: 0 14px 8px;
  font-family: var(--label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-soft);
}
.nav__panel .nav__opt {
  padding-block: 7px;
}

.rail__dropdown {
  --bs-dropdown-min-width: 210px;
  --bs-dropdown-padding-y: 6px;
  --bs-dropdown-bg: var(--canvas);
  --bs-dropdown-border-color: var(--line);
  --bs-dropdown-border-radius: var(--r-md);
  margin-top: 6px;
  box-shadow: var(--lift-panel);
}
.rail__opt {
  display: block;
  width: 100%;
  padding: 8px 14px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  transition: background 0.16s var(--ease);
}
.rail__opt:hover {
  background: var(--haze);
}
.rail__opt[aria-current="true"] {
  color: var(--field);
  font-weight: 600;
  background: var(--haze);
}

/* --- Lightbox --------------------------------------------------------------
   main.js section 39 builds one <dialog class="lbox"> and opens it from any
   [data-lightbox] photo. The dialog fills the viewport and is its own dark
   backdrop, so ::backdrop only has to stop the page showing through. */
[data-lightbox] {
  cursor: zoom-in;
}
.lbox {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 64px 76px 28px;
  border: 0;
  background: rgba(10, 42, 29, 0.94);
  color: #fff;
  opacity: 0;
  transition: opacity 0.22s var(--ease);
}
.lbox[open] {
  display: grid;
  place-items: center;
}
.lbox.is-in {
  opacity: 1;
}
.lbox::backdrop {
  background: transparent;
}
.lbox__fig {
  display: grid;
  justify-items: center;
  gap: 14px;
  max-width: min(1180px, 100%);
  max-height: 100%;
  margin: 0;
}
.lbox__img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 160px);
  border-radius: var(--r-md);
  object-fit: contain;
  box-shadow: var(--lift-3);
}
.lbox__cap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  font-size: 15px;
  text-align: center;
  color: rgba(255, 255, 255, 0.86);
}
.lbox__cap small {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.56);
}
.lbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  transition:
    background 0.18s var(--ease),
    border-color 0.18s var(--ease);
}
.lbox__btn:hover {
  border-color: var(--sprout);
  background: var(--sprout);
}
.lbox__btn--close {
  top: 14px;
  right: 14px;
}
.lbox__btn--prev,
.lbox__btn--next {
  top: 50%;
  transform: translateY(-50%);
}
.lbox__btn--prev {
  left: 16px;
}
.lbox__btn--next {
  right: 16px;
}
/* the page behind must not scroll while a photo is open */
html.lbox-open {
  overflow: hidden;
}
@media (max-width: 767.98px) {
  .lbox {
    padding: 64px 12px 88px;
  }
  .lbox__img {
    max-height: calc(100vh - 200px);
  }
  /* on a phone the arrows move under the photo, out of the thumb's way */
  .lbox__btn--prev,
  .lbox__btn--next {
    top: auto;
    bottom: 22px;
    transform: none;
  }
  .lbox__btn--prev {
    left: calc(50% - 56px);
  }
  .lbox__btn--next {
    right: calc(50% - 56px);
  }
}

/* 20 · Text animation ==================================================== */
/* Word fade-up on flat text. main.js splits headings and paragraphs into
   .w > i pairs and adds .is-in when the block scrolls into view. Nothing
   here runs until that class lands, so text is readable with JS disabled. */

.anim-text .w {
  display: inline-block;
  vertical-align: top;
}
.anim-text .w > i {
  display: inline-block;
  font-style: inherit;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.5s var(--ease),
    transform 0.62s cubic-bezier(0.16, 0.84, 0.34, 1);
}
.anim-text.is-in .w > i {
  opacity: 1;
  transform: none;
}
/* an icon sitting directly in an animated block arrives with the first word */
.anim-text > i {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.5s var(--ease) var(--anim-base, 0s),
    transform 0.62s cubic-bezier(0.16, 0.84, 0.34, 1) var(--anim-base, 0s);
}
.anim-text.is-in > i {
  opacity: 1;
  transform: none;
}

/* Motion is an enhancement, never a requirement: if the user asks for less
   motion the words are simply present. */
@media (prefers-reduced-motion: reduce) {
  .anim-text .w > i,
  .anim-text > i {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --- Hero reveal ------------------------------------------------------- */
/* Same curve and left-to-right direction as the word reveal, so the hero
   reads as one gesture rather than three unrelated effects. */

.hero__cta-item {
  display: inline-flex;
}

.anim-hero .pill,
.anim-hero .eyebrow,
.anim-hero .hero__cta-item {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.5s var(--ease) var(--anim-base, 0s),
    transform 0.62s cubic-bezier(0.16, 0.84, 0.34, 1) var(--anim-base, 0s);
}
/* the rule is a line, so it draws rather than fades */
.anim-hero .hero__eyebrow-rule {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s cubic-bezier(0.16, 0.84, 0.34, 1) calc(var(--anim-base, 0s) + 0.12s);
}
/* opacity only: transform keeps its own 0.22s transition so the hover
   slide on .btn:hover .btn__icon stays at its original speed */
.anim-hero .btn__icon {
  opacity: 0;
  transition:
    opacity 0.4s var(--ease) calc(var(--anim-base, 0s) + 0.3s),
    transform 0.22s var(--ease);
}

.anim-hero .eyebrow {
  transition-delay: calc(var(--anim-base, 0s) + 0.2s);
}
.anim-hero .hero__cta-item:nth-child(2) {
  transition-delay: calc(var(--anim-base, 0s) + 0.08s);
}
.anim-hero .hero__cta-item:nth-child(2) .btn__icon {
  transition-delay: calc(var(--anim-base, 0s) + 0.38s);
}
.anim-hero .pill--live .pill__dot {
  animation-delay: calc(var(--anim-base, 0s) + 0.5s);
}

.anim-hero.is-in .pill,
.anim-hero.is-in .eyebrow,
.anim-hero.is-in .hero__cta-item {
  opacity: 1;
  transform: none;
}
.anim-hero.is-in .hero__eyebrow-rule {
  transform: none;
}
.anim-hero.is-in .btn__icon {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .anim-hero .pill,
  .anim-hero .eyebrow,
  .anim-hero .hero__cta-item,
  .anim-hero .hero__eyebrow-rule,
  .anim-hero .btn__icon {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --- Block reveal ------------------------------------------------------- */
/* Cards and panels rise and fade as they enter. Applied by main.js, which
   also staggers siblings, so nothing is hidden if the script never runs. */
.anim-block {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.55s var(--ease),
    transform 0.7s cubic-bezier(0.16, 0.84, 0.34, 1);
}
.anim-block.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .anim-block {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

.call-fab {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #2e7d32;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.call-fab::before {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  background-color: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24c1.12.37 2.33.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24c1.12.37 2.33.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.call-fab:hover,
.call-fab:focus {
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.ext-frame {
  display: block;
  width: 100%;
  height: 70vh;
  border: 0;
}
/* --- Карти на продуктите: вертикални снимки, по-компактно ------------- */
.plot-card__media {
  aspect-ratio: 4 / 5;
  background: #fff;
}
.plot-card__media .pc__photo {
  object-fit: contain;
  padding: 8px;
}
.plot-card__media::after {
  display: none;
}
.plot-card__media .pc__status {
  left: 10px;
  right: 10px;
  top: 10px;
  justify-content: center;
  text-align: center;
  white-space: normal;
  font-size: 11px;
  letter-spacing: 0.04em;
}

/* бутоните: разстояние между тях */
.plot-card__cta {
  display: grid;
  gap: 10px;
}

.plot-card__head h3 {
  font-size: 17px;
  line-height: 1.3;
}

@media (max-width: 575.98px) {
  .plot-card {
    padding: 6px;
    border-radius: 14px;
  }
  .plot-card__media {
    aspect-ratio: 1 / 1;
    border-radius: 10px;
  }
  .plot-card__body {
    padding: 12px 6px 6px;
  }
  .plot-card__head h3 {
    font-size: 14px;
  }
  .plot-card__fundtop {
    margin-bottom: 6px;
  }
  .plot-card__raised {
    font-size: 13px;
  }
  .plot-card__pct {
    font-size: 12px;
  }
  .plot-card__cta {
    margin-top: 12px;
    gap: 8px;
  }
  .plot-card__cta .btn {
    --bs-btn-padding-y: 8px;
    --bs-btn-padding-x: 8px;
    --bs-btn-font-size: 12px;
    white-space: normal;
    line-height: 1.25;
  }
  .plot-card__cta .btn .btn__icon {
    display: none;
  }
  #plots .row.g-4 {
    --bs-gutter-x: 12px;
    --bs-gutter-y: 12px;
  }
}

/* разстояние между цената/лентата и бутоните */
#plots .pc__track {
  margin-bottom: 18px;
}

@media (max-width: 575.98px) {
  #plots .pc__track {
    margin-bottom: 12px;
  }
  #plots .plot-card__cta {
    margin-top: auto; /* бутоните остават долу и са на една линия във всички карти */
  }
}

.plot-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.plot-hero__media {
    width: 200px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    overflow: hidden;
}

.plot-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.legal-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.legal-modal.active {
    display: flex;
}

.legal-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 20, 35, .75);
    backdrop-filter: blur(5px);
}

.legal-modal__box {
    position: relative;
    width: 100%;
    max-width: 850px;
    max-height: 85vh;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(0,0,0,.25);
    animation: legalShow .25s ease;
}

.legal-modal__content {
    padding: 40px;
    max-height: 85vh;
    overflow-y: auto;
    color: #333;
    line-height: 1.7;
}

.legal-modal__close {
    position: absolute;
    top: 12px;
    right: 18px;
    z-index: 2;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #f1f3f5;
    color: #333;
    font-size: 27px;
    cursor: pointer;
    line-height: 1;
}

.legal-modal__close:hover {
    background: #e2e6ea;
}

.legal-loading {
    text-align: center;
    padding: 50px;
    color: #777;
}

@keyframes legalShow {
    from {
        opacity: 0;
        transform: translateY(20px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 600px) {
    .legal-modal {
        padding: 10px;
    }

    .legal-modal__box {
        max-height: 90vh;
        border-radius: 14px;
    }

    .legal-modal__content {
        padding: 55px 22px 25px;
        max-height: 90vh;
    }
}

.inquiry-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 15px;
}

.inquiry-modal.active {
    display: flex;
}

.inquiry-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 25, 40, .75);
    backdrop-filter: blur(5px);
}

.inquiry-box {
    position: relative;
    z-index: 1;
    background: #fff;
    width: 100%;
    max-width: 480px;
    padding: 35px;
    border-radius: 20px;
    box-shadow: 0 25px 70px rgba(0,0,0,.25);
    max-height: 90vh;
    overflow-y: auto;
}

.inquiry-close {
    position: absolute;
    right: 15px;
    top: 12px;
    border: 0;
    background: #f1f3f5;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    font-size: 25px;
    cursor: pointer;
}

.inquiry-box h3 {
    font-size: 24px;
    margin: 0 0 8px;
    color: #172b24;
}

.inquiry-box > p {
    color: #777;
    font-size: 14px;
    margin-bottom: 22px;
}

.inquiry-product {
    background: #f5f8f4;
    border-radius: 10px;
    padding: 12px 15px;
    margin-bottom: 20px;
    font-size: 13px;
    color: #333;
    line-height: 1.6;
}

.inquiry-box label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 7px;
    color: #333;
}

.inquiry-box input {
    width: 100%;
    height: 48px;
    border: 1px solid #ddd;
    border-radius: 9px;
    padding: 0 14px;
    font-size: 15px;
    margin-bottom: 16px;
    box-sizing: border-box;
}

.inquiry-box input:focus {
    border-color: #7bbb5e;
    outline: none;
    box-shadow: 0 0 0 3px rgba(123,187,94,.12);
}

.inquiry-submit {
    width: 100%;
    padding: 14px;
    background: #7bbb5e;
    color: #fff;
    border: 0;
    border-radius: 9px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

#inquiryMessage {
    margin-top: 15px;
    text-align: center;
    font-size: 14px;
}

@media (max-width: 480px) {
    .inquiry-box {
        padding: 30px 20px;
    }
}

.plot-card__raised {
    font-size: 23px;
    font-weight: 700;
    color: #f28c28;
    letter-spacing: -0.5px;
}
.plot-hero__raised {
    font-size: 23px;
    font-weight: 700;
    color: #f28c28;
    letter-spacing: -0.5px;
}