/* Raadish: the page's own look, carried from the brand sprint (round 5).
   Pea shoot is a fill, never a line; the line is ink. Everything that is the
   brand's is inked: a 2px ink edge, a big radius, pea-shoot fills. The app
   inside the page has its own sheet, app.css. */
:root {
  --bg: #FFFFFF; --bg2: #F5FAE7; --card: #FFFFFF; --ink: #172D0E; --ink2: #34492A; --mute: #5B6A51; --line: #E1E9D5; --line2: #C9D6BB;
  --pea: #C9F14C; --pea2: #B4DF33; --pea-tint: #ECFAB9; --leaf: #3B7B1F; --radish: #F35A88; --radish-ink: #C22D5E; --sky: #3A8CE0; --sky-ink: #1F6FC2; --shell: #F4FBE0;
  --r: 26px;
  --f-display: 'Gabarito', system-ui, sans-serif; --f-text: 'Gabarito', system-ui, sans-serif; --f-hand: 'Shantell Sans', 'Gabarito', system-ui, sans-serif; --f-mono: ui-monospace, 'SF Mono', Menlo, monospace; --f-sf: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  --toast-bg: #172D0E; --toast-fg: #E6F9A8;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-padding-top: 64px; }
html, body { overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
body { background: var(--bg); color: var(--ink); font: 400 17px/1.55 var(--f-text); letter-spacing: -.004em; overflow-anchor: none; }
svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; text-align: inherit; }
a { color: inherit; -webkit-tap-highlight-color: transparent; }
p, h1, h2, h3, h4, h5, ul, ol, dl, dd, figure, blockquote, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
input, textarea { font: inherit; color: inherit; }
h1, h2, h3, .bal { text-wrap: balance; }
p, li, dd, figcaption { text-wrap: pretty; }
::selection { background: var(--pea); color: var(--ink); }
/* The highlighter at display size: the brand's one mark, on the site and in headlines */
.hl { background: linear-gradient(transparent 62%, var(--pea) 62% 92%, transparent 92%); padding: 0 .04em; }
.dot-pea { display: inline-block; width: .62em; height: .62em; border-radius: 50%; background: var(--pea); box-shadow: 0 0 0 2px var(--ink); vertical-align: .02em; }

/* Type */
h2 { font: 800 clamp(34px, 4.8vw, 58px)/1 var(--f-display); letter-spacing: -.038em; }
h3 { font: 760 22px/1.2 var(--f-display); letter-spacing: -.018em; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 22px; border-radius: 99px; background: var(--pea); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); font: 760 16px/1 var(--f-text); letter-spacing: -.01em; white-space: nowrap; text-decoration: none; transition: transform var(--spr-bounce-d, .5s) var(--spr-bounce, ease), background .2s; }
.btn:hover { transform: translateY(-2px) rotate(-1.5deg); }
.btn:active { transform: scale(.96); transition-duration: .08s; }
.btn.ink { background: var(--ink); color: var(--pea); box-shadow: none; }

/* Toast */
.toast { position: fixed; z-index: 90; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); transform: translate(-50%, 30px); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .45s var(--spr-bounce, cubic-bezier(.2, 1.4, .4, 1)), opacity .2s, visibility 0s linear .45s; white-space: nowrap; max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis; padding: 12px 18px; border-radius: 99px; background: var(--toast-bg); color: var(--toast-fg); font: 600 14px/1.3 var(--f-text); box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .5); }
.toast.on { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition: transform .45s var(--spr-bounce, cubic-bezier(.2, 1.4, .4, 1)), opacity .2s, visibility 0s; }

/* The radish in motion: a hop with a squash, and the sparkles of a harvest */
.ms-svg { overflow: visible; }
.ms-svg .fig { transform-box: view-box; transform-origin: 100px 192px; }
.ms-svg.hop .fig { animation: pl-hop .72s cubic-bezier(.3, .7, .3, 1); }
@keyframes pl-hop { 0% { transform: none; } 16% { transform: scale(1.08, .9); } 42% { transform: translateY(-22px) scale(.95, 1.07); } 68% { transform: scale(1.05, .95); } 84% { transform: scale(.985, 1.015); } 100% { transform: none; } }
.ms-svg.hop .spk .sp { animation: pl-spk .9s ease-out both; transform-box: fill-box; transform-origin: center; }
.ms-svg .spk g:nth-child(2) .sp { animation-delay: .06s; } .ms-svg .spk g:nth-child(3) .sp { animation-delay: .12s; } .ms-svg .spk g:nth-child(4) .sp { animation-delay: .18s; }
@keyframes pl-spk { from { transform: scale(0) rotate(-40deg); opacity: 0; } 40% { opacity: 1; } }

/* ---------- The wordmark ---------- */
.wm { display: inline-flex; align-items: baseline; font: 900 64px/1 var(--f-display); letter-spacing: -.06em; color: var(--ink); white-space: nowrap; }
.wm .wdot { display: inline-block; width: .3em; height: .4em; margin-left: .03em; margin-right: -.02em; overflow: visible; }

/* Reduced motion: the plants hold still and nothing slides */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; } }