/* Hallmark · genre: editorial · macrostructure: Marquee Hero (marketing) + Long Document (content)
 *           · design-system: design.md · designed-as-app
 *  AgriHub360 marketing site. Tokens live in tokens.css (OKLCH).
 *  Legacy variable names below alias the new tokens — see design.md for the system.
 */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* Aliases — legacy names map to tokens.css OKLCH values.
   * Don't introduce new raw hex/rgba below — reference the named tokens.
   */
  --bg:         var(--color-paper);
  --bg2:        var(--color-paper-2);
  --bg3:        var(--color-paper-3);
  --bg4:        var(--color-paper-4);
  --border:     var(--color-rule);
  --bhi:        var(--color-rule-strong);

  --green:      var(--color-accent-soft);
  --green-deep: var(--color-accent);
  --gdim:       var(--color-accent-tint);
  --gglow:      var(--color-accent-glow);

  --lime:       var(--color-accent-soft);
  --ldim:       var(--color-accent-tint);
  --lglow:      var(--color-accent-glow);

  --amber:      var(--color-amber);
  --adim:       var(--color-amber-tint);
  --aglow:      var(--color-amber-glow);

  --t1:         var(--color-ink);
  --t2:         var(--color-ink-2);
  --t3:         var(--color-ink-3);

  --btn-fg:     var(--color-paper-3);

  --sans:       var(--font-body);
  --serif:      var(--font-display);
  --mono:       var(--font-mono);

  /* radii + shadows reference tokens.css */
}

/* Reduced motion — universal collapse. Hallmark hard rule. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; overflow-x: clip; }
body {
  font-family: var(--sans);
  background: var(--bg); color: var(--t1);
  line-height: 1.55; overflow-x: clip;
  font-feature-settings: 'cv11', 'ss01';
  -webkit-text-size-adjust: 100%;
}
::selection { background: var(--gglow); color: var(--green-deep); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--t3); }

img { max-width: 100%; display: block; }
a { color: inherit; }

/* ── A11Y UTILITIES ── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* Skip link — first focusable element; visible only on keyboard focus. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 500;
  background: var(--t1); color: var(--btn-fg);
  font-family: var(--sans); font-size: .9rem; font-weight: 500;
  padding: .75rem 1.25rem; border-radius: 0 0 8px 0;
  text-decoration: none;
}
.skip-link:focus { left: 0; }
/* Visible focus ring everywhere, instant (no animation) — WCAG 2.4.7 / 2.4.11. */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
/* The skip-link target shouldn't draw a ring on the whole page body. */
main:focus { outline: none; }

.serif { font-family: var(--serif); font-weight: 500; letter-spacing: -0.015em; }

/* Material Symbols base — applied to <span class="material-symbols-outlined"> */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  user-select: none;
}
.icon { display: inline-flex; align-items: center; justify-content: center; }

/* Top stripe removed (Hallmark: decorative infinite motion is slop). */

/* ── BUTTONS ── */
.btn-solid, .btn-ghost, .btn-line {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--sans); font-size: .92rem; font-weight: 500;
  padding: .75rem 1.4rem; text-decoration: none;
  border-radius: var(--r-pill);
  transition: background-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out),
              transform var(--dur-short) var(--ease-out);
  letter-spacing: -0.005em; line-height: 1; white-space: nowrap;
}
.btn-solid {
  background: var(--t1); color: var(--btn-fg); border: 1px solid var(--t1);
  box-shadow: var(--shadow-sm);
}
.btn-solid:hover { background: var(--green-deep); border-color: var(--green-deep); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-solid.amber { background: var(--amber); border-color: var(--amber); color: var(--btn-fg); }

.btn-ghost {
  background: transparent; color: var(--t1);
  border: 1px solid transparent;
}
.btn-ghost:hover { color: var(--green-deep); }

.btn-line {
  background: transparent; color: var(--t1);
  border: 1px solid var(--bhi);
}
.btn-line:hover { border-color: var(--green); color: var(--green-deep); }

/* Official Google Play badge. The generic PNG ships with transparent padding
 * baked in, so the negative margin trims it back to the visible badge. */
.play-badge { display: inline-block; line-height: 0; }
.play-badge img { height: 60px; width: auto; display: block; margin: -10px; }

/* ── SECTIONS ── */
.section { padding: 6rem 1.5rem; position: relative; }
.wrap { max-width: 1180px; margin: 0 auto; }
.page-intro { padding-top: 2rem; }

/* .slabel removed — mono eyebrows are banned by design.md ("not for eyebrows"). */

h2.D, .D {
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(1.55rem, 2.6vw, 2.1rem);
  line-height: 1.12; letter-spacing: -0.022em;
  color: var(--t1); max-width: 22ch;
}
h2.D.serif, .D.serif {
  font-family: var(--serif); font-weight: 500;
  letter-spacing: -0.02em;
}
h2.D .g, .D .g { color: var(--green-deep); }
h2.D .l, .D .l { color: var(--green-deep); }
h2.D .a, .D .a { color: var(--amber); }

.lede {
  font-family: var(--sans); font-size: 1.05rem; color: var(--t2);
  line-height: 1.6; max-width: 56ch;
  margin-top: 1.25rem;
}

/* Phone frame — reusable device mockup (Nogyo dashboard, on-your-phone preview). */
.phone-frame {
  width: 100%; max-width: 248px; margin: 0 auto;
  background: var(--color-ink); border-radius: 30px; padding: 4px 4px 5px;
  box-shadow: var(--shadow-md);
}
.phone-frame::before {
  content: ""; display: block; width: 36px; height: 4px; border-radius: 2px;
  background: var(--color-on-photo-faint); margin: 2px auto 4px;
}
.phone-screen {
  position: relative; border-radius: 24px; overflow: hidden;
  background: var(--color-paper-3); aspect-ratio: 1280 / 2856;
  display: flex; flex-direction: column;
}
.phone-shot { width: 100%; height: 100%; object-fit: cover; display: block; }
/* In a bento cell the phone is sized by the cell height. The frame carries the
   screenshot's aspect so its width derives cleanly from that height — keeping the
   bezel slim and even instead of stretching wider than the screen. */
.b-snap-frame.snap-mobile { padding: .85rem; align-items: center; }
.b-snap-frame.snap-mobile .phone-frame { height: 100%; width: auto; max-width: 100%; aspect-ratio: 1280 / 2856; display: flex; flex-direction: column; }
.b-snap-frame.snap-mobile .phone-screen { flex: 1; min-height: 0; width: 100%; }

/* Reusable image placeholder inside a device or browser frame. */
.shot-ph { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; text-align: center; background: var(--color-paper-3); padding: 1rem; min-height: 0; }
.shot-ph .material-symbols-outlined { font-size: 2rem; color: var(--color-accent); }
.shot-ph-label { font-family: var(--sans); font-weight: 600; font-size: .9rem; color: var(--t1); }
.shot-ph-note { font-family: var(--mono); font-size: .66rem; color: var(--t2); }

/* Backward compat: .hero-h1 .serif still styled the same. */
.hero-h1 .serif {
  display: block;
  font-family: var(--serif); font-weight: 500; font-style: italic;
  color: var(--green-deep);
  letter-spacing: -0.025em;
  margin-top: .1em;
}

.hero-sub {
  font-family: var(--sans); font-size: var(--text-lead, 1.15rem);
  line-height: 1.5; color: var(--t2);
  max-width: 46ch;
  margin: .25rem 0 0;
}

.hero-actions {
  display: flex; gap: 1.25rem; flex-wrap: wrap;
  align-items: center;
  margin: .25rem 0 0;
}

@media (max-width: 720px) {
  .hero { min-height: 0; padding: 3.5rem 1.25rem 4rem; align-items: flex-start; }
  .hero-h1 { max-width: 14ch; }
}

/* ── BENTO PRODUCT ── */
.bento-product { background: var(--bg); }
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  /* Band 1 (rows 1-3) is the tall portrait row; band 2 (rows 4-5) carries the
     full-width dashboard, so it is deep enough to read; the panorama
     (rows 6-9) keeps the 160px auto rows. */
  grid-template-rows: repeat(3, 275px) repeat(2, 330px);
  grid-auto-rows: 160px;
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.b-card {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--r-card); overflow: hidden;
  display: flex; flex-direction: column;
  position: relative; transition: border-color .2s, box-shadow .2s;
}
.b-card:hover { border-color: var(--bhi); box-shadow: var(--shadow-md); }

.b-big      { grid-column: span 2; grid-row: span 2; }
.b-fullwide { grid-column: span 4; grid-row: span 2; }
.b-wide     { grid-column: span 2; grid-row: span 1; }
.b-tall     { grid-column: span 1; grid-row: span 2; }
.b-small    { grid-column: span 1; grid-row: span 1; }

@media (max-width: 960px) {
  /* Six columns here too, so the three tall cells stay a single portrait row. */
  .bento { grid-template-columns: repeat(6, 1fr) !important; grid-template-rows: none !important; grid-auto-rows: 200px !important; }
  /* Drop explicit positioning, use size classes */
  .b-card[style] { grid-column: revert !important; grid-row: revert !important; }
  .b-big      { grid-column: span 3 !important; grid-row: span 2 !important; }
  .b-fullwide { grid-column: span 6 !important; grid-row: span 2 !important; }
  .b-wide     { grid-column: span 3 !important; grid-row: span 1 !important; }
  .b-tall     { grid-column: span 2 !important; grid-row: span 2 !important; }
  .b-small    { grid-column: span 2 !important; grid-row: span 1 !important; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr !important; grid-template-rows: none !important; grid-auto-rows: minmax(220px, auto) !important; }
  .b-card { grid-column: span 1 !important; grid-row: span 1 !important; }
}

.b-foot {
  padding: 1rem 1.25rem 1.1rem; border-top: 1px solid var(--border);
  margin-top: auto;
}
.b-title {
  font-family: var(--sans); font-weight: 600; font-size: .95rem;
  color: var(--t1); letter-spacing: -0.01em;
}
.b-copy {
  font-family: var(--sans); font-size: .82rem; color: var(--t2);
  margin-top: .25rem;
}

.b-photo-frame, .b-video-frame, .b-snap-frame {
  flex: 1; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--bg2) 0%, var(--bg4) 100%);
}
.b-photo-bg {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 30% 40%, var(--color-accent-tint) 0%, transparent 50%),
    radial-gradient(circle at 70% 60%, var(--color-amber-tint) 0%, transparent 50%);
}
.b-photo-icon {
  position: relative; line-height: 1;
}
.b-photo-icon .material-symbols-outlined {
  font-size: 5rem; color: var(--green-deep); opacity: .55;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;
}
.b-card.b-small .b-photo-icon .material-symbols-outlined { font-size: 2.6rem; }
.b-photo-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.b-video-frame { background: var(--color-video-wash); }
.b-video-iframe { width: 100%; height: 100%; border: 0; display: block; }
.b-video-frame .play-btn {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--color-paper-veil);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px var(--color-scrim-soft);
  cursor: pointer;
  transition: transform .2s, background .2s;
}
.b-video-frame .play-btn svg {
  width: 22px; height: 22px; fill: var(--green-deep); margin-left: 3px;
}
.b-video-frame:hover .play-btn { transform: scale(1.1); background: var(--color-paper-3); }
.vp-tag {
  position: absolute; top: .75rem; left: .75rem;
  font-family: var(--mono); font-size: .58rem; letter-spacing: .08em;
  color: var(--btn-fg); background: var(--color-on-photo-faint);
  padding: .2rem .5rem; border-radius: 3px; backdrop-filter: blur(6px);
}

.b-snap-frame { background: var(--bg3); flex-direction: column; align-items: stretch; }
.b-snap-frame.snap-desktop { justify-content: flex-start; }
.b-snap-frame.snap-mobile { background: var(--bg3); justify-content: center; }

/* ── 404 ── */
.nf {
  min-height: 60vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.25rem;
  text-align: center; padding: 4rem 2rem;
}
.nf-code {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(5rem, 14vw, 11rem);
  letter-spacing: -0.04em; line-height: 1; color: var(--green-deep);
}
.nf-msg {
  font-family: var(--mono); font-size: .8rem; color: var(--t2);
  letter-spacing: .02em;
}
.nf-body {
  font-family: var(--sans); color: var(--t2);
  max-width: 480px; line-height: 1.7;
}

/* ── PRICING · DEVICES SECTION ── */
.devices { background: var(--bg2); border-top: 1px solid var(--border); }
.devices-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
  margin-top: 2.5rem;
}
.device-card {
  padding: 1.5rem; background: var(--bg3);
  border: 1px solid var(--border); border-radius: var(--r-card);
  display: flex; flex-direction: column; gap: .55rem;
  transition: border-color .2s;
}
.device-card:hover { border-color: var(--bhi); }
.device-icon .material-symbols-outlined {
  font-size: 1.7rem; color: var(--green-deep);
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.device-name {
  font-family: var(--sans); font-weight: 600; font-size: 1rem;
  color: var(--t1); letter-spacing: -0.01em;
}
.device-desc {
  font-family: var(--sans); font-size: .85rem; color: var(--t2); line-height: 1.55;
}

/* ── TEAM · PHOTO PLACEHOLDER (square card, not circle avatar) ── */
.team-photo {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  border-radius: 14px; overflow: hidden;
  background: linear-gradient(135deg, var(--bg2) 0%, var(--bg4) 100%);
  border: 1px solid var(--border);
  margin: 0 auto 1.25rem;
  max-width: 200px;
}
.team-photo img {
  position: relative; z-index: 2;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.team-photo img.team-photo-fallback { display: none; }
.team-photo-placeholder {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .35rem; color: var(--t3);
}
.team-photo-placeholder .material-symbols-outlined {
  font-size: 3.5rem; opacity: .55;
  font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 48;
}
.team-photo-initials {
  font-family: var(--serif); font-weight: 500; font-size: 1.15rem;
  letter-spacing: .04em; color: var(--t3);
}
.team-photo-green { border-color: var(--color-accent-rule); }
.team-photo-lime  { border-color: var(--color-accent-rule); }
.team-photo-amber { border-color: var(--color-amber-rule); }

/* ── LEGAL PAGES ── */
.legal-page { padding: 7rem 1.5rem 5rem; background: var(--bg); }
.legal-page .wrap { max-width: 760px; margin: 0 auto; }
.legal-meta {
  font-family: var(--mono); font-size: .65rem; color: var(--t3);
  letter-spacing: .04em; text-transform: uppercase; margin: .5rem 0 2.5rem;
}
.legal-h1 {
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: -0.025em; line-height: 1.05;
  color: var(--t1);
}
.prose { font-family: var(--sans); color: var(--t1); line-height: 1.75; font-size: .98rem; }
.prose h2 {
  font-family: var(--sans); font-weight: 600;
  font-size: 1.2rem; letter-spacing: -0.015em;
  margin: 2rem 0 .85rem; color: var(--t1);
}
/* Subsection heading. Only the refunds policy is deep enough to need one, and
   it sits close under its h2 so the pair reads as one block. */
.prose h3 {
  font-family: var(--sans); font-weight: 600;
  font-size: 1rem; letter-spacing: -0.01em;
  margin: 1.6rem 0 .6rem; color: var(--t1);
}
.prose h2 + h3 { margin-top: 1.1rem; }
.prose p { margin-bottom: 1.05rem; color: var(--t2); }
/* Quoted statutory wording, e.g. the model cancellation form. */
.prose blockquote {
  margin: 1.25rem 0; padding: 1rem 1.25rem;
  border-left: 2px solid var(--color-accent-rule);
  background: var(--bg2);
  border-radius: 0 var(--r-card) var(--r-card) 0;
}
.prose blockquote p { margin-bottom: .75rem; }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose strong { color: var(--t1); font-weight: 600; }
.prose a { color: var(--green-deep); text-decoration: none; border-bottom: 1px solid var(--color-accent-rule); }
.prose a:hover { border-bottom-color: var(--green-deep); }
.prose ul { margin: .75rem 0 1.25rem 1.25rem; color: var(--t2); }
.prose li { margin-bottom: .35rem; }

/* Plain-English summary that opens the legal pages. A grower who reads only
   this box should still know where they stand. */
.legal-summary {
  margin: 0 0 3rem; padding: 1.75rem 1.9rem;
  background: var(--bg2);
  border-left: 3px solid var(--green-deep);
  border-radius: 0 var(--r-card) var(--r-card) 0;
}
.legal-summary-title {
  font-family: var(--serif); font-weight: 500; font-size: 1.35rem;
  letter-spacing: -0.015em; color: var(--t1); margin: 0 0 .9rem;
}
.legal-summary ul {
  margin: 0; padding: 0; list-style: none;
  font-family: var(--sans); font-size: .95rem; line-height: 1.6; color: var(--t2);
}
.legal-summary li { padding: .45rem 0; border-top: 1px solid var(--border); }
.legal-summary li:first-child { border-top: 0; padding-top: 0; }
.legal-summary strong { color: var(--t1); font-weight: 600; }
.legal-summary-note {
  font-family: var(--sans); font-size: .82rem; line-height: 1.55;
  color: var(--t3); margin: 1.1rem 0 0;
}

/* Processor and retention tables. Hairlines only, and scrollable on a phone. */
.legal-table {
  width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem;
  font-family: var(--sans); font-size: .88rem; line-height: 1.5;
  display: block; overflow-x: auto;
}
.legal-table th, .legal-table td {
  text-align: left; vertical-align: top;
  padding: .7rem .9rem .7rem 0; border-bottom: 1px solid var(--border);
}
.legal-table thead th {
  font-family: var(--mono); font-size: .64rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--t3);
  border-bottom-color: var(--bhi);
}
/* Three-column variant (refunds, where the answer differs by customer type).
   Two columns reflow fine at 375px; three collapse to two words a line. The
   overflow-x on .legal-table cannot serve here because that element is the
   thing that needs to be wide, so the scroll moves out to a wrapper and the
   table goes back to laying out as a table inside it. */
.legal-table-scroll { overflow-x: auto; margin: 1rem 0 1.5rem; }
.legal-table-scroll .legal-table {
  display: table; min-width: 34rem; margin: 0;
}
.legal-table-scroll .legal-table th,
.legal-table-scroll .legal-table td { padding-right: 1.1rem; }
.legal-table tbody th { font-weight: 600; color: var(--t1); }
.legal-table td { color: var(--t2); }

/* ── RESPONSIVE TWEAKS ── */
@media (max-width: 720px) {
  .section { padding: 4rem 1.25rem; }
  .hero { padding: 3rem 1.25rem 4rem; }
}

/* Contact form */
.contact-form { display: flex; flex-direction: column; gap: 1rem; max-width: 520px; }
.form-row { display: flex; flex-direction: column; gap: .35rem; }
.form-row label {
  font-family: var(--sans); font-size: .85rem; font-weight: 600; color: var(--t1);
}
.form-row input, .form-row select, .form-row textarea {
  font-family: var(--sans); font-size: .98rem; color: var(--t1);
  padding: .7rem .85rem; background: var(--bg3);
  border: 1px solid var(--border); border-radius: 10px;
  transition: border-color .2s, box-shadow .2s;
  width: 100%;
}
.form-row textarea { resize: vertical; min-height: 100px; line-height: 1.5; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: none; border-color: var(--color-focus);
  box-shadow: 0 0 0 3px var(--gglow);
}
.form-meta { color: var(--t2); }
.form-privacy { font-family: var(--sans); font-size: .82rem; color: var(--t2); line-height: 1.5; }
.form-privacy a { color: var(--green-deep); text-decoration: underline; text-underline-offset: 2px; }
.form-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: .25rem; }
.form-actions .btn-solid { border: 0; cursor: pointer; }
.form-fallback { font-size: .9rem; }
.hp-wrap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-success {
  padding: 2rem; background: var(--gdim); border: 1px solid var(--color-accent-rule); border-radius: var(--r-card);
  max-width: 520px;
}
.form-success h3 { font-size: 1.4rem; color: var(--green-deep); margin: .35rem 0; }
.form-success p { font-family: var(--sans); color: var(--t1); line-height: 1.55; }

/* ── FARM BAND (full-bleed photo strip on home) ── */
.farm-band {
  position: relative;
  min-height: 420px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  margin: 4rem 0;
}
.farm-band-img {
  position: absolute; inset: 0;
  background-image: url('/images/farm/sensor-maize-context.jpg');
  background-size: cover;
  background-position: center 60%;
}
.farm-band-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, var(--color-scrim) 0%, var(--color-scrim-soft) 50%, var(--color-scrim-deep) 100%);
}
.farm-band-in {
  position: relative; z-index: 1;
  padding: 3.5rem 1.5rem;
  text-align: center; max-width: 720px;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.farm-band-h2 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  line-height: 1.1; letter-spacing: -0.02em;
  color: var(--color-on-photo); margin: 0;
}
.farm-band-sub {
  font-family: var(--sans); font-size: 1.05rem; line-height: 1.55;
  color: var(--color-on-photo-soft); max-width: 48ch; margin: 0;
}
.farm-band .btn-solid {
  margin-top: .5rem;
  background: var(--color-on-photo); color: var(--green-deep); border-color: var(--color-on-photo);
}
.farm-band .btn-solid:hover { background: var(--bg2); border-color: var(--bg2); color: var(--green-deep); }
@media (max-width: 720px) {
  .farm-band { min-height: 340px; margin: 2rem 0; }
  .farm-band-in { padding: 2.5rem 1.25rem; }
}

/* ──────────────────────────────────────────────────────────
 *  Hallmark redesign · masthead, statement footer, editorial chrome
 * ────────────────────────────────────────────────────────── */

/* Outlined twin of the chip, for the docs: same shape, secondary weight. */
.masthead-app-ghost { background: transparent; color: var(--t1); border: 1px solid var(--bhi); padding: calc(.45rem - 1px) calc(.95rem - 1px); }
.masthead-app-ghost:hover { background: var(--gdim); color: var(--green-deep); }
.masthead-mob { display: none; }

@media (max-width: 780px) {
  .masthead { padding: 1rem 1rem 0; }
  .masthead-logo { height: 48px; }
  .masthead-mob {
    display: inline-flex; align-items: center; justify-content: center;
    position: absolute; right: calc(var(--space-3xs) * -1); top: 50%; transform: translateY(-50%);
    background: none; border: 1px solid var(--border); border-radius: var(--r-pill);
    width: 38px; height: 38px;
    color: var(--t1); cursor: pointer; padding: 0;
  }
  .masthead-mob .material-symbols-outlined { font-size: 1.3rem; }
  .masthead-row { display: block; padding: 0; }
  .masthead-nav { display: none; }
  .masthead-actions { display: none; }
  /* Sheet drops below the double rule — toggled by main.js (.is-open). */
  .masthead.is-open .masthead-nav {
    display: flex; flex-direction: column;
    align-items: stretch; gap: 0;
    padding: .25rem 0 0;
  }
  .masthead.is-open .masthead-link {
    padding: .9rem 0;
    border-top: 1px solid var(--border);
    width: 100%;
    font-size: 1rem; color: var(--t1);
    text-align: left;
  }
  .masthead.is-open .masthead-link:first-child { border-top: none; }
  .masthead.is-open .masthead-link[aria-current="page"]::after { display: none; }
  .masthead.is-open .masthead-actions {
    display: flex; flex-direction: column; align-items: stretch; gap: .5rem;
    margin: .8rem 0 1rem;
  }
  .masthead.is-open .masthead-app {
    display: block;
    padding: .8rem 1rem;
    text-align: center;
  }
}

/* main.js needs to add/remove .is-open on the .masthead element when the mob
 * button is clicked. The old toggleNav() helper still wires the click. */

/* ── btn-text (secondary CTA, hairline-underlined) ── */
.btn-text {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--sans); font-size: .95rem; font-weight: 500;
  color: var(--t1); text-decoration: none;
  border-bottom: 1px solid var(--color-rule-strong);
  padding: .2rem 0;
  transition: color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out);
  line-height: 1.2; white-space: nowrap;
}
.btn-text:hover { color: var(--green-deep); border-bottom-color: var(--color-accent); }

/* Company + legal, stacked under the contact addresses in the same column.
   A column, not a link row: these read as a short list of documents, and the
   list grows (refund and return policies are already here). Quieter than the
   contact rows above, because they are reference links rather than ways to
   reach us. */
.footer-legal {
  display: flex; flex-direction: column; align-items: flex-start; gap: .15rem;
  margin-top: .5rem;
}
.footer-legal a {
  font-family: var(--sans); font-size: .85rem;
  color: var(--t3); text-decoration: none;
  padding: .35rem 0;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.footer-legal a:hover { color: var(--green-deep); border-bottom-color: var(--color-accent); }
.footer-contact {
  font-family: var(--sans); font-size: .95rem; color: var(--t2);
  display: flex; gap: .65rem; align-items: center;
  line-height: 1.4;
}
.footer-contact-icon.material-symbols-outlined {
  font-size: 1.15rem; color: var(--green-deep);
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  flex-shrink: 0;
}
.footer-contact a {
  color: var(--t1); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.footer-contact a:hover { color: var(--green-deep); border-bottom-color: var(--color-accent); }

/* ── LONG-FORM ARTICLES ─────────────────────────────────────────────
 * design.md Long Document macrostructure, used by /blog and (next) the
 * guides. The reading column is set by --measure-prose; only tables, code
 * blocks and figures break out to --measure-wide. Token-only below: no raw
 * values, no rounded tinted cards, and no .reveal on article prose
 * (content pages are typography-only).
 */
.article-wrap { max-width: var(--measure-wide); margin: 0 auto; }

.article-title {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: var(--text-display-s); letter-spacing: -0.02em; line-height: 1.1;
  color: var(--color-ink); margin: 0;
}
.article-lede {
  font-family: var(--font-body); font-size: var(--text-lg); line-height: 1.55;
  color: var(--color-ink-2); max-width: var(--measure-prose);
  margin: var(--space-sm) 0 0;
}
.article-rule {
  border: 0; border-top: 1px solid var(--color-rule); margin: var(--space-lg) 0;
}

/* The prose block itself. */
.article { max-width: var(--measure-prose); }
.article > * + * { margin-top: var(--space-sm); }
.article p {
  font-family: var(--font-body); font-size: var(--text-md); line-height: 1.7;
  color: var(--color-ink-2);
}
.article strong { font-weight: 600; color: var(--color-ink); }
.article em { font-style: italic; }

.article h2 {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: var(--text-xl); letter-spacing: -0.02em; line-height: 1.2;
  color: var(--color-ink);
  border-top: 1px solid var(--color-rule);
  padding-top: var(--space-md); margin-top: var(--space-xl);
}
/* h3 is Inter, not a third level of italic serif in one column. */
.article h3 {
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-lg);
  line-height: 1.3; color: var(--color-ink); margin-top: var(--space-lg);
}
.article h4 {
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-base);
  color: var(--color-ink); margin-top: var(--space-md);
}

.article ul, .article ol {
  padding-left: var(--space-md); color: var(--color-ink-2);
  font-size: var(--text-md); line-height: 1.7;
}
.article li + li { margin-top: var(--space-3xs); }
.article ul li::marker { color: var(--color-ink-3); }
.article ol li::marker {
  font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-ink-3);
}

.article a {
  color: var(--color-accent); text-decoration: none;
  border-bottom: 1px solid var(--color-accent-rule);
}
.article a:hover { border-bottom-color: var(--color-accent); }

.article code {
  font-family: var(--font-mono); font-size: var(--text-sm);
  background: var(--color-paper-4); padding: .1em .35em; border-radius: var(--r-input);
}
.article pre {
  font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.6;
  background: var(--color-paper-4); padding: var(--space-md);
  border-radius: var(--r-card); overflow-x: auto;
  width: var(--measure-wide); max-width: 100%;
}
.article pre code { background: none; padding: 0; }

.article blockquote {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: var(--text-lg); line-height: 1.5; color: var(--color-ink-2);
  border-left: 2px solid var(--color-rule-strong);
  padding-left: var(--space-md);
}

.article table {
  width: var(--measure-wide); max-width: 100%;
  border-collapse: collapse; font-size: var(--text-sm); line-height: 1.5;
  display: block; overflow-x: auto;
}
.article th, .article td {
  text-align: left; vertical-align: top;
  padding: var(--space-2xs) var(--space-xs) var(--space-2xs) 0;
  border-bottom: 1px solid var(--color-rule);
}
.article thead th {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--color-ink-3);
  border-bottom-color: var(--color-rule-strong);
}
.article td { color: var(--color-ink-2); }

.article img { max-width: 100%; height: auto; display: block; }
.article hr {
  border: 0; border-top: 1px solid var(--color-rule); margin: var(--space-xl) 0;
}

/* ── BLOG POST ── */
.post-meta {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: .08em; text-transform: uppercase; color: var(--color-ink-3);
  margin: 0 0 var(--space-2xs);
}
/* design.md sanctions Fraunces for drop caps and nothing used one. A post is
   read start to finish, so it marks the entry point. Ink, not accent, so the
   accent budget is untouched. Guide articles get none: they are landed on
   mid-topic and scanned. */
.blog-post .article > p:first-of-type::first-letter {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: 3.4em; line-height: .82; float: left;
  margin: .06em var(--space-2xs) 0 0; color: var(--color-ink);
}
.post-author {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: .08em; text-transform: uppercase; color: var(--color-ink-3);
  margin: 0;
}
.article-cta { margin-top: var(--space-lg); }
.post-more { margin-top: var(--space-2xl); }
.post-more-h {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--color-ink-3);
  margin: 0 0 var(--space-2xs);
}
.post-more-list { list-style: none; margin: 0; padding: 0; }
.post-more-link {
  display: grid; grid-template-columns: 8rem 1fr; gap: var(--space-lg);
  border-top: 1px solid var(--color-rule);
  padding: var(--space-sm) 0; text-decoration: none;
}
.post-more-link:hover .post-more-title { color: var(--color-accent); }
.post-more-title {
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-md);
  color: var(--color-ink); line-height: 1.4;
  transition: color var(--dur-short) var(--ease-out);
}

@media (max-width: 720px) {
  .post-row-link, .post-more-link { grid-template-columns: 1fr; gap: var(--space-3xs); }
  .post-row-date { line-height: 1.5; }
}

/* ── GUIDE ──
 * Index bands reuse the shipped label-left / detail-right idiom. No sidebar:
 * the article is breadcrumb, optional table of contents, prose, siblings. That
 * makes the mobile problem disappear rather than solving it.
 */
.guide-band {
  display: grid; grid-template-columns: 12rem 1fr; gap: var(--space-xl);
  border-top: 1px solid var(--color-rule); padding: var(--space-xl) 0;
}
.guide-band:first-of-type { margin-top: var(--space-xl); }
.guide-cat {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--color-ink-3);
  margin: 0;
}
.guide-cat-count {
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-ink-3); margin: var(--space-3xs) 0 0; opacity: .75;
}
.guide-list { list-style: none; margin: 0; padding: 0; }
.guide-row {
  display: block; text-decoration: none;
  border-top: 1px solid var(--color-rule); padding: var(--space-sm) 0;
}
.guide-list li:first-child .guide-row { border-top: 0; padding-top: 0; }
.guide-row-title {
  display: block;
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-md);
  line-height: 1.4; color: var(--color-ink);
  transition: color var(--dur-short) var(--ease-out);
}
.guide-row:hover .guide-row-title { color: var(--color-accent); }
.guide-row-summary {
  display: block;
  font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.6;
  color: var(--color-ink-2); max-width: var(--measure-prose);
  margin-top: var(--space-3xs);
}
.guide-row .post-row-date { display: block; margin-bottom: var(--space-3xs); }

/* Breadcrumb. Mono because it is a label, which is the role design.md
   reserves mono for. */
.article-crumb ol {
  list-style: none; display: flex; flex-wrap: wrap; margin: 0 0 var(--space-sm); padding: 0;
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: .08em; text-transform: uppercase; color: var(--color-ink-3);
}
.article-crumb li + li::before { content: " / "; white-space: pre; }
.article-crumb a { color: var(--color-ink-3); text-decoration: none; }
.article-crumb a:hover { color: var(--color-ink); }

/* Table of contents. Top-and-bottom hairline band, no fill and no radius,
   because design.md bans the rounded tinted left-border card. The same band
   shape is what a callout uses, so this is one component. */
.article-toc {
  border-top: 1px solid var(--color-rule-strong);
  border-bottom: 1px solid var(--color-rule-strong);
  padding: var(--space-sm) 0; margin: var(--space-lg) 0;
  max-width: var(--measure-prose);
}
.article-toc-h {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--color-ink-3);
  margin: 0 0 var(--space-2xs);
}
.article-toc ul { list-style: none; margin: 0; padding: 0; }
.article-toc li + li { margin-top: var(--space-3xs); }
.article-toc a {
  font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.6;
  color: var(--color-ink-2); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.article-toc a:hover { color: var(--color-accent); border-bottom-color: var(--color-accent-rule); }

.article-siblings { margin-top: var(--space-lg); }
.article-siblings .guide-list { margin-top: var(--space-2xs); }

@media (max-width: 900px) {
  .guide-band { grid-template-columns: 1fr; gap: var(--space-sm); padding: var(--space-lg) 0; }
}
.regime-guide { display: inline-block; margin-top: var(--space-2xs); }

/* nogyo care guide. The one visual override: the brand is lowercase-forward
   (wordmark, domain and .ng-brand are all "nogyo.ai"), so uppercasing the
   breadcrumb directly under the wordmark fights it. Mono stays, because it is
   a label. Only the transform drops. */
.layout-nogyo .article-crumb ol { text-transform: none; letter-spacing: .06em; }

/* Care-guide band on the landing page. Hairline idiom, matching .nl-cred and
   .nl-close. The link is .btn-text and must stay that way: a pill reads as
   primary and this page's only primary action is the waitlist. */
.nl-guide { border-top: 1px solid var(--color-rule-strong); padding-top: var(--space-xl); margin-top: var(--space-2xl); }
.nl-guide-h { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: var(--text-xl); letter-spacing: -0.02em; color: var(--color-ink); margin: 0; }
.nl-guide-sub { font-family: var(--font-body); font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-2); margin: var(--space-2xs) 0 var(--space-md); max-width: var(--measure-prose); }
.nl-guide-list { list-style: none; margin: 0 0 var(--space-md); padding: 0; }
.nl-guide-row { display: block; text-decoration: none; border-top: 1px solid var(--color-rule); padding: var(--space-sm) 0; }
.nl-guide-row:first-child { border-top: 0; }
.nl-guide-title { display: block; font-family: var(--font-body); font-weight: 600; font-size: var(--text-md); color: var(--color-ink); line-height: 1.4; transition: color var(--dur-short) var(--ease-out); }
.nl-guide-row:hover .nl-guide-title { color: var(--color-accent); }
.nl-guide-sum { display: block; font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.6; color: var(--color-ink-2); margin-top: var(--space-3xs); max-width: var(--measure-prose); }