.idea {
  max-width: 1320px;
  margin: 0 auto;
  padding: 72px 60px 140px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  gap: 80px;
  align-items: start;
}
.idea-ask {
  position: sticky;
  top: 40px;
}
.idea-title {
  font-size: clamp(76px, 10.5vw, 168px);
  line-height: 0.86;
  letter-spacing: -0.065em;
  color: var(--forest);
}
.idea-q {
  display: inline-block;
  width: 0.52em;
  height: 0.8em;
  margin-left: 0.05em;
  vertical-align: -0.03em;
}
.idea-q svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.q-stem,
.q-hook {
  fill: none;
  stroke: var(--clay);
  stroke-width: 15;
  stroke-linecap: round;
  stroke-dasharray: 1 1;
}
.q-hook {
  stroke-width: 11;
}
.q-seed {
  fill: var(--forest);
}
.q-leaf,
.q-seed {
  transform-box: fill-box;
}
.q-leaf {
  transform-origin: 0 60%;
}
.q-seed {
  transform-origin: center;
}
.is-ready:not(.motion-off) .q-stem {
  animation: vine-grow 1.2s 0.2s cubic-bezier(0.5, 0, 0.2, 1) backwards;
}
.is-ready:not(.motion-off) .q-hook {
  animation: vine-grow 0.5s 1.2s ease-out backwards;
}
.is-ready:not(.motion-off) .q-leaf {
  animation: pop-in 0.7s 1.1s cubic-bezier(0.2, 0.9, 0.25, 1.2) backwards;
}
.is-ready:not(.motion-off) .q-seed {
  animation: pop-in 0.6s 1.4s cubic-bezier(0.2, 0.9, 0.25, 1.3) backwards;
}
@keyframes pop-in {
  from {
    transform: scale(0);
  }
}
.idea-question {
  max-width: 20ch;
  margin-top: 44px;
  font-size: clamp(24px, 2.3vw, 32px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.idea-hand {
  margin-top: 26px;
  font-size: 34px;
  color: var(--clay);
}
.idea-form {
  position: relative;
  display: grid;
  gap: 38px;
  padding-top: 8px;
}
.idea-demo {
  position: relative;
  z-index: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-radius: 30px;
  background: var(--sand);
  font-size: 15px;
  font-weight: 800;
}
.idea-demo > span:first-child {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--clay);
}
.idea-row {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0 0 0 68px;
  border: 0;
}
.idea-row[hidden] {
  display: none;
}
.idea-row legend {
  float: left;
  width: 100%;
  padding: 0;
}
.idea-node {
  position: absolute;
  left: 0;
  top: -10px;
  width: 44px;
  height: 44px;
}
.idea-node svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.idea-label {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--forest);
}
.idea-label span {
  margin-left: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--body);
}
.idea-form :is(input:not([type='radio']), textarea, select) {
  width: 100%;
  min-width: 0;
  padding: 14px 16px;
  border: 1.5px solid color-mix(in srgb, var(--body) 78%, var(--white));
  border-radius: 14px;
  background: var(--white);
  color: var(--ink);
  font:
    600 18px/1.4 'Nunito Sans',
    sans-serif;
}
.idea-form textarea {
  min-height: 150px;
  resize: vertical;
}
.idea-form :is(input, textarea, select):focus-visible {
  outline: 3px solid var(--clay);
  outline-offset: 2px;
  border-color: var(--forest);
}
.idea-form :is(input, textarea):user-invalid {
  border-color: var(--clay);
  box-shadow: 0 0 0 1px var(--clay);
}
.idea-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.idea-option {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 12px 20px 12px 15px;
  border: 1.5px solid color-mix(in srgb, var(--body) 78%, var(--white));
  border-radius: 40px;
  background: var(--white);
  color: var(--ink);
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
}
.idea-option:hover {
  border-color: var(--forest);
}
.idea-option input {
  appearance: none;
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 2px solid var(--forest);
  border-radius: 50%;
  background: var(--white);
}
.idea-option input::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--white);
  transform: scale(0);
  transition: transform 0.2s;
}
.idea-option input:checked::before {
  transform: scale(1);
}
.idea-option:has(input:checked) {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--white);
}
.idea-option:has(input:checked) input {
  border-color: var(--white);
  background: var(--forest);
}
.idea-option input:focus-visible {
  outline: none;
}
.idea-option:has(input:focus-visible) {
  outline: 3px solid var(--clay);
  outline-offset: 3px;
}
.n-seed {
  fill: var(--sand);
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity 0.4s,
    transform 0.4s;
}
.n-leaf,
.n-lit {
  transform-box: view-box;
  transform-origin: 9px 31px;
  transform: scale(0);
  transition: transform 0.6s cubic-bezier(0.2, 0.9, 0.25, 1.2);
}
.n-lit {
  fill: var(--white);
  opacity: 0.2;
}
.idea-node[data-tone='clay'] .n-leaf {
  fill: var(--clay);
}
.idea-node[data-tone='forest'] .n-leaf {
  fill: var(--forest);
}
.idea-node[data-tone='sage'] .n-leaf {
  fill: var(--sage);
}
.idea-node[data-tone='sand'] .n-leaf {
  fill: var(--sand);
}
.is-grown .n-leaf,
.is-grown .n-lit {
  transform: scale(1);
}
.is-grown .n-seed {
  opacity: 0;
  transform: scale(0.4);
}
.n-bud,
.n-bloom ellipse {
  fill: var(--lilac);
  stroke: color-mix(in srgb, var(--forest) 30%, transparent);
  stroke-width: 1;
}
.n-bud {
  transition: opacity 0.3s;
}
.n-bloom,
.n-core {
  transform-box: view-box;
  transform-origin: 20px 20px;
  transform: scale(0);
}
.n-bloom {
  transform: scale(0) rotate(-40deg);
  transition: transform 0.8s cubic-bezier(0.2, 0.9, 0.25, 1.15);
}
.n-core {
  fill: var(--clay);
  transition: transform 0.5s 0.2s;
}
.is-sent .n-bloom,
.is-sent .n-core {
  transform: scale(1);
}
.is-sent .n-bud {
  opacity: 0;
}
.idea-send {
  justify-items: start;
  gap: 18px;
}
.idea-send .idea-node {
  top: 2px;
}
.idea-status {
  max-width: 32ch;
  font-size: 18px;
  font-weight: 800;
  color: var(--forest);
}
.idea-status:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.idea-status:not(:empty) {
  padding: 14px 18px;
  border-radius: 16px 16px 16px 4px;
  background: var(--light);
}
@media (forced-colors: active) {
  .idea-option input {
    appearance: auto;
  }
  .idea-option input::before {
    display: none;
  }
}
@media (max-width: 1100px) {
  .idea {
    padding: 60px 40px 120px;
    gap: 56px;
  }
}
@media (max-width: 1000px) {
  .idea {
    grid-template-columns: minmax(0, 1fr);
  }
  .idea-ask {
    position: static;
  }
  .idea-form {
    max-width: 620px;
  }
}
@media (max-width: 640px) {
  .idea {
    padding: 40px 20px 100px;
    gap: 48px;
  }
  .idea-title {
    font-size: clamp(64px, 21vw, 110px);
  }
  .idea-question {
    margin-top: 30px;
  }
  .idea-hand {
    font-size: 30px;
  }
  .idea-row {
    padding-left: 52px;
  }
  .idea-node {
    width: 36px;
    height: 36px;
    top: -6px;
  }
  .idea-options {
    flex-direction: column;
    align-items: stretch;
  }
}