/* Orion by Gravity — self-serve trial. On-brand light treatment.
   Tokens lifted from gravity-design-system/tokens.css. */

@font-face {
  font-family: "Aspekta";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url(fonts/Aspekta-400.woff2) format("woff2");
}
@font-face {
  font-family: "Aspekta";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url(fonts/Aspekta-500.woff2) format("woff2");
}
@font-face {
  font-family: "Aspekta";
  font-weight: 550;
  font-style: normal;
  font-display: swap;
  src: url(fonts/Aspekta-550.woff2) format("woff2");
}

:root {
  --paper: #ffffff;
  --neutral: #f8f8f8;
  --ink: #2e2e2e;
  --muted: #525252;
  --muted-2: #6b6b6b;
  --space-grey: #858c98;
  --border: #e5e5e5;
  --border-2: #d6d5d2;
  --teal-deep: #17939e;
  --teal: #3cc5d2;
  --violet: #b852ff;
  --magenta: #ff52f6;
  --orchid: #d073fa;
  --orange: #ff890b;
  --success: #17939e;
  /* Accessible teal for text/links (AA on both paper and neutral). */
  --accent-text: #0c6f76;
  --danger: #c2410c;
  --gradient-nebula: linear-gradient(
    135deg,
    #17939e 0%,
    #b852ff 52%,
    #ff52f6 100%
  );
  --font: "Aspekta", "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 8px;
  --shadow-soft: 0 4px 16px rgba(16, 17, 19, 0.06),
    0 20px 60px rgba(16, 17, 19, 0.1);
}

* {
  box-sizing: border-box;
}
:root {
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
}

/* --- Layout --- */
main {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(400px, 2fr) 3fr;
}
.form-panel {
  padding: clamp(44px, 7vw, 96px);
}

/* --- Splash (right panel) --- */
.splash {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  background: url("https://www.bygravity.com/images/graphics/trial-signup-splash-bg-wash.webp")
    center left / cover no-repeat;
  box-shadow: inset 8px 0 50px rgba(0, 0, 0, 0.04);
}
/* Rooms loop, anchored to the bottom-right corner. The outer wrapper takes
   whatever height is left under the quote, and the frame's width is capped
   against that height (148.5cqh ~= the video's aspect ratio) so the panel
   can never ride up over the testimonial logo on short, wide viewports.
   Browsers without container-query units fall back to width alone.
   The corner is rounded on the frame rather than on the video, because
   Safari does not reliably clip video content to its own border-radius. */
.splash-room {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  container-type: size;
}
.splash-room-frame {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 91%;
  max-width: 148.5cqh;
  overflow: hidden;
  border-top-left-radius: 12px;
  box-shadow: -14px -14px 60px rgba(0, 0, 0, 0.16);
}
.splash-room-frame video {
  display: block;
  width: 100%;
  height: auto;
}
.splash-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 640px;
  padding: clamp(48px, 6vw, 80px) clamp(32px, 5vw, 64px);
  gap: 40px;
}

/* Testimonial quote */
.testimonial {
  margin: 0;
  text-align: center;
}
.testimonial p {
  margin: 0 0 28px;
  color: var(--ink);
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
}
.testimonial-logo {
  height: 28px;
  width: auto;
  opacity: 0.85;
}

/* --- Form --- */
.form-panel {
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: var(--paper);
}
.form-panel-inner {
  display: flex;
  flex-direction: column;
  width: min(100%, 440px);
}
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  margin-bottom: 48px;
}
.brand-logo {
  height: 24px;
  width: auto;
}
form,
.state {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.form-heading {
  margin-bottom: 32px;
}
h2 {
  margin: 0 0 10px;
  font-size: 30px;
  font-weight: 550;
  letter-spacing: -0.02em;
}
.form-heading p,
.state p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

/* Fields */
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 20px;
}
.field-label {
  font-size: 13px;
  font-weight: 550;
  color: var(--ink);
}
input {
  width: 100%;
  min-height: 0px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  padding: 8px 14px;
  color: var(--ink);
  background: var(--paper);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 400;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(23, 23, 23, 0.1);
}
input[aria-invalid="true"] {
  border-color: var(--danger);
}
input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.12);
}
input::placeholder {
  color: var(--muted-2);
  opacity: 1;
}
.field-error {
  display: none;
  padding: 8px 12px;
  border: 1px solid rgba(194, 65, 12, 0.15);
  border-radius: var(--radius);
  background: rgba(194, 65, 12, 0.08);
  color: var(--danger);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
}
.field-error.show {
  display: block;
}

/* One-time-code segmented input (shadcn-style connected slots) */
.otp {
  display: flex;
  width: 100%;
}
.otp-box {
  flex: 1 1 0;
  min-width: 0;
  height: 48px;
  padding: 0;
  position: relative;
  margin-left: -1px;
  border: 1px solid var(--border-2);
  border-radius: 0;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 550;
  letter-spacing: 0;
  caret-color: var(--ink);
}
.otp-box:first-child {
  margin-left: 0;
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}
.otp-box:last-child {
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}
.otp-box:focus {
  z-index: 1;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(23, 23, 23, 0.1);
}
.otp-box[aria-invalid="true"] {
  z-index: 1;
  border-color: var(--danger);
}

.agreement-field {
  padding: 10px 0;
}
.agreement {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  cursor: pointer;
}
.agreement input {
  width: 18px;
  min-height: 18px;
  margin-top: 1px;
  accent-color: var(--accent-text);
}
a {
  color: var(--accent-text);
}

/* Buttons */
.btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  border-radius: var(--radius);
  padding: 10px 14px;
  color: #fff;
  background: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.15s;
}
.btn:hover {
  background: #2e2e2e;
}
.btn:disabled {
  cursor: default;
}
.btn.is-loading {
  background: #2e2e2e;
  cursor: wait;
}
.btn-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
}
.btn-icon {
  display: inline-flex;
  align-items: center;
}
.btn-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: spin 0.7s linear infinite;
}
.btn.is-loading .btn-arrow {
  display: none;
}
.btn.is-loading .btn-spinner {
  display: inline-block;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn-spinner {
    animation-duration: 1.4s;
  }
}

.text-button {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  border: 0;
  border-radius: var(--radius);
  padding: 0 12px;
  color: var(--accent-text);
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.text-button:hover {
  text-decoration: underline;
}
.text-button:disabled {
  color: var(--muted-2);
  cursor: default;
  text-decoration: none;
}

.error {
  margin: 6px 0 10px;
  padding: 8px 12px;
  border: 1px solid rgba(194, 65, 12, 0.15);
  border-radius: var(--radius);
  background: rgba(194, 65, 12, 0.08);
  color: var(--danger);
  font-size: 13px;
  line-height: 1.4;
}
.error:empty {
  display: none;
}

/* --- Post-submit states --- */
.state {
  text-align: center;
}
/* Centers an inline-flex child (e.g. the progress pill) in the state views */
.center-row {
  display: flex;
  justify-content: center;
}
/* Progress pill indicator */
.progress-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 8px;
  border-radius: 999px;
  background: var(--neutral);
  margin-bottom: 28px;
  width: fit-content;
}
.progress-ring {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  /*
   * Gap at 12 o'clock: segment starts at -90° + (gap° / 2).
   * With dasharray 12 / 44.55 on r=9: arc ≈ 76.4°, gap ≈ 43.6° → start ≈ -68.2°.
   */
  --ring-seg-start: -68.2deg;
}
.ring-seg {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 12 44.55;
  opacity: 0.18;
  transition: opacity 0.25s;
  transform-origin: 12px 12px;
}
.ring-seg:nth-child(1) {
  transform: rotate(var(--ring-seg-start));
}
.ring-seg:nth-child(2) {
  transform: rotate(calc(var(--ring-seg-start) + 120deg));
}
.ring-seg:nth-child(3) {
  transform: rotate(calc(var(--ring-seg-start) + 240deg));
}
.ring-seg.is-on {
  opacity: 1;
}
.progress-label {
  font-size: 13px;
  font-weight: 550;
  color: var(--muted);
  letter-spacing: 0.01em;
}

.hidden {
  display: none !important;
}

/* --- Responsive --- */
@media (max-width: 900px) {
  main {
    grid-template-columns: 1fr;
  }
  .form-panel {
    padding: 48px 24px;
    align-items: stretch;
  }
  form,
  .state {
    width: 100%;
    margin: 0 auto;
    max-width: 440px;
  }
  .splash {
    display: none;
  }
  input {
    font-size: 1rem;
  }
}
@media (max-width: 480px) {
  .form-panel {
    padding: 32px 20px 44px;
  }
  h2 {
    font-size: 26px;
  }
  .otp-box {
    height: 44px;
  }
}