/* CropNow, Who We Serve: "Two seasons".
 *
 * One field drawn twice, split by a handle the visitor drags (serve.js draws
 * the field on a canvas and sets --split): a season as most farms run it, and
 * the same field with CropNow. Then a calculator of what the visitor's own
 * fields could save, today against CropNow, the proof with its footnote,
 * real photographs, and an invitation to plan a pilot.
 */

body.page-serve {
  --dry: #c7a26d;
  --pest: #d9593c;
  --water: #3d8fb8;
  background: var(--chalk);
}

.dot {
  color: var(--green);
}

.ts-kicker {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0;
  color: var(--green);
  font: 600 .78rem/1.2 var(--font-text);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.sv-h2 {
  max-width: 52rem;
  margin: .7rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.3rem + 3.6vw, 5rem);
  font-weight: 900;
  line-height: .92;
  text-wrap: balance;
}

.sv-sub {
  max-width: 38rem;
  margin: 1.1rem 0 0;
  color: rgb(13 59 9 / .8);
  font-size: clamp(1.02rem, .95rem + .3vw, 1.2rem);
  line-height: 1.6;
}

.sv-cta {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: var(--forest);
  font: 700 1.02rem/1.2 var(--font-text);
  text-decoration: none;
}

.sv-cta span {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  transition: translate .3s var(--ease);
}

.sv-cta:hover span {
  translate: .2rem 0;
}

.sv-cta--solid {
  padding: .6rem .65rem .6rem 1.5rem;
  border-radius: 999px;
  background: var(--forest);
  color: var(--chalk);
  transition: background .3s var(--ease);
}

.sv-cta--solid:hover {
  background: #000;
}

.sv-cta--ghost {
  padding: .75rem 1.4rem;
  border: 1.5px solid rgb(13 59 9 / .25);
  border-radius: 999px;
}

.sv-cta--ghost:hover {
  border-color: var(--forest);
}

/* -- Two seasons -------------------------------------------------------------------------- */

.ts {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  gap: 2rem;
  padding: calc(var(--header-h) + 2rem) var(--gutter) 3rem;
  background: linear-gradient(180deg, #e8efe6, #f3ecd9);
}

.ts__field,
.ts__handle,
.ts__range {
  display: none;
}

.ts__side {
  position: relative;
  z-index: 2;
}

.ts__label {
  margin: 0 0 .7rem;
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 900;
}

.ts__chips {
  display: grid;
  gap: .45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ts__chips li {
  width: fit-content;
  padding: .5rem .9rem;
  border-radius: 999px;
  background: rgb(255 255 255 / .9);
  box-shadow: 0 .4rem 1rem -.6rem rgb(13 59 9 / .4);
  font-size: .92rem;
}

.ts__chips b {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 900;
}

.ts__side--today .ts__chips b { color: var(--pest); }
.ts__side--with .ts__chips b { color: var(--green); }

.ts__chips sup {
  color: var(--green);
}

/* Live (serve.js): the field fills the screen and the handle splits it. */
.ts.is-live {
  display: block;
  height: 100vh;
  height: 100svh;
  min-height: 34rem;
  padding: 0;
  overflow: hidden;
  background: #e8efe6;
  touch-action: pan-y;
  user-select: none;
}

.ts.is-live .ts__field {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.ts.is-live .ts__side {
  position: absolute;
  bottom: clamp(1.4rem, 5vh, 3rem);
  transition: opacity .3s var(--ease);
  pointer-events: none;
}

.ts.is-live .ts__side--today {
  left: var(--gutter);
  opacity: var(--today, 1);
}

.ts.is-live .ts__side--with {
  right: var(--gutter);
  opacity: var(--with, 1);
  text-align: right;
}

.ts.is-live .ts__side--with .ts__chips li {
  margin-left: auto;
}

.ts.is-live .ts__label {
  display: inline-block;
  padding: .35rem .9rem;
  border-radius: 999px;
  color: #fff;
  font-size: 1.25rem;
}

.ts.is-live .ts__side--today .ts__label { background: #8a5a2e; }
.ts.is-live .ts__side--with .ts__label { background: var(--forest); }

/* The headline, planted in the field: a giant word standing on the horizon,
 * its feet in the soil, cut by the handle like the field itself. Today's
 * side is dry and crumbling, CropNow's whole and green. serve.js sets
 * --horizon to where the field meets the sky. */
.ts__words {
  grid-column: 1 / -1;
  position: relative;
  z-index: 2;
}

.ts__line {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.6rem);
  font-weight: 900;
  line-height: 1;
}

.ts__word {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(5.4rem, 21vw, 21rem);
  font-weight: 900;
  line-height: .78;
  letter-spacing: -.01em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Today: dry earth, faded and pitted, splitting along a crack. */
.ts__word--today {
  color: #b98a4e;
  background:
    linear-gradient(172deg, transparent 47.5%, #f1e6cc 47.6% 48.6%, transparent 48.7%),
    linear-gradient(8deg, transparent 63%, #f1e6cc 63.1% 63.8%, transparent 63.9%),
    radial-gradient(circle at 20% 30%, #c79a5c 0 2px, transparent 3px) 0 0 / 11px 13px,
    linear-gradient(180deg, #c99d63, #a5733a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px rgb(110 70 30 / .35);
  opacity: .92;
}

/* With CropNow: deep, whole, growing green. */
.ts__word--with {
  color: var(--forest);
  background: linear-gradient(180deg, #4fa846 0%, #1d6a1f 55%, #0d3b09 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ts__word span {
  -webkit-text-fill-color: var(--green);
}

.ts__word--today span {
  -webkit-text-fill-color: #a5733a;
}

/* Without the field, both words stand one above the other. */
.ts:not(.is-live) .ts__word--with {
  margin-top: .5rem;
}

.ts.is-live .ts__words {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ts.is-live .ts__line {
  position: absolute;
  right: 0;
  left: 0;
  bottom: calc(100% - var(--horizon, 52%) + clamp(5.4rem, 21vw, 21rem) * .74);
  text-align: center;
}

/* Both words in the same place, full width and centred, each shown only on
 * its own side of the handle. */
.ts.is-live .ts__word {
  position: absolute;
  right: 0;
  left: 0;
  bottom: calc(100% - var(--horizon, 52%) - .06em);
  text-align: center;
}

.ts.is-live .ts__word--today {
  clip-path: inset(-30% calc(100% - var(--split)) -30% 0);
}

.ts.is-live .ts__word--with {
  clip-path: inset(-30% 0 -30% var(--split));
}

/* The handle: a line down the field, and a knob to take hold of. */
.ts.is-live .ts__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split);
  z-index: 3;
  display: block;
  width: 3px;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(13 59 9 / .2), 0 0 24px rgb(255 255 255 / .6);
  translate: -50% 0;
  cursor: ew-resize;
  pointer-events: auto;
}

.ts__knob {
  position: absolute;
  top: 62%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--forest);
  box-shadow: 0 .6rem 1.4rem rgb(13 59 9 / .45);
  color: #fff;
  font: 700 1.2rem/1 var(--font-text);
  letter-spacing: .1em;
  translate: -50% -50%;
  transition: scale .25s var(--ease);
}

.ts__tip {
  position: absolute;
  top: calc(62% + 2.4rem);
  left: 50%;
  padding: .25rem .65rem;
  border-radius: 999px;
  background: #fff;
  color: var(--forest);
  font: 700 .72rem/1.2 var(--font-text);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  translate: -50% 0;
  transition: opacity .5s var(--ease);
}

.ts.is-touched .ts__tip {
  opacity: 0;
}

.ts.is-dragging .ts__knob,
.ts__handle:hover .ts__knob {
  scale: 1.1;
}

.ts.is-live .ts__range {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.ts.is-live:has(.ts__range:focus-visible) .ts__knob {
  outline: 3px solid var(--green);
  outline-offset: 4px;
}

@media (max-width: 760px) {
  .ts.is-live .ts__side {
    bottom: .9rem;
    width: calc(50% - var(--gutter) - .4rem);
  }

  .ts.is-live .ts__label {
    padding: .3rem .65rem;
    font-size: .9rem;
  }

  .ts__chips {
    gap: .3rem;
  }

  .ts__chips li {
    display: grid;
    width: auto;
    padding: .35rem .6rem .4rem;
    border-radius: .7rem;
    font-size: .68rem;
    line-height: 1.2;
  }

  .ts__chips b {
    font-size: 1.1rem;
    line-height: 1;
  }

  .ts.is-live .ts__side--with .ts__chips li {
    margin-left: 0;
  }

  .ts__chips li {
    position: relative;
  }

  .ts__chips sup {
    position: absolute;
    top: .3rem;
    right: .45rem;
  }

  .ts__knob {
    width: 3rem;
    height: 3rem;
    font-size: 1rem;
  }

  .ts__line {
    font-size: 1.3rem;
  }

  .ts__word {
    font-size: 22vw;
  }

  .ts.is-live .ts__line {
    bottom: calc(100% - var(--horizon, 44%) + 22vw * .74);
  }
}

/* -- The rest of the page ------------------------------------------------------------------ */

.sv {
  --w: min(78rem, 100vw - 2 * var(--gutter));
}

@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .sv {
    --w: min(78rem, 100vw - 22rem);
  }
}

.calc,
.gaps,
.proof-wrap,
.sv-end {
  width: var(--w);
  margin: 0 auto;
  padding: clamp(5rem, 14vh, 8rem) 0 0;
}

.sv-head {
  max-width: 52rem;
}

/* -- The calculator ------------------------------------------------------------------------ */

.calc {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.calc__inputs {
  display: grid;
  gap: 1.6rem;
  margin: 2.4rem 0 0;
}

.calc__input {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .5rem 1rem;
  align-items: baseline;
}

.calc__input label {
  color: rgb(13 59 9 / .85);
  font-weight: 600;
}

.calc__input output {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.calc__input input {
  grid-column: 1 / -1;
  width: 100%;
  height: 2rem;
  margin: 0;
  background: transparent;
  accent-color: var(--green);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.calc__input input::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green) var(--fill, 50%), #dcd6c6 var(--fill, 50%));
}

.calc__input input::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green) var(--fill, 50%), #dcd6c6 var(--fill, 50%));
}

.calc__input input::-webkit-slider-thumb {
  width: 1.5rem;
  height: 1.5rem;
  margin-top: calc(-.75rem + 3px);
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--forest);
  box-shadow: 0 .2rem .6rem rgb(13 59 9 / .4);
  -webkit-appearance: none;
  appearance: none;
}

.calc__input input::-moz-range-thumb {
  width: 1.2rem;
  height: 1.2rem;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--forest);
}

.calc__input input:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 4px;
}

.calc__fine {
  margin: 1.8rem 0 0;
  color: rgb(13 59 9 / .62);
  font-size: .85rem;
  line-height: 1.5;
}

.calc__fine a {
  color: inherit;
  text-decoration: none;
}

/* The answer: a deep green panel that stays in view while the numbers change. */
.calc__answer {
  position: sticky;
  top: 12vh;
  display: grid;
  gap: 1rem;
  padding: clamp(1.8rem, 3vw, 2.6rem);
  border-radius: 1.6rem;
  background:
    radial-gradient(ellipse at 80% 0%, rgb(127 209 111 / .25), transparent 60%),
    var(--forest);
  color: var(--chalk);
  box-shadow: 0 2rem 3rem -2rem rgb(13 59 9 / .6);
}

.calc__lead {
  margin: 0;
  color: rgb(248 250 247 / .78);
  font-size: 1.05rem;
}

.calc__total {
  margin: 0;
  color: #a6e696;
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 2rem + 4.4vw, 6.4rem);
  font-weight: 900;
  line-height: .9;
  font-variant-numeric: tabular-nums;
}

.calc__parts {
  display: grid;
  gap: .7rem;
  margin: .6rem 0 .6rem;
  padding: 1rem 0 0;
  border-top: 1px solid rgb(248 250 247 / .18);
  list-style: none;
}

.calc__part {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .8rem;
  align-items: center;
}

.calc__part::before {
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  content: "";
}

.calc__part--water::before { background: #7ec4e6; }
.calc__part--chemical::before { background: #f0c057; }
.calc__part--yield::before { background: #a6e696; }

.calc__part span {
  color: rgb(248 250 247 / .8);
}

.calc__part b {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.calc__answer .sv-cta--solid {
  justify-self: start;
  background: #a6e696;
  color: var(--forest);
}

.calc__answer .sv-cta--solid span {
  background: var(--forest);
  color: #a6e696;
}

.calc__answer .sv-cta--solid:hover {
  background: #c3f0b6;
}

/* -- Today against CropNow -------------------------------------------------------------------- */

.gaps__table {
  margin-top: clamp(2rem, 5vh, 3rem);
}

.gaps__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.4rem;
  align-items: center;
  padding: 1.1rem 0;
  border-bottom: 1px solid rgb(13 59 9 / .1);
}

.gaps__row--head {
  padding-bottom: .6rem;
  color: rgb(13 59 9 / .6);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.gaps__row--head span:last-child {
  color: var(--green);
}

.gaps__what {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1.05;
}

.gaps__today {
  color: rgb(13 59 9 / .55);
  text-decoration: line-through;
  text-decoration-color: rgb(217 89 60 / .7);
  text-decoration-thickness: 2px;
}

.gaps__with {
  position: relative;
  padding-left: 1.6rem;
  color: var(--forest);
  font-weight: 700;
}

.gaps__with::before {
  position: absolute;
  top: .1rem;
  left: 0;
  display: grid;
  place-items: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: .7rem;
  content: "✓";
}

/* The strike-through draws across as the row arrives. */
.gaps.is-armed .gaps__row:not(.gaps__row--head) {
  transition: opacity .6s var(--ease), translate .7s var(--ease);
  transition-delay: calc(var(--i) * 100ms);
}

.gaps.is-armed:not(.is-in) .gaps__row:not(.gaps__row--head) {
  opacity: 0;
  translate: 0 1rem;
}

/* -- Proof and the reel --------------------------------------------------------------------- */

.proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.2rem, 3vw, 2.6rem);
  margin: 2.4rem 0 0;
}

.proof div {
  padding-top: 1rem;
  border-top: 2px solid var(--green);
}

.proof dd {
  margin: 0;
  color: var(--green);
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 1.6rem + 3.2vw, 5rem);
  font-weight: 900;
  line-height: .9;
}

.proof dt {
  margin-top: .5rem;
  color: rgb(13 59 9 / .85);
  font-weight: 600;
}

.proof__src {
  margin-left: .15rem;
  color: var(--green);
  text-decoration: none;
}

.reel {
  margin: clamp(3rem, 8vh, 4.5rem) 0 0;
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.reel__track {
  display: flex;
  gap: 14px;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: reel 60s linear infinite;
}

.reel:hover .reel__track {
  animation-play-state: paused;
}

@keyframes reel {
  to { translate: calc(-50% - 7px) 0; }
}

.reel li {
  position: relative;
  flex: none;
  height: clamp(13rem, 24vw, 19rem);
  overflow: hidden;
  border-radius: 6px;
}

.reel img {
  display: block;
  width: auto;
  height: 100%;
}

/* -- The end ---------------------------------------------------------------------------------- */

.sv-end {
  padding-bottom: clamp(4rem, 10vh, 6rem);
  text-align: center;
}

.sv-end__title {
  max-width: 48rem;
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 1.4rem + 4.4vw, 6rem);
  font-weight: 900;
  line-height: .9;
  text-wrap: balance;
}

.sv-end__lead {
  max-width: 38rem;
  margin: 1.4rem auto 0;
  color: rgb(13 59 9 / .82);
  font-size: clamp(1.02rem, .95rem + .3vw, 1.2rem);
  line-height: 1.6;
}

.sv-end__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin: 2.2rem 0 0;
}

.sv-end__farmer {
  margin: 1.8rem 0 0;
  color: rgb(13 59 9 / .75);
}

.sv-end__farmer a,
.sv-sources a {
  color: var(--forest);
}

.sv-sources {
  max-width: 44rem;
  margin: 3rem auto 0;
  color: rgb(13 59 9 / .55);
  font-size: .78rem;
  line-height: 1.5;
}

/* Sections come up as they arrive (serve.js). */
.proof-wrap.is-armed .proof div {
  transition: opacity .7s var(--ease), translate .8s var(--ease);
  transition-delay: calc(var(--i, 0) * 110ms);
}

.proof-wrap.is-armed:not(.is-in) .proof div {
  opacity: 0;
  translate: 0 1.2rem;
}

/* -- Narrow screens -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .calc {
    grid-template-columns: 1fr;
  }

  .calc__answer {
    position: relative;
    top: 0;
  }

  .proof {
    grid-template-columns: 1fr 1fr;
  }

  .gaps__row {
    grid-template-columns: 1fr 1fr;
    gap: .4rem 1rem;
  }

  .gaps__what {
    grid-column: 1 / -1;
  }

  .gaps__row--head span:first-child {
    display: none;
  }
}

html[data-motion="paused"] .reel__track {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .reel__track {
    animation: none;
  }

  .reel {
    overflow-x: auto;
  }
}

/* -- Who it is for: cards on a field at night ---------------------------------------------
 * A blurred field photograph sunk in deep green, with thin beams of light
 * rising from it like signals from the stations. Four glass cards: the open
 * one is wider and tells what CropNow does; the rest wait, narrow.
 */
.aud {
  position: relative;
  overflow: hidden;
  padding: clamp(5rem, 14vh, 8rem) var(--gutter);
  background: #061108;
  color: #eef3ea;
  isolation: isolate;
}

.aud__night {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.aud__field {
  position: absolute;
  inset: -4%;
  width: 108%;
  height: 108%;
  object-fit: cover;
  filter: blur(6px) brightness(.7) saturate(.8) hue-rotate(-12deg);
  transform: perspective(900px) rotateX(18deg) scale(1.08);
  transform-origin: 50% 100%;
}

.aud__night::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 60%, rgb(6 17 8 / 0), rgb(6 17 8 / .7) 100%),
    linear-gradient(180deg, rgb(6 17 8 / .85) 0, rgb(6 17 8 / .2) 40%, rgb(6 17 8 / .45) 100%);
  content: "";
}

/* Beams of light, each leaning a little and breathing in its own time. */
.aud__beam {
  position: absolute;
  z-index: 2;
  width: 4px;
  border-radius: 3px;
  background: linear-gradient(0deg, rgb(127 209 111 / 0), rgb(127 209 111 / .9) 70%, rgb(220 255 210 / .9));
  filter: blur(1.5px);
  opacity: .75;
  box-shadow: 0 0 12px rgb(127 209 111 / .6);
  animation: beam 4.5s ease-in-out infinite;
  animation-delay: calc(var(--n) * -.7s);
}

.aud__beam:nth-child(3n) {
  background: linear-gradient(0deg, rgb(110 180 230 / 0), rgb(110 180 230 / .85) 70%, rgb(220 240 255 / .9));
}

@keyframes beam {
  50% { opacity: .95; translate: 0 -10px; }
}

.aud__inner {
  width: min(78rem, 100%);
  margin: 0 auto;
}

.aud__title {
  max-width: 48rem;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 1.6rem + 4.6vw, 6.4rem);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.005em;
  text-wrap: balance;
}

.aud__lead {
  margin: 1.4rem 0 0;
  color: rgb(238 243 234 / .72);
  font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem);
}

.aud__cards {
  display: flex;
  gap: clamp(.8rem, 1.4vw, 1.2rem);
  margin: clamp(2.5rem, 7vh, 4.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.aud-card {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-width: 0;
  min-height: 30rem;
  padding: 1.6rem 1.6rem 1.8rem;
  border: 1px solid rgb(238 243 234 / .14);
  border-radius: 1.4rem;
  background: rgb(10 26 12 / .55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
  outline: none;
  transition: flex-grow .6s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}

.aud-card.is-open {
  flex-grow: 2.1;
  border-color: rgb(188 226 160 / .55);
  background: rgb(14 34 16 / .62);
  cursor: default;
}

.aud-card:focus-visible {
  border-color: #a6e696;
  box-shadow: 0 0 0 3px rgb(166 230 150 / .35);
}

.aud-card__icon {
  width: min(11rem, 100%);
  height: auto;
  overflow: visible;
}

.aud-card__icon path,
.aud-card__icon rect,
.aud-card__icon circle {
  fill: none;
  stroke: rgb(238 243 234 / .55);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .4s var(--ease), fill .4s var(--ease);
}

.aud-card.is-open .aud-card__icon path,
.aud-card.is-open .aud-card__icon rect,
.aud-card.is-open .aud-card__icon circle {
  stroke: #cfe8b5;
}

.aud-card.is-open .aud-card__icon .aud-card__lit {
  fill: #f6d27c;
  stroke: #f6d27c;
}

/* A NEST signal beside the open card's picture. */
.aud-card__ping {
  position: absolute;
  top: 3.2rem;
  left: calc(1.6rem + min(11rem, 100% - 3.2rem) + .8rem);
  width: .75rem;
  height: .75rem;
  border-radius: 50%;
  background: #6fc3e8;
  opacity: 0;
  transition: opacity .4s var(--ease);
}

.aud-card__ping::after {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  content: "";
  animation: aud-ping 2s ease-out infinite;
}

@keyframes aud-ping {
  to { opacity: 0; scale: 3.4; }
}

.aud-card.is-open .aud-card__ping {
  opacity: 1;
}

.aud-card__n {
  margin: auto 0 0;
  padding-top: 2rem;
  color: rgb(238 243 234 / .5);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
}

.aud-card__name {
  margin: .5rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.2rem + 1vw, 2.3rem);
  font-weight: 900;
  line-height: 1;
}

.aud-card__who {
  margin: .8rem 0 0;
  color: rgb(238 243 234 / .66);
  font-size: .95rem;
  line-height: 1.55;
}

/* What CropNow does for them: only on the open card. */
.aud-card__more {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .6s var(--ease), opacity .4s var(--ease);
}

.aud-card__more > * {
  min-height: 0;
  overflow: hidden;
}

.aud-card.is-open .aud-card__more {
  grid-template-rows: 1fr;
  opacity: 1;
  transition-delay: .15s;
}

.aud-card__more > div,
.aud-card__more {
  gap: 0;
}

.aud-card__does {
  margin: 0;
  padding-top: 1rem;
  color: #eef3ea;
  font-size: 1.02rem;
  line-height: 1.6;
}

.aud-card__model {
  display: inline-block;
  margin: 0;
  margin-top: 1rem;
  padding: .35rem .8rem;
  border: 1px solid rgb(188 226 160 / .4);
  border-radius: 999px;
  color: #cfe8b5;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
}

@media (max-width: 900px) {
  .aud__cards {
    flex-direction: column;
  }

  .aud-card {
    flex: none;
    min-height: 0;
  }

  .aud-card.is-open {
    flex-grow: 0;
  }

  /* On a phone every card is open. */
  .aud-card__more {
    grid-template-rows: 1fr;
    opacity: 1;
  }

  .aud-card__n {
    padding-top: 1.2rem;
  }

  .aud-card__icon {
    width: 8rem;
  }

  .aud-card__ping {
    top: 2.6rem;
    left: 10.6rem;
  }
}

html[data-motion="paused"] .aud__beam,
html[data-motion="paused"] .aud-card__ping::after {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .aud__beam,
  .aud-card__ping::after {
    animation: none;
  }
}