/* FarmHQ — the sticker system for the sub-pages (brand book v1.4 §08).
   One file, linked from every page except the homepage (which carries its own) and admin.
   Lifted = tappable: a hard, un-blurred Ryegrass shadow, a touch more on hover, sunk on press.
   Flat = informational: the ink outline only. Uses each page's own tokens. */
:root { --sk-edge: var(--ink); --sk-milk: #F7F8F2; }
@media (prefers-color-scheme: dark) { :root { --sk-edge: #454B3A; } }

/* Buttons: lime on black (the .cta box), so the shadow is Milk */
.cta a.ctabtn, a.ctabtn {
  border-radius: 12px; border: 2px solid var(--accent-ink);
  box-shadow: 4px 4px 0 var(--sk-milk); opacity: 1;
  transition: translate .12s ease, box-shadow .12s ease;
}
.cta a.ctabtn:hover, a.ctabtn:hover, .cta a.ctabtn:focus-visible, a.ctabtn:focus-visible { opacity: 1; translate: -1px -1px; box-shadow: 5px 5px 0 var(--sk-milk); }
.cta a.ctabtn:active, a.ctabtn:active { translate: 3px 3px; box-shadow: none; }
.cta { border: 1.5px solid var(--sk-edge); }

/* The eyebrow is the app's tag badge */
.eyebrow { border-radius: 26% / 32%; border: 1.5px solid var(--accent-ink); box-shadow: 2px 2px 0 var(--accent-ink); padding: 6px 12px 5px; }

/* Lifted: cards that go somewhere */
a.gcard, a.pcard, .plan, .tier {
  border: 1.5px solid var(--sk-edge); box-shadow: 5px 5px 0 var(--accent);
  transition: translate .15s ease, box-shadow .15s ease;
}
a.gcard:hover, a.pcard:hover, a.gcard:focus-visible, a.pcard:focus-visible { translate: -2px -2px; box-shadow: 7px 7px 0 var(--accent); }
a.gcard:active, a.pcard:active { translate: 3px 3px; box-shadow: none; }
.plan, .tier { border-radius: 16px; }
.plan.hot, .tier.hot { border: 2px solid var(--sk-edge); box-shadow: 8px 8px 0 var(--accent); }
.plans, .tiers { gap: 18px; }
.plans { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }  /* three across inside the 720px column */

/* Flat: the outline only */
.stat, .quickanswer, .quickwin, .related, .tablewrap, .calc, .pillarcard, .dirtile, .dirtable, .card, .spec, .sw, .icell, .do, .dont {
  border-color: var(--sk-edge); border-width: 1.5px;
}
.quickanswer, .quickwin, .pull { border-left-width: 4px; }