/* ============================================================
   POL — Keystone Method interactive mark (reusable)
   Markup: <div class="keystone-mark"><div class="km-dial" id="kdial"></div>
           <div class="km-cards" id="kmCards"></div></div>
   Built + wired by keystone.js. British English.
   ============================================================ */
.keystone-mark{display:grid;grid-template-columns:1fr 0.92fr;gap:clamp(28px,5vw,72px);align-items:center}

/* ---- dial ---- */
.km-dial{position:relative;width:100%;max-width:560px;aspect-ratio:1;margin:0 auto;justify-self:center}
.km-dial svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinrev{to{transform:rotate(-360deg)}}
.ring-rot{animation:spin 60s linear infinite;transform-origin:240px 240px}

.kblade{cursor:pointer}
.kbInner{transition:transform .6s cubic-bezier(.34,1.4,.5,1),opacity .5s}
.kblade .kbody{fill:rgba(110,147,143,.09);stroke:rgba(110,147,143,.5);stroke-width:1.4;
  stroke-linejoin:round;transition:fill .35s,stroke .35s}
.kblade:not(.set) .kbInner{opacity:.4}
.kblade.set .kbody{fill:rgba(255,127,0,.14);stroke:var(--orange)}
.kblade.prev:not(.set) .kbody{stroke:var(--orange)}
#sunGear path,.planet-gear{fill:rgba(40,35,33,.96);stroke:rgba(150,170,166,.5);stroke-width:1.1;stroke-linejoin:round;transition:stroke .35s}
.km-dial.run #sunGear path,.km-dial.run .planet-gear{stroke:var(--orange)}
#sunGear{transform-box:view-box;transform-origin:240px 240px}
.planet-gear{transform-box:fill-box;transform-origin:center}
#keystoneRing{transform-box:view-box;transform-origin:240px 240px}
.klabel{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;fill:rgba(246,244,240,.82)}
.kblade.prev .klabel,.kblade.set .klabel{fill:var(--orange)}
.hubdot{fill:var(--orange)}

/* status under the dial */
.km-status{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:22px;
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.km-status .sd{width:8px;height:8px;border-radius:50%;flex:none}
.km-status[data-state="idle"]{color:#c98379}
.km-status[data-state="idle"] .sd{background:#c75245;box-shadow:0 0 8px #c75245;animation:idleblink 1.6s infinite}
.km-status[data-state="aligned"]{color:var(--orange)}
.km-status[data-state="aligned"] .sd{background:var(--orange);box-shadow:0 0 11px rgba(255,127,0,.75)}
@keyframes idleblink{0%,100%{opacity:1}50%{opacity:.35}}

/* ---- cards (always-visible copy; the primary control on touch) ---- */
.km-cards{display:flex;flex-direction:column;gap:12px}
.km-card{display:block;width:100%;text-align:left;cursor:pointer;
  border:1px solid var(--line-dark,rgba(246,244,240,.13));border-radius:9px;background:rgba(20,17,16,.42);
  padding:18px 20px;transition:border-color .25s,background .25s,transform .25s}
.km-card:hover{border-color:rgba(255,127,0,.5)}
.km-card.on{border-color:var(--orange);background:rgba(255,127,0,.08)}
.km-card .kc-top{display:flex;align-items:baseline;gap:12px}
.km-card .kc-n{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.1em;color:var(--sage-dim)}
.km-card.on .kc-n{color:var(--orange)}
.km-card .kc-t{font-family:"Archivo",sans-serif;font-weight:700;font-size:18px;letter-spacing:-.01em;color:var(--paper)}
.km-card .kc-tool{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sage-dim);align-self:center}
.km-card .kc-p{font-size:14px;line-height:1.55;color:rgba(246,244,240,.7);margin:9px 0 0}
.km-card .kc-act{display:flex;align-items:center;gap:8px;margin-top:13px;
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--sage-dim)}
.km-card .kc-act .dot{width:7px;height:7px;border-radius:50%;border:1px solid var(--sage-dim);flex:none}
.km-card.on .kc-act{color:var(--orange)}
.km-card.on .kc-act .dot{background:var(--orange);border-color:var(--orange)}

@media (max-width:980px){
  .keystone-mark{grid-template-columns:1fr;gap:8px}
  .km-dial{max-width:420px}
  .km-cards{margin-top:18px}
}