.ff-guide {
  --ff-forest: #1e5a32;
  --ff-deep: #102d20;
  --ff-muted: #4c5b50;
  --ff-border: #dce6d7;
  --ff-soft: #f0f5e9;
  --ff-white: #fff;
  color: #243127;
}
.ff-guide :where(h2, h3, p, figure, ol, nav) { margin-block: 0; }
.ff-guide :where(.ff-brand, .ff-hero, .ff-review-note) { margin-block: 0 20px; }
.ff-guide .ff-brand img { display: block; width: 100px; height: auto; }
.ff-guide .ff-hero {
  color: var(--ff-white);
  background: linear-gradient(135deg, var(--ff-deep), var(--ff-forest));
  border-radius: 18px;
  padding: clamp(24px, 5vw, 52px);
}
.ff-guide .ff-hero > * + * { margin-block-start: 8px; }
.ff-guide .ff-hero .ff-eyebrow {
  color: #deebcb;
  font-size: .78rem;
  font-weight: 720;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ff-guide .ff-hero h2 {
  color: inherit;
  font-size: clamp(2rem, 5vw, 3.65rem);
  line-height: 1.06;
  letter-spacing: -.045em;
}
.ff-guide .ff-hero p:last-child { max-width: 53ch; }
.ff-guide.ff-interactive {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(218px, 33%);
  gap: 14px 18px;
  align-items: start;
  grid-template-areas: "brand brand" "hero hero" "exercise menu" "controls menu" "note note";
}
.ff-guide.ff-interactive > :where(.ff-brand, .ff-hero, .ff-exercises, .ff-menu, .ff-controls, .ff-review-note) {
  margin: 0;
  min-width: 0;
}
.ff-guide .ff-brand { grid-area: brand; }
.ff-guide .ff-hero { grid-area: hero; }
.ff-guide .ff-exercises { grid-area: exercise; }
.ff-guide .ff-menu { grid-area: menu; scroll-margin-top: 80px; }
.ff-guide .ff-controls { grid-area: controls; }
.ff-guide .ff-review-note { grid-area: note; }
.ff-guide .ff-exercise,
.ff-guide .ff-menu {
  border: 1px solid var(--ff-border);
  border-radius: 17px;
  padding: clamp(14px, 2.5vw, 23px);
  background: var(--ff-white);
}
.ff-guide .ff-exercise { scroll-margin-top: 80px; }
.ff-guide .ff-exercise[hidden] { display: none !important; }
.ff-guide .ff-exercise > * + * { margin-block-start: 12px; }
.ff-guide .ff-exercise .ff-exercise-title {
  color: var(--ff-deep);
  line-height: 1.13;
  font-size: clamp(1.45rem, 3vw, 2rem);
  letter-spacing: -.03em;
}
.ff-guide .ff-detail-heading {
  color: var(--ff-forest);
  font-size: 1.02rem;
  margin-block-end: 4px;
}
.ff-guide .ff-detail-heading + :where(p, ol) { margin-block-start: 0; }
.ff-guide .ff-exercise ol { padding-inline-start: 1.35em; }
.ff-guide .ff-exercise ol li + li { margin-block-start: 5px; }
.ff-guide .wp-block-video {
  background: #182921;
  border-radius: 12px;
  overflow: hidden;
}
.ff-guide .wp-block-video video {
  display: block;
  object-fit: contain;
  width: 100%;
  height: clamp(290px, 58vw, 450px);
  background: #182921;
}
.ff-guide .ff-dose {
  background: var(--ff-soft);
  border-radius: 11px;
  padding: 11px 14px;
}
.ff-guide .ff-review { color: #634600; font-size: .92rem; }
.ff-guide .ff-review-note { color: var(--ff-muted); font-size: .89rem; }
.ff-guide .ff-menu-title {
  color: var(--ff-deep);
  font-size: 1.22rem;
  line-height: 1.2;
  margin-block-end: 12px;
}
.ff-guide .ff-menu-list { list-style: none; padding: 0; display: grid; gap: 6px; }
.ff-guide button {
  font: inherit;
  cursor: pointer;
  line-height: 1.25;
}
.ff-guide .ff-choice {
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 47px;
  background: #f6f8f3;
  color: var(--ff-deep);
  border: 1px solid transparent;
  border-radius: 10px;
  text-align: start;
  padding: 6px 8px;
  font-size: .88rem;
  font-weight: 690;
}
.ff-guide .ff-choice:hover,
.ff-guide .ff-choice[aria-current="true"] { background: #e8f2dd; border-color: #a9c48a; }
.ff-guide .ff-choice-number {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: var(--ff-white);
  color: var(--ff-forest);
  font-size: .78rem;
}
.ff-guide .ff-choice[aria-current="true"] .ff-choice-number { background: var(--ff-forest); color: var(--ff-white); }
.ff-guide .ff-choice-arrow { font-size: 1.25rem; }
.ff-guide .ff-controls { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; }
.ff-guide .ff-action {
  background: var(--ff-white);
  color: var(--ff-forest);
  border: 1px solid var(--ff-border);
  padding: 8px 10px;
  min-height: 44px;
  border-radius: 8px;
  font-size: .87rem;
  font-weight: 680;
}
.ff-guide .ff-action.ff-primary { background: var(--ff-forest); border-color: var(--ff-forest); color: var(--ff-white); }
.ff-guide .ff-action:disabled { background: #edf0eb; border-color: #edf0eb; color: #515a51; cursor: default; }
.ff-guide :where(button, [tabindex="-1"]):focus-visible { outline: 3px solid #458027; outline-offset: 3px; }
.ff-guide .ff-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 700px) {
  .ff-guide.ff-interactive {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "brand" "hero" "menu" "exercise" "controls" "note";
  }
}