.pricing-section {
  --pricing-ink: #211f1c;
  --pricing-soft: #6d665e;
  --pricing-copper: #744b2e;
  --pricing-sheet: #fbfaf6;
  --pricing-line: rgba(33, 31, 28, .18);
  padding-block: clamp(84px, 11vw, 164px);
  background: #e9e2d8;
  color: var(--pricing-ink);
}

.pricing-heading {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(280px, 1.15fr);
  gap: clamp(32px, 7vw, 110px);
  align-items: end;
  margin-bottom: clamp(48px, 7vw, 92px);
}

.pricing-heading h2 {
  max-width: 11ch;
  margin: 0;
  font-size: clamp(3rem, 6.8vw, 7.5rem);
  font-weight: 400;
  letter-spacing: -.065em;
  line-height: .9;
}

.pricing-heading div > p {
  max-width: 39rem;
  margin: 24px 0 0;
  color: var(--pricing-soft);
  font-size: clamp(1rem, 1.25vw, 1.2rem);
}

/* The Editions: an editorial list. Orientation by time and finished images, not a feature comparison.
   Four editions, one family: the same row and the same LT aperture; each keeps its own flower and colour.
   Accents stay muted and pass AA against the section ground. */
.edition,
.pricing-result {
  --edition-accent: var(--pricing-copper);
}

[data-package-id="rote-rose"],
[data-edition="rote-rose"] {
  --edition-accent: #8b2d35;
}

[data-package-id="orchidee"],
[data-edition="orchidee"] {
  --edition-accent: #87517a;
}

[data-package-id="lavendel"],
[data-edition="lavendel"] {
  --edition-accent: #5b5891;
}

[data-package-id="gloriosa"],
[data-edition="gloriosa"] {
  --edition-accent: #9f4721;
}

.editions {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--pricing-line);
}

.edition {
  display: grid;
  grid-template-columns: clamp(64px, 6.4vw, 92px) minmax(0, 1fr) auto minmax(6.5rem, auto);
  grid-template-areas:
    "motif name facts price"
    "motif orientation orientation .";
  column-gap: clamp(20px, 3vw, 56px);
  align-items: baseline;
  padding: clamp(24px, 2.8vw, 40px) 0;
  border-bottom: 1px solid var(--pricing-line);
}

/* The aperture: the two opposing L/T arms of the brand, with the edition's flower inside. */
.edition__motif {
  position: relative;
  grid-area: motif;
  align-self: start;
  aspect-ratio: 3 / 4;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--edition-accent) 7%, transparent);
  color: var(--edition-accent);
  transition: background-color 280ms ease;
}

.edition__motif::before,
.edition__motif::after {
  content: "";
  position: absolute;
  width: 13px;
  height: 10px;
  pointer-events: none;
}

.edition__motif::before {
  left: 0;
  bottom: 0;
  border-left: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}

.edition__motif::after {
  top: 0;
  right: 0;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
}

.edition__motif svg {
  width: 72%;
  height: auto;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.edition:hover .edition__motif {
  background: color-mix(in srgb, var(--edition-accent) 12%, transparent);
}

.edition__index {
  position: relative;
  z-index: 1;
  grid-area: motif;
  align-self: start;
  justify-self: start;
  margin: 7px 0 0 8px;
  color: var(--edition-accent);
  font-size: .62rem;
  font-weight: 650;
  letter-spacing: .14em;
}

.edition h3 {
  grid-area: name;
  margin: 0;
  font-size: clamp(2.2rem, 4.2vw, 4.4rem);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .95;
}

.edition__facts {
  grid-area: facts;
  margin: 0;
  font-size: clamp(.95rem, 1.08vw, 1.08rem);
  white-space: nowrap;
}

.edition__facts span[aria-hidden="true"] {
  margin-inline: .45em;
  color: var(--edition-accent);
}

.edition__price {
  grid-area: price;
  margin: 0;
  color: var(--edition-accent);
  font-size: clamp(1.5rem, 2.2vw, 2.35rem);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -.03em;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}

.edition__orientation {
  grid-area: orientation;
  max-width: 34rem;
  margin: 12px 0 0;
  color: var(--pricing-soft);
  font-size: clamp(.95rem, 1.05vw, 1.05rem);
}

/* Each flower draws itself once as the list enters (pricing-engine.js); without JavaScript it simply stands. */
.editions.is-drawing .edition__motif path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.editions.is-drawing.is-drawn .edition__motif path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1700ms cubic-bezier(.22, .72, .2, 1) var(--edition-delay, 0ms);
}

.edition:nth-child(2) { --edition-delay: 140ms; }
.edition:nth-child(3) { --edition-delay: 280ms; }
.edition:nth-child(4) { --edition-delay: 420ms; }

.editions-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px clamp(32px, 6vw, 96px);
  align-items: baseline;
  padding-top: clamp(24px, 3vw, 40px);
}

.editions-note {
  max-width: 42rem;
  margin: 0;
  color: var(--pricing-soft);
  font-size: .92rem;
  line-height: 1.6;
}

.editions-secondary {
  color: var(--pricing-ink);
  font-size: .95rem;
  text-underline-offset: .3em;
  white-space: nowrap;
}

.editions-secondary::after {
  content: "↓";
  display: inline-block;
  margin-left: .55em;
  text-decoration: none;
}

/* First orientation: one compact band — a short introduction and three answers in a single row. */
.pricing-curator {
  display: grid;
  grid-template-columns: minmax(210px, .5fr) minmax(0, 1.5fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
  margin-top: clamp(48px, 6vw, 80px);
  padding: clamp(22px, 2.6vw, 36px);
  border: 1px solid var(--pricing-line);
  background: var(--pricing-sheet);
  scroll-margin-top: 120px;
}

.pricing-curator__intro .section-number {
  margin: 0 0 12px;
}

.pricing-curator__intro h3 {
  max-width: 13ch;
  margin: 0;
  font-size: clamp(1.7rem, 2.3vw, 2.5rem);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: 1.02;
}

.pricing-curator__intro > p:not(.section-number) {
  max-width: 30rem;
  margin: 12px 0 0;
  color: var(--pricing-soft);
  font-size: .95rem;
  line-height: 1.55;
}

.pricing-form {
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0;
}

.pricing-form__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 12px;
  align-items: end;
}

.pricing-field {
  display: grid;
  gap: 8px;
  align-content: end;
  min-width: 0;
}

.pricing-field label {
  display: block;
  font-size: .86rem;
  line-height: 1.3;
}

.pricing-field select {
  width: 100%;
  min-height: 48px;
  padding: 10px 36px 10px 12px;
  border: 1px solid var(--pricing-line);
  border-radius: 0;
  background: #fff;
  color: var(--pricing-ink);
  font: inherit;
  font-size: .95rem;
}

.pricing-form button,
.pricing-result a {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border: 1px solid var(--pricing-ink);
  border-radius: 0;
  background: var(--pricing-ink);
  color: #fff;
  font: inherit;
  font-size: .92rem;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.pricing-notes {
  margin: 0;
  color: var(--pricing-soft);
  font-size: .8rem;
  line-height: 1.55;
}

.pricing-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "eyebrow action"
    "headline action"
    "detail action";
  gap: 4px 28px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid var(--pricing-line);
  border-left: 3px solid var(--edition-accent);
  background: #f4f0e8;
}

.pricing-result[data-edition]:not([data-edition=""]) {
  grid-template-columns: 52px minmax(0, 1fr) auto;
  grid-template-areas:
    "motif eyebrow action"
    "motif headline action"
    "motif detail action";
}

/* The grid display above must not override the hidden state before a first recommendation. */
.pricing-result[hidden] { display: none; }
.pricing-result:focus { outline: 0; }
.pricing-result:focus-visible { outline: 1px solid var(--edition-accent); outline-offset: 4px; }

.pricing-result__motif {
  grid-area: motif;
  align-self: center;
  width: 100%;
}

.pricing-result__motif::before,
.pricing-result__motif::after {
  width: 9px;
  height: 7px;
}

.pricing-result__eyebrow {
  grid-area: eyebrow;
  margin: 0;
  color: var(--edition-accent);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.pricing-result h3 {
  grid-area: headline;
  margin: 0;
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: 1.1;
}

.pricing-result > p:not(.pricing-result__eyebrow) {
  grid-area: detail;
  max-width: 44rem;
  margin: 4px 0 0;
  color: var(--pricing-soft);
  font-size: .9rem;
  line-height: 1.5;
}

.pricing-result a {
  grid-area: action;
}

.pricing-context {
  margin-top: 30px;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
}

.pricing-context strong,
.pricing-context span { display: block; }
.pricing-context strong { font-weight: 500; }
.pricing-context span { margin-top: 5px; color: var(--ink-soft); font-size: .78rem; }

@media (max-width: 1180px) {
  .pricing-curator {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .pricing-curator__intro {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 4px 32px;
    align-items: end;
  }

  .pricing-curator__intro .section-number {
    grid-column: 1 / -1;
  }

  .pricing-curator__intro > p:not(.section-number) {
    margin: 0;
  }
}

@media (max-width: 980px) {
  .pricing-heading,
  .editions-footer { grid-template-columns: 1fr; }

  .edition {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    grid-template-areas:
      "motif name price"
      "motif facts facts"
      "motif orientation orientation";
    row-gap: 8px;
  }

  .edition__facts { white-space: normal; }
  .edition__orientation { margin-top: 0; }

  .pricing-form__row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pricing-form__row button {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .pricing-result,
  .pricing-result[data-edition]:not([data-edition=""]) {
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-areas:
      "motif eyebrow"
      "motif headline"
      "motif detail"
      "motif action";
  }

  .pricing-result:not([data-edition]),
  .pricing-result[data-edition=""] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "eyebrow" "headline" "detail" "action";
  }

  .pricing-result a {
    justify-self: start;
    margin-top: 10px;
  }
}

@media (max-width: 700px) {
  .pricing-curator__intro {
    display: block;
  }

  .pricing-curator__intro > p:not(.section-number) {
    margin-top: 10px;
  }

  .pricing-form__row {
    grid-template-columns: 1fr;
  }

  .pricing-form__row button {
    justify-self: stretch;
  }
}

@media (max-width: 620px) {
  .pricing-section { padding-block: 72px; }

  .edition {
    grid-template-columns: 52px minmax(0, 1fr) auto;
    column-gap: 16px;
  }

  .edition h3 { font-size: clamp(2rem, 9.4vw, 2.7rem); }
  .edition__index { margin: 5px 0 0 6px; font-size: .56rem; }

  .editions-secondary { justify-self: start; }
  .pricing-curator { padding: 20px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .edition__motif { transition: none; }

  .editions.is-drawing .edition__motif path {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
}