.planner-hero {
  padding: 88px 0 76px;
  background:
    radial-gradient(circle at 84% 20%, rgba(196, 169, 108, .22), transparent 28%),
    linear-gradient(145deg, #f8f5ec 0%, #ede9dd 55%, #dfe6df 100%);
}

.planner-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .65fr);
  gap: 72px;
  align-items: center;
}

.planner-hero h1 {
  max-width: 820px;
  margin: 14px 0 20px;
  font-size: clamp(2.75rem, 6vw, 5.5rem);
  line-height: .94;
  letter-spacing: -.055em;
}

.planner-hero__copy > p {
  max-width: 700px;
  margin: 0 0 30px;
  font-size: 1.18rem;
  line-height: 1.65;
}

.planner-example {
  padding: 30px;
  border: 1px solid rgba(31, 33, 28, .15);
  border-radius: 24px;
  background: rgba(252, 250, 244, .82);
  box-shadow: 0 22px 70px rgba(31, 33, 28, .12);
}

.planner-example__label {
  display: block;
  margin-bottom: 10px;
  color: var(--claret);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.planner-example > strong { font-size: 1.25rem; }
.planner-example ul { margin: 22px 0 0; padding: 0; list-style: none; }
.planner-example li { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-top: 1px solid rgba(31, 33, 28, .12); }
.planner-example b { color: var(--claret); white-space: nowrap; }

.planner-section { padding: 88px 0; background: var(--paper); }
.planner-section__intro { display: flex; justify-content: space-between; gap: 44px; align-items: end; margin-bottom: 32px; }
.planner-section__intro h2, .planner-content h2, .planner-faq h2 { margin: 8px 0 0; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.03; letter-spacing: -.04em; }
.planner-section__intro > p { max-width: 520px; margin: 0; line-height: 1.6; }
.planner-tool { border: 1px solid rgba(31, 33, 28, .15); border-radius: 28px; overflow: hidden; background: var(--paper); box-shadow: 0 24px 80px rgba(31, 33, 28, .1); }
.planner-workspace { padding: clamp(22px, 4vw, 48px); }
.planner-controls { display: grid; grid-template-columns: minmax(180px, .35fr) minmax(260px, 1fr); gap: 18px; }
.planner-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.planner-field span { font-weight: 750; color: var(--ink); }
.planner-field em { font-size: .82em; font-style: normal; font-weight: 500; color: var(--muted); }
.planner-field small { color: var(--muted); }
.planner-field input, .planner-field select { width: 100%; min-height: 50px; padding: 11px 13px; border: 1px solid #c8c7bd; border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; }
.planner-field input:focus, .planner-field select:focus { outline: 3px solid rgba(160, 131, 79, .3); border-color: var(--green); }
.planner-coverage { margin-top: 28px; padding: 26px; border-radius: 18px; background: #e9eee9; }
.planner-progress { height: 10px; margin-bottom: 13px; overflow: hidden; border-radius: 99px; background: rgba(31, 33, 28, .12); }
.planner-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--claret); transition: width .25s ease; }
#planner-status { margin: 0 0 20px; font-weight: 750; }
.planner-category-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.planner-category-card { min-height: 104px; padding: 16px; border: 1px solid rgba(31, 33, 28, .13); border-radius: 13px; background: var(--paper); }
.planner-category-card strong, .planner-category-card span { display: block; }
.planner-category-card strong { line-height: 1.25; }
.planner-category-card span { margin-top: 8px; color: #79696e; font-size: .88rem; }
.planner-category-card.is-covered { border-color: #819579; background: #f1f6ed; }
.planner-category-card.is-covered span { color: #486141; }
.planner-add { margin-top: 36px; padding-top: 34px; border-top: 1px solid rgba(31, 33, 28, .14); }
.planner-add__heading { display: flex; justify-content: space-between; gap: 24px; align-items: baseline; margin-bottom: 18px; }
.planner-add__heading h3, .planner-contributions h3 { margin: 0; font-size: 1.35rem; }
.planner-add__heading p { margin: 0; color: #6f6064; }
.planner-add-grid { display: grid; grid-template-columns: 1fr 1fr 1.3fr auto; gap: 14px; align-items: end; }
.planner-add__button { min-height: 50px; white-space: nowrap; }
.planner-contributions { margin-top: 38px; }
.planner-contributions__heading { display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.planner-text-button { padding: 7px 0; border: 0; background: transparent; color: var(--claret); font: inherit; font-weight: 750; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.planner-list { margin: 16px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(31, 33, 28, .14); }
.planner-entry { display: grid; grid-template-columns: 1.1fr 1.8fr auto; gap: 18px; align-items: center; padding: 16px 0; border-bottom: 1px solid rgba(31, 33, 28, .14); }
.planner-entry__meta { min-width: 0; }
.planner-entry__meta strong, .planner-entry__meta span { display: block; overflow-wrap: anywhere; }
.planner-entry__meta span { margin-top: 3px; color: #78686d; font-size: .86rem; }
.planner-entry__item { overflow-wrap: anywhere; font-weight: 700; }
.planner-entry button { border: 0; background: transparent; color: var(--claret); font: inherit; font-weight: 750; cursor: pointer; }
.planner-empty { padding: 20px 0; color: #74656a; }
.planner-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 30px; }
.planner-actions .btn--ghost { color: var(--claret); border-color: var(--claret); }
#planner-action-status { min-height: 1.4em; color: #4d423f; font-weight: 700; }
.planner-privacy { margin-top: 28px; padding: 20px 22px; border-left: 4px solid #819579; background: #f1f6ed; }
.planner-privacy strong { color: #30452c; }
.planner-privacy p { margin: 6px 0 0; line-height: 1.55; }
.planner-content { padding: 84px 0; background: #e5e9e2; }
.planner-content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 8vw, 100px); }
.planner-content p { line-height: 1.75; }
.planner-faq { padding: 84px 0 96px; background: var(--paper); }
.planner-faq > .shell > h2 { max-width: 700px; margin-bottom: 32px; }
.planner-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.planner-faq article { padding: 24px; border: 1px solid rgba(31, 33, 28, .14); border-radius: 16px; background: var(--paper); }
.planner-faq h3 { margin: 0 0 10px; }
.planner-faq p { margin: 0; line-height: 1.65; }

@media (max-width: 900px) {
  .planner-hero__inner, .planner-content-grid { grid-template-columns: 1fr; }
  .planner-hero__inner { gap: 40px; }
  .planner-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .planner-add-grid { grid-template-columns: 1fr 1fr; }
  .planner-field--wide { grid-column: 1 / 2; }
}

@media (max-width: 640px) {
  .planner-hero { padding: 62px 0 52px; }
  .planner-hero h1 { font-size: clamp(2.55rem, 13vw, 4rem); }
  .planner-section { padding: 58px 0; }
  .planner-section__intro, .planner-add__heading { display: block; }
  .planner-section__intro > p, .planner-add__heading p { margin-top: 12px; }
  .planner-controls, .planner-add-grid, .planner-faq-grid { grid-template-columns: 1fr; }
  .planner-field--wide { grid-column: auto; }
  .planner-category-grid { grid-template-columns: 1fr; }
  .planner-entry { grid-template-columns: 1fr auto; gap: 8px 14px; }
  .planner-entry__item { grid-column: 1 / -1; grid-row: 2; }
  .planner-entry button { grid-column: 2; grid-row: 1; }
  .planner-actions .btn { width: 100%; justify-content: center; }
}