/* ==========================================================================
   /features/aim — signal funnel, project deck, radar, brief, automation, impact, workspace
   (rows/FAQ from context.css · icon nodes from agents.css · scaffolding from prompt-volumes.css)
   ========================================================================== */
.am { --expo: cubic-bezier(.19, 1, .22, 1); --cell-line: rgba(255,255,255,.1); --ok: #08ffb6; --vio: #a78bfa; }

/* ---------- Hero ---------- */
.am-hero { position: relative; padding: 104px 0 0; text-align: center; overflow: hidden; background: radial-gradient(70% 55% at 50% 0%, #17151d 0%, #000 72%); }
.am-hero .eyebrow { display: block; font-size: 14px; color: var(--vio); margin-bottom: 18px; }
.am-hero h1 { font-size: clamp(38px, 5.2vw, 56px); font-weight: 500; line-height: 1.06; letter-spacing: -0.045em; }
.am-hero p { max-width: 520px; margin: 18px auto 0; font-size: 16.5px; color: var(--fg-2); }

/* Signal funnel */
.am-funnel { position: relative; margin-top: 56px; height: 200px; }
.am-belt { position: absolute; left: 0; right: 0; top: 0; height: 56px; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); }
.am-belt-track { display: flex; gap: 34px; width: max-content; padding: 4px 0; animation: amBelt 26s linear infinite; }
.am-funnel:hover .am-belt-track { animation-play-state: paused; }
@keyframes amBelt { to { transform: translateX(-50%); } }
.am-app { flex: none; width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 20%, #131314); color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); transition: transform .6s var(--expo), box-shadow .5s; }
.am-app svg { width: 22px; height: 22px; }
.am-app:hover { transform: translateY(-4px) scale(1.1); box-shadow: 0 0 26px color-mix(in srgb, var(--c) 40%, transparent); }
.am-drop { position: absolute; left: 50%; top: 60px; width: 2px; height: 66px; margin-left: -1px; background: repeating-linear-gradient(180deg, #3a3a3d 0 4px, transparent 4px 9px); overflow: hidden; }
.am-drop i { position: absolute; left: -2px; top: -12px; width: 6px; height: 12px; border-radius: 3px; background: var(--vio); box-shadow: 0 0 10px var(--vio); opacity: 0; }
.am-drop.go i { animation: amFall .8s var(--expo); }
@keyframes amFall { 0% { top: -12px; opacity: 1; } 100% { top: 66px; opacity: 1; } }
.am-core { position: absolute; left: 50%; top: 132px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 9px 18px; border-radius: 16px; border: 1px solid rgba(167,139,250,.35); background: #131118; font-size: 26px; font-weight: 500; letter-spacing: -0.03em; transition: box-shadow .5s, transform .5s var(--expo); }
.am-core svg { width: 24px; height: 24px; }
.am-core.beat { transform: translateX(-50%) scale(1.07); box-shadow: 0 0 46px rgba(167,139,250,.4); }

/* Project deck */
.am-deck { position: relative; height: 300px; margin-top: 30px; user-select: none; text-align: left; -webkit-mask: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); mask: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); }
.am-proj { position: absolute; left: 50%; top: 20px; width: 300px; height: 190px; margin-left: -150px; padding: 16px 18px; display: flex; flex-direction: column; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); background: linear-gradient(180deg, rgba(44,44,48,.8), rgba(20,20,22,.94)); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 30px 60px rgba(0,0,0,.6); cursor: pointer; transition: transform 1.1s var(--expo), opacity 1.1s var(--expo), filter 1.1s var(--expo), border-color .5s; will-change: transform; }
.am-proj header { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-2); }
.am-proj header i { width: 9px; height: 9px; border-radius: 3px; background: var(--c); }
.am-proj header em { margin-left: auto; font-style: normal; font-size: 11px; padding: 2px 8px; border-radius: 6px; border: 1px solid rgba(8,255,182,.35); color: var(--ok); }
.am-proj h3 { margin: 14px 0 0; font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: -0.015em; flex: 1; }
.am-proj small { color: var(--fg-3); font-size: 12px; }
.am-proj.mid { border-color: color-mix(in srgb, var(--c) 55%, transparent); }

/* ---------- Quote ---------- */
.am-quote { display: grid; grid-template-columns: 2fr 1fr; border: 1px solid var(--cell-line); }
.am-quote blockquote { margin: 0; padding: 34px; font-size: 26px; font-weight: 500; line-height: 1.25; letter-spacing: -0.03em; }
.am-quote footer { padding: 34px; border-left: 1px dashed var(--cell-line); font-size: 14px; color: var(--fg-2); }
.am-quote footer i { display: block; width: 40px; height: 40px; border-radius: 50%; margin-bottom: 14px; background: linear-gradient(135deg, #8a8a8a, #2e2e2e); }
.am-quote footer b { display: block; color: var(--fg); font-weight: 500; }
.am .cx-copy .tag { display: block; margin-bottom: 14px; font-size: 12.5px; color: var(--vio); font-variant-numeric: tabular-nums; }

/* ---------- [01] Radar ---------- */
.am-radar-wrap { display: grid; grid-template-columns: 300px 1fr; gap: 26px; align-items: center; width: min(660px, 94%); }
.am-radar { position: relative; width: 300px; height: 300px; border-radius: 50%; border: 1px solid rgba(255,255,255,.1); background: repeating-radial-gradient(circle, transparent 0 48px, rgba(255,255,255,.06) 48px 49px), #0a0a0b; overflow: hidden; }
.am-radar::before, .am-radar::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.06); }
.am-radar::after { transform: rotate(90deg); }
.am-sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 300deg, rgba(167,139,250,.32) 360deg); will-change: transform; }
.am-blip { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--c); opacity: .35; cursor: pointer; transition: opacity .8s, transform .6s var(--expo); z-index: 2; }
.am-blip::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid var(--c); opacity: 0; }
.am-blip.ping, .am-blip.on { opacity: 1; transform: scale(1.3); }
.am-blip.ping::after { animation: amPing 1.2s ease-out; }
@keyframes amPing { from { opacity: 1; transform: scale(.5); } to { opacity: 0; transform: scale(2.6); } }
.am-alerts { display: grid; gap: 9px; }
.am-alert { display: grid; grid-template-columns: 10px 1fr auto; gap: 11px; align-items: center; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: #0f0f10; font-size: 13px; color: var(--fg-3); cursor: pointer; transition: border-color .5s, color .5s, background .5s, transform .7s var(--expo); }
.am-alert i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.am-alert small { display: block; color: var(--fg-4); font-size: 11.5px; margin-top: 2px; }
.am-alert em { font-style: normal; font-size: 12px; padding: 2px 8px; border-radius: 6px; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); font-variant-numeric: tabular-nums; }
.am-alert.on { color: var(--fg); border-color: var(--c); background: #17171a; transform: translateX(-8px); }

/* ---------- [02] Brief ---------- */
.am-brief { width: min(500px, 92%); padding: 22px; border-radius: 18px; border: 1px solid rgba(255,255,255,.14); background: linear-gradient(180deg, #1a1a1c, #101011); box-shadow: 0 30px 70px rgba(0,0,0,.6); }
.am-brief > small { color: var(--fg-3); font-size: 12.5px; }
.am-brief h3 { margin: 10px 0 6px; font-size: 19px; font-weight: 500; letter-spacing: -0.02em; min-height: 25px; }
.am-brief > p { color: var(--fg-2); font-size: 13.5px; min-height: 40px; }
.am-tasks { margin-top: 14px; display: grid; gap: 8px; }
.am-task { display: grid; grid-template-columns: 16px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: #0e0e0f; font-size: 13px; opacity: 0; transform: translateY(10px); transition: opacity .6s, transform .7s var(--expo), border-color .4s; cursor: pointer; }
.am-task.in { opacity: 1; transform: none; }
.am-task:hover { border-color: #555; }
.am-task i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #555; display: grid; place-items: center; font-style: normal; font-size: 9px; color: transparent; transition: background .4s, border-color .4s, color .4s; }
.am-task.ok i { background: var(--ok); border-color: var(--ok); color: #000; }
.am-task em { font-style: normal; font-size: 11px; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--line); color: var(--fg-3); white-space: nowrap; transition: color .3s, border-color .3s; }
.am-task:hover em { color: var(--vio); border-color: rgba(167,139,250,.5); }
.am-brief-bar { display: flex; align-items: center; gap: 12px; margin-top: 16px; font-size: 12.5px; color: var(--fg-3); }
.am-brief-bar .meter { flex: 1; height: 3px; border-radius: 2px; background: #232325; overflow: hidden; }
.am-brief-bar .meter i { display: block; height: 100%; width: var(--p, 0%); background: linear-gradient(90deg, var(--vio), var(--ok)); transition: width .8s var(--expo); }
.am-brief-bar button { padding: 7px 13px; border-radius: 8px; border: 1px solid var(--line); color: var(--fg-3); font-size: 12.5px; transition: background .5s, color .5s, border-color .5s, transform .4s var(--expo); }
.am-brief-bar button.ready { background: var(--fg); color: #000; border-color: var(--fg); font-weight: 500; }
.am-brief-bar button.ready:hover { transform: scale(1.05); }

/* ---------- [03] Automation (icon nodes) ---------- */
.am-auto { width: 100%; align-self: stretch; display: flex; flex-direction: column; }
.am-auto .ag-bar { border-bottom: 1px solid var(--line); }
.am-auto .ag-stagewrap { flex: 1; min-height: 400px; }

/* ---------- [04] Impact ---------- */
.am-impact { width: min(620px, 94%); }
.am-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.am-kpi { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: #0f0f10; }
.am-kpi small { display: block; color: var(--fg-3); font-size: 12px; }
.am-kpi strong { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.am-kpi em { font-style: normal; font-size: 12px; color: var(--ok); margin-left: 6px; }
.am-chart { position: relative; margin-top: 10px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: #0f0f10; }
.am-chart svg { display: block; width: 100%; height: 220px; overflow: visible; cursor: crosshair; }
.am-chart .you { fill: none; stroke: var(--ok); stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.am-chart.draw .you { animation: amDraw 1.8s var(--expo); }
@keyframes amDraw { from { stroke-dashoffset: 1; } }
.am-chart .rival { fill: none; stroke: #3a3a3d; stroke-width: 1.5; opacity: .5; transition: opacity .5s, stroke .5s; }
.am-chart.cmp .rival { opacity: 1; stroke: var(--c); }
.am-chart .ship { stroke: #4a4a4d; stroke-dasharray: 3 4; transition: stroke .4s; }
.am-chart .shipdot { fill: #0f0f10; stroke: #8a8a8d; stroke-width: 2; cursor: pointer; transition: stroke .4s, r .4s; }
.am-chart .shipdot.on { stroke: var(--ok); }
.am-chart .cur { fill: var(--ok); stroke: #0f0f10; stroke-width: 2; }
.am-flag { position: absolute; top: 14px; padding: 6px 10px; border-radius: 8px; background: #1c1c1e; border: 1px solid #333; font-size: 11.5px; white-space: nowrap; pointer-events: none; transition: left .7s var(--expo), opacity .3s; }
.am-flag b { display: block; font-weight: 500; }
.am-flag span { color: var(--ok); }
.am-cmp { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--fg-3); cursor: pointer; }
.am-cmp b { width: 30px; height: 17px; border-radius: 9px; background: #2a2a2c; position: relative; transition: background .4s; }
.am-cmp b::after { content: ""; position: absolute; left: 2px; top: 2px; width: 13px; height: 13px; border-radius: 50%; background: #8a8a8a; transition: transform .5s var(--expo), background .4s; }
.am-cmp.on b { background: var(--ok); } .am-cmp.on b::after { transform: translateX(13px); background: #000; }
.am-shipped { margin-top: 10px; display: grid; gap: 6px; }
.am-shipped div { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: #0f0f10; font-size: 12.5px; color: var(--fg-3); cursor: pointer; transition: border-color .4s, color .4s, background .4s; }
.am-shipped div i { width: 8px; height: 8px; border-radius: 50%; background: #555; transition: background .4s; }
.am-shipped div span { margin-left: auto; color: var(--fg-4); }
.am-shipped div.on { color: var(--fg); border-color: rgba(8,255,182,.4); background: #141716; }
.am-shipped div.on i { background: var(--ok); }

/* ---------- [05] Workspace ---------- */
.am-work { width: min(680px, 95%); display: grid; grid-template-columns: 220px 1fr; border-radius: 16px; border: 1px solid rgba(255,255,255,.12); background: #0e0e0f; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.6); font-size: 12.5px; }
.am-chat { padding: 16px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.am-chat .me { align-self: flex-end; max-width: 92%; padding: 9px 12px; border-radius: 12px 12px 3px 12px; background: #232325; min-height: 36px; }
.am-chat .ai { color: var(--fg-2); line-height: 1.45; min-height: 54px; }
.am-chat .ai b { display: flex; align-items: center; gap: 6px; color: var(--fg-3); font-weight: 400; font-size: 11px; margin-bottom: 4px; }
.am-chat .box { margin-top: auto; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line); color: var(--fg-4); }
.am-pane-wrap { min-width: 0; }
.am-tabs { display: flex; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.am-tabs button { padding: 5px 11px; border-radius: 7px; color: var(--fg-3); transition: background .3s, color .3s; }
.am-tabs button:hover { color: var(--fg); }
.am-tabs button.on { background: #232325; color: var(--fg); }
.am-pane { height: 250px; padding: 16px; animation: amPane .6s var(--expo); }
.am-pane[hidden] { display: none; }
@keyframes amPane { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } }
.am-pane h5 { margin: 0 0 10px; font-size: 15px; font-weight: 600; }
.am-pane p { color: var(--fg-2); line-height: 1.5; margin-bottom: 8px; min-height: 18px; }
.am-mini { width: 100%; border-collapse: collapse; }
.am-mini th { text-align: left; font-weight: 400; color: var(--fg-3); padding: 7px 9px; border-bottom: 1px solid var(--line); }
.am-mini td { padding: 8px 9px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.am-mini td.st { color: var(--fg-4); transition: color .4s; }
.am-mini td.st.ok { color: var(--ok); }
.am-skill { display: flex; align-items: center; gap: 12px; padding: 11px 12px; margin-bottom: 8px; border-radius: 11px; border: 1px solid var(--line); background: #121213; transition: border-color .5s, background .5s; cursor: pointer; }
.am-skill div { flex: 1; } .am-skill small { display: block; color: var(--fg-3); margin-top: 2px; }
.am-skill b { font-weight: 500; }
.am-skill u { flex: none; width: 30px; height: 17px; border-radius: 9px; background: #2a2a2c; position: relative; transition: background .4s; }
.am-skill u::after { content: ""; position: absolute; left: 2px; top: 2px; width: 13px; height: 13px; border-radius: 50%; background: #8a8a8a; transition: transform .5s var(--expo), background .4s; }
.am-skill.on { border-color: rgba(8,255,182,.35); background: #141716; }
.am-skill.on u { background: var(--ok); } .am-skill.on u::after { transform: translateX(13px); background: #000; }
.am-pane .ag-stagewrap { height: 100%; background: none; }

@media (max-width: 980px) { .am-quote { grid-template-columns: 1fr; } .am-quote footer { border-left: 0; border-top: 1px dashed var(--cell-line); } }
@media (max-width: 640px) {
  .am-radar-wrap { grid-template-columns: 1fr; justify-items: center; } .am-radar { scale: .85; margin: -20px 0; } .am-alerts { width: 100%; } .am-alert.on { transform: none; }
  .am-work { grid-template-columns: 1fr; } .am-chat { border-right: 0; border-bottom: 1px solid var(--line); }
  .am-kpi strong { font-size: 17px; } .am-kpi { padding: 10px; }
  .am-proj { width: 250px; margin-left: -125px; } .am-quote blockquote { font-size: 20px; padding: 22px; }
  .am-deck { height: 270px; }
}
@media (prefers-reduced-motion: reduce) {
  .am-belt-track, .am-drop.go i, .am-blip.ping::after, .am-chart.draw .you, .am-pane { animation: none !important; }
  .am-task { opacity: 1; transform: none; }
}

/* ---------- Step spacing: each step is its own block with room around it ---------- */
.am .cx-rows { border: 0; display: grid; gap: 136px; }
.am .cx-row { border: 1px solid var(--cell-line); }
.am .cx-copy { padding: 40px 30px; }
.am .cx-g { min-height: 540px; padding: 64px 28px; }
.am #am-auto-wrap { padding: 0; }
.am .am-auto .ag-stagewrap { min-height: 480px; }
@media (max-width: 980px) { .am .cx-rows { gap: 88px; } .am .cx-g { padding: 44px 16px; min-height: 0; } .am .cx-copy { padding: 28px 22px; } }
@media (max-width: 640px) { .am .cx-rows { gap: 64px; } .am .cx-g { padding: 32px 10px; } }

/* ---------- Step connectors: a marching dashed line carries you to the next step ---------- */
.am .cx-rows { gap: 0; }
.am-link { position: relative; height: 190px; --p: 0;
  background-image: repeating-linear-gradient(180deg, rgba(255,255,255,.1) 0 4px, transparent 4px 10px), repeating-linear-gradient(180deg, rgba(255,255,255,.1) 0 4px, transparent 4px 10px), repeating-linear-gradient(180deg, rgba(255,255,255,.1) 0 4px, transparent 4px 10px), repeating-linear-gradient(180deg, rgba(255,255,255,.1) 0 4px, transparent 4px 10px), repeating-linear-gradient(180deg, rgba(255,255,255,.1) 0 4px, transparent 4px 10px);
  background-size: 1px 100%; background-repeat: no-repeat; background-position: 0 0, 25% 0, 50% 0, 75% 0, 100% 0; }
.am-link .fill { position: absolute; left: 50%; top: 0; width: 2px; margin-left: -1px; height: calc(var(--p) * 100%); background: repeating-linear-gradient(180deg, #fff 0 6px, transparent 6px 14px); background-size: 2px 14px; animation: amMarch .55s linear infinite; filter: drop-shadow(0 0 5px rgba(167,139,250,.9)); }
@keyframes amMarch { to { background-position: 0 14px; } }
.am-link .head { position: absolute; left: 50%; top: calc(var(--p) * 100%); width: 9px; height: 9px; margin: -5px 0 0 -4.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(167,139,250,.22), 0 0 18px rgba(167,139,250,.9); opacity: calc(var(--p) * 6); transition: transform .5s var(--expo); }
.am-link .next { position: absolute; left: 50%; bottom: 14px; transform: translate(14px, 8px); padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(167,139,250,.45); background: #131118; color: var(--vio); font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity .5s, transform .7s var(--expo); }
.am-link.done .next { opacity: 1; transform: translate(14px, 0); }
.am-link.done .head { transform: scale(1.5); }
.am .cx-row { transition: border-color .9s, box-shadow .9s; }
.am .cx-row.reached { border-color: rgba(167,139,250,.38); box-shadow: 0 0 0 1px rgba(167,139,250,.08), 0 0 80px rgba(167,139,250,.07); }
.am .cx-row.reached .cx-copy .tag { text-shadow: 0 0 14px rgba(167,139,250,.8); }
@media (max-width: 980px) { .am-link { height: 130px; } }
@media (max-width: 640px) { .am-link { height: 100px; } .am-link .next { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { .am-link .fill { animation: none; height: 100%; } .am-link .head { display: none; } .am-link .next { opacity: 1; transform: translate(14px, 0); } }