:root {
  --green: #1F3D2B;
  --stone: #E8E2D9;
  --clay: #C4A484;
  --sky: #4A7C9B;
  --ink: #1A1A1A;
  --paper: #F6F3EE;
  --muted: #5C5A55;
  --line: #D6CEC2;
  --bronze: #9C7650;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
header.bar {
  background: #fff;
  color: var(--green);
  border-bottom: 3px solid var(--clay);
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.wordmark { font-weight: 700; letter-spacing: 0.22em; font-size: 15px; }
.motto { font-size: 13px; color: var(--clay); }
main { max-width: 640px; margin: 0 auto; padding: 24px 16px 64px; }
h1 { font-size: 30px; line-height: 1.15; margin: 8px 0 12px; color: var(--green); text-wrap: balance; }
h2 { font-size: 21px; line-height: 1.25; margin: 0 0 6px; color: var(--green); text-wrap: balance; }
h3 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 14px 0 4px; }
p { margin: 0 0 12px; }
.lead { font-size: 18px; }
.small { font-size: 14px; color: var(--muted); }
.countdown {
  background: var(--green); color: var(--stone);
  border-radius: 10px; padding: 14px 16px; margin: 18px 0;
  display: flex; gap: 14px; align-items: center;
}
.countdown b { font-size: 34px; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
button, .btn {
  font: inherit; cursor: pointer; border-radius: 10px; border: 2px solid var(--green);
  padding: 14px 16px; min-height: 52px; width: 100%; text-align: left;
  background: #fff; color: var(--ink); display: block; text-decoration: none;
}
button:hover, .btn:hover { background: var(--stone); }
button:focus-visible, .btn:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
button.primary, .btn.primary { background: var(--green); color: #fff; text-align: center; font-weight: 600; }
button.primary:hover, .btn.primary:hover { background: #17301f; }
button.link { border: 0; background: none; color: var(--sky); width: auto; min-height: 0; padding: 8px 0; text-decoration: underline; }
button.chosen { background: var(--green); color: #fff; }
.options { display: grid; gap: 10px; margin: 16px 0; }
.progress { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; margin-bottom: 18px; }
.progress i { display: block; height: 100%; background: var(--clay); }
.help { font-size: 15px; color: var(--muted); }
.card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin: 12px 0; }
.card.check { border-left: 6px solid var(--sky); }
.card.yes { border-left: 6px solid var(--green); }
.tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; margin-bottom: 8px; }
.tag.yes { background: var(--green); color: #fff; }
.tag.check { background: var(--sky); color: #fff; }
.due { font-weight: 600; color: var(--green); }
ul { margin: 4px 0 8px; padding-left: 20px; }
li { margin-bottom: 4px; }
.notice { background: var(--stone); border-radius: 10px; padding: 14px 16px; margin: 14px 0; }
.skipped li { color: var(--muted); }
.src { font-size: 13px; color: var(--muted); }
a { color: var(--sky); }
.scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 8px 0 14px; }
.scale button { text-align: center; padding: 10px 0; min-height: 48px; }
footer { max-width: 640px; margin: 0 auto; padding: 0 16px 40px; font-size: 13px; color: var(--muted); }
@media print {
  header.bar, .noprint, footer { display: none; }
  body { background: #fff; font-size: 12pt; }
  .card { break-inside: avoid; }
}

/* shared site additions */
header.bar { align-items: center; gap: 12px; flex-wrap: wrap; }
a.wordmark { display: block; line-height: 0; }
a.wordmark img { height: 22px; width: auto; display: block; }
header.bar nav { display: flex; gap: 16px; font-size: 14px; }
header.bar nav a { color: var(--green); font-weight: 600; text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
header.bar nav a:hover, header.bar nav a[aria-current="page"] { border-bottom-color: var(--clay); }
main.wide { max-width: 960px; }
.hero {
  position: relative; overflow: hidden; background: var(--green); color: var(--stone);
  border-radius: 16px; padding: 36px 28px 84px; margin: 20px 0;
  display: grid; grid-template-columns: 1fr 200px; gap: 24px; align-items: center;
}
.hero h1 { font-size: 38px; color: #fff; margin-top: 0; }
.hero .lead { color: var(--stone); }
.hero .small { color: var(--clay); }
.hero .mark { width: 200px; height: 200px; }
.hero .hills { position: absolute; left: 0; bottom: 0; width: 100%; height: 70px; }
.hero > div, .hero .mark { position: relative; z-index: 1; }
.btn.cta { background: var(--clay); border-color: var(--clay); color: var(--ink); font-weight: 700; text-align: center; }
.btn.cta:hover { background: #d3b697; }
.motto-line { letter-spacing: 0.08em; text-transform: uppercase; font-size: 13px; color: var(--clay); margin: 0 0 10px; }
.ico { width: 40px; height: 40px; display: block; margin-bottom: 10px; fill: none; stroke: var(--bronze); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ico .g { stroke: var(--green); }
.sitefoot { background: var(--green); color: var(--stone); margin-top: 40px; padding: 28px 20px; }
.sitefoot .in { max-width: 960px; margin: 0 auto; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.sitefoot svg { width: 48px; height: 48px; flex: none; }
.sitefoot p { margin: 0; font-size: 14px; }
.sitefoot a { color: #fff; }
.eyebrow { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; }
.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 12px 0 28px; }
.grid .card { margin: 0; }
.card h2 a { color: var(--green); }
.band { background: #fff; border: 1px solid var(--line); border-left: 6px solid var(--clay); border-radius: 12px; padding: 18px 20px; margin: 20px 0 28px; }
.steps { counter-reset: step; list-style: none; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.steps li { counter-increment: step; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 0; }
.steps li { position: relative; }
.steps li::after { content: counter(step); position: absolute; top: 12px; right: 14px; font-size: 22px; font-weight: 700; color: var(--line); line-height: 1; }
.steps b { display: block; color: var(--green); }
.pill { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; background: var(--stone); color: var(--ink); }
.pill.live { background: var(--green); color: #fff; }
.pill.ok { background: var(--green); color: #fff; }
.pill.wait { background: var(--clay); color: var(--ink); }
.btn.inline, button.inline { display: inline-block; width: auto; }
label { display: block; font-weight: 600; margin: 12px 0 4px; }
input[type=text], input[type=email], input[type=date], input[type=time], input[type=number], select, textarea {
  font: inherit; width: 100%; padding: 12px; border: 2px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink);
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--sky); outline-offset: 1px; }
.entry { display: grid; grid-template-columns: 72px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.entry:first-of-type { border-top: 0; }
.entry img, .entry .noimg { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; background: var(--stone); }
.entry p { margin: 0 0 4px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.row > * { flex: 1 1 140px; }
button.small-btn { min-height: 0; padding: 6px 10px; width: auto; font-size: 14px; border-width: 1px; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 10px 0; }
.tiers span { text-align: center; padding: 10px 4px; border-radius: 8px; background: var(--stone); font-size: 14px; color: var(--muted); }
.tiers span.on { background: var(--green); color: #fff; font-weight: 700; }
.sharebox { border: 2px dashed var(--sky); border-radius: 12px; padding: 16px; margin: 12px 0; background: #fff; }
@media (max-width: 640px) {
  .hero { grid-template-columns: 1fr; padding: 28px 20px 76px; }
  .hero h1 { font-size: 30px; }
  .hero .mark { width: 96px; height: 96px; order: -1; }
  a.wordmark img { height: 18px; }
}

/* Pine O as the bullet for section headings */
:root { --pine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'%3E%3Cpath d='M38.5 86.2A38 38 0 1 1 61.5 86.2' stroke='%231F3D2B' stroke-width='10'/%3E%3Cg stroke='%239C7650' stroke-linejoin='round'%3E%3Cpath d='M34.9 51.3 50 29.8 65.1 51.3M31.6 67.1 50 43.6 68.4 67.1' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M50 46V94' stroke-width='7.9'/%3E%3C/g%3E%3C/svg%3E"); }
h2.sec { display: flex; align-items: center; gap: 10px; margin: 32px 0 12px; font-size: 24px; }
h2.sec::before { content: ""; flex: none; width: 30px; height: 30px; background: var(--pine) center / contain no-repeat; }
h1.sec { display: flex; align-items: center; gap: 12px; }
h1.sec::before { content: ""; flex: none; width: 38px; height: 38px; background: var(--pine) center / contain no-repeat; }

/* Inline help under a question */
button.info { display: inline-flex; align-items: center; gap: 8px; width: auto; min-height: 44px; padding: 8px 12px; border: 0; background: none; color: var(--sky); font-weight: 600; }
button.info:hover { background: var(--stone); }
button.info svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; flex: none; }
.explain { background: #fff; border: 1px solid var(--line); border-left: 6px solid var(--sky); border-radius: 12px; padding: 14px 16px; margin: 4px 0 16px; }
.explain h3 { margin-top: 0; color: var(--green); text-transform: none; letter-spacing: 0; font-size: 17px; }
.explain p { font-size: 16px; }

/* Questions page */
details.qa { background: #fff; border: 1px solid var(--line); border-radius: 12px; margin: 10px 0; }
details.qa summary { cursor: pointer; list-style: none; padding: 14px 16px; font-weight: 600; color: var(--green); display: flex; align-items: center; gap: 10px; }
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary::before { content: ""; flex: none; width: 22px; height: 22px; background: var(--pine) center / contain no-repeat; }
details.qa summary::after { content: "+"; margin-left: auto; font-size: 22px; color: var(--bronze); line-height: 1; }
details.qa[open] summary::after { content: "\2212"; }
details.qa summary:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; border-radius: 12px; }
details.qa .ans { padding: 0 16px 14px 48px; }
details.qa:target { border-color: var(--sky); box-shadow: 0 0 0 2px var(--sky); }
@media (max-width: 640px) { details.qa .ans { padding-left: 16px; } header.bar nav { gap: 12px; font-size: 13px; } }

header.bar nav a.lang { border: 1px solid var(--clay); border-radius: 6px; padding: 4px 8px; font-weight: 400; }
header.bar nav a.lang:hover { background: var(--stone); border-color: var(--clay); }

/* Progress on each action in the SFS list */
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.seg button { text-align: center; min-height: 44px; padding: 8px 4px; font-size: 15px; }
.tag.done { background: var(--bronze); color: #fff; margin-left: 6px; }
.card.isdone { background: #FBFAF7; }
.card.isdone h2 { color: var(--muted); }
.tally { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }
.tally span { flex: 1 1 90px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 14px; color: var(--muted); }
.tally b { display: block; font-size: 26px; line-height: 1.1; color: var(--green); font-variant-numeric: tabular-nums; }

/* A reminder of what the farmer gains */
.gain { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-left: 6px solid var(--bronze); border-radius: 10px; padding: 12px 14px; margin: 12px 0; font-weight: 600; color: var(--green); }
.gain::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: 1px; background: var(--pine) center / contain no-repeat; }
label.pick { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
label.pick input { width: 22px; height: 22px; flex: none; margin: 1px 0 0; accent-color: var(--green); }
button:disabled { opacity: .5; cursor: not-allowed; }
th[scope=row] { width: 45%; text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--muted); font-weight: 400; }

/* Structured fields of a record */
ul.details { list-style: none; padding: 0; margin: 2px 0 6px; font-size: 15px; }
ul.details li { margin: 0; padding: 2px 0; border-bottom: 1px dotted var(--line); }
#extra label:first-child { margin-top: 12px; }

/* Task and record status */
h2 .code { font-weight: 400; color: var(--muted); font-size: 0.8em; }
.card.nextup { border: 2px solid var(--green); }
.status { display: inline-block; font-size: 13px; font-weight: 600; padding: 3px 8px; border-radius: 4px; }
.status.missing { background: #F3E3D3; color: #7A4A1E; }
.status.ready { background: var(--stone); color: var(--ink); }
.status.checked { background: var(--green); color: #fff; }
details.more { margin-top: 12px; }
details.more summary { cursor: pointer; color: var(--sky); font-weight: 600; padding: 8px 0; }
.demo-note { background: #F3E3D3; color: #5a3714; border-radius: 8px; padding: 10px 12px; font-size: 15px; margin: 10px 0; }
.error { background: #F8DADA; color: #7a1f1f; border-radius: 8px; padding: 10px 12px; margin: 10px 0; font-weight: 600; }
.hero .alt { display: inline-block; margin-left: 14px; color: var(--stone); }

/* Task cards: short first, detail folded */
.card .short { font-size: 17px; margin: 0 0 6px; }
.card .due { margin-bottom: 10px; }
details.fold { border-top: 1px solid var(--line); }
details.fold:first-of-type { margin-top: 14px; }
details.fold summary { cursor: pointer; list-style: none; padding: 12px 0; min-height: 44px; font-weight: 600; color: var(--green); display: flex; align-items: center; }
details.fold summary::-webkit-details-marker { display: none; }
details.fold summary::after { content: "+"; margin-left: auto; font-size: 22px; line-height: 1; color: var(--bronze); }
details.fold[open] summary::after { content: "\2212"; }
details.fold summary:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.foldbody { padding: 0 0 10px; }
.foldbody p { margin-bottom: 8px; }

/* Mobile field use: readable controls, keyboard focus and long record details. */
[hidden] { display: none !important; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
button.small-btn, button.link, details.more summary { min-height: 44px; }
.entry > div, .row > div { min-width: 0; }
.entry, td, .sharebox { overflow-wrap: anywhere; }
header.bar nav { flex-wrap: wrap; }
header.bar nav a { min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 480px) {
  header.bar nav { width: 100%; justify-content: space-between; gap: 4px; }
  .entry { grid-template-columns: 1fr; }
  .entry .noimg { display: none; }
  .row > * { flex-basis: 100%; }
  .hero .alt { margin: 12px 0 0; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* Warmer voice: headings in the same serif as the deck and the email signature */
h1, h2, .countdown b, .tally b { font-family: Georgia, "Iowan Old Style", "Times New Roman", serif; letter-spacing: -0.01em; }
h1 { font-weight: 700; }
.card h3, th, .eyebrow, .motto-line, .tag, .pill, .status { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

/* A note from the person behind it */
.founder { margin-bottom: 18px; display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: start; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px; max-width: 760px; }
.founder img, .founder .mono { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; background: var(--green); color: var(--stone); display: flex; align-items: center; justify-content: center; font: 700 30px Georgia, serif; }
.founder p { margin-bottom: 10px; }
.founder .sig { font-family: Georgia, serif; font-style: italic; color: var(--green); margin: 0; }
@media (max-width: 520px) { .founder { grid-template-columns: 1fr; } }

/* Photographs */
figure { margin: 0; }
figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; }
.hero { grid-template-columns: 1.05fr 1fr; }
.heropic img { width: 100%; height: 100%; max-height: 340px; object-fit: cover; border-radius: 12px; display: block; }
.heropic figcaption { color: var(--clay); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; max-width: 960px; margin-bottom: 8px; }
.pic img { width: 100%; height: auto; border-radius: 12px; display: block; }
.card.pic { padding-top: 0; overflow: hidden; }
.card.pic figure { margin: 0 -16px 12px; }
.card.pic figure img { width: 100%; height: 170px; object-fit: cover; display: block; }
.card.pic figcaption { padding: 0 16px; }
.founder img { object-position: 50% 45%; }
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; }
  .heropic img { max-height: 200px; }
  .split { grid-template-columns: 1fr; }
}

/* Header: larger wordmark with the motto beneath it */
a.wordmark { text-decoration: none; }
a.wordmark img { height: 30px; width: auto; }
a.wordmark .motto { display: block; margin-top: 7px; line-height: 1.2; font-size: 11px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bronze); }
figcaption { font-style: italic; }
.credits { font-size: 12px; line-height: 1.45; color: var(--muted); max-width: 760px; margin: 28px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.band.aboutlink { margin-top: 8px; }
@media (max-width: 480px) { a.wordmark img { height: 26px; width: auto; } header.bar nav { font-size: 13px; } }

/* Sample farm bar: says plainly that these are not the farmer's records, with the way out */
.demo-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 12px 14px; }
.demo-bar p { margin: 0; flex: 1 1 260px; }
.demo-bar button.primary { width: auto; flex: none; min-height: 44px; }
#asked .pill { display: inline-block; margin-top: 12px; }

/* Waiting list: a band with one button; the form opens in a pop-up built by waitlist.js */
.wl-band { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.wl-band > div { flex: 1 1 320px; }
.wl-band button.primary { width: auto; padding-left: 28px; padding-right: 28px; }
.waitlist-dialog { width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; border: 0; border-radius: 14px; padding: 24px 22px 20px; background: #fff; color: var(--ink); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.waitlist-dialog::backdrop { background: rgba(31, 61, 43, .6); }
.waitlist-dialog h2 { margin: 0 36px 8px 0; color: var(--green); }
.waitlist-dialog .wl-close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; min-height: 0; padding: 0; border: 0; background: none; font-size: 28px; line-height: 1; color: var(--muted); text-align: center; }
.waitlist-dialog .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.waitlist-dialog label.pick { border-bottom: 0; margin-top: 8px; }
.waitlist-dialog form button.primary { margin-top: 12px; }
.waitlist-dialog .wl-note { margin: 12px 0 0; font-size: 12.5px; }
@media (max-width: 560px) { .wl-band button.primary { width: 100%; } }

/* Four cards sit two by two instead of three and one */
.grid.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 560px) { .grid.two { grid-template-columns: 1fr; } }
/* Three cards go straight from a row of three to a single column, never two and one */
@media (max-width: 780px) { .grid:not(.two) { grid-template-columns: 1fr; } }

/* Plain-text reference under the SFS check */
.below { max-width: 640px; margin: 0 auto; padding: 0 16px 24px; }
.ua-list { padding-left: 22px; margin: 8px 0 12px; }
.ua-list li { margin-bottom: 8px; }
.ua-list .src { display: block; }

/* "Hear when it opens": the bell button that opens the waiting list from every page */
header.bar nav { margin-left: auto; }
button.notify { display: inline-flex; align-items: center; gap: 8px; width: auto; min-height: 44px; padding: 8px 16px; border: 0; border-radius: 999px; background: var(--clay); color: var(--ink); font-weight: 700; font-size: 14px; text-align: left; cursor: pointer; }
button.notify:hover { background: #d3b697; }
button.notify svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
button.notify.onhero { background: transparent; border: 2px solid var(--clay); color: var(--stone); font-weight: 600; }
button.notify.onhero:hover { background: rgba(196, 164, 132, .18); }
@media (max-width: 900px) {
  header.bar > button.notify { margin-left: auto; }
  header.bar nav { order: 3; width: 100%; margin-left: 0; justify-content: space-between; }
}
@media (max-width: 480px) {
  header.bar > button.notify { width: 44px; padding: 0; justify-content: center; }
  header.bar > button.notify span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media print { button.notify { display: none; } }

/* Account link in the header, and the sign-in page */
header.bar a.acct { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 10px; border-radius: 999px; color: var(--green); font-weight: 600; font-size: 14px; text-decoration: none; }
header.bar a.acct:hover { background: var(--stone); }
header.bar a.acct svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
header.bar a.acct.in svg { stroke: var(--bronze); fill: rgba(196, 164, 132, .35); }
@media (max-width: 900px) { header.bar a.acct { margin-left: auto; } header.bar a.acct + button.notify { margin-left: 0; } }
@media (max-width: 480px) { header.bar a.acct { width: 44px; padding: 0; justify-content: center; } header.bar a.acct span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
button.provider { text-align: center; font-weight: 600; margin-bottom: 10px; }
p.or { text-align: center; color: var(--muted); margin: 6px 0; font-size: 14px; }
@media print { header.bar a.acct { display: none; } }
/* Phones: wordmark, account and bell share the first row of the header */
@media (max-width: 480px) {
  header.bar { gap: 8px; padding-left: 16px; padding-right: 16px; }
  a.wordmark img { height: 24px; }
  a.wordmark .motto { font-size: 9px; letter-spacing: 0.1em; margin-top: 6px; }
}

/* Home: scope line, three steps, worked example, trust line, planned feature */
.hero .scope { margin: 0 0 8px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clay); }
.steps.three { grid-template-columns: repeat(3, 1fr); }
.steps.three li a { display: block; margin-top: 8px; font-weight: 600; }
@media (max-width: 780px) { .steps.three { grid-template-columns: 1fr; } }
.card.example { max-width: 760px; }
.card.example h3 { margin: 4px 0 4px; }
.ex-record { border-left: 4px solid var(--clay); background: var(--paper); border-radius: 8px; padding: 10px 14px; }
.ex-record p { margin: 0 0 6px; }
.trust { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 18px 0 22px; font-weight: 600; color: var(--green); }
.trust span::before { content: "✓ "; color: var(--bronze); }
.card.planned { max-width: 760px; border-style: dashed; }
.card.planned h3 { margin: 8px 0 4px; }
/* SFS results grouped by what to do with them */
h2.grp { margin: 28px 0 2px; font-size: 21px; color: var(--green); }
.grp-line { margin: 0 0 10px; }
/* Diary: what happens after saving */
.saved-box { border-left: 6px solid var(--green); }
.row-btns { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 10px 0 0; }
.row-btns .btn, .row-btns button { width: auto; }

/* ===== Attention: four kinds of callout, one family =====
   gain    what the farmer gets         green tint, pine mark
   key     a date that matters          clay band, dark number block
   notice  something to know or check   sky bar, "i" mark
   demo    a demonstration, not live    dashed clay frame, DEMO label
   Use at most one gain per screen, and keep the text short. */
.gain { background: #EEF3EC; border: 1px solid #CFDCCB; border-left: 6px solid var(--green); border-radius: 10px; padding: 12px 16px; color: var(--green); font-weight: 600; align-items: center; }
.gain::before { width: 28px; height: 28px; margin-top: 0; border-radius: 50%; background: #fff var(--pine) center / 18px no-repeat; box-shadow: 0 0 0 1px #CFDCCB; }

.band.key { display: flex; gap: 18px; align-items: center; background: linear-gradient(90deg, #FBF5EC, #fff 55%); border-left-color: var(--clay); }
.band.key .num { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 86px; height: 86px; border-radius: 14px; background: var(--green); color: var(--stone); }
.band.key .num b { font: 700 36px/1 Georgia, "Times New Roman", serif; color: #fff; font-variant-numeric: tabular-nums; }
.band.key .num span { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 4px; }
@media (max-width: 480px) { .band.key { align-items: flex-start; } .band.key .num { width: 68px; height: 68px; } .band.key .num b { font-size: 28px; } }

.notice { position: relative; background: #EEF3F6; border: 1px solid #CFDDE6; border-left: 6px solid var(--sky); padding: 12px 16px 12px 46px; }
.notice::before { content: "i"; position: absolute; left: 14px; top: 12px; width: 22px; height: 22px; border-radius: 50%; background: var(--sky); color: #fff; font: italic 700 14px/22px Georgia, serif; text-align: center; }

.demo-note { border: 1px dashed var(--clay); background: #FBF4EC; color: #5a3714; }
.demo-note:not(.demo-bar)::before { content: "Demo"; display: inline-block; margin-right: 8px; padding: 1px 7px; border-radius: 4px; background: var(--clay); color: var(--ink); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: 1px; }

.card.nextup { background: #EEF3EC; border: 2px solid var(--green); }
.card.nextup h2::before { content: "→ "; color: var(--bronze); }

/* Two benefits side by side, each with its own mark */
.benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; }
.benefit { display: flex; gap: 12px; align-items: flex-start; background: #EEF3EC; border: 1px solid #CFDCCB; border-radius: 12px; padding: 14px 16px; }
.benefit svg { flex: none; width: 34px; height: 34px; padding: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px #CFDCCB; fill: none; stroke: var(--bronze); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.benefit svg .g { stroke: var(--green); }
.benefit b { display: block; color: var(--green); }
.benefit p { margin: 2px 0 0; font-size: 15px; color: var(--ink); }
@media (max-width: 560px) { .benefits { grid-template-columns: 1fr; } }

/* "Continue with Google": white button with Google's mark, per Google's sign-in branding guidelines */
button.provider { display: flex; align-items: center; justify-content: center; gap: 12px; background: #fff; border: 1px solid #747775; color: #1F1F1F; font-weight: 600; }
button.provider:hover { background: #F7F8F8; }
button.provider .logo { width: 20px; height: 20px; flex: none; }

/* ===== Paper =====
   A4, a heading with the farm and date, page numbers, plain statuses, nothing that only works on screen. */
.print-head, .print-status { display: none; }
@page { size: A4; margin: 14mm 14mm 16mm; @bottom-left { content: "Porthmon · porthmon.com · A guide to the published rules, not official advice"; font: 8pt Helvetica, Arial, sans-serif; color: #666; } @bottom-right { content: "Page " counter(page) " of " counter(pages); font: 8pt Helvetica, Arial, sans-serif; color: #666; } }
@media print {
  html, body { background: #fff !important; }
  body { font-size: 10.5pt; line-height: 1.35; color: #000; }
  main, main.wide { max-width: none; padding: 0; margin: 0; }
  [data-storage-note], #summary > p.small { display: none !important; }
  .entry:has(.noimg) { grid-template-columns: 1fr; }
  .print-head { display: flex !important; align-items: center; gap: 6mm; padding-bottom: 3mm; margin-bottom: 5mm; border-bottom: 1.5pt solid #1F3D2B; }
  .print-head img { height: 7mm; width: auto; }
  .print-head b { display: block; font: 700 14pt Georgia, serif; color: #1F3D2B; }
  .print-head span { font-size: 9pt; color: #444; }
  .print-status { display: block !important; float: right; font-weight: 700; font-size: 10pt; }
  .gain, .lead, .eyebrow, .demo-note, .demo-bar, button, .btn, .seg, .notify, .acct, #backupNotice, #saved, .below, .nextup .small, .grp-line { display: none !important; }
  h1.sec { font-size: 16pt; margin: 0 0 3mm; } h1.sec::before, h2.sec::before { display: none; }
  h2 { font-size: 12.5pt; } h2.grp { font-size: 12pt; margin: 5mm 0 2mm; break-after: avoid; border-bottom: 0.75pt solid #999; padding-bottom: 1mm; }
  .card { border: 0.75pt solid #999; border-radius: 2mm; padding: 3mm 4mm; margin: 0 0 3mm; box-shadow: none; background: #fff !important; break-inside: avoid; }
  .card.yes { border-left: 3pt solid #1F3D2B; } .card.check { border-left: 3pt solid #4A7C9B; } .card.isdone { opacity: 1; }
  .tag { background: none !important; color: #000 !important; border: 0.75pt solid #000; padding: 0.5mm 1.5mm; font-size: 7.5pt; }
  .due { color: #000; }
  details.fold { border-top: 0.5pt solid #ccc; } details.fold:first-of-type { margin-top: 2mm; }
  details.fold summary { padding: 1.5mm 0 0.5mm; min-height: 0; font-size: 9.5pt; color: #1F3D2B; } details.fold summary::after { display: none; }
  .foldbody { padding: 0 0 1.5mm; font-size: 9.5pt; } .foldbody p, .foldbody ul { margin: 0 0 1mm; }
  .tally span { border: 0.75pt solid #999; padding: 1.5mm 3mm; } .tally b { font-size: 14pt; }
  .countdown, .band.key { background: #fff !important; color: #000; border: 0.75pt solid #999; } .countdown b { color: #000; }
  .notice { background: #fff !important; border: 0.75pt solid #999; border-left: 3pt solid #4A7C9B; }
  a { color: #000; text-decoration: none; }
  .entry { grid-template-columns: 26mm 1fr; padding: 2mm 0; break-inside: avoid; }
  .entry img { width: 26mm; height: 26mm; } .entry .noimg { display: none; }
  .status { border: 0.75pt solid #000; background: none !important; color: #000 !important; }
  table { width: 100%; border-collapse: collapse; } th, td { border-bottom: 0.5pt solid #bbb; padding: 1mm 2mm; text-align: left; }
}

/* Diary: quick-fill buttons above the fields */
.helpers { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 12px 0 0; }
.helpers .small { flex-basis: 100%; }

/* Every printed page carries the Porthmon wordmark. Pages with their own print heading (SFS list, diary) use that;
   the rest print the site header reduced to the wordmark and motto. */
@media print {
  body:not(:has(.print-head)):not(.print-share) header.bar { display: flex !important; justify-content: flex-start; padding: 0 0 3mm; margin: 0 0 5mm; border-bottom: 1.5pt solid #1F3D2B; background: #fff; }
  header.bar nav, header.bar .acct, header.bar .notify { display: none !important; }
  header.bar a.wordmark img { height: 7mm; }
  header.bar a.wordmark .motto { font-size: 7pt; color: #9C7650; }
  .sitefoot { display: none !important; }
}

/* ===== Icons: one two-tone line style (bronze outline, green accent) =====
   Page titles carry their page's icon; headings for a farm, a record type or a scheme action carry theirs. */
:root { --ic-passport: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%239C7650%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%225%22 y=%223%22 width=%2214%22 height=%2218%22 rx=%222%22/%3E%3Cpath stroke=%22%231F3D2B%22 d=%22M10.2 12.6A3 3 0 1 1 13.8 12.6M12 9.4v4.4%22/%3E%3Cpath d=%22M9 17h6%22/%3E%3C/svg%3E"); --ic-farm: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%239C7650%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3.5 20.5V10L12 4l8.5 6v10.5z%22/%3E%3Cpath d=%22M3.5 10h17%22/%3E%3Cpath stroke=%22%231F3D2B%22 d=%22M9 20.5v-6h6v6M9 14.5l6 6M15 14.5l-6 6%22/%3E%3C/svg%3E"); --ic-diary: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%239C7650%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%225.5%22 y=%223%22 width=%2214%22 height=%2218%22 rx=%222%22/%3E%3Cpath d=%22M5.5 7.5H3.5M5.5 12H3.5M5.5 16.5H3.5%22/%3E%3Cpath stroke=%22%231F3D2B%22 d=%22M9.5 8h6M9.5 12h6M9.5 16h4%22/%3E%3C/svg%3E"); --ic-list: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%239C7650%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%225%22 y=%225%22 width=%2214%22 height=%2216%22 rx=%222%22/%3E%3Cpath d=%22M9 3.5h6v3H9z%22/%3E%3Cpath stroke=%22%231F3D2B%22 d=%22M8.5 13.5l2.2 2.2 4.6-4.8%22/%3E%3C/svg%3E"); --ic-help: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%239C7650%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath stroke=%22%231F3D2B%22 d=%22M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.7.3-1 .8-1 1.5v.7M12 17.2v.2%22/%3E%3C/svg%3E"); --ic-person: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%239C7650%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%228.5%22 r=%223.6%22/%3E%3Cpath stroke=%22%231F3D2B%22 d=%22M4.8 20c.8-3.6 3.7-5.6 7.2-5.6s6.4 2 7.2 5.6%22/%3E%3C/svg%3E"); --ic-lock: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%239C7650%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%225%22 y=%2211%22 width=%2214%22 height=%229%22 rx=%222%22/%3E%3Cpath stroke=%22%231F3D2B%22 d=%22M8 11V8a4 4 0 0 1 8 0v3%22/%3E%3C/svg%3E"); --ic-shield: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%239C7650%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3l7 3v5.2c0 4.8-3 8.2-7 9.8-4-1.6-7-5-7-9.8V6z%22/%3E%3Cpath stroke=%22%231F3D2B%22 d=%22M8.8 12.2l2.3 2.3 4.2-4.5%22/%3E%3C/svg%3E"); --ic-share: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%239C7650%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%226%22 cy=%2212%22 r=%222.6%22/%3E%3Ccircle stroke=%22%231F3D2B%22 cx=%2218%22 cy=%226%22 r=%222.6%22/%3E%3Ccircle stroke=%22%231F3D2B%22 cx=%2218%22 cy=%2218%22 r=%222.6%22/%3E%3Cpath d=%22M8.3 10.8l7.4-3.6M8.3 13.2l7.4 3.6%22/%3E%3C/svg%3E"); --ic-sprout: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%239C7650%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 21v-9%22/%3E%3Cpath stroke=%22%231F3D2B%22 d=%22M12 12c0-4 3-6.5 7.5-6.5C19.5 9.5 16.5 12 12 12z%22/%3E%3Cpath stroke=%22%231F3D2B%22 d=%22M12 15c0-3-2.2-5-6.5-5 0 3 2.2 5 6.5 5z%22/%3E%3C/svg%3E"); --ic-soil: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%239C7650%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 16.5h18M5 20.5h14%22/%3E%3Cpath stroke=%22%231F3D2B%22 d=%22M12 16.5v-5M12 11.5c0-3 2-5 5-5 0 3-2 5-5 5zM12 13.5c0-2.2-1.6-4-4-4 0 2.2 1.6 4 4 4z%22/%3E%3C/svg%3E"); --ic-spray: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%239C7650%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3c3 4 5.5 7 5.5 10.3a5.5 5.5 0 0 1-11 0C6.5 10 9 7 12 3z%22/%3E%3Cpath stroke=%22%231F3D2B%22 d=%22M9.7 14a2.4 2.4 0 0 0 2.3 2.3%22/%3E%3C/svg%3E"); --ic-chart: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%239C7650%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 20.5h16%22/%3E%3Cpath stroke=%22%231F3D2B%22 d=%22M7.5 20.5v-6M12 20.5V8M16.5 20.5v-9.5%22/%3E%3C/svg%3E"); --ic-training: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%239C7650%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M2.5 9.5L12 5l9.5 4.5L12 14z%22/%3E%3Cpath stroke=%22%231F3D2B%22 d=%22M6.5 11.5v4.5c3 2.2 8 2.2 11 0v-4.5M21.5 9.5v5%22/%3E%3C/svg%3E"); --ic-habitat: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%239C7650%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 21v-7%22/%3E%3Ccircle stroke=%22%231F3D2B%22 cx=%2212%22 cy=%229%22 r=%222.3%22/%3E%3Cpath stroke=%22%231F3D2B%22 d=%22M12 6.7V4.5M14.3 9h2.2M12 11.3V12M9.7 9H7.5%22/%3E%3Cpath d=%22M12 17.5c-1.8-1.8-4.5-1.8-6 0M12 19.5c1.8-1.8 4.5-1.8 6 0%22/%3E%3C/svg%3E"); --ic-map: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%239C7650%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 6.5l6-2.5 6 2.5 6-2.5v14l-6 2.5-6-2.5-6 2.5z%22/%3E%3Cpath stroke=%22%231F3D2B%22 d=%22M9 4v14M15 6.5v14%22/%3E%3C/svg%3E"); --ic-hedge: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%239C7650%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M2.5 19h19%22/%3E%3Cpath stroke=%22%231F3D2B%22 d=%22M4.5 19c-1-3 1-6 3.5-6 .5-2.5 2.5-4 4.5-4s3.5 1.5 4 4c2.5 0 4 2 3.5 6%22/%3E%3C/svg%3E"); --ic-tree: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%239C7650%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath stroke=%22%231F3D2B%22 d=%22M12 3l-6 8h3.5l-4 5.5h13l-4-5.5H18z%22/%3E%3Cpath d=%22M12 16.5v4.5%22/%3E%3C/svg%3E"); --ic-historic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%239C7650%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3.5 21h17%22/%3E%3Cpath d=%22M6 21V9.5a6 6 0 0 1 12 0V21%22/%3E%3Cpath stroke=%22%231F3D2B%22 d=%22M10 21v-5.5a2 2 0 0 1 4 0V21%22/%3E%3C/svg%3E"); --ic-animal: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%239C7650%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 8.5c-1.6 0-2.8-1.1-2.8-2.6M18 8.5c1.6 0 2.8-1.1 2.8-2.6%22/%3E%3Cpath d=%22M6.5 7.5h11v5.5a5.5 5.5 0 0 1-11 0z%22/%3E%3Cpath stroke=%22%231F3D2B%22 d=%22M9.5 12h.01M14.5 12h.01M10.3 16.3h3.4%22/%3E%3C/svg%3E"); --ic-certificate: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%239C7650%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%224%22 y=%223%22 width=%2216%22 height=%2213%22 rx=%221.5%22/%3E%3Cpath d=%22M8 7.5h8M8 10.5h5%22/%3E%3Ccircle stroke=%22%231F3D2B%22 cx=%2215.5%22 cy=%2217%22 r=%222.6%22/%3E%3Cpath stroke=%22%231F3D2B%22 d=%22M14.3 19.3l-.8 2.2 2-1 2 1-.8-2.2%22/%3E%3C/svg%3E"); }
body[data-page="index"] h1.sec::before { background-image: var(--ic-sprout); }
body[data-page="sfs-check"] h1.sec::before { background-image: var(--ic-list); }
body[data-page="diary"] h1.sec::before { background-image: var(--ic-diary); }
body[data-page="passport"] h1.sec::before { background-image: var(--ic-passport); }
body[data-page="faq"] h1.sec::before { background-image: var(--ic-help); }
body[data-page="account"] h1.sec::before { background-image: var(--ic-person); }
body[data-page="privacy"] h1.sec::before { background-image: var(--ic-lock); }
body[data-page="about"] h1.sec::before { background-image: var(--ic-sprout); }
.ic::before { content: ""; display: inline-block; flex: none; width: 1.3em; height: 1.3em; margin-right: 0.45em; vertical-align: -0.28em; background: center / contain no-repeat; }
h2.ic, h3.ic { display: flex; align-items: center; }
.ic-passport::before { background-image: var(--ic-passport); }
.ic-farm::before { background-image: var(--ic-farm); }
.ic-diary::before { background-image: var(--ic-diary); }
.ic-list::before { background-image: var(--ic-list); }
.ic-help::before { background-image: var(--ic-help); }
.ic-person::before { background-image: var(--ic-person); }
.ic-lock::before { background-image: var(--ic-lock); }
.ic-shield::before { background-image: var(--ic-shield); }
.ic-share::before { background-image: var(--ic-share); }
.ic-sprout::before { background-image: var(--ic-sprout); }
.ic-soil::before { background-image: var(--ic-soil); }
.ic-spray::before { background-image: var(--ic-spray); }
.ic-chart::before { background-image: var(--ic-chart); }
.ic-training::before { background-image: var(--ic-training); }
.ic-habitat::before { background-image: var(--ic-habitat); }
.ic-map::before { background-image: var(--ic-map); }
.ic-hedge::before { background-image: var(--ic-hedge); }
.ic-tree::before { background-image: var(--ic-tree); }
.ic-historic::before { background-image: var(--ic-historic); }
.ic-animal::before { background-image: var(--ic-animal); }
.ic-certificate::before { background-image: var(--ic-certificate); }
.ic-UA1::before { background-image: var(--ic-soil); }
.ic-UA2::before { background-image: var(--ic-spray); }
.ic-UA3::before { background-image: var(--ic-chart); }
.ic-UA4::before { background-image: var(--ic-training); }
.ic-UA5::before { background-image: var(--ic-habitat); }
.ic-UA5S::before { background-image: var(--ic-habitat); }
.ic-UA6::before { background-image: var(--ic-habitat); }
.ic-UA7::before { background-image: var(--ic-map); }
.ic-UA8::before { background-image: var(--ic-hedge); }
.ic-UA9::before { background-image: var(--ic-tree); }
.ic-UA10::before { background-image: var(--ic-tree); }
.ic-UA11::before { background-image: var(--ic-historic); }
.ic-UA12::before { background-image: var(--ic-animal); }
.ic-OTHER::before { background-image: var(--ic-certificate); }
h1.sec::before { width: 40px; height: 40px; }
@media print { .ic::before { width: 1.1em; height: 1.1em; } }

/* A record without a photo shows its type's icon instead of an empty grey square */
.entry .noimg.ic { display: grid; place-items: center; background: #EEF3EC; border: 1px solid #CFDCCB; }
.entry .noimg.ic::before { width: 34px; height: 34px; margin: 0; }
/* Change and Delete sit side by side, small */
.rec-btns { display: flex; gap: 8px; margin-top: 6px; }
.rec-btns button.small-btn { width: auto; min-height: 36px; padding: 6px 14px; }

/* ===== SFS task list (GOV.UK task-list pattern): one line per task, detail on tap ===== */
.summary-line { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 10px; color: var(--muted); font-size: 15px; }
.summary-line b { color: var(--green); font-size: 18px; font-family: Georgia, serif; }
h2.grp { display: flex; align-items: baseline; gap: 10px; }
.grp-count { margin-left: auto; font: 600 13px -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; color: var(--muted); }
.tasks { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 6px; }
.task + .task { border-top: 1px solid var(--line); }
.task.check .task-head { box-shadow: inset 4px 0 0 var(--sky); }
.task-head { display: grid; grid-template-columns: 1fr auto auto; gap: 6px 12px; align-items: center; width: 100%; min-height: 56px; padding: 10px 14px; border: 0; border-radius: 0; background: #fff; text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.task-head:hover { background: #FAF8F4; }
.task-head.static { cursor: default; }
.task.open > .task-head { background: #EEF3EC; }
.task-name { display: flex; align-items: center; font-weight: 600; color: var(--green); }
.task-due { font-size: 13px; color: var(--muted); white-space: nowrap; }
.status-tag { font: 700 12px -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; letter-spacing: 0.03em; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.status-tag.s-todo { background: var(--stone); color: var(--ink); }
.status-tag.s-evidence { background: #F3E3D3; color: #6B4A22; }
.status-tag.s-confirmed { background: var(--green); color: #fff; }
.task-panel { padding: 4px 16px 14px; border-top: 1px dashed var(--line); }
.task-panel .short { font-size: 16px; margin: 10px 0 4px; }
.task-panel .code { color: var(--muted); font-size: 13px; }
.seg.seg3 { margin: 12px 0 8px; }
.seg.seg3 button { font-size: 14px; }
.evidence { background: #FAF8F4; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin: 10px 0; }
.ev-title { margin: 2px 0 4px; font: 700 12px -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bronze); }
.ev-slot { padding: 2px 0 6px; }
.ev-slot + .ev-slot { border-top: 1px dotted var(--line); }
.ev-slot.met label.ev span { color: var(--green); }
label.pick.ev { border-bottom: 0; padding: 6px 0; font-size: 15px; }
label.pick.doc { align-items: flex-start; }
@media (max-width: 560px) {
  .task-head { grid-template-columns: 1fr auto; }
  .task-due { grid-column: 1; grid-row: 2; margin-left: 1.75em; }
  .status-tag { grid-row: 1 / span 2; grid-column: 2; }
}
/* The button to move on stays in view at the bottom of long choice lists */
.sticky-go { position: sticky; bottom: 0; z-index: 2; margin: 12px -16px 0; padding: 12px 16px 14px; background: linear-gradient(to bottom, rgba(246, 243, 238, 0), var(--paper) 35%); }
.sticky-go button { box-shadow: 0 6px 16px rgba(31, 61, 43, .18); }
.inline-btn { width: auto; padding-left: 22px; padding-right: 22px; }
.farmcard { border-left: 6px solid var(--clay); }
.nudge { margin-top: 12px; }
@media print {
  .task-head { min-height: 0; padding: 2mm 3mm; } .task-head::after { display: none; }
  .tasks { border: 0.75pt solid #999; } .task { break-inside: avoid; }
  .task-panel { padding: 0 3mm 2mm; } .status-tag { border: 0.75pt solid #000; background: none !important; color: #000 !important; }
  .sticky-go, .farmcard { display: none !important; }
  .evidence { background: #fff; }
}

/* About page (v1039) */
.about .ab-hero { position: relative; border-radius: 14px; overflow: hidden; margin: 8px 0 28px; min-height: 360px; display: flex; align-items: flex-end; background: var(--green); }
.about .ab-hero picture, .about .ab-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about .ab-hero img { object-position: 50% 78%; }
.about .ab-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(31,61,43,.94) 0%, rgba(31,61,43,.8) 42%, rgba(31,61,43,0) 78%); }
.tn .nw { white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; margin-right: 8px; }
.about .ab-hero-text { position: relative; z-index: 1; padding: 28px 28px 34px; max-width: 640px; color: var(--stone); }
.about .ab-hero h1 { color: #fff; font-size: 36px; margin: 4px 0 10px; }
.about .ab-hero p { margin: 0; font-size: 17px; }
.about .ab-kicker { font-size: 12px !important; letter-spacing: .18em; text-transform: uppercase; color: var(--clay); }
.about .ab-cap { margin: 6px 2px 0; font-size: 12px; font-style: italic; color: var(--muted); text-align: right; }
.about .ab-lead { max-width: 640px; font-size: 17px; }
.road { margin: 6px 0 4px; background: linear-gradient(#f4f0ea, #fff); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.road svg { display: block; width: 100%; height: auto; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.road .hill { fill: #cfdcc6; } .road .hill2 { fill: #b9cdb0; }
.road .build { stroke: var(--bronze); stroke-width: 2.4; fill: #fff; }
.road .road-edge { stroke: #d9cbb6; stroke-width: 26; }
.road .road-line { stroke: #fff; stroke-width: 2; stroke-dasharray: 10 12; }
.road .gate-arc { stroke: var(--green); stroke-width: 8; }
.road .gate-pine { stroke: var(--clay); stroke-width: 5; }
.road .stop circle { fill: #fff; stroke: var(--bronze); stroke-width: 2.4; }
.road .stop .g { stroke: var(--green); stroke-width: 2.4; }
.road .stop text { fill: var(--green); stroke: none; font: 700 20px Georgia, serif; }
.road .lbl { fill: var(--muted); stroke: none; font: italic 17px Georgia, serif; }
.road .stem { stroke: var(--clay); stroke-width: 2; stroke-dasharray: 3 5; }
.road .herd use { color: var(--green); stroke: var(--green); stroke-width: 2.2; fill: #f7f3ec; }
.road .herd { animation: drove 22s linear infinite; }
@keyframes drove { 0% { transform: translateX(230px); opacity: 0; } 6% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(800px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .road .herd { animation: none; transform: translateX(560px); } }
.thennow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 14px 0 34px; }
.tn { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; }
.tn h3 { font: 700 20px Georgia, serif; text-transform: none; letter-spacing: 0; color: var(--green); margin: 0 0 8px; }
.tn .then { color: var(--muted); font-style: italic; font-size: 15px; border-left: 3px solid var(--line); padding-left: 10px; }
.tn .now { border-left: 3px solid var(--green); padding-left: 10px; }
.tn .tn-foot { margin: auto 0 0; padding-top: 8px; font-size: 14px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pill { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; }
.pill.live { background: #e3ede0; color: var(--green); } .pill.demo { background: #f3ebe0; color: var(--bronze); } .pill.planned { border: 1.5px dashed var(--clay); color: var(--bronze); }
.ab-founder { display: grid; grid-template-columns: 160px 1fr; gap: 24px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 24px; margin: 8px 0 34px; }
.ab-founder > img, .ab-founder .mono { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; object-position: 50% 45%; border: 4px solid var(--stone); background: var(--green); color: var(--stone); display: flex; align-items: center; justify-content: center; font: 700 36px Georgia, serif; }
.ab-founder blockquote { margin: 0 0 12px; font: italic 24px/1.3 Georgia, serif; color: var(--green); }
.ab-founder .sig { font-family: Georgia, serif; font-style: italic; color: var(--green); margin: 0; }
.ab-founder .facts { grid-column: 1 / -1; list-style: none; margin: 4px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ab-founder .facts b { display: block; font: 700 26px Georgia, serif; color: var(--bronze); }
.ab-founder .facts span { font-size: 14px; color: var(--muted); }
.ab-band { background: var(--green); color: var(--stone); border-radius: 14px; padding: 26px 24px; margin: 0 0 34px; }
.ab-band h2 { color: #fff; margin-bottom: 14px; }
.ab-principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ab-principles h3 { color: #fff; font: 700 17px Georgia, serif; text-transform: none; letter-spacing: 0; margin: 0 0 6px; }
.ab-principles p { font-size: 15px; margin: 0; color: #d9d2c6; }
.ab-band .ico { stroke: var(--clay); } .ab-band .ico .g { stroke: #fff; }
.ab-cta { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; border: 2px solid var(--clay); border-radius: 14px; padding: 20px 24px; }
.ab-cta h2 { margin-bottom: 6px; } .ab-cta p { margin: 0; } .ab-cta .link { margin-top: 10px; }
@media (max-width: 780px) {
  .thennow, .ab-principles { grid-template-columns: 1fr; }
  .ab-cta { grid-template-columns: 1fr; }
  .about .ab-hero { display: block; min-height: 0; } .about .ab-hero h1 { font-size: 28px; }
  .about .ab-hero picture, .about .ab-hero img { position: static; height: auto; aspect-ratio: 4 / 3; object-position: 40% 80%; }
  .about .ab-hero::after { display: none; }
  .about .ab-hero-text { padding: 20px 18px 24px; }
  .road .lbl { font-size: 24px; } .road .stop text { font-size: 26px; }
}
@media (max-width: 560px) {
  .ab-founder { grid-template-columns: 1fr; padding: 18px; } .ab-founder > img, .ab-founder .mono { width: 120px; height: 120px; }
  .ab-founder .facts { grid-template-columns: 1fr; } .ab-founder blockquote { font-size: 21px; }
}
@media print { .road .herd { animation: none; transform: translateX(560px); } .ab-band { background: #fff !important; color: #000; border: 1px solid #999; } .ab-band h2, .ab-principles h3, .ab-principles p { color: #000; } }

/* Home: How it works drawing and porthmyn band (v1040) */
.howto { margin: 6px 0 12px; background: linear-gradient(#f4f0ea, #fff); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.howto svg { display: block; width: 100%; height: auto; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.howto .hw-line { stroke: var(--bronze); stroke-width: 2.6; fill: #fff; }
.howto .hw-back { fill: #f3ebe0; }
.howto .hw-box { stroke: var(--bronze); stroke-width: 2; fill: #fff; }
.howto .hw-text { stroke: var(--line); stroke-width: 4; }
.howto .hw-g { stroke: var(--green); stroke-width: 2.6; }
.howto .hw-g2 { stroke: var(--green); stroke-width: 3.2; }
.howto .hw-field { fill: #cfdcc6; }
.howto .hw-hedge { fill: #9fbb93; stroke: var(--green); stroke-width: 2; }
.howto .hw-pin { fill: #fff; stroke: var(--bronze); stroke-width: 2.6; }
.howto .hw-tag { fill: #fff; stroke: var(--clay); stroke-width: 2; }
.howto .hw-small { fill: var(--bronze); stroke: none; font: 700 15px system-ui, sans-serif; }
.howto .hw-tick { fill: var(--green); }
.howto .hw-tickmark { stroke: #fff; stroke-width: 4; }
.howto .hw-path { stroke: var(--clay); stroke-width: 2.4; stroke-dasharray: 4 8; }
.howto .hw-arrow { stroke: var(--clay); stroke-width: 2.4; }
.howto .hw-num circle { fill: var(--green); }
.howto .hw-num text { fill: var(--stone); font: 700 18px Georgia, serif; }
.howto .hw-lbl text { fill: var(--green); font: 700 20px Georgia, serif; }
@media (max-width: 780px) { .howto .hw-lbl text { font-size: 26px; } .howto .hw-num text { font-size: 22px; } }
.porth-band { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: center; background: var(--green); color: var(--stone); border-radius: 14px; padding: 18px 22px; margin: 22px 0 16px; }
.porth-band h2 { color: #fff; margin-bottom: 6px; }
.porth-band p { margin: 0; color: #d9d2c6; }
.porth-band a { color: #fff; font-weight: 600; }
.porth-band .road { margin: 0; border: 0; background: linear-gradient(#f4f0ea, #fff); }
@media (max-width: 780px) { .porth-band { padding: 14px; } .porth-band .pb-text { grid-template-columns: 1fr; gap: 14px; } .porth-band .pb-founder { padding: 14px 0 0; border-left: 0; border-top: 1px solid rgba(232,226,217,.25); } }
.porth-band .pb-text { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
.porth-band .pb-founder { display: flex; gap: 14px; align-items: flex-start; padding-left: 24px; border-left: 1px solid rgba(232,226,217,.25); }
.porth-band .pb-founder img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 45%; border: 2px solid var(--clay); flex: none; }
.porth-band .pb-founder p { font-size: 14px; }
.porth-band .pb-link { margin: 10px 0 0; }
@media (max-width: 780px) { .porth-band .pb-text { grid-template-columns: 1fr; gap: 14px; } .porth-band .pb-founder { padding: 14px 0 0; border-left: 0; border-top: 1px solid rgba(232,226,217,.25); } }
/* England page (v1042) */
ul.ready { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 8px; }
ul.ready li { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px 10px 42px; position: relative; }
ul.ready li::before { content: ""; position: absolute; left: 13px; top: 13px; width: 16px; height: 16px; border: 2px solid var(--bronze); border-radius: 4px; }
ul.ready b { color: var(--green); }
body[data-page="england"] h1.sec::before { background-image: var(--ic-farm, none); }
a.notify.onhero { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
a.notify.onhero::after { content: "→"; }
a.notify.onhero { min-height: 44px; padding: 8px 16px; border-radius: 999px; background: transparent; border: 2px solid var(--clay); color: var(--stone); font-weight: 600; font-size: 14px; }
a.notify.onhero:hover { background: rgba(196, 164, 132, .18); }

/* SFS list: research questions folded, RPW confirmation checklist (v1047) */
details.card.fold.research { border-top: 1px solid var(--line); padding-top: 4px; padding-bottom: 4px; margin-top: 16px; }
details.card.fold.research summary { padding: 10px 0; }
.seg-help { margin: 6px 0 0; }
.rpw-list { margin: 10px 0 4px; }

/* Diary: fill from a photo or a sentence (v1048) */
.ai-talk { flex-basis: 100%; margin: 8px 0 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #FAF8F4; }
.ai-talk textarea { width: 100%; }
.ai-talk .small { margin: 4px 0 8px; }
.snapsay { flex-basis: 100%; margin: 6px 0 0; padding: 10px 12px; border-radius: 10px; background: #EEF3EC; }
.snapsay b { color: var(--green); }
.snapsay .small-btn { display: inline-block; width: auto; margin: 8px 8px 0 0; background: #fff; border-color: var(--green); color: var(--green); font-weight: 600; }
.snapsay .small { display: block; margin-top: 2px; }
.snapsay .snap-eg { display: block; margin-top: 4px; font-size: 13px; font-style: italic; color: var(--muted); }
input.ai-filled, select.ai-filled, textarea.ai-filled { background: #EEF3EC; border-color: var(--green); }
.benefits:has(> :nth-child(3)) { grid-template-columns: 1fr; } /* three benefits stack, never two and one */

/* Short notes: a key phrase first, the rest on a tap (v1053) */
details.tip { padding-top: 10px; padding-bottom: 10px; }
details.tip > summary { cursor: pointer; list-style: none; font-weight: 600; line-height: 1.4; }
details.tip > summary::-webkit-details-marker { display: none; }
details.tip > summary::after { content: "More"; margin-left: 8px; font-weight: 400; font-size: 13px; color: var(--sky); text-decoration: underline; }
details.tip[open] > summary::after { content: "Less"; }
details.tip > div { margin-top: 6px; font-size: 15px; }
details.demo-note.tip::before { display: none; }
details.demo-note.tip > summary::after { color: #8a5a2b; }
details.tip.plain { padding: 0; margin: 8px 0; font-size: 14px; }
details.tip.plain > summary { font-weight: 600; color: var(--green); }
details.tip.plain > div { font-size: 14px; }

/* Snap & Say mark: a livestock ear tag, the farmer's sign that something is recorded (v1053) */
.snapsay { position: relative; padding-left: 58px !important; }
.snap-mark { position: absolute; left: 12px; top: 12px; width: 36px; height: 36px; }
.snapsay > b { font-family: Georgia, "Times New Roman", serif; font-size: 18px; }
.snapsay .amp { color: var(--sky); }
.benefit img.snap-ic { flex: none; width: 34px; height: 34px; }
input.ai-missing { border-color: #B5651D; background: #FBF4EC; }
.sync-state { margin: 8px 0; padding-left: 20px; position: relative; font-size: 15px; }
.sync-state::before { content: ""; position: absolute; left: 2px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--green); }
.sync-state.off::before { background: #B5651D; }

/* Record card: one layout for the diary, the passport preview, the shared view and paper (v1055).
   Without a photo the job's picture from assets/types/ stands in. */
.rcard { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.card > h2 + .rcard, .sharebox > .rcard:first-child, .sharebox > p + .rcard { border-top: 0; }
.rc-art img { display: block; width: 76px; height: 76px; border-radius: 12px; object-fit: cover; }
.rc-type { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bronze); }
.rc-when { margin: 2px 0 8px; font: 600 17px/1.3 Georgia, "Times New Roman", serif; color: var(--green); }
.rc-details { display: grid; grid-template-columns: minmax(96px, 40%) minmax(0, 1fr); margin: 0; }
.rc-details > div { display: contents; }
.rc-details dt { padding: 4px 10px 4px 0; border-top: 1px dotted #D8D0C4; font-size: 14px; color: var(--muted); }
.rc-details dd { margin: 0; padding: 4px 0; border-top: 1px dotted #D8D0C4; font-size: 15px; }
.rc-note { margin: 8px 0 0; font-style: italic; }
.rc-foot { margin-top: 10px; }
.rc-foot .small { margin: 6px 0 0; }
@media (max-width: 560px) {
  .rc-art img { width: 56px; height: 56px; border-radius: 10px; }
  .rc-details { grid-template-columns: minmax(0, 1fr); }
  .rc-details dt { border-top: 1px dotted #D8D0C4; padding-bottom: 0; font-size: 13px; }
  .rc-details dd { border-top: 0; padding-top: 0; }
}
@media print {
  .rcard { gap: 4mm; padding: 3mm 0; border-top: 0.5pt solid #bbb; break-inside: avoid; page-break-inside: avoid; }
  .rc-art img { width: 16mm; height: 16mm; border-radius: 2mm; }
  .rc-art.photo img { width: 28mm; height: 28mm; }
  .rc-type { font-size: 7.5pt; color: #6b4f2e; }
  .rc-when { margin: 0.5mm 0 1.5mm; font-size: 11pt; color: #1F3D2B; }
  .rc-details { grid-template-columns: 40mm minmax(0, 1fr); }
  .rc-details dt, .rc-details dd { padding: 0.6mm 0; font-size: 9pt; border-top: 0.4pt dotted #bbb; }
  .rc-details dt { color: #555; padding-right: 3mm; }
  .rc-note { font-size: 9pt; }
  .rc-foot { margin-top: 1.5mm; }
  .rc-foot .small { font-size: 8pt; color: #444; }
}
.share-print-head { display: none; }
.sharebox > .small-btn { float: right; width: auto; margin: 0 0 8px 8px; }
@media print {
  body.print-share > *:not(.print-target) { display: none !important; }
  body.print-share .print-target { border: 0; padding: 0; margin: 0; background: #fff; }
  body.print-share .print-target .share-print-head { display: flex; align-items: center; gap: 6mm; padding-bottom: 3mm; margin-bottom: 4mm; border-bottom: 1.5pt solid #1F3D2B; }
  .share-print-head img { height: 7mm; width: auto; }
  .share-print-head span { font-size: 9pt; color: #444; }
  body.print-share .print-target h2 { font: 700 15pt Georgia, serif; color: #1F3D2B; margin: 0 0 1mm; }
}
@media print { details.tip > summary::after { display: none; } }
.print-target { display: none; } @media print { body.print-share .print-target { display: block; } }
details.rec-preview { margin-top: 10px; }
details.rec-preview > summary { cursor: pointer; list-style: none; color: var(--sky); font-size: 15px; font-weight: 600; }
details.rec-preview > summary::-webkit-details-marker { display: none; }
details.rec-preview > summary::after { content: " +"; }
details.rec-preview[open] > summary::after { content: " \2212"; }
details.rec-preview .sharebox { margin-top: 8px; }
details.rec-preview .row-btns { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 8px 0 0; }
details.rec-preview .row-btns .small-btn { width: auto; }

/* Supporting guidance stays secondary to the task, field and primary action. */
.guidance-note{font-size:14px;line-height:1.55;font-weight:400;color:var(--green);background:#EEE9E1;border:0;border-left:3px solid var(--bronze);border-radius:0 7px 7px 0;padding:10px 13px;margin:12px 0}
details.tip:not(.plain){font-size:14px;line-height:1.55;background:#EEE9E1;border-left:3px solid var(--bronze);border-radius:0 7px 7px 0}
details.tip:not(.plain)>summary{font-size:14px;font-weight:500}
details.tip:not(.plain)>div{font-size:14px}
@media print{.guidance-note{background:transparent;color:#222;border-left-color:#777}}

#record-context{max-width:1088px;margin:18px auto 0;padding:10px 16px;font-size:14px} @media(max-width:1120px){#record-context{margin:14px 16px 0}}

/* Evidence labels on record cards (v6.0): self-declared, evidence attached, checked */
.ev-chip { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font: 700 11px/1.6 -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; letter-spacing: .02em; vertical-align: middle; white-space: nowrap; }
.ev-self { background: var(--stone); color: var(--ink); }
.ev-attached { background: #E3EDF3; color: #2F5870; }
.ev-checked { background: var(--green); color: #fff; }
@media print { .ev-chip { border: 0.6pt solid #000; background: none !important; color: #000 !important; font-size: 7.5pt; } }
/* Header link for buyers (v6.0): desktop only; also in the footer */
nav a.nav-buyers { font-weight: 500; opacity: .85; border-left: 1px solid var(--line); padding-left: 12px; }
@media (max-width: 720px) { nav a.nav-buyers { display: none; } }

/* Home v6.0: four steps (two by two), proof labels band, buyers band, region line */
.steps.four { grid-template-columns: 1fr 1fr; }
.steps.four li a { display: block; margin-top: 8px; font-weight: 600; }
.steps.four .pill { margin-top: 8px; font-size: 11px; }
@media (max-width: 560px) { .steps.four { grid-template-columns: 1fr; } }
.proof-band { align-items: center; }
.proof-band .chips { margin: 8px 0 0; line-height: 2.1; }
.proof-band .chips .ev-chip { margin-left: 0; }
.buyers-band h2 { margin-top: 6px; }
.hero .region { font-size: 15px; }
.hero .region a { font-weight: 600; }
.hero .region { color: var(--stone); }
.hero .region a { color: #fff; }
/* v6.0 pages: buyers and proof */
.ask-list { columns: 2; column-gap: 28px; }
@media (max-width: 560px) { .ask-list { columns: 1; } }
.levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.levels .card h3 { margin: 6px 0; }
.levels .ev-chip { margin-left: 0; }
@media (max-width: 780px) { .levels { grid-template-columns: 1fr; } }
.ab-principles:has(> :nth-child(4)) { grid-template-columns: 1fr 1fr; }
@media (max-width: 780px) { .ab-principles:has(> :nth-child(4)) { grid-template-columns: 1fr; } }
.ab-principles a { color: #fff; }
.proof-band .btn { width: auto; justify-self: start; display: inline-block; }