/* A selectable seven-step method, paired with one illustrative geography pilot. */
.experiment-links--creative-only { display: block; }
.experiment-links--creative-only .creative-link { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); grid-template-rows: 1fr 1fr; align-items: center; column-gap: clamp(32px, 5vw, 72px); }
.experiment-links--creative-only .link-image { grid-row: 1 / 3; height: 272px; }
.experiment-links--creative-only .experiment-link-title { grid-column: 2; align-self: end; margin-top: 0; }
.experiment-links--creative-only .experiment-link-title h3 { font-size: clamp(27px, 2.7vw, 36px); line-height: 1.14; letter-spacing: -.025em; }
.experiment-links--creative-only .creative-link > p { grid-column: 2; align-self: start; max-width: 35ch; margin-top: 14px; }

.method-loop { margin-top: var(--space-16); padding-top: var(--space-12); border-top: 1px solid var(--color-line); }
.method-loop__intro { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: clamp(28px, 5vw, 72px); margin-bottom: var(--space-10); }
.method-loop__intro h3 { max-width: 17ch; font-size: clamp(30px, 3.2vw, 42px); font-weight: 550; line-height: 1.12; letter-spacing: -.03em; text-wrap: balance; }
.method-loop__intro p { max-width: 49ch; color: var(--color-muted); font-size: 17px; line-height: 1.55; }
.method-loop__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); align-items: stretch; gap: clamp(28px, 4vw, 56px); }
.method-loop__left { min-width: 0; }
.method-loop__wheel { position: relative; width: min(100%, 520px); aspect-ratio: 1; margin-inline: auto; }
.method-loop__orbit { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; color: var(--color-accent); }
.method-loop__orbit > path { fill: none; stroke: #c9c3e9; stroke-width: 2; stroke-dasharray: 5 7; }
.method-loop__center { position: absolute; inset: 32% 31%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.method-loop__center img { width: 38px; height: 38px; }
.method-loop__center strong { max-width: 14ch; font-size: 17px; line-height: 1.3; letter-spacing: -.015em; font-weight: 600; }
.method-loop__steps { position: absolute; inset: 0; }
.method-loop__steps button { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 128px; min-height: 66px; padding: 9px 10px; border: 1px solid #d8d4ea; border-radius: 15px; background: var(--color-surface); box-shadow: 0 5px 18px -14px rgb(31 26 66 / 34%); color: var(--color-ink); font: inherit; line-height: 1.18; text-align: center; cursor: pointer; transform: translate(-50%, -50%); transition: border-color var(--duration-fast), background-color var(--duration-fast), color var(--duration-fast), box-shadow var(--duration-fast); }
.method-loop__steps button span { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--color-accent); font-weight: 700; }
.method-loop__steps button strong { font-size: 13px; font-weight: 650; }
.method-loop__steps button:hover { border-color: var(--color-accent); background: #f5f3ff; }
.method-loop__steps button[aria-selected="true"] { border-color: var(--color-accent); background: var(--color-accent); color: #fff; box-shadow: 0 9px 24px -15px rgb(54 40 152 / 72%); }
.method-loop__steps button[aria-selected="true"] span { color: #e7e2ff; }
.method-loop__steps button:focus-visible, .method-demo__link:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 4px; }
.method-loop__steps button[data-loop-step="0"] { left: 50%; top: 14%; }
.method-loop__steps button[data-loop-step="1"] { left: 76%; top: 27%; }
.method-loop__steps button[data-loop-step="2"] { left: 82%; top: 56%; }
.method-loop__steps button[data-loop-step="3"] { left: 64%; top: 80%; }
.method-loop__steps button[data-loop-step="4"] { left: 36%; top: 80%; }
.method-loop__steps button[data-loop-step="5"] { left: 18%; top: 56%; }
.method-loop__steps button[data-loop-step="6"] { left: 24%; top: 27%; }
.method-loop__instruction { max-width: 44ch; margin: -8px auto 0; color: var(--color-muted); font-size: 13px; line-height: 1.5; text-align: center; }

.method-demo { display: flex; flex-direction: column; min-width: 0; min-height: 556px; border: 1px solid var(--color-line); border-radius: var(--radius-stage); background: var(--color-surface); box-shadow: var(--shadow-paper); overflow: hidden; }
.method-demo__header { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 80px; padding: 19px clamp(22px, 3vw, 38px); border-bottom: 1px solid var(--color-line); }
.method-demo__identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.method-demo__identity > img { flex: none; width: 26px; height: 26px; }
.method-demo__identity > span { display: grid; gap: 2px; min-width: 0; }
.method-demo__identity strong { font-size: 14px; font-weight: 700; }
.method-demo__identity small { color: var(--color-muted); font-size: 12px; }
.method-demo__count { flex: none; color: var(--color-accent); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.method-demo__body { flex: 1; padding: clamp(24px, 3vw, 40px); }
.method-demo__step { outline: none; }
.method-demo__step[hidden] { display: none; }
.method-demo__step:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 6px; }
.method-demo__step h4 { max-width: 18ch; font-size: clamp(27px, 2.8vw, 39px); font-weight: 550; line-height: 1.13; letter-spacing: -.03em; text-wrap: balance; }
.method-demo__step > p { max-width: 54ch; margin-top: 18px; color: var(--color-muted); font-size: 16px; line-height: 1.58; }
.method-demo__agent { display: flex; gap: 12px; margin-top: 30px; padding: 18px 20px; border: 1px solid #dcd7f3; border-radius: 15px; background: #f6f4ff; }
.method-demo__agent--quiet { margin-top: 22px; padding: 15px 17px; }
.method-demo__agent-mark { display: grid; place-items: center; flex: none; width: 29px; height: 29px; border-radius: 50%; background: var(--color-surface); }
.method-demo__agent-mark img { width: 23px; height: 23px; }
.method-demo__agent strong { font-size: 13px; font-weight: 700; }
.method-demo__agent p { margin-top: 7px; font-size: 14px; line-height: 1.5; }
.method-demo__step > .method-demo__context { margin-top: 24px; padding-top: 17px; border-top: 1px solid var(--color-line); color: var(--color-muted); font-size: 13px; line-height: 1.5; }
.method-demo__pair { display: grid; grid-template-columns: 1fr 1fr; margin-top: 28px; border-block: 1px solid var(--color-line); }
.method-demo__pair > div { display: grid; gap: 4px; min-width: 0; padding: 18px 10px 18px 0; }
.method-demo__pair > div + div { border-left: 1px solid var(--color-line); padding-left: 22px; }
.method-demo__pair span, .method-demo__pair small { color: var(--color-muted); font-size: 12px; }
.method-demo__pair strong { font-size: clamp(29px, 3vw, 42px); line-height: 1.1; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.method-demo__pair > div + div strong { color: var(--color-accent); }
.method-demo__pair--design { margin-top: 0; border-top: 0; }
.method-demo__pair--design strong { font-size: clamp(21px, 2vw, 27px); }
.method-demo__pair--insight strong { font-size: clamp(20px, 2vw, 26px); line-height: 1.15; }
.method-demo__shared { margin-top: 28px; padding: 11px 16px; border-radius: 10px 10px 0 0; background: var(--color-accent-soft); color: var(--color-accent); font-size: 13px; font-weight: 700; text-align: center; }
.method-demo__hypotheses { margin-top: 26px; }
.method-demo__hypotheses > div { display: grid; grid-template-columns: 108px 1fr; gap: 18px; padding: 17px 0; border-top: 1px solid var(--color-line); }
.method-demo__hypotheses dt { color: var(--color-accent); font-size: 14px; font-weight: 700; }
.method-demo__hypotheses dd { margin: 0; color: var(--color-muted); font-size: 14px; line-height: 1.5; }
.method-demo__table { width: 100%; margin-top: 25px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.method-demo__table caption { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.method-demo__table th, .method-demo__table td { padding: 12px 8px; border-bottom: 1px solid var(--color-line); font-size: 14px; line-height: 1.35; text-align: right; }
.method-demo__table th:first-child { padding-left: 0; text-align: left; }
.method-demo__table thead th { color: var(--color-muted); font-size: 12px; font-weight: 600; }
.method-demo__table tbody th { font-weight: 500; }
.method-demo__table tbody td:last-child { color: var(--color-accent); font-weight: 700; }
.method-demo__record { margin-top: 23px; border: 1px solid var(--color-line); border-radius: 15px; overflow: hidden; }
.method-demo__record-title { display: flex; align-items: center; gap: 9px; padding: 13px 16px; background: var(--color-accent-soft); font-size: 13px; }
.method-demo__record-title img { width: 22px; height: 22px; }
.method-demo__record dl { padding: 0 16px; }
.method-demo__record dl > div { display: grid; grid-template-columns: 112px 1fr; gap: 14px; padding: 13px 0; border-top: 1px solid var(--color-line); font-size: 13px; line-height: 1.45; }
.method-demo__record dt { color: var(--color-muted); }
.method-demo__record dd { margin: 0; }
.method-demo__feedback { display: flex; align-items: center; gap: 10px; color: var(--color-accent) !important; font-size: 13px !important; font-weight: 700; }
.method-demo__feedback svg { width: 20px; height: 20px; }
.method-demo__link { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 62px; padding: 14px clamp(22px, 3vw, 38px); border-top: 1px solid var(--color-line); color: var(--color-accent); font-size: 14px; font-weight: 700; text-decoration: none; }
.method-demo__link:hover { background: #f8f7fd; }
.method-demo__link svg { flex: none; width: 20px; height: 20px; }
@media (max-width: 1050px) and (min-width: 1021px) {
  .method-loop__layout { gap: 20px; }
  .method-loop__steps button { width: 110px; min-height: 63px; }
  .method-loop__center strong { font-size: 15px; }
}
@media (max-width: 1020px) {
  .method-loop__intro { grid-template-columns: 1fr; gap: 16px; }
  .method-loop__layout { grid-template-columns: 1fr; gap: 24px; }
  .method-loop__wheel { width: 100%; aspect-ratio: auto; }
  .method-loop__orbit, .method-loop__center { display: none; }
  .method-loop__steps { position: static; display: flex; gap: 8px; overflow-x: auto; padding: 4px 4px 12px; scroll-snap-type: x proximity; scrollbar-color: #b9b1e1 transparent; }
  .method-loop__steps button { position: static; flex: 0 0 135px; width: 135px; min-height: 62px; transform: none; scroll-snap-align: start; }
  .method-loop__instruction { margin: 0 0 0 4px; text-align: left; }
  .method-demo { min-height: 0; }
  .method-demo__body { min-height: 395px; }
}
@media (max-width: 720px) {
  .experiment-links--creative-only .creative-link { display: block; }
  .experiment-links--creative-only .link-image { height: 300px; }
  .experiment-links--creative-only .experiment-link-title { margin-top: 20px; }
  .experiment-links--creative-only .creative-link > p { margin-top: 8px; }
  .method-loop { margin-top: 42px; padding-top: 34px; }
  .method-loop__intro { margin-bottom: 25px; }
  .method-loop__intro h3 { font-size: 31px; }
  .method-loop__intro p { font-size: 15px; }
  .method-demo__header { min-height: 70px; }
  .method-demo__body { min-height: 0; padding: 24px; }
  .method-demo__step h4 { font-size: 29px; }
  .method-demo__step > p { font-size: 14px; }
  .method-demo__agent { margin-top: 23px; padding: 15px; }
  .method-demo__hypotheses > div { grid-template-columns: 1fr; gap: 6px; }
  .method-demo__table th, .method-demo__table td { font-size: 12px; padding-inline: 5px; }
  .method-demo__record dl > div { grid-template-columns: 1fr; gap: 3px; }
}
@media (max-width: 380px) {
  .experiment-links--creative-only .link-image { height: 270px; }
  .method-demo__body { padding: 20px; }
  .method-demo__step h4 { font-size: 27px; }
  .method-demo__identity small { font-size: 11px; }
  .method-demo__table th, .method-demo__table td { font-size: 11px; padding-inline: 3px; }
  .method-demo__pair > div + div { padding-left: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .method-loop__steps button { transition: none; }
}