/* ProSoftIP — inner pages: contact, catalog, pricing, about */

/* ---------- contact ---------- */
.compose .fields { display: grid; gap: 20px; }
.input[aria-invalid="true"] { border-color: var(--alert); }
select.input { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--slate) 50%), linear-gradient(135deg, var(--slate) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.fallback summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; }
.next { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.next li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; color: var(--fog); font-size: 15px; line-height: 1.5; }
.next .n { width: 28px; height: 28px; border: 1px solid var(--rule-strong); border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px; color: var(--violet-lt); }

/* ---------- catalog ---------- */
.svc { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--rule); }
.svc-row { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 32px 0; border-bottom: 1px solid var(--rule); align-items: start; }
@media (min-width: 900px) { .svc-row { grid-template-columns: 72px 1.1fr 1fr; gap: 32px; padding: 40px 0; } }
.svc-idx { font-family: var(--font-mono); font-size: 13px; color: var(--violet-lt); padding-top: 6px; }
.svc-name { font-weight: 700; font-size: clamp(24px, 2.4vw, 32px); color: var(--paper); letter-spacing: -.02em; line-height: 1.1; }
.svc-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.svc-desc { color: var(--fog); font-size: 17px; line-height: 1.6; max-width: 52ch; }
@media (max-width: 899px) { .svc-desc { grid-column: 2; } }
.svc-plans { margin-top: 14px; font-family: var(--font-mono); font-size: 12px; color: var(--slate); letter-spacing: .04em; }
.svc-plans b { color: var(--fog); font-weight: 400; }

/* ---------- pricing ---------- */
.plans { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.plan { background: var(--ink-1); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 32px 28px; display: flex; flex-direction: column; gap: 20px; position: relative; }
.plan.is-featured { border-color: var(--violet); }
.plan.is-featured::before { content: "real-time audio"; position: absolute; top: -11px; left: 24px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--violet-lt); background: var(--ink-0); padding: 0 8px; }
.plan-name { font-weight: 700; font-size: 22px; color: var(--paper); letter-spacing: -.01em; }
.plan-for { color: var(--slate); font-size: 14px; margin-top: 4px; }
.price { display: flex; align-items: baseline; gap: 8px; }
.price .amt { font-weight: 800; font-size: 56px; letter-spacing: -.04em; line-height: 1; color: var(--paper); }
.price .per { font-family: var(--font-mono); font-size: 13px; color: var(--slate); }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.plan li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; align-items: start; font-size: 15px; color: var(--fog); line-height: 1.45; }
.plan li svg { width: 16px; height: 16px; stroke: var(--signal); fill: none; stroke-width: 2; margin-top: 3px; }
.plan li.is-hero { color: var(--paper); font-weight: 600; }
.plan .btn { margin-top: auto; }
.terms { display: grid; gap: 24px; }
@media (min-width: 900px) { .terms { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.term-card { border-top: 1px solid var(--rule); padding-top: 16px; }
.term-card .k { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--violet-lt); }
.term-card .v { color: var(--fog); font-size: 15px; line-height: 1.5; margin-top: 6px; max-width: 36ch; }

/* ---------- about ---------- */
.pillars { display: grid; gap: 32px; }
@media (min-width: 900px) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; } }
.pillar { border-top: 1px solid var(--rule); padding-top: 20px; }
.pillar h3 { font-size: 22px; font-weight: 700; color: var(--paper); }
.pillar p { color: var(--fog); font-size: 16px; line-height: 1.6; margin-top: 10px; max-width: 46ch; }
.team { display: grid; gap: 24px; }
@media (min-width: 640px) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.person { display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: center; background: var(--ink-1); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 20px; }
.person img { width: 96px; height: 96px; object-fit: cover; border-radius: 50%; border: 1px solid var(--rule-strong); filter: saturate(.85); }
.person .name { font-weight: 700; font-size: 20px; color: var(--paper); }
.person .role { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--violet-lt); margin-top: 4px; }
.about-art { margin: 0 calc(-1 * var(--gutter)); }
@media (min-width: 1024px) { .about-art { margin: 0; } }

/* partner logos (legacy gray PNGs recoloured for the dark canvas) */
.logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .logos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .logos { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.logo { height: 80px; display: grid; place-items: center; border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 16px; }
.logo img { max-height: 40px; width: auto; max-width: 100%; filter: brightness(0) invert(1); opacity: .72; }

/* ---------- legal pages (wording untouched; only presentation) ---------- */
.legal { color: var(--fog); font-size: 16px; line-height: 1.7; }
.legal h2, .legal h3 { font-size: 22px; font-weight: 700; color: var(--paper); margin: 36px 0 12px; letter-spacing: -.01em; }
.legal h2:empty, .legal h3:empty { display: none; }
.legal p { margin: 0 0 14px; max-width: 70ch; }
.legal ol { padding-left: 22px; margin: 0 0 14px; display: grid; gap: 10px; max-width: 70ch; }
.legal blockquote { margin: 0 0 14px; padding: 16px 20px; border-left: 2px solid var(--violet); background: var(--ink-1); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.legal blockquote p { margin: 0; }
.legal i { color: var(--slate); }
.legal strong { color: var(--paper); }
.legal a { color: var(--violet-lt); }
.aside-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.aside-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fog); }
.aside-links a:hover, .aside-links a[aria-current="page"] { color: var(--paper); }
.aside-links a[aria-current="page"] { color: var(--violet-lt); }

/* ---------- about: research -> production stages ---------- */
.art-clip { position: relative; }
.stage-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.stage-link { fill: none; stroke: rgba(193,138,255,.18); stroke-width: 2; }
.stage-link.is-on { stroke: rgba(0,255,102,.55); }
.stage-pkt { fill: none; stroke: var(--signal); stroke-width: 4; stroke-linecap: round; opacity: 0; }
.stage-region { fill: rgba(116,53,245,0); stroke: rgba(193,138,255,0); stroke-width: 2; transition: stroke var(--d-fast) var(--ease-out-quart), fill var(--d-fast) var(--ease-out-quart); }
.stage-region.is-on { stroke: rgba(193,138,255,.85); fill: rgba(116,53,245,.08); }
.stage-region.is-done { stroke: rgba(193,138,255,.3); }
.stages { margin-top: 8px; }
.stage-tabs { display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.stage-tabs::-webkit-scrollbar { display: none; }
.stage-tab { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 14px; color: var(--slate); font-weight: 600; font-size: 15px; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--d-micro) var(--ease-out-quart), border-color var(--d-micro) var(--ease-out-quart); }
.stage-tab:hover { color: var(--paper); }
.stage-tab[aria-selected="true"] { color: var(--paper); border-bottom-color: var(--violet); }
.stage-tab.is-done .stage-k { color: var(--signal); }
.stage-k { font-family: var(--font-mono); font-size: 11px; color: var(--violet-lt); }
.stage-sep { flex: 1 1 24px; height: 1px; background: var(--rule-strong); min-width: 16px; }
.stage-panels { padding: 24px 0 8px; }
.stage-panel { max-width: 62ch; }
.stage-t { font-weight: 700; font-size: clamp(22px, 2.2vw, 30px); color: var(--paper); letter-spacing: -.02em; line-height: 1.15; }
.stage-d { color: var(--fog); font-size: 17px; line-height: 1.6; margin-top: 10px; }
html:not(.js-motion) .stage-panel[hidden] { display: block; margin-bottom: 24px; }
html:not(.js-motion) .stage-link, html.rm .stage-link { stroke: rgba(193,138,255,.4); }
html:not(.js-motion) .stage-region { stroke: rgba(193,138,255,.3); }