/* The welcome form (docs/1-specs/44-welcome-form.md): the same look as the sign page and the public «Мирные огоньки» site. Tokens are the team
   dashboard pack's (design/team-dashboard-pack/tokens.css): warm lamp light on a near-black violet night, cream text, glass, glow instead of shadow.
   A ring is always an inset box-shadow or a full border, never one side of a rounded box. Sans-serif only; the bulb font is for the wordmark and numerals. */

@font-face {
  font-family: "MO2027";
  src: url("/fonts/MirnieOgonki2027-Regular-1.11.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

:root {
  color-scheme: dark;
  --ink: #0B0614;
  --night: radial-gradient(120% 90% at 78% 30%, #261D3D 0%, #1B1032 38%, #12112C 62%, #0B0614 100%);
  --cream: #FCF5DC;
  --cream-2: rgba(252, 245, 220, .72);
  --cream-3: rgba(252, 245, 220, .5);
  --amber: #FFC466;
  --lamp: #FFE6B3;
  --lamp-core: #FFF8E6;
  --lamp-warm: #FFD08A;
  --focus: #FFF1D2;
  --glass: rgba(16, 8, 24, .5);
  --glass-hover: rgba(36, 20, 44, .62);
  --glass-dense: rgba(18, 10, 26, .78);
  --ring: rgba(255, 228, 185, .16);
  --bad: #FFB4A8;
  --wine: #4A0C1C;
  --f-sans: "Onest", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-lamp: "MO2027", "Onest", sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --text-glow: 0 0 1px #FFF8E6, 0 0 6px rgba(255, 196, 102, .9), 0 0 16px rgba(255, 150, 70, .55);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; overflow-x: hidden;
  background: var(--ink); color: var(--cream);
  font: 400 16px/1.5 var(--f-sans);
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; color: inherit; }

.sky { position: fixed; inset: 0; z-index: -1; background: var(--night); }
.sky::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle, rgba(255, 226, 176, .9) 0 1px, transparent 1.6px) 12% 24% / 240px 260px,
    radial-gradient(circle, rgba(255, 208, 138, .7) 0 1px, transparent 1.6px) 63% 41% / 310px 280px,
    radial-gradient(circle, rgba(255, 241, 210, .6) 0 1.2px, transparent 1.8px) 38% 72% / 380px 340px,
    radial-gradient(circle, rgba(255, 196, 102, .55) 0 1px, transparent 1.6px) 86% 88% / 290px 320px;
  opacity: .55; animation: spark 6s ease-in-out infinite;
}
@keyframes spark { 50% { opacity: .25; } }

.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The top: the wordmark and the garland that is also the progress. Its height is fixed, so nothing moves when the lamps change. */
.top { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; padding: 18px max(16px, 4vw) 0; }
.brand { margin: 0 0 4px; }
.lamp { font-family: var(--f-lamp); color: var(--lamp); text-shadow: var(--text-glow); font-size: 22px; line-height: 1.2; word-spacing: .2em; }
.prog { height: 62px; max-width: 600px; }
.prog svg { display: block; width: 100%; height: 62px; overflow: visible; }
.wire { stroke: rgba(252, 245, 220, .22); stroke-width: 1.4; }
.lp { transition: opacity .4s var(--ease), r .4s var(--ease); }
.lp.todo { opacity: .24; }
.lp.done { opacity: .95; }
.lp.now { opacity: 1; animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .55; } }

.stage { position: relative; max-width: 760px; margin: 0 auto; padding: 8px max(16px, 4vw) 72px; min-height: calc(100vh - 110px); min-height: calc(100dvh - 110px); outline: none; }
.screen { display: block; padding-top: 12px; }
@media (min-width: 900px) and (min-height: 760px) { .stage { display: flex; flex-direction: column; justify-content: center; padding-bottom: 110px; } }
.in-fwd { animation: in-fwd .38s var(--ease) both; }
.in-back { animation: in-back .38s var(--ease) both; }
@keyframes in-fwd { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes in-back { from { opacity: 0; transform: translateY(-28px); } to { opacity: 1; transform: none; } }

.kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font: 500 12px/1.2 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--cream-3); }
.kicker::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--lamp-warm); box-shadow: 0 0 8px 2px rgba(255, 190, 100, .55); }

.title { margin: 0 0 14px; font: 500 clamp(30px, 7vw, 52px)/1.08 var(--f-sans); letter-spacing: -.02em; text-wrap: balance; }
.lead { margin: 0 0 30px; max-width: 32em; color: var(--cream-2); font-size: clamp(16px, 2.2vw, 20px); text-wrap: balance; }

.label { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 8px; font: 500 clamp(23px, 5.6vw, 36px)/1.18 var(--f-sans); letter-spacing: -.015em; text-wrap: balance; }
.qn { flex: none; min-width: 1.1em; font: 400 1.5em/.85 var(--f-lamp); color: var(--lamp); text-shadow: var(--text-glow); text-align: center; padding-top: .08em; }
.qt { min-width: 0; overflow-wrap: anywhere; }
.req { margin-left: 4px; color: var(--lamp-warm); }
.opt-tag { display: inline-block; margin-left: 10px; vertical-align: .25em; font: 500 11px/1 var(--f-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--cream-3); }
.help { min-height: 1.5em; margin: 0 0 22px; padding-left: calc(1.1em * 1.5 + 14px); color: var(--cream-2); font-size: 16px; }
.help:empty { display: none; }
.help.flat { padding-left: 0; }

/* The answer line: a lamp-lit underline made with an inset shadow, no border, no radius. */
.field {
  display: block; width: 100%; margin: 0; padding: 10px 2px 12px; border: 0; border-radius: 0; background: transparent; outline: none;
  font: 400 clamp(22px, 5vw, 32px)/1.25 var(--f-sans); color: var(--cream);
  box-shadow: inset 0 -2px 0 rgba(252, 245, 220, .32); transition: box-shadow .25s var(--ease);
}
.field::placeholder { color: var(--cream-3); }
.field:focus { box-shadow: inset 0 -2px 0 var(--lamp), 0 8px 18px -12px rgba(255, 190, 100, .8); }
.field[aria-invalid="true"] { box-shadow: inset 0 -2px 0 var(--bad); }
.screen > .field, .screen > .note-ok { margin-left: 0; }
.other { margin-top: 14px; }

.err { min-height: 1.6em; margin: 10px 0 0; color: var(--bad); font-size: 15px; }
.note-ok { min-height: 1.6em; margin: 10px 0 0; display: flex; align-items: center; gap: 8px; color: var(--lamp); font-size: 15px; }
.note-ok .ic { width: 18px; height: 18px; flex: none; }

/* The options: glass rows, a letter to press, a bulb that lights. */
.opts { display: grid; gap: 10px; margin: 6px 0 0; }
@media (min-width: 720px) { .opts.many { grid-template-columns: 1fr 1fr; } }
.opt {
  position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) 18px; align-items: center; column-gap: 14px; min-height: 58px; padding: 10px 18px 10px 12px;
  border-radius: 16px; cursor: pointer; background: var(--glass); box-shadow: inset 0 0 0 1px var(--ring);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background .25s var(--ease), box-shadow .25s var(--ease);
}
.opt:hover { background: var(--glass-hover); }
.opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opt:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.key { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: rgba(252, 245, 220, .07); box-shadow: inset 0 0 0 1px rgba(252, 245, 220, .22); font: 500 14px/1 var(--f-sans); color: var(--cream-2); }
.txt { font: 500 19px/1.3 var(--f-sans); overflow-wrap: anywhere; }
.bulb { width: 16px; height: 16px; border-radius: 50%; background: rgba(252, 245, 220, .08); box-shadow: inset 0 0 0 1.5px rgba(252, 245, 220, .38); transition: background .25s var(--ease), box-shadow .25s var(--ease); }
.opt.on, .opt:has(input:checked) { background: rgba(44, 24, 48, .66); box-shadow: inset 0 0 0 1.5px rgba(255, 214, 150, .8), 0 0 0 1px rgba(255, 200, 120, .2), 0 0 36px rgba(255, 170, 90, .24); }
.opt.on .key, .opt:has(input:checked) .key { background: var(--lamp); color: var(--wine); box-shadow: none; }
.opt.on .bulb, .opt:has(input:checked) .bulb { background: radial-gradient(circle, var(--lamp-core) 0 30%, var(--lamp) 60%, var(--amber) 100%); box-shadow: 0 0 0 4px rgba(255, 190, 110, .25), 0 0 18px rgba(255, 170, 90, .85); }

/* The NDA cards, inline: the sign page's cards, each a link to its document. */
.nda { margin-top: 20px; }
.nda-lead { margin: 18px 0 14px; color: var(--cream-2); font-size: 16px; }
.ndagrid { display: grid; gap: 10px; }
@media (min-width: 720px) { .ndagrid { grid-template-columns: 1fr 1fr; } }
.ncard { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) 20px; column-gap: 14px; align-items: start; padding: 16px 16px 16px 14px; border-radius: 16px; text-decoration: none; color: inherit;
  background: var(--glass); box-shadow: inset 0 0 0 1px var(--ring); transition: background .25s var(--ease), box-shadow .25s var(--ease); }
.ncard:hover { background: var(--glass-hover); box-shadow: inset 0 0 0 1px rgba(255, 214, 150, .5); }
.ncard:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.ncard .num { font: 400 30px/.9 var(--f-lamp); color: var(--lamp); text-shadow: var(--text-glow); text-align: center; }
.nb { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nb .t { font: 600 16px/1.3 var(--f-sans); }
.nb .h { font: 400 14px/1.4 var(--f-sans); color: var(--cream-2); }
.ncard .ic { width: 20px; height: 20px; color: var(--lamp-warm); }
.nda-note { margin: 12px 0 0; color: var(--cream-3); font-size: 14px; }

/* Buttons. */
.act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 22px; }
.ic { width: 20px; height: 20px; flex: none; }
.btn-main {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 150px; height: 54px; padding: 0 26px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 14px/1 var(--f-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--wine); background: linear-gradient(180deg, #FFF1D3, #F6D6A0);
  box-shadow: 0 0 0 1px rgba(255, 240, 210, .9), 0 0 28px 3px rgba(255, 186, 100, .45), 0 0 80px 14px rgba(255, 150, 70, .16);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.btn-main:hover { transform: translateY(-1px); }
.btn-main:focus-visible, .btn-ghost:focus-visible, .btn-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.btn-main:disabled { opacity: .55; cursor: progress; transform: none; }
.btn-main.wait .ic { animation: nudge 1s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(4px); } }
.btn-ghost { display: inline-flex; align-items: center; gap: 8px; height: 54px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; color: var(--cream-2);
  box-shadow: inset 0 0 0 1px var(--ring); font: 500 14px/1 var(--f-sans); transition: background .25s var(--ease); }
.btn-ghost:hover { background: rgba(252, 245, 220, .07); }
.btn-link { border: 0; background: none; padding: 6px 0; cursor: pointer; color: var(--lamp); font: 500 14px/1.2 var(--f-sans); text-decoration: underline; text-underline-offset: 3px; }
.hint { color: var(--cream-3); font-size: 14px; }
.hint.saved { margin: 16px 0 0; }
kbd { padding: 2px 7px; border-radius: 6px; font: 500 12px/1.4 var(--f-sans); background: rgba(252, 245, 220, .08); box-shadow: inset 0 0 0 1px var(--ring); color: var(--cream-2); }
@media (hover: none) { .hint kbd, .hint:has(kbd) { display: none; } }

/* The review. */
.sum { margin: 6px 0 0; padding: 0; }
.srow { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; row-gap: 2px; padding: 12px 0; box-shadow: inset 0 -1px 0 var(--ring); }
.srow dt { grid-column: 1 / -1; color: var(--cream-3); font-size: 14px; }
.srow dd { margin: 0; font: 500 18px/1.35 var(--f-sans); overflow-wrap: anywhere; }
.srow .edit { text-align: right; }
.none { color: var(--cream-3); font-weight: 400; }

.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.nojs { max-width: 760px; margin: 40px auto; padding: 0 16px; color: var(--cream-2); }

@media (max-width: 719px) {
  .opt { min-height: 56px; }
  .btn-main { flex: 1 1 100%; }
  .btn-ghost { flex: 0 0 auto; }
  .act .hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}