.method-page { background: var(--milk); }
.method-hero { min-height: calc(100svh - 112px); display: grid; grid-template-columns: 1fr .9fr; align-items: center; gap: clamp(50px,8vw,120px); padding-block: 90px; }
.method-hero h1 { margin: 23px 0; font: 700 clamp(51px,6vw,85px)/1.02 var(--display); letter-spacing: -.065em; }
.method-hero h1 em { position: relative; color: var(--leaf-dark); font-style: normal; }
.method-hero h1 em::after { position: absolute; right: 0; bottom: -7px; left: 0; height: 8px; border-radius: 50%; background: var(--leaf); content: ""; }
.method-hero__copy > p { max-width: 700px; color: var(--muted); font-size: 18px; }
.method-hero__copy > button { min-width: 480px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; margin-top: 32px; padding: 16px 18px; border: 2px solid var(--bark); border-radius: 20px 20px 20px 7px; background: var(--sun); color: var(--bark); box-shadow: 6px 7px 0 var(--bark); text-align: left; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.method-hero__copy > button span { font: 800 15px var(--accent); }
.method-hero__copy > button b { padding: 1px 7px; border-radius: 8px; background: var(--white); font-size: 21px; letter-spacing: .04em; }
.method-hero__copy > button i { font: 800 22px var(--accent); font-style: normal; }

.understanding-scene { position: relative; min-height: 600px; display: grid; place-items: center; }
.understanding-center { z-index: 3; width: 230px; height: 230px; display: grid; place-items: center; align-content: center; border: 2px solid var(--bark); border-radius: 44% 56% 59% 41% / 50% 42% 58% 50%; background: var(--sun); box-shadow: 10px 12px 0 var(--bark); animation: method-center 6s ease-in-out infinite alternate; }
.understanding-center small { font-size: 9px; font-weight: 900; text-transform: uppercase; }
.understanding-center strong { font: 700 32px var(--display); }
.understanding-center i { color: var(--leaf-dark); font: 800 42px var(--accent); font-style: normal; }
.understanding-orbit { position: absolute; width: 68%; aspect-ratio: 1; border: 2px dashed rgba(61,39,16,.27); border-radius: 50%; animation: orbit 26s linear infinite; }
.understanding-orbit span { position: absolute; top: -19px; left: 50%; padding: 9px 14px; border: 2px solid var(--bark); border-radius: 99px; background: var(--sky); font-size: 9px; font-weight: 900; transform: translateX(-50%); text-transform: uppercase; }
.understanding-orbit--two { width: 88%; animation-duration: 34s; animation-direction: reverse; }
.understanding-orbit--two span { top: 50%; right: -38px; left: auto; background: var(--coral); transform: translateY(-50%); }
.understanding-orbit--three { width: 48%; animation-duration: 19s; }
.understanding-orbit--three span { top: auto; bottom: -19px; background: var(--leaf); }

.child-first { padding-block: 125px; background: var(--leaf-soft); border-block: 2px solid var(--bark); }
.method-heading { display: grid; grid-template-columns: .35fr .65fr; gap: 40px; margin-bottom: 55px; }
.method-heading > span { color: var(--leaf-deep); font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.method-heading h2 { margin: 0; font: 700 clamp(40px,4.8vw,67px)/1.07 var(--display); letter-spacing: -.055em; }
.child-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.child-grid article { min-height: 420px; display: flex; flex-direction: column; padding: 28px; border: 2px solid var(--bark); border-radius: 28px 28px 28px 9px; background: var(--white); box-shadow: 6px 7px 0 var(--bark); }
.child-grid article:nth-child(2) { background: var(--sky); }
.child-grid article:nth-child(3) { background: var(--sun); }
.child-grid article > span { color: var(--leaf-deep); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.child-grid h3 { margin: 35px 0 16px; font: 700 clamp(24px,2.4vw,34px)/1.14 var(--display); }
.child-grid p { color: var(--bark-2); }
.child-grid b { margin-top: auto; padding-top: 20px; border-top: 1px solid rgba(61,39,16,.25); font: 700 15px var(--display); }

.explanation-lab { padding-block: 140px; }
.lab-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: 22px; }
.lab-tabs { display: grid; gap: 10px; align-content: center; }
.lab-tabs button { display: grid; grid-template-columns: 48px 1fr; gap: 1px 14px; min-height: 92px; align-items: center; padding: 17px; border: 2px solid var(--bark); border-radius: 18px 18px 18px 6px; background: var(--white); color: var(--bark); text-align: left; transition: transform .2s ease, background .2s ease; }
.lab-tabs button[aria-selected="true"] { background: var(--leaf); transform: translateX(8px); }
.lab-tabs button > span { grid-row: 1/3; width: 44px; height: 44px; display: grid; place-items: center; border: 2px solid var(--bark); border-radius: 50%; font: 800 12px var(--accent); }
.lab-tabs b { font: 700 17px var(--display); }
.lab-tabs small { color: var(--muted); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.lab-stage { position: relative; min-height: 530px; display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 45px; overflow: hidden; padding: 55px; border: 2px solid var(--bark); border-radius: 35px 35px 35px 11px; background: var(--sun); box-shadow: 9px 10px 0 var(--bark); }
.lab-stage.mode-visual { background: var(--sky); }
.lab-stage.mode-action { background: var(--coral); }
.stage-symbol { position: relative; width: 220px; height: 220px; display: grid; place-items: center; border: 2px solid var(--bark); border-radius: 50%; background: rgba(255,255,255,.65); box-shadow: 7px 8px 0 var(--bark); }
.stage-symbol span { font: 800 78px var(--accent); }
.lab-stage > div:nth-child(2) { position: relative; z-index: 2; }
.lab-stage > div:nth-child(2) > span { font-size: 9px; font-weight: 900; text-transform: uppercase; }
.lab-stage h3 { margin: 18px 0; font: 700 clamp(28px,3.5vw,48px)/1.08 var(--display); }
.lab-stage p { margin: 0; color: var(--bark-2); }
.lab-stage > i { position: absolute; width: 45px; height: 45px; border: 2px solid var(--bark); border-radius: 50%; background: var(--leaf); animation: lab-dot 4s ease-in-out infinite; }
.lab-stage > i:nth-of-type(1) { top: 8%; right: 8%; }
.lab-stage > i:nth-of-type(2) { right: 35%; bottom: 6%; background: var(--white); animation-delay: -1s; }
.lab-stage > i:nth-of-type(3) { top: 12%; left: 35%; width: 25px; height: 25px; background: var(--bark); animation-delay: -2s; }

.route-section { padding-block: 130px; background: var(--leaf-dark); color: var(--white); }
.method-heading--light > span { color: var(--leaf); }
.route-line { position: relative; display: grid; grid-template-columns: repeat(4,1fr); gap: 15px; }
.route-line::before { position: absolute; top: 42px; right: 8%; left: 8%; height: 3px; background: var(--leaf); content: ""; }
.route-line article { position: relative; z-index: 1; min-height: 300px; display: flex; flex-direction: column; padding: 22px; border: 1px solid rgba(255,255,255,.22); border-radius: 24px 24px 24px 8px; background: #086c15; }
.route-line span { width: 44px; height: 44px; display: grid; place-items: center; border: 2px solid var(--bark); border-radius: 50%; background: var(--sun); color: var(--bark); font: 800 12px var(--accent); }
.route-line h3 { margin: auto 0 12px; font: 700 24px var(--display); }
.route-line p { margin: 0; color: rgba(255,255,255,.65); font-size: 13px; }

.max-section { display: grid; grid-template-columns: 1fr .9fr; align-items: center; gap: clamp(60px,9vw,140px); padding-block: 140px; }
.max-copy h2 { margin: 22px 0; font: 700 clamp(43px,5.2vw,72px)/1.04 var(--display); letter-spacing: -.06em; }
.max-copy > p { color: var(--muted); font-size: 18px; }
.max-copy ul { display: grid; gap: 9px; padding-left: 20px; color: var(--bark-2); }
.max-channel-link { min-width: 400px; display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 2px 15px; margin-top: 30px; padding: 14px 18px 14px 14px; border: 2px solid var(--bark); border-radius: 19px 19px 19px 6px; background: linear-gradient(135deg,var(--sky),#c8baf4); color: var(--bark); box-shadow: 5px 6px 0 var(--bark); text-align: left; transition: transform .22s ease, box-shadow .22s ease, background .22s ease; }
.max-channel-link > span { grid-row: 1/3; width: 52px; height: 52px; display: grid; place-items: center; overflow: hidden; border-radius: 17px; background: #4b53ec; box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); }
.max-channel-link > span img { width: 100%; height: 100%; object-fit: cover; }
.max-channel-link strong { font: 700 22px var(--display); }
.max-channel-link i { color: var(--muted); font-size: 9px; font-style: normal; font-weight: 900; text-transform: uppercase; }
.max-channel-link:hover { background: linear-gradient(135deg,#bce8ff,#d5caff); box-shadow: 8px 9px 0 var(--bark); transform: translate(-3px,-3px) rotate(-.5deg); }
.max-channel-link:focus-visible { outline: 4px solid var(--sun); outline-offset: 4px; }
.max-copy > small { display: block; margin-top: 14px; color: var(--muted); }
.max-feed { position: relative; min-height: 690px; display: grid; place-items: center; }
.max-phone { width: min(100%,410px); min-height: 630px; padding: 18px; border: 3px solid var(--bark); border-radius: 40px; background: #f1f6ff; box-shadow: 13px 16px 0 var(--bark); transform: rotate(2deg); }
.max-phone header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 7px 4px 18px; }
.max-phone header > b { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: var(--leaf); font: 800 21px var(--accent); }
.max-phone header div { display: grid; }
.max-phone header strong { font: 700 15px var(--display); }
.max-phone header span { color: var(--muted); font-size: 9px; }
.max-phone header > a { padding: 7px 9px; border-radius: 10px; background: var(--bark); color: var(--white); font: 900 8px var(--accent); }
.max-phone header > a:hover { background: #6f5ee8; }
.feed-message { margin: 10px 0; padding: 20px; border: 2px solid var(--bark); border-radius: 22px 22px 22px 7px; box-shadow: 4px 5px 0 var(--bark); animation: feed-float 5s ease-in-out infinite; }
.feed-message--yellow { background: var(--sun); }
.feed-message--blue { background: var(--sky); animation-delay: -1.7s; }
.feed-message--green { background: var(--leaf); animation-delay: -3.4s; }
.feed-message > span { font-size: 8px; font-weight: 900; text-transform: uppercase; }
.feed-message strong { display: block; margin: 12px 0 6px; font: 700 17px/1.25 var(--display); }
.feed-message p { margin: 0; color: var(--bark-2); font-size: 11px; }
.max-bubble { position: absolute; right: 0; bottom: 9%; width: 130px; height: 130px; display: grid; place-items: center; border: 2px solid var(--bark); border-radius: 50%; background: var(--coral); box-shadow: 6px 7px 0 var(--bark); text-align: center; font: 700 17px/1.1 var(--display); transform: rotate(-7deg); animation: max-bubble 4s ease-in-out infinite; }

.method-phone { padding-block: 100px; background: var(--bark); color: var(--white); }
.method-phone .shell { display: grid; grid-template-columns: .3fr 1fr auto; align-items: center; gap: 35px; }
.method-phone span { color: var(--leaf); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.method-phone h2 { margin: 0; font: 700 clamp(31px,4vw,54px)/1.08 var(--display); }
.method-phone a { display: grid; justify-items: center; padding: 20px 28px; border: 2px solid var(--bark); border-radius: 22px 22px 22px 7px; background: var(--sun); color: var(--bark); box-shadow: 6px 7px 0 var(--white); }
.method-phone a small { font: 800 13px var(--accent); }
.method-phone a strong { font: 800 31px var(--accent); letter-spacing: .05em; }
.method-phone a i { font-size: 9px; font-style: normal; font-weight: 900; text-transform: uppercase; }

@keyframes method-center { to { border-radius: 57% 43% 40% 60% / 43% 59% 41% 57%; transform: translateY(-8px) rotate(3deg); } }
@keyframes lab-dot { 50% { transform: translateY(-10px) rotate(10deg); } }
@keyframes feed-float { 50% { transform: translateY(-4px) rotate(.5deg); } }
@keyframes max-bubble { 50% { transform: translateY(-9px) rotate(4deg); } }

@media (max-width: 1000px) {
  .method-hero, .max-section { grid-template-columns: 1fr; }
  .understanding-scene { min-height: 560px; }
  .lab-layout { grid-template-columns: 1fr; }
  .lab-tabs { grid-template-columns: repeat(3,1fr); }
  .lab-tabs button { grid-template-columns: 1fr; }
  .lab-tabs button > span { display: none; }
  .lab-tabs button[aria-selected="true"] { transform: translateY(-5px); }
  .max-feed { min-height: 650px; }
  .max-bubble { right: 14%; }
}

@media (max-width: 720px) {
  .method-hero { min-height: auto; padding-block: 65px 80px; }
  .method-hero h1 { font-size: clamp(44px,12.6vw,59px); }
  .method-hero__copy > p { font-size: 16px; }
  .method-hero__copy > button { min-width: 0; width: 100%; grid-template-columns: 1fr auto; }
  .method-hero__copy > button > span { grid-row: 2; grid-column: 1/3; margin-top: 8px; }
  .understanding-scene { min-height: 430px; }
  .understanding-center { width: 180px; height: 180px; }
  .understanding-orbit { width: 70%; }
  .understanding-orbit--two { width: 100%; }
  .understanding-orbit--three { width: 48%; }
  .child-first, .explanation-lab, .route-section, .max-section { padding-block: 90px; }
  .method-heading { grid-template-columns: 1fr; gap: 15px; }
  .method-heading h2 { font-size: 40px; }
  .child-grid, .route-line { grid-template-columns: 1fr; }
  .child-grid article { min-height: 340px; }
  .route-line::before { display: none; }
  .route-line article { min-height: 220px; }
  .lab-tabs { grid-template-columns: 1fr; }
  .lab-tabs button[aria-selected="true"] { transform: translateX(5px); }
  .lab-stage { min-height: 560px; grid-template-columns: 1fr; padding: 28px; }
  .stage-symbol { width: 160px; height: 160px; justify-self: center; }
  .max-copy h2 { font-size: 43px; }
  .max-copy > p { font-size: 16px; }
  .max-channel-link { min-width: 0; width: 100%; }
  .max-feed { min-height: 590px; }
  .max-phone { min-height: 560px; }
  .max-bubble { right: 0; bottom: 3%; width: 105px; height: 105px; font-size: 14px; }
  .method-phone .shell { grid-template-columns: 1fr; }
  .method-phone a { justify-self: start; }
}