/* Contact · a flight at sunset. Homepage foundations (ICOMAT): vr unit, 20vr margins,
   60vr / .98 / -.9vr title, 18vr copy, 11vr mono labels with .22vr tracking, 8vr glass tiles,
   the chrome Create button at 48px. */
@font-face{font-family:RaioHeroLay;src:url('../fonts/icomat-lay-grotesk-semibold.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:RaioHeroMono;src:url('../fonts/icomat-akkurat-mono.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

:root {
  --vr: calc((100vw / 1440 + 1px + 100svh / 933 + 1px) / 4);
  --m: calc(20 * var(--vr));
  --ink: #fffaf2;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}
@media (max-width: 700px), (max-width: 950px) and (max-height: 500px) {
  :root { --vr: calc((100vw / 393 + 1px + 100svh / 812 + 1px) / 4); }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
html { background: #2a2f57; }
body {
  position: relative; overflow: hidden; color: var(--ink);
  font-family: RaioHeroLay, Arial, sans-serif; font-weight: 400;
  /* Fallback sunset when WebGL is unavailable or motion is reduced */
  background: linear-gradient(180deg, #3d4a7c 0%, #8a5f7e 38%, #e2805e 66%, #f6b07a 82%, #ffd9a6 100%);
  -webkit-font-smoothing: antialiased;
}
body::after { content: ""; position: fixed; inset: 0; z-index: 30; pointer-events: none; background: url('../images/raio-grain.svg') repeat; opacity: .06; mix-blend-mode: overlay; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
::selection { background: #f08a5c; color: #1c1f3f; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

#sky { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }

/* ---------- Header: same geometry as the site header ---------- */
.cs-head {
  position: fixed; z-index: 10; top: max(calc(22 * var(--vr)), env(safe-area-inset-top));
  left: var(--m); right: var(--m); display: flex; justify-content: space-between; align-items: center; gap: 20px;
}
.cs-brand { display: flex; align-items: center; gap: calc(10 * var(--vr)); text-decoration: none; font-size: calc(25 * var(--vr)); letter-spacing: calc(-.5 * var(--vr)); white-space: nowrap; }
.cs-brand img { width: calc(27 * var(--vr)); height: calc(28 * var(--vr)); filter: brightness(0) invert(1); }
.cs-mono { font: calc(11 * var(--vr))/.91 RaioHeroMono, monospace; letter-spacing: calc(.22 * var(--vr)); text-transform: uppercase; }
.cs-exit { display: flex; align-items: center; gap: calc(12 * var(--vr)); text-decoration: none; }
.cs-tile {
  display: grid; place-items: center; width: calc(60 * var(--vr)); height: calc(43 * var(--vr)); min-width: 44px; min-height: 40px;
  border: 0; border-radius: calc(8 * var(--vr)); background: #ffffff1f; backdrop-filter: blur(43px); -webkit-backdrop-filter: blur(43px);
  color: inherit; transition: background .25s;
}
.cs-tile:hover { background: #ffffff33; }
.cs-tile svg { width: 18px; height: 18px; }

/* ---------- Footer: back, route and step counter, email ---------- */
.cs-foot {
  position: fixed; z-index: 10; left: var(--m); right: var(--m);
  bottom: max(calc(24 * var(--vr)), env(safe-area-inset-bottom));
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  transition: bottom .25s;
}
.cs-nav { display: flex; align-items: center; gap: calc(14 * var(--vr)); min-width: 0; }
.cs-nav .cs-tile[hidden] + .cs-route { margin-left: 0; }
.cs-route { opacity: .75; white-space: nowrap; }
.cs-mail { display: flex; align-items: center; gap: 8px; text-decoration: none; white-space: nowrap; }
.cs-mail svg { width: 12px; height: 12px; }

/* ---------- Conversation: one flow for the question, answer and action ---------- */
:root {
  --cs-space: calc(8 * var(--vr));
  --cs-answer-width: calc(480 * var(--vr));
  --cs-header-clearance: max(88px, calc(88 * var(--vr)));
  --cs-footer-clearance: max(96px, calc(96 * var(--vr)));
}
.cs-stage {
  position: fixed; z-index: 2;
  inset: var(--cs-header-clearance) 0 calc(var(--cs-footer-clearance) + var(--keyboard, 0px));
  display: flex; flex-direction: column; align-items: center;
  padding: calc(4 * var(--cs-space)) var(--m);
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: #fffaf266 transparent;
}
.cs-stage.is-transitioning { overflow: visible; }
.cs-panel {
  flex: none; width: min(100%, calc(760 * var(--vr))); min-width: 0;
  margin-block: auto; text-align: center;
}
.cs-card {
  width: 100%; min-width: 0;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.cs-card.is-leaving {
  position: fixed; z-index: 2; pointer-events: none;
}
.cs-motion-space { width: 100%; }
.cs-q {
  margin: 0 0 calc(4 * var(--cs-space)); max-width: calc(650 * var(--vr));
  font-size: clamp(40px, calc(60 * var(--vr)), 72px); line-height: .98;
  letter-spacing: -.015em; text-wrap: balance; overflow-wrap: anywhere;
}
.cs-q:focus { outline: none; }
.cs-ctx {
  margin: calc(-2 * var(--cs-space)) 0 calc(4 * var(--cs-space));
  max-width: var(--cs-answer-width); font-size: calc(18 * var(--vr));
  line-height: 1.35; opacity: .85; text-wrap: pretty;
}
.cs-field { width: var(--cs-answer-width); max-width: 100%; display: block; }
.cs-field > span { display: block; margin-bottom: calc(2 * var(--cs-space)); opacity: .85; }
.cs-field input, .cs-field textarea {
  display: block; width: 100%; border: 0; border-bottom: 1px solid #fffaf2b3;
  border-radius: 0; background: none; outline: none; color: var(--ink);
  caret-color: #ffc996; text-align: center;
  font-size: max(17px, calc(18 * var(--vr))); line-height: 1.4;
  padding: var(--cs-space) 0 calc(2 * var(--cs-space)); transition: border-color .2s;
}
.cs-field textarea { min-height: calc(120 * var(--vr)); resize: vertical; text-align: left; }
.cs-field input:focus, .cs-field textarea:focus { border-bottom-color: var(--ink); }
.cs-field input::placeholder, .cs-field textarea::placeholder { color: var(--ink); opacity: .75; }
.cs-field [aria-invalid=true] { border-bottom-color: #ffb38f; }
.cs-error {
  width: var(--cs-answer-width); max-width: 100%;
  margin: calc(1.5 * var(--cs-space)) 0 0; font-size: max(14px, calc(14 * var(--vr)));
  line-height: 1.35; color: #ffd1b8;
}
.cs-error:empty { display: none; }

.cs-choices {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  width: var(--cs-answer-width); max-width: 100%; gap: calc(1.5 * var(--cs-space));
}
.cs-choices.is-single { width: 100%; grid-template-columns: repeat(var(--count, 3), minmax(0, 1fr)); }
.cs-choice {
  display: flex; align-items: center; justify-content: space-between; gap: calc(2 * var(--cs-space));
  min-height: max(54px, calc(56 * var(--vr))); min-width: 0;
  padding: calc(2 * var(--cs-space)); border: 0; border-radius: calc(8 * var(--vr));
  background: #ffffff1f; backdrop-filter: blur(43px); -webkit-backdrop-filter: blur(43px);
  color: inherit; font-size: max(17px, calc(18 * var(--vr))); line-height: 1.2; text-align: left;
  transition: background .25s, transform .45s var(--ease);
}
.cs-choice:hover { background: #ffffff33; transform: translateY(-2px); }
.cs-choice[aria-pressed=true] { background: #fffaf2; color: #1c1f3f; }
.cs-choice svg { width: 16px; height: 16px; flex: none; }

/* ---------- Summary ---------- */
.cs-card.is-review .cs-q { font-size: clamp(32px, calc(44 * var(--vr)), 56px); max-width: 100%; }
.cs-review {
  width: 100%; margin: 0; text-align: left; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(4 * var(--cs-space));
}
.cs-review > div:has(dt.is-wide) { grid-column: 1 / -1; }
.cs-review > div {
  display: grid; grid-template-columns: calc(80 * var(--vr)) minmax(0, 1fr) 44px;
  gap: calc(1.5 * var(--cs-space)); align-items: center;
  padding: var(--cs-space) 0; border-bottom: 1px solid #fffaf233;
}
.cs-review dt { opacity: .85; }
.cs-review dd { margin: 0; font-size: max(16px, calc(17 * var(--vr))); line-height: 1.35; overflow-wrap: anywhere; white-space: pre-line; }
.cs-review button {
  width: 44px; height: 44px; display: grid; place-items: center; border: 0;
  border-radius: calc(8 * var(--vr)); background: none; color: inherit; opacity: .85;
}
.cs-review button:hover { opacity: 1; background: #ffffff1f; }
.cs-review button svg { width: 16px; height: 16px; }
.cs-handoff {
  margin: calc(3 * var(--cs-space)) 0 0; max-width: var(--cs-answer-width);
  font-size: max(14px, calc(14 * var(--vr))); line-height: 1.5; opacity: .85; text-wrap: pretty;
}
.cs-handoff a { text-underline-offset: 3px; }

/* ---------- Actions remain attached to their answer ---------- */
.cs-actions {
  width: 100%; display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: calc(2 * var(--cs-space)) calc(3 * var(--cs-space));
  margin-top: calc(4 * var(--cs-space));
}
.cs-actions .raio-create-button { --raio-create-height: 48px; }
.cs-actions .is-off { display: none; }
.cs-skip { border: 0; background: none; min-height: 44px; padding: 12px 0; text-decoration: underline; text-underline-offset: 4px; }
.cs-key { flex-basis: 100%; opacity: .75; }
.cs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Phone: readable top composition and a scrollable keyboard area ---------- */
@media (max-width: 700px), (max-width: 950px) and (max-height: 500px) {
  :root { --cs-header-clearance: calc(112 * var(--vr)); --cs-footer-clearance: 96px; }
  .cs-brand { font-size: calc(22 * var(--vr)); gap: calc(8 * var(--vr)); }
  .cs-brand img { width: calc(25 * var(--vr)); height: calc(28 * var(--vr)); }
  .cs-exit > span:first-child { display: none; }
  .cs-tile { width: 48px; height: 44px; min-height: 44px; }
  .cs-stage { padding-top: calc(4 * var(--cs-space)); }
  /* Auto margins center short steps and collapse to zero for scrollable content. */
  .cs-panel { margin-block: auto; }
  .cs-q {
    font-size: clamp(30px, calc(35 * var(--vr)), 42px); max-width: 100%;
    margin-bottom: calc(3 * var(--cs-space));
  }
  .cs-ctx { font-size: 17px; margin-bottom: calc(3 * var(--cs-space)); }
  .cs-field, .cs-choices, .cs-choices.is-single { width: 100%; }
  .cs-choices, .cs-choices.is-single { grid-template-columns: 1fr; }
  .cs-choice { min-height: 56px; font-size: 17px; }
  .cs-review { grid-template-columns: 1fr; }
  .cs-review > div { grid-template-columns: 64px minmax(0, 1fr) 44px; gap: 12px; }
  .cs-card.is-review .cs-q { font-size: clamp(28px, calc(32 * var(--vr)), 38px); }
  .cs-review dd { font-size: 16px; }
  .cs-actions { margin-top: calc(3 * var(--cs-space)); gap: 12px 20px; }
  .cs-skip { flex-basis: 100%; }
  .cs-key { display: none; }
  .cs-route { font-variant-numeric: tabular-nums; }
  .cs-foot { bottom: calc(max(calc(24 * var(--vr)), env(safe-area-inset-bottom)) + var(--keyboard, 0px)); }
  body.is-typing .cs-head { opacity: 0; pointer-events: none; }
  body.is-typing .cs-stage { top: 0; padding-top: 24px; padding-bottom: 24px; }
}
@media (max-height: 620px) {
  .cs-stage { padding-block: 20px; }
  .cs-q { font-size: 36px; margin-bottom: 24px; }
  .cs-panel { margin-block: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}