/* Features-specific composition; shared layouts and components supply the foundation. */
.gp-features { margin-block-start: 0 !important; }
.gp-features__hero { border-top: 0 !important; padding-top: 48px !important; }
.gp-features__hero h1 { font-size: var(--wp--preset--font-size--heading-2); }
.gp-features__hero .gp-image img { aspect-ratio: 1.15; }
.gp-features .gp-illustrated-cta { --gp-cta-image: url('images/cta/753-go-pod-illustrated-cta-1.webp'); }
/* Give major sections and their internal content groups a clear vertical rhythm. */
.gp-features .gp-section:not(.gp-illustrated-cta) { padding-block: clamp(72px, 8vw, 120px); }
.gp-features .gp-section > h3 { margin-top: clamp(40px, 4vw, 56px); }
.gp-features .gp-section > .gp-rail-heading,
.gp-features .gp-section > h3:has(+ .gp-rail) {
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--gp-rule);
}
.gp-features .gp-note { margin-top: 24px; }
.gp-features .gp-section-heading .gp-note { margin-top: 0; }
.gp-explorer { margin-top: 24px; }
.gp-explorer__controls { display: flex; gap: 12px; margin-bottom: 20px; }
.gp-explorer [hidden] { display: none !important; }
.gp-explorer__layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .65fr); gap: 32px; align-items: center; }
.gp-explorer__scene { position: relative; }
.gp-explorer__scene > img { display: block; width: 100%; height: auto; border-radius: var(--gp-radius-content); }
.gp-explorer button { min-height: 44px; min-width: 44px; border: 1px solid var(--gp-rule); border-radius: 5px; background: #fff; color: var(--gp-forest); font: 600 14px var(--gp-font); cursor: pointer; padding: 8px 14px; }
.gp-explorer button:is(:hover, :focus-visible, [aria-pressed="true"]) { background: var(--gp-brand); color: #fff; border-color: var(--gp-brand); }
.gp-explorer__markers button { position: absolute; left: var(--marker-x); top: var(--marker-y); transform: translate(-50%, -50%); width: 32px; height: 32px; min-width: 32px; min-height: 32px; font-size: 12px; line-height: 1; padding: 0; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 2px 8px #0004; }
/* Preserve a 44px hit area around the smaller visual marker. */
.gp-explorer__markers button::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
.gp-explorer__markers button span { display: none; }
.gp-explorer__selection { border-left: 3px solid var(--gp-brand); padding-left: 24px; }
.gp-explorer__selection h4 { margin: 0 0 16px; font-size: var(--wp--preset--font-size--heading-4); }
.gp-explorer__descriptions { padding-left: 24px; }
.gp-explorer__descriptions li { margin-block: 24px; }
.gp-explorer__descriptions h4 { margin-bottom: 12px; }
.gp-explorer__tour { display: none; }
@media (max-width: 800px) {
  .gp-explorer__layout { grid-template-columns: 1fr; gap: 12px; }
  .gp-explorer__controls { gap: 8px; margin-bottom: 16px; }
  .gp-explorer__controls button { flex: 1; }
  /* One location at a time avoids overlapping targets on a small photograph. */
  .gp-explorer__markers button { display: none; }
  .gp-explorer__markers button[aria-pressed="true"] { display: block; box-shadow: 0 0 0 2px #123d2b80, 0 2px 8px #0006; }
  .gp-explorer__tour { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 600; }
  .gp-explorer__tour-actions { display: flex; gap: 8px; }
  .gp-explorer__tour-actions button { font-size: 22px; padding: 4px 10px; }
  .gp-explorer__selection { padding: 16px 0 0; border-left: 0; border-top: 2px solid var(--gp-brand); }
  .gp-explorer__selection h4 { margin-bottom: 8px; }
}


.gp-features .gp-configurator { gap: 64px; }
.gp-configurator__summary { padding: 32px; border: 1px solid var(--gp-rule); border-top: 3px solid var(--gp-brand); border-radius: var(--gp-radius-content); }
.gp-features .gp-configurator__summary .gp-note { margin-top: 0; }
@media (max-width: 800px) { .gp-features .gp-configurator { gap: 32px; } }

/* Match the homepage's full-width brand-green information strip. */
.gp-features .gp-section-nav { justify-content: space-around; gap: 12px 24px; padding-block: 18px; border: 0; background: var(--gp-brand); box-shadow: 0 0 0 100vmax var(--gp-brand); clip-path: inset(0 -100vmax); }
.gp-features .gp-section-nav a { display: inline-flex; align-items: center; gap: 12px; color: #fff !important; border-radius: 5px; }
.gp-features .gp-section-nav a::before { content: ""; width: 24px; height: 24px; flex-shrink: 0; background: currentColor; mask: var(--gp-component-icon) center / contain no-repeat; }
.gp-features .gp-section-nav a:is(:hover, :focus-visible, :active) { color: var(--gp-brand) !important; background: #fff; }
.gp-features .gp-section-nav a:focus-visible { outline-color: var(--gp-forest); outline-offset: 2px; }
.gp-configurator__summary ul { padding-left: 22px; color: var(--gp-muted); margin: 0; }
.gp-configurator__summary li { margin-block: 12px; }
.gp-configurator__summary li::marker { color: var(--gp-brand); }
@media (max-width: 600px) { .gp-features .gp-section-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } }

/* Crossfade the view, then let the interactive points arrive in sequence. */
.gp-explorer__scene > .gp-explorer__outgoing { position: absolute; inset: 0; width: 100%; height: auto; pointer-events: none; z-index: 1; }
.gp-explorer__markers { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.gp-explorer__markers button { pointer-events: auto; }
@media (prefers-reduced-motion: no-preference) {
  .gp-explorer__outgoing { animation: gp-explorer-out 650ms ease both; }
  .gp-explorer__view.is-entering .gp-explorer__scene > img:not(.gp-explorer__outgoing) { animation: gp-explorer-in 700ms ease both; }
  .gp-explorer__view.is-entering .gp-explorer__markers button { animation: gp-explorer-point 460ms cubic-bezier(.22,.65,.25,1) var(--marker-delay, 180ms) both; }
  .gp-explorer__view.is-entering .gp-explorer__selection { animation: gp-explorer-in 600ms ease both; }
}
@keyframes gp-explorer-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes gp-explorer-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes gp-explorer-point { from { opacity: 0; scale: .7; translate: 0 8px; } to { opacity: 1; scale: 1; translate: 0 0; } }

/* Guide the reader from the changing layout to exploration and then the full reference. */
.gp-features .gp-layout-tour + h3,
.gp-features .gp-explorer + h3 { margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--gp-rule); }
.gp-features .gp-features__closeups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 28px; }
.gp-features__closeups .gp-card { border: 0; }
.gp-explorer__closeup { margin: 0 0 16px !important; }
.gp-explorer__closeup img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; border-radius: var(--gp-radius-content); }
.gp-explorer__layout { align-items: start; }
@media (max-width: 800px) {
  .gp-features .gp-features__closeups { grid-template-columns: 1fr; gap: 40px; }
  .gp-explorer__closeup img { max-height: 220px; width: auto; max-width: 100%; }
}

/* Exterior benefit lists: quiet, aligned rows rather than default indented bullets. */
.gp-features #exterior > .gp-grid-three > .gp-card > ul {
  margin: 8px 0 0;
  padding: 12px 0 0 20px;
  border-top: 1px solid var(--gp-rule);
  font-size: 16px;
  line-height: 1.5;
  color: var(--gp-muted);
}
.gp-features #exterior > .gp-grid-three > .gp-card > ul > li { padding: 6px 0 6px 4px; }
.gp-features #exterior > .gp-grid-three > .gp-card > ul > li::marker { content: "✓  "; color: var(--gp-brand); font-size: 14px; font-weight: 700; }
@supports (grid-template-rows: subgrid) {
  @media (min-width: 801px) {
    .gp-features #exterior > .gp-grid-three { row-gap: 12px; }
    .gp-features #exterior > .gp-grid-three > .gp-card { grid-row: span 5; grid-template-rows: subgrid; }
  }
}

/* Keep extra detail beside the exterior benefit it explains. */
.gp-feature-details { align-self: start; padding-block: 4px; }
.gp-feature-details > summary { font-size: 15px; gap: 12px; padding: 12px 0; }
.gp-feature-details h4 { margin: 20px 0 8px; font-size: 16px; }
.gp-feature-details p { font-size: 15px; line-height: 1.6; }