/* v9's shorter opening and warm atmosphere, adapted to both device modes. */
:root, .editor-styles-wrapper {
  --glow-warm: rgba(244,145,70,.19);
  --glow-cool: rgba(86,189,181,.12);
  --method-shadow: rgba(248,249,243,.8);
  --method-orbit-cool: rgba(82,184,174,.32);
  --method-orbit-blue: rgba(83,111,205,.27);
}
@media (prefers-color-scheme: dark) {
  :root, .editor-styles-wrapper {
    --glow-warm: rgba(205,94,40,.13);
    --glow-cool: rgba(58,131,120,.1);
    --method-shadow: rgba(16,19,18,.9);
    --method-orbit-cool: rgba(111,218,204,.47);
    --method-orbit-blue: rgba(129,155,247,.43);
  }
}
body, .editor-styles-wrapper {
  background: radial-gradient(ellipse at 10% 17%,var(--glow-warm),transparent 34%),radial-gradient(ellipse at 84% 13%,var(--glow-cool),transparent 32%),radial-gradient(ellipse at 76% 73%,var(--glow-blue),transparent 36%),var(--paper);
  background-attachment: fixed;
}
body::before { background: conic-gradient(from 20deg at 50% 50%,rgba(255,126,57,.12),rgba(111,224,211,.07),rgba(103,128,229,.06),rgba(255,168,78,.1),rgba(255,126,57,.12)); }
.hero { min-height: 82svh; padding: 126px 0 42px; background: none; }
.values { padding-top: 38px; }

/* The four stage texts remain readable without scripts, in the editor,
   and when reduced motion is selected. */
.method { position: relative; overflow: hidden; border-block: 1px solid var(--line); padding: 70px 0 64px; }
.method-inner { position: relative; z-index: 1; }
.method .section-kicker { margin: 0 0 30px; text-align: center; font-family: Inter,ui-sans-serif,system-ui,sans-serif; font-weight: 400; line-height: 1.5; letter-spacing: .22em; }
.method-stage { position: relative; }
.method-nucleus-wrap, .method-count, .method-actions { display: none; }
.method-copy { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 36px 64px; }
.method-step { min-width: 0; opacity: 1; visibility: visible; transform: none; }
.method-step h3 { color: var(--ink); font: 400 clamp(2rem,4vw,3.2rem)/1 Georgia,"Times New Roman",serif; letter-spacing: -.04em; margin: 0 0 18px; }
.method-step p { color: var(--copy); font-size: 1.02rem; line-height: 1.6; margin: 0; }

/* Restore v9's composition: the idea grows behind the words, then expands
   into a wash of colour across the whole section. Controls stay available. */
.method-enhanced .method-stage { display: grid; place-items: center; min-height: 460px; }
.method-enhanced .method-nucleus-wrap { display: grid; place-items: center; position: relative; width: 390px; height: 390px; pointer-events: none; }
.method-orbit { position: absolute; top: 50%; left: 50%; border: 1px solid; border-radius: 50%; transform: translate(-50%,-50%) scale(.25); opacity: 0; transition: transform 1s cubic-bezier(.2,.8,.2,1),opacity .5s ease; }
.method-orbit:nth-child(1) { width: 108px; height: 108px; border-color: rgba(239,106,58,.46); }
.method-orbit:nth-child(2) { width: 188px; height: 188px; border-color: rgba(255,153,55,.4); }
.method-orbit:nth-child(3) { width: 282px; height: 282px; border-color: var(--method-orbit-cool); }
.method-orbit:nth-child(4) { width: 382px; height: 382px; border-color: var(--method-orbit-blue); }
.method-stage[data-step="0"] .method-orbit:nth-child(-n+1),
.method-stage[data-step="1"] .method-orbit:nth-child(-n+2),
.method-stage[data-step="2"] .method-orbit:nth-child(-n+3),
.method-stage[data-step="3"] .method-orbit:nth-child(-n+4) { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.method-nucleus { position: relative; width: 42px; height: 42px; border-radius: 50%; background: radial-gradient(circle at 36% 33%,#fff 0 6%,#ffc06b 13%,#f47b3b 34%,#57bdb4 64%,#536fc5 100%); box-shadow: 0 0 22px rgba(244,123,59,.12); transition: transform 1.05s cubic-bezier(.2,.8,.2,1); }
.method-stage[data-step="0"] .method-nucleus { transform: scale(1); }
.method-stage[data-step="1"] .method-nucleus { transform: scale(2.15); }
.method-stage[data-step="2"] .method-nucleus { transform: scale(3.55); }
.method-stage[data-step="3"] .method-nucleus { transform: scale(5.25); }
.method-enhanced .method-copy { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%,-50%); display: grid; grid-template-columns: minmax(0,1fr); width: min(540px,100%); gap: 0; text-align: center; margin: 0; pointer-events: none; }
.method-enhanced .method-step { grid-area: 1/1; opacity: 0; visibility: hidden; transform: translateY(14px) scale(.98); transition: opacity .55s ease,transform .7s cubic-bezier(.2,.8,.2,1),visibility 0s .55s; }
.method-enhanced .method-step.active { opacity: 1; visibility: visible; transform: translateY(0) scale(1); transition-delay: .16s; }
.method-enhanced .method-step h3 { font-size: clamp(2.9rem,6vw,6rem); letter-spacing: -.05em; text-shadow: 0 1px 18px var(--method-shadow); }
.method-enhanced .method-step p { max-width: 450px; margin: 0 auto; text-shadow: 0 1px 12px var(--method-shadow),0 0 4px var(--method-shadow); }
.method-enhanced .method-count { display: block; position: absolute; bottom: 0; right: 0; color: var(--muted); font-size: .72rem; letter-spacing: .14em; }
.method-enhanced .method-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.method-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.method-select, .method-play { cursor: pointer; font: inherit; font-size: .85rem; min-height: 44px; padding: 10px 17px; border-radius: 999px; color: var(--ink); background: transparent; border: 1px solid var(--line); }
.method-select:hover, .method-play:hover { border-color: var(--accent); }
.method-select[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.method-play { color: var(--muted); border-color: transparent; text-decoration: underline; text-underline-offset: .3em; }
.method-select:focus-visible, .method-play:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.method::before { content: ""; position: absolute; z-index: 0; width: 120px; height: 120px; top: 48%; left: 50%; pointer-events: none; opacity: 0; transform: translate(-50%,-50%) scale(.1); background: conic-gradient(from 25deg,rgba(255,112,42,.72),rgba(255,176,67,.58),rgba(93,218,205,.45),rgba(90,118,218,.38),rgba(255,112,42,.72)); filter: blur(22px); border-radius: 50%; }
.method-enhanced.paint::before { animation: method-colour-wash 5.2s cubic-bezier(.3,.7,.2,1) both; }
.method-enhanced.paint :is(.method-copy,.method-nucleus-wrap,.method-count) { animation: method-release 5.2s ease both; }
.method-enhanced.paint:not(.method-playing)::before,
.method-enhanced.paint:not(.method-playing) :is(.method-copy,.method-nucleus-wrap,.method-count) { animation-play-state: paused; }
@keyframes method-colour-wash {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.1) rotate(0); }
  42% { opacity: .72; transform: translate(-50%,-50%) scale(15) rotate(45deg); }
  70% { opacity: .48; transform: translate(-50%,-50%) scale(19) rotate(80deg); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(23) rotate(110deg); }
}
@keyframes method-release {
  0%,22% { opacity: 1; }
  48%,76% { opacity: 0; }
  100% { opacity: 1; }
}
@media (max-width: 720px) {
  .hero { min-height: 76svh; padding: 112px 6px 30px; }
  .method { padding: 56px 0 48px; }
  .method-copy { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .method-enhanced .method-stage { min-height: 400px; }
  .method-enhanced .method-nucleus-wrap { width: 310px; height: 310px; max-width: 100%; }
  .method-orbit:nth-child(1) { width: 88px; height: 88px; }
  .method-orbit:nth-child(2) { width: 150px; height: 150px; }
  .method-orbit:nth-child(3) { width: 224px; height: 224px; }
  .method-orbit:nth-child(4) { width: 304px; height: 304px; }
  .method-stage[data-step="3"] .method-nucleus { transform: scale(4.35); }
  .method-enhanced .method-step h3 { font-size: clamp(2.7rem,11.2vw,4rem); }
  .method-enhanced .method-step p { max-width: 330px; font-size: .97rem; }
  .method-enhanced .method-actions { margin-top: 20px; gap: 12px; justify-content: center; }
  .method-controls { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .method::before { display: none; }
  .method-step { opacity: 1 !important; visibility: visible !important; transform: none !important; transition: none !important; }
}