/* Info page (/join) only. Shell and tokens: join.css. Shared sections: styles/public.css.
 * One orchestrated moment: the hero headline settles, then the sample ranch plays.
 * Everything else moves only when someone acts (season picker, plans, FAQ).
 */

/* ---------- Ear tag: the page's recurring mark ---------- */
.lp-tag { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 26px; padding: 5px 8px 0; border-radius: 6px 6px 12px 12px; background: var(--pub-tag); color: #2b2410; font-size: 12px; font-weight: 760; font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
.lp-tag::before { content: ""; position: absolute; top: 3px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #00000033; }

/* ---------- Hero ---------- */
.lp-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); align-items: center; gap: 56px; padding: 56px 0 72px; min-height: min(780px, calc(100svh - 76px)); }
.lp-title { font-size: clamp(42px, 4.9vw, 74px) !important; }
.lp-title span { display: block; animation: lp-rise .9s var(--pub-ease) both; }
.lp-title span + span { animation-delay: .12s; color: var(--pub-forest); }
.lp-lede { margin-top: 26px; max-width: 42ch; font-size: 19px; line-height: 1.6; color: var(--pub-muted); animation: lp-rise .9s .24s var(--pub-ease) both; }
.lp-hero .join-actions { animation: lp-rise .9s .34s var(--pub-ease) both; }
.lp-terms { margin-top: 18px; max-width: 46ch; font-size: 14px; color: var(--pub-muted); animation: lp-rise .9s .42s var(--pub-ease) both; }

/* Sample ranch window over a ranch photo */
.lp-demo { position: relative; margin: 0; padding: 48px 0 0; min-width: 0; animation: lp-demo-in 1.1s .18s var(--pub-ease) both; }
.lp-demo-photo { position: absolute; top: 0; right: 0; bottom: 84px; left: 16%; overflow: hidden; border-radius: 28px; background: var(--pub-forest); }
.lp-demo-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; animation: lp-settle 2.4s var(--pub-ease) both; }
.lp-demo-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, transparent 40%, #0c1d1766); }
.lp-window { position: relative; display: grid; grid-template-columns: 158px minmax(0, 1fr); height: 392px; margin-right: 9%; overflow: hidden; border-radius: 20px; background: var(--pub-paper); box-shadow: 0 0 0 1px #173e3514, 0 34px 80px -20px #0c1d1766, 0 12px 28px -12px #0c1d1740; }
.lp-rail { display: flex; flex-direction: column; gap: 3px; padding: 16px 10px; background: var(--pub-forest); }
.lp-rail img { width: 112px; height: auto; margin: 2px 6px 16px; filter: brightness(0) invert(1); opacity: .95; }
.lp-rail-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 9px; color: #cfe0d6; font-size: 12px; font-weight: 560; white-space: nowrap; transition: background .45s var(--pub-ease), color .45s ease; }
.lp-rail-item .cc-icon { width: 15px; height: 15px; flex: 0 0 15px; }
.lp-rail-item.is-active { background: #e1bf7b; color: #18291f; }
.lp-screen { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 14px 16px 16px; background: var(--pub-sage); }
.lp-topbar { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; }
.lp-topbar span { font-size: 11px; color: var(--pub-muted); }
.lp-scenes { display: grid; flex: 1; min-height: 0; margin-top: 12px; }
.lp-scene { grid-area: 1 / 1; min-width: 0; padding: 14px 16px; overflow: hidden; border: 1px solid var(--pub-line); border-radius: 14px; background: var(--pub-paper); opacity: 0; transform: translateY(10px) scale(.985); transition: opacity .45s ease, transform .55s var(--pub-ease); }
.lp-scene.is-active { opacity: 1; transform: none; }
.lp-scene-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.lp-scene-head b { font-size: 16px; font-weight: 720; letter-spacing: -.02em; }
.lp-count { font-size: 12px; color: var(--pub-muted); font-variant-numeric: tabular-nums; }
.lp-swap { display: inline-grid; }
.lp-swap > * { grid-area: 1 / 1; text-align: right; }
.lp-count-to { opacity: 0; }

/* Scene: calving. A new calf row slides in under its dam. */
.lp-row { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid #e6ece8; font-size: 12px; }
.lp-row:last-child { border-bottom: 0; }
.lp-row span b { display: block; font-size: 13px; font-weight: 650; }
.lp-row small { display: block; color: var(--pub-muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-row em { font-style: normal; color: var(--pub-muted); font-size: 11px; }
.lp-row-new { max-height: 0; padding-block: 0; opacity: 0; border-bottom-color: transparent; border-radius: 10px; }
.is-active .lp-row-new { animation: lp-row-in .7s .9s var(--pub-ease) forwards, lp-flash 2.2s 1.2s ease forwards; }
.is-active[data-scene="calve"] .lp-count-from { animation: lp-out .3s 1.3s ease forwards; }
.is-active[data-scene="calve"] .lp-count-to { animation: lp-in .3s 1.4s ease forwards; }

/* Scene: working. Tags light up as weights are recorded. */
.lp-chips { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 7px 6px; margin-top: 6px; }
.lp-chip { display: flex; align-items: center; justify-content: center; height: 24px; padding-top: 3px; border-radius: 5px 5px 10px 10px; background: #edf1ee; color: #6e7f76; font-size: 10.5px; font-weight: 720; font-variant-numeric: tabular-nums; }
.is-active .lp-chip { animation: lp-chip .35s calc(.5s + var(--i) * 55ms) var(--pub-ease) forwards; }
.lp-meter { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin-top: 16px; font-size: 12px; color: var(--pub-muted); }
.lp-meter b { display: block; }
.lp-meter-bar { display: block; height: 8px; overflow: hidden; border-radius: 99px; background: #e6ece8; }
.lp-meter-bar i { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--pub-forest); transform: scaleX(0); transform-origin: left; }
.is-active .lp-meter-bar i { animation: lp-fill 1.4s .5s cubic-bezier(.45, 0, .25, 1) forwards; }
.lp-meter-note { opacity: 0; font-weight: 650; color: var(--pub-ink); }
.is-active .lp-meter-note { animation: lp-in .4s 2s ease forwards; }

/* Scene: moving. The herd walks from North to Creek pasture. */
.lp-map { position: relative; margin-top: 4px; }
.lp-map svg { display: block; width: 100%; height: auto; }
.lp-field { stroke: #fff; stroke-width: 3; stroke-linejoin: round; }
.lp-field-north { fill: #dbe7dd; }
.lp-field-creek { fill: #e4ede0; transition: fill .6s ease; }
.lp-field-lot { fill: #ecf0e6; }
.is-active .lp-field-creek { animation: lp-field 1s 1.6s ease forwards; }
.lp-creek { fill: none; stroke: #9cc0d4; stroke-width: 3; stroke-linecap: round; }
.lp-map text { fill: var(--pub-ink); font-size: 11px; font-weight: 650; }
.lp-herd { position: absolute; left: 20%; top: 22%; width: 34px; height: 22px; }
.lp-herd i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #2c2620; box-shadow: 0 0 0 1.5px #fff; }
.lp-herd i:nth-child(1) { left: 0; top: 8px; } .lp-herd i:nth-child(2) { left: 9px; top: 2px; } .lp-herd i:nth-child(3) { left: 13px; top: 13px; } .lp-herd i:nth-child(4) { left: 21px; top: 6px; } .lp-herd i:nth-child(5) { left: 27px; top: 15px; }
.is-active .lp-herd { animation: lp-walk 1.7s .7s cubic-bezier(.45, 0, .3, 1) forwards; }
.lp-pin { position: absolute; display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 99px; background: #fff; box-shadow: 0 2px 8px #173e3520; font-size: 11px; font-weight: 720; font-variant-numeric: tabular-nums; }
.lp-pin::after { content: " head"; margin-left: 3px; font-weight: 500; color: var(--pub-muted); }
.lp-pin-north { left: 33%; top: 44%; } .lp-pin-creek { left: 70%; top: 60%; } .lp-pin-lot { left: 33%; top: 80%; }
.is-active[data-scene="move"] .lp-count-from { animation: lp-out .3s 2.1s ease forwards; }
.is-active[data-scene="move"] .lp-count-to { animation: lp-in .3s 2.2s ease forwards; }

/* Saved toast, timed to each scene */
.lp-toast { position: absolute; left: 50%; bottom: 26px; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 32px); padding: 9px 14px 9px 10px; border-radius: 99px; background: var(--pub-ink); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; box-shadow: 0 10px 24px #0c1d1740; opacity: 0; transform: translate(-50%, 12px); pointer-events: none; }
.lp-toast-text { overflow: hidden; text-overflow: ellipsis; }
.lp-toast-check { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #e1bf7b; color: #18291f; }
.lp-toast-check .cc-icon { width: 12px; height: 12px; }
.is-cycling .lp-toast { animation: lp-toast var(--lp-scene-ms, 5200ms) linear both; }
.is-cycling.is-paused .lp-toast { animation-name: lp-toast-hold; animation-duration: 2.6s; animation-timing-function: var(--pub-ease); }

/* Demo controls */
.lp-demo-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 9% 0 0; }
.lp-steps { display: flex; gap: 6px; flex: 1; }
.lp-steps button { flex: 1; display: grid; gap: 8px; min-height: 44px; padding: 6px 4px 4px; border: 0; background: transparent; color: var(--pub-muted); font-weight: 600; font-size: 13px; line-height: 1.2; font-family: inherit; text-align: left; cursor: pointer; }
.lp-steps button[aria-pressed="true"] { color: var(--pub-ink); }
.lp-step-bar { display: block; height: 3px; overflow: hidden; border-radius: 3px; background: #173e351f; }
.lp-step-bar i { display: block; width: 100%; height: 100%; background: var(--pub-forest); transform: scaleX(0); transform-origin: left; }
.is-cycling [aria-pressed="true"] .lp-step-bar i { animation: lp-fill var(--lp-scene-ms, 5200ms) linear forwards; }
.is-paused [aria-pressed="true"] .lp-step-bar i { animation: none; transform: none; }
.lp-pause { display: grid; place-items: center; flex: 0 0 44px; height: 44px; border: 1px solid var(--pub-line); border-radius: 50%; background: var(--pub-paper); color: var(--pub-forest); cursor: pointer; transition: background .2s ease; }
.lp-pause:hover { background: #fff; border-color: #b9c9be; }
.lp-pause svg { width: 18px; height: 18px; }

/* ---------- Facts strip ---------- */
.lp-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--pub-line); }
.lp-facts p { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding: 26px 28px; font-size: 15px; color: var(--pub-muted); }
.lp-facts p + p { border-left: 1px solid var(--pub-line); }
.lp-facts p:first-child { padding-left: 0; }
.lp-facts b { font-size: 22px; font-weight: 740; letter-spacing: -.03em; color: var(--pub-forest); }

/* ---------- The cattle year ---------- */
.lp-year-track { position: relative; display: grid; grid-template-columns: repeat(var(--stops), minmax(0, 1fr)); margin-top: 52px; }
.lp-year-line { position: absolute; top: 15px; left: calc(50% / var(--stops)); right: calc(50% / var(--stops)); height: 2px; border-radius: 2px; background: var(--pub-line); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--pub-ease); }
.lp-year-track.is-drawn .lp-year-line { transform: none; }
.lp-year-line i { position: absolute; inset: 0; background: var(--pub-forest); transform-origin: left; transform: scaleX(calc(var(--at, 0) / (var(--stops) - 1))); transition: transform .6s var(--pub-ease); }
.lp-year-track button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 44px; padding: 0 6px 6px; border: 0; background: transparent; color: var(--pub-ink); font-family: inherit; text-align: center; cursor: pointer; }
.lp-year-dot { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 10px; border: 2px solid var(--pub-line); border-radius: 50%; background: var(--pub-sage); transition: border-color .3s ease, background .3s ease, box-shadow .3s ease, transform .3s var(--pub-ease); }
.lp-year-dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pub-line); transition: background .3s ease; }
.lp-year-track button:hover .lp-year-dot { border-color: var(--pub-forest); }
.lp-year-track button[aria-selected="true"] .lp-year-dot { border-color: var(--pub-forest); background: var(--pub-forest); box-shadow: 0 0 0 6px var(--pub-gold-soft); transform: scale(1.08); }
.lp-year-track button[aria-selected="true"] .lp-year-dot::after { background: #e1bf7b; }
.lp-year-track b { font-size: 16px; font-weight: 680; }
.lp-year-track small { font-size: 13px; color: var(--pub-muted); }
.lp-year-panel { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; margin-top: 48px; padding: 40px; border-radius: var(--pub-radius-lg); background: var(--pub-paper); border: 1px solid var(--pub-line); }
.lp-year-panel:focus-visible { outline-offset: 6px; }
.lp-year-season { font-size: 14px; font-weight: 650; color: var(--pub-focus); }
.lp-plus { display: inline-block; margin-left: 6px; padding: 1px 9px; border-radius: 99px; background: var(--pub-forest); color: #e1bf7b; font-size: 12px; font-weight: 700; vertical-align: 1px; }
.lp-year-copy h3 { margin-top: 10px; font-size: clamp(24px, 2.4vw, 32px); font-weight: 720; letter-spacing: -.035em; line-height: 1.12; }
.lp-year-copy > p:not(.lp-year-season) { margin-top: 14px; max-width: 46ch; color: var(--pub-muted); font-size: 16px; line-height: 1.65; }
.lp-year-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.lp-year-tools li { padding: 6px 12px; border-radius: 99px; background: var(--pub-sage); color: var(--pub-forest); font-size: 13px; font-weight: 620; }
.lp-sheet { min-width: 0; padding: 6px 4px 0; }
.lp-sheet table { width: 100%; border-collapse: collapse; font-size: 14px; }
.lp-sheet :is(thead, th, td, tr) { background: transparent; text-transform: none; letter-spacing: normal; }
.lp-sheet thead th { padding: 0 12px 10px; font-size: 13px; font-weight: 600; color: var(--pub-muted); text-align: left; border-bottom: 1px solid var(--pub-line); }
.lp-sheet tbody :is(th, td) { font-size: 14px; padding: 14px 12px; text-align: left; border-bottom: 1px solid #e6ece8; }
.lp-sheet tbody th { font-weight: 650; color: var(--pub-ink); }
.lp-sheet td { color: var(--pub-muted); }
.lp-sheet td:last-child { color: var(--pub-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.lp-sheet-note { margin-top: 12px !important; padding-left: 12px; font-size: 12px; color: var(--pub-muted); }
.is-swapping .lp-year-copy { animation: lp-swap-in .45s var(--pub-ease) both; }
.is-swapping .lp-sheet tbody tr { animation: lp-swap-in .45s calc(.08s + var(--i) * 60ms) var(--pub-ease) both; }

/* ---------- Built for the pasture ---------- */
.lp-field-band { background: var(--pub-forest-deep); color: #dce7e0; }
.lp-field-inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: 72px; width: var(--pub-shell); margin-inline: auto; padding: 104px 0; }
.lp-phone { justify-self: center; width: 286px; padding: 10px; border-radius: 44px; background: #081a15; box-shadow: 0 0 0 1px #ffffff14, 0 40px 80px #00000059; }
.lp-phone-screen { display: flex; flex-direction: column; gap: 14px; min-height: 540px; padding: 26px 18px 18px; border-radius: 35px; background: var(--pub-sage); color: var(--pub-ink); }
.lp-phone-top b { display: block; font-size: 20px; font-weight: 740; letter-spacing: -.03em; color: var(--pub-ink); }
.lp-phone-top span { font-size: 13px; color: var(--pub-muted); }
.lp-phone-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lp-phone-pick span { display: grid; place-items: center; min-height: 46px; border: 1px solid var(--pub-line); border-radius: 12px; background: #fff; font-size: 13px; font-weight: 620; }
.lp-phone-pick .is-on { background: var(--pub-forest); border-color: var(--pub-forest); color: #fff; }
.lp-phone-tags { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px; border-radius: 14px; background: #fff; border: 1px solid var(--pub-line); }
.lp-phone-tags .lp-tag { height: 34px; font-size: 14px; background: #e6ece8; color: #6e7f76; }
.lp-phone-tags .lp-tag.is-on { background: var(--pub-tag); color: #2b2410; }
.lp-phone-save { display: grid; place-items: center; min-height: 50px; border-radius: 13px; background: var(--pub-forest); color: #fff; font-size: 15px; font-weight: 650; }
.lp-phone-status { display: flex; align-items: center; gap: 10px; margin-top: auto !important; padding: 10px 12px; border-radius: 12px; background: var(--pub-ink); color: #fff; font-size: 12px; font-weight: 560; line-height: 1.35; }
.lp-phone-dot { flex: 0 0 9px; height: 9px; border-radius: 50%; background: #e9c46a; box-shadow: 0 0 0 0 #e9c46a80; animation: lp-pulse 2.4s ease-out infinite; }
.lp-phone-status.is-online .lp-phone-dot { background: #8fd0a6; animation: none; }
.lp-field-copy h2 { color: #fff; }
.lp-field-lede { margin-top: 18px !important; max-width: 52ch; font-size: 18px; line-height: 1.6; color: #b9cdc1; }
.lp-points { margin: 36px 0 0; padding: 0; list-style: none; }
.lp-points li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; padding: 22px 0; border-top: 1px solid #ffffff1a; }
.lp-point-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #ffffff0f; color: #e1bf7b; }
.lp-point-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lp-points h3 { color: #fff; font-size: 18px; }
.lp-points p { margin-top: 6px; color: #b9cdc1; font-size: 15px; line-height: 1.6; }

/* ---------- Closing ---------- */
.lp-closing { position: relative; display: flex; align-items: flex-end; min-height: 440px; margin-block: 40px 72px; overflow: hidden; border-radius: 28px; background: var(--pub-forest); isolation: isolate; }
.lp-closing img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.lp-closing::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #0f2c25f2 0%, #0f2c25b3 45%, #0f2c2526 100%); }
.lp-closing > div { max-width: 560px; padding: 56px; }
.lp-closing h2 { color: #fff; }
.lp-closing p { margin: 16px 0 28px; color: #d4e1d9; font-size: 17px; line-height: 1.6; }
.lp-closing .button-primary { background: #e1bf7b; border-color: #e1bf7b; color: #18291f; box-shadow: 0 10px 30px #00000033; }
.lp-closing .button-primary:hover { background: #ecd29f; border-color: #ecd29f; }

/* ---------- Motion ---------- */
@keyframes lp-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes lp-demo-in { from { opacity: 0; transform: translateY(36px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes lp-settle { from { transform: scale(1.08); } to { transform: none; } }
@keyframes lp-row-in { to { max-height: 60px; padding-block: 9px; opacity: 1; border-bottom-color: #e6ece8; } }
@keyframes lp-flash { 0% { background: #f6ecd6; } 70% { background: #f6ecd6; } 100% { background: transparent; } }
@keyframes lp-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes lp-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes lp-chip { 0% { transform: scale(.9); } 60% { transform: scale(1.08); } 100% { transform: none; background: var(--pub-tag); color: #2b2410; } }
@keyframes lp-fill { to { transform: none; } }
@keyframes lp-field { to { fill: #cfe3cf; } }
@keyframes lp-walk { from { left: 20%; top: 22%; } to { left: 70%; top: 34%; } }
@keyframes lp-toast { 0%, 34% { opacity: 0; transform: translate(-50%, 12px); } 40%, 90% { opacity: 1; transform: translate(-50%, 0); } 97%, 100% { opacity: 0; transform: translate(-50%, 6px); } }
@keyframes lp-toast-hold { 0%, 55% { opacity: 0; transform: translate(-50%, 12px); } 100% { opacity: 1; transform: translate(-50%, 0); } }
@keyframes lp-swap-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes lp-pulse { 0% { box-shadow: 0 0 0 0 #e9c46a80; } 70%, 100% { box-shadow: 0 0 0 9px #e9c46a00; } }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .lp-hero { grid-template-columns: 1fr; min-height: 0; gap: 44px; padding-top: 48px; }
  .lp-hero-copy { max-width: 680px; }
  .lp-window { margin-right: 6%; }
  .lp-demo-controls { margin-right: 6%; }
  .lp-field-inner { gap: 48px; }
}
@media (max-width: 860px) {
  .lp-year-panel { grid-template-columns: 1fr; gap: 28px; padding: 28px; }
  .lp-field-inner { grid-template-columns: 1fr; padding: 72px 0; }
  .lp-phone { order: 2; }
  .lp-facts { grid-template-columns: 1fr; }
  .lp-facts p, .lp-facts p:first-child { padding: 18px 0; }
  .lp-facts p + p { border-left: 0; border-top: 1px solid var(--pub-line); }
}
@media (max-width: 760px) {
  .lp-hero { padding: 32px 0 48px; gap: 32px; }
  .lp-lede { font-size: 17px; margin-top: 20px; }
  .lp-hero .join-actions .button { flex: 1 1 100%; }
  .lp-demo { padding-top: 28px; }
  .lp-demo-photo { left: 10%; bottom: 76px; border-radius: 22px; }
  .lp-window { grid-template-columns: 52px minmax(0, 1fr); height: 344px; margin-right: 5%; border-radius: 16px; }
  .lp-rail { padding: 12px 8px; align-items: center; }
  .lp-rail img { display: none; }
  .lp-rail-item { padding: 8px; }
  .lp-rail-item > span { display: none; }
  .lp-screen { padding: 12px; }
  .lp-scene { padding: 12px; }
  .lp-chips { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lp-demo-controls { margin-right: 0; }
  .lp-steps button { font-size: 12px; }
  .lp-year-track { display: flex; gap: 8px; margin-top: 32px; padding-bottom: 4px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
  .lp-year-track::-webkit-scrollbar { display: none; }
  .lp-year-line { display: none; }
  .lp-year-track button { flex: 0 0 auto; flex-direction: row; gap: 8px; padding: 0 16px 0 10px; border: 1px solid var(--pub-line); border-radius: 99px; background: var(--pub-paper); scroll-snap-align: start; }
  .lp-year-track button[aria-selected="true"] { border-color: var(--pub-forest); background: var(--pub-forest); }
  .lp-year-track button[aria-selected="true"] b { color: #fff; }
  .lp-year-track small { display: none; }
  .lp-year-dot { width: 12px; height: 12px; margin: 0; border-width: 0; background: var(--pub-line); }
  .lp-year-dot::after { display: none; }
  .lp-year-track button[aria-selected="true"] .lp-year-dot { background: #e1bf7b; box-shadow: none; transform: none; }
  .lp-year-panel { margin-top: 20px; padding: 22px 18px; }
  .lp-sheet { padding: 0; }
  .lp-sheet table { font-size: 13px; }
  .lp-sheet :is(thead th, tbody th, tbody td) { padding-inline: 6px; }
  .lp-closing { min-height: 0; margin-block: 24px 48px; border-radius: 22px; }
  .lp-closing::before { background: linear-gradient(0deg, #0f2c25f5 0%, #0f2c25cc 60%, #0f2c2566 100%); }
  .lp-closing > div { padding: 140px 24px 28px; }
  .lp-closing .button { width: 100%; }
}
@media (max-width: 400px) {
  .lp-window { height: 330px; margin-right: 0; }
  .lp-demo-photo { left: 14%; }
  .lp-row { grid-template-columns: 50px minmax(0, 1fr); }
  .lp-row em { display: none; }
  .lp-pin { font-size: 10px; padding: 2px 6px; }
  .lp-toast { width: max-content; max-width: calc(100% - 24px); bottom: 18px; border-radius: 14px; font-size: 11px; white-space: normal; line-height: 1.3; }
  .lp-phone { width: 100%; max-width: 270px; }
  .lp-phone-screen { min-height: 500px; }
  .lp-steps { gap: 2px; }
}

@media (max-width: 359px) { .lp-title { font-size: 37px !important; } }

/* Reduced motion: no autoplay and no entrance; each scene shows its finished state. */
@media (prefers-reduced-motion: reduce) {
  .landing-page :is(.lp-title span, .lp-lede, .lp-hero .join-actions, .lp-terms, .lp-demo, .lp-demo-photo img, .lp-scene *, .lp-toast, .lp-step-bar i, .lp-year-copy, .lp-sheet tr, .lp-phone-dot) { animation: none !important; }
  .lp-scene, .lp-rail-item, .lp-year-line, .lp-year-line i, .lp-year-dot { transition: none !important; }
  .is-active .lp-row-new { max-height: 60px; padding-block: 9px; opacity: 1; border-bottom-color: #e6ece8; background: #f6ecd6; }
  .is-active .lp-count-from { opacity: 0; }
  .is-active .lp-count-to { opacity: 1; }
  .is-active .lp-chip { background: var(--pub-tag); color: #2b2410; }
  .is-active .lp-meter-bar i { transform: none; }
  .is-active .lp-meter-note { opacity: 1; }
  .is-active .lp-field-creek { fill: #cfe3cf; }
  .is-active .lp-herd { left: 70%; top: 34%; }
  .lp-toast { opacity: 1; transform: translate(-50%, 0); }
  .lp-step-bar i { transform: none; }
  [aria-pressed="false"] > .lp-step-bar i { transform: scaleX(0); }
}