/* Coming-soon products (ADR-024): workshop art carries the page; everything else quiet. Styles from the approved concept. */
.soon-hero { position: relative; overflow: hidden; isolation: isolate; }
.soon-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 78% 40%, color-mix(in oklab, var(--petal) 14%, transparent), transparent 70%), radial-gradient(50% 60% at 60% 90%, color-mix(in oklab, var(--cyan) 10%, transparent), transparent 70%); }
.soon-grid { display: grid; gap: 2.5rem; align-items: center; padding-block: clamp(3rem, 7vw, 6rem); }
@media (min-width: 1000px) { .soon-grid { grid-template-columns: 5fr 7fr; gap: 3.5rem; } }
.soon-copy { display: grid; gap: 1.3rem; align-content: start; min-width: 0; }
.status { display: inline-flex; align-items: center; gap: .55rem; color: var(--dim); font-size: var(--s-1); font-weight: 500; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--petal); animation: pulse 2.2s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--petal) 60%, transparent); } 70%, 100% { box-shadow: 0 0 0 10px transparent; } }
.soon-copy h1 { font-size: var(--s4); font-weight: 600; line-height: .93; letter-spacing: -.045em; max-width: 11.5ch; }
.soon-copy .lede { color: var(--dim); font-size: clamp(1.1rem, 1.6vw, 1.3rem); max-width: 40ch; }
.notify { display: grid; gap: .55rem; margin-top: .6rem; max-width: 30rem; }
.notify label { font-size: var(--s-1); font-weight: 600; }
.notify-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.notify input { flex: 1 1 14rem; min-width: 0; min-height: 52px; padding: .85rem 1rem; border-radius: 999px; border: 1.5px solid var(--line-2); background: var(--bg); color: var(--fg); font: inherit; }
.notify input:focus { outline: none; border-color: var(--petal); box-shadow: 0 0 0 4px color-mix(in oklab, var(--petal) 25%, transparent); }
.notify input[aria-invalid="true"] { border-color: var(--petal); }
.notify .btn { min-height: 52px; }
.notify .error:empty { display: none; }
.notify .hint { color: var(--dim); font-size: var(--s-1); }
.bench { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 860px) { .bench { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }
.build { display: grid; gap: 1.1rem; padding: 1.5rem; border-radius: 22px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--panel), var(--bg-2)); }
.build-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.build h3 { font-size: var(--s2); font-weight: 600; letter-spacing: -.03em; }
.chip-dev { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; color: var(--petal); white-space: nowrap; }
.chip-dev::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.build p { color: var(--dim); }
.meter { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.meter i { display: block; height: 100%; width: 40%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--petal)); animation: work 3.2s cubic-bezier(.6,0,.4,1) infinite alternate; }
.meter .m2 { animation-delay: -1.1s; animation-duration: 3.8s; }
.meter .m3 { animation-delay: -2.2s; animation-duration: 2.9s; }
@keyframes work { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 2rem; }
.cta h2 { font-size: var(--s3); font-weight: 600; line-height: 1; max-width: 16ch; }
.cta p { color: var(--dim); margin-top: 1rem; max-width: 44ch; }
@media (prefers-reduced-motion: reduce) { .meter i { animation: none; transform: none; width: 55%; } .pulse { animation: none; } }