/* Adoption loop: DIAGNOSE -> DESIGN -> ACTIVATE -> IMPROVE -> (back to DIAGNOSE).
   "Technology creates the system. Activation makes it stick." Driven by assets/js/adopt-loop.js. */
.ad { max-width: 1040px; margin: 0 auto; }
.ad-strip { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 36px; }
.ad-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--color-p-border); color: var(--color-p-muted); transition: color .5s ease, border-color .5s ease, background-color .5s ease; }
.ad-pill small { font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; color: inherit; opacity: .85; }
.ad-pill--done { color: var(--color-p-text-secondary); }
.ad-pill--adopt.on { color: var(--color-p-teal); border-color: rgba(20,184,166,0.5); background: rgba(20,184,166,0.08); }
.ad-strip-arrow { color: var(--color-p-border-hover); font-size: 16px; }

.ad-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
@media (min-width: 900px) { .ad-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; } }

.ad-ring-wrap { padding: 20px 66px; }
.ad-ring { position: relative; width: 100%; max-width: 320px; aspect-ratio: 1 / 1; margin: 0 auto; }
.ad-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ad-track { fill: none; stroke: var(--color-p-border-line); stroke-width: 2; }
.ad-arc { fill: none; stroke: var(--color-p-teal); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s cubic-bezier(0.4, 0, 0.2, 1), opacity .6s ease; }
.ad-arc.on { stroke-dashoffset: 0; }
.ad-arc.fade { opacity: 0; }
.ad-arc--return { stroke: var(--color-p-accent); }
.ad-orbit { position: absolute; inset: 0; transition: transform .9s cubic-bezier(0.4, 0, 0.2, 1); }
.ad-dot { position: absolute; left: 50%; top: 1%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--color-p-teal); box-shadow: 0 0 14px 3px rgba(20,184,166,0.6); }
.ad-node { position: absolute; transform: translate(-50%, -50%); padding: 7px 14px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; background: var(--color-p-bg-secondary); border: 1px solid var(--color-p-border); color: var(--color-p-muted); transition: color .4s ease, border-color .4s ease, box-shadow .5s ease, transform .5s cubic-bezier(0.22, 1, 0.36, 1); }
.ad-node[data-n="0"] { left: 50%; top: 1%; } .ad-node[data-n="1"] { left: 99%; top: 50%; }
.ad-node[data-n="2"] { left: 50%; top: 99%; } .ad-node[data-n="3"] { left: 1%; top: 50%; }
.ad-node.seen { color: var(--color-p-text-secondary); border-color: rgba(20,184,166,0.3); }
.ad-node.on { color: var(--color-p-teal); border-color: var(--color-p-teal); box-shadow: 0 0 30px -6px rgba(20,184,166,0.55); transform: translate(-50%, -50%) scale(1.08); }
.ad-ring.loop .ad-node { border-color: var(--color-p-accent); color: var(--color-p-accent-text); box-shadow: 0 0 26px -8px rgba(232,108,93,0.6); }
.ad-center { position: absolute; inset: 22%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.ad-center p { margin: 0; font-family: var(--font-geist, inherit); font-size: 16px; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; color: var(--color-p-text); }
.ad-center p + p { color: var(--color-p-teal); opacity: 0; transform: translateY(6px); transition: opacity .6s ease, transform .6s ease; }
.ad-center p + p.on { opacity: 1; transform: none; }

.ad-panels { display: grid; }
.ad-panel { grid-area: 1 / 1; padding: 22px; border-radius: 18px; background: var(--color-p-card); border: 1px solid var(--color-p-border-line); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease, visibility 0s linear .5s; }
.ad-panel.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.ad-phase { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--color-p-accent-text); }
.ad-panel h3 { margin: 6px 0 4px; font-family: var(--font-geist, inherit); font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--color-p-text); }
.ad-panel > p { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: var(--color-p-text-secondary); }
.ad-items { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ad-item { padding: 9px 14px; border-radius: 10px; font-size: 13.5px; font-weight: 700; color: var(--color-p-text); background: var(--color-p-bg-secondary); border: 1px solid var(--color-p-border); opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s cubic-bezier(0.22, 1, 0.36, 1); }
.ad-plus { font-size: 16px; font-weight: 800; color: var(--color-p-muted); opacity: 0; transition: opacity .4s ease; }
.ad-panel.on .ad-item.in, .ad-panel.on .ad-plus.in { opacity: 1; transform: none; }
.ad-back { margin-top: 16px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--color-p-accent-text); opacity: 0; transition: opacity .5s ease; }
.ad-back.in { opacity: 1; }
@media (max-width: 899px) { .ad-ring-wrap { padding: 20px 56px; } .ad-ring { max-width: 260px; } .ad-center p { font-size: 14px; } .ad-node { font-size: 10.5px; padding: 6px 11px; } }
@media (prefers-reduced-motion: reduce) { .ad-orbit, .ad-arc { transition: none; } }