/* =====================================================================
   ORB · Sign-up page (design "Sign up C")
   One account for Touch and Bloo. Desktop + phone, pure CSS (no JS needed).
   Fonts: Geist (300–800) and Geist Mono (400/500), shared with /touch.
   Everything is scoped under .su so it can't clash with the rest of the site.
   ===================================================================== */

.su {
  --su-ink: #0A0A0C;
  --su-muted: #5D5C63;
  --su-body: #45444B;
  --su-faint: #8E8D95;
  --su-grad: linear-gradient(90deg, #00C8FF 0%, #1A3BFF 38%, #7B2BFF 70%, #FF7AB0 100%);
  --su-ease: cubic-bezier(.2, .7, .2, 1);
  --su-card-w: clamp(240px, 24vw, 340px);   /* the two product cards */

  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  color: var(--su-ink);
  font-family: 'Geist', 'Helvetica Neue', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.su *, .su *::before, .su *::after { box-sizing: border-box; }
.su a { color: inherit; text-decoration: none; }
.su a:focus-visible { outline: 2px solid #7B2BFF; outline-offset: 3px; border-radius: 4px; }
.su-mono { font-family: 'Geist Mono', ui-monospace, monospace; }

/* ---- header ---- */
.su-header { display: flex; align-items: center; justify-content: space-between; height: 84px; padding: 0 40px; }
.su-logo { display: inline-flex; align-items: center; gap: 10px; }
.su-logo.orb-brand { --logo-wordmark-w: 44px; --logo-orb: 14px; --logo-orb-gap: 10px; }
.su-header-login { font-size: 15px; color: var(--su-muted); }

/* gradient text link ("Log in") */
.su-link {
  background: var(--su-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
  font-weight: 600;
}
.su-link:hover { text-decoration: underline; text-decoration-color: #7B2BFF; }

/* ---- main: form left, the two products right ---- */
.su-main { flex: 1; display: flex; align-items: center; justify-content: center; gap: 72px; padding: 8px 40px 48px; }
.su-form { flex: 0 1 420px; min-width: 0; }
.su-eyebrow { font-size: 12px; letter-spacing: .18em; color: var(--su-muted); }
.su-title { margin: 18px 0 0; font-size: 76px; line-height: 1.05; font-weight: 800; letter-spacing: -0.045em; }

.su-google {
  margin-top: 44px; width: 100%; height: 60px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  border: 1px solid var(--su-ink); border-radius: 999px; background: var(--su-ink); color: #FFFFFF !important;
  font: 600 17px/1 'Geist', 'Helvetica Neue', system-ui, sans-serif; cursor: pointer;
  transition: transform .25s var(--su-ease), box-shadow .25s;
}
.su-google:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(123, 43, 255, .3); }
.su-google:focus-visible { outline: 2px solid #7B2BFF; outline-offset: 3px; }
.su-google-g { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #FFFFFF; }
.su-google[aria-busy="true"] { opacity: .7; pointer-events: none; }

.su-login { margin: 20px 0 0; font-size: 15px; color: var(--su-muted); text-align: center; }
.su-legal { margin: 28px 0 0; font-size: 12px; line-height: 1.5; color: var(--su-faint); }
.su-legal a { text-decoration: underline; }

/* ---- product cards ---- */
.su-products { display: flex; gap: 16px; }
.su-card {
  position: relative; width: var(--su-card-w); aspect-ratio: 340 / 460;
  border-radius: 28px; overflow: hidden; isolation: isolate;
  transition: transform .3s var(--su-ease), box-shadow .3s;
}
.su-card:hover { transform: translateY(-3px); box-shadow: 0 24px 60px rgba(123, 43, 255, .22); }
.su-card--touch { background: #0A0A0C; color: #F2F1EE; }
.su-card--bloo { background: #EEEEEE; color: var(--su-ink); }

.su-card-text { position: absolute; z-index: 2; left: 26px; top: 24px; right: 26px; }
.su-card-label { display: block; font-size: 11px; letter-spacing: .18em; }
.su-card--touch .su-card-label { color: #A9A8B0; }
.su-card--bloo .su-card-label { color: var(--su-muted); }
.su-card-name { display: block; margin-top: 10px; font-size: 48px; line-height: 1.05; font-weight: 800; letter-spacing: -0.045em; }
.su-card-line { display: block; margin-top: 10px; max-width: 230px; font-size: 15px; line-height: 1.4; }
.su-card--touch .su-card-line { color: #C9C8CF; }
.su-card--bloo .su-card-line { color: var(--su-body); }

/* gradient edge that lights up on hover (same as the landing page) */
.su-card::after {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 2px; pointer-events: none;
  background: linear-gradient(135deg, #00C8FF 0%, #1A3BFF 35%, #7B2BFF 68%, #FF7AB0 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .3s;
}
.su-card:hover::after { opacity: 1; }

/* Touch: glow + turning ring */
.su-touch-glow {
  position: absolute; left: 50%; top: 70%; width: 124%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, rgba(123, 43, 255, .5) 0%, rgba(26, 59, 255, .3) 30%, rgba(10, 10, 12, 0) 66%);
  animation: su-glow 9s ease-in-out infinite;
}
.su-touch-ring { position: absolute; left: 0; right: 0; bottom: 5%; display: flex; justify-content: center; }
.su-touch-ring img {
  display: block; width: 54%; height: auto;
  filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .65));
  animation: su-turn 9s ease-in-out infinite; will-change: transform;
}

/* Bloo: gently bobbing, blinking */
.su-bloo { position: absolute; left: -9%; right: -9%; bottom: -2%; display: flex; justify-content: center; }
.su-bloo-body { position: relative; width: 100%; aspect-ratio: 1604 / 1058; background: #EEEEEE; animation: su-bob 5.5s ease-in-out infinite; }
.su-bloo-body img { display: block; width: 100%; height: 100%; }
.su-eye { position: absolute; border-radius: 50%; overflow: hidden; }
.su-eye--l { left: 25.6%; top: 27.8%; width: 19%; height: 42.4%; }
.su-eye--r { left: 46.2%; top: 25.4%; width: 19.4%; height: 43%; }
.su-eye::before { content: ""; position: absolute; inset: 0; background: #000; transform: translateY(-104%); animation: su-blink 4.4s linear infinite; }

@keyframes su-turn {
  0%, 100% { transform: perspective(1600px) rotateY(-10deg) rotateZ(-1deg) translateY(0); }
  50%      { transform: perspective(1600px) rotateY(10deg) rotateZ(1deg) translateY(-12px); }
}
@keyframes su-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes su-blink { 0%, 6.8%, 10%, 100% { transform: translateY(-104%); } 8.4% { transform: translateY(0); } }
@keyframes su-glow { 0%, 100% { opacity: .75; scale: 1; } 50% { opacity: 1; scale: 1.06; } }
@media (prefers-reduced-motion: reduce) {
  .su *, .su *::before, .su *::after { animation: none !important; transition: none !important; }
}

/* ---- small laptops: tighten the gap ---- */
@media (max-width: 1200px) and (min-width: 900px) {
  .su-main { gap: 48px; }
  .su-title { font-size: clamp(56px, 6vw, 76px); }
  .su-card-name { font-size: 40px; }
}

/* =====================================================================
   Phone (under 900 px): title, the two products as wide cards, then the button
   ===================================================================== */
@media (max-width: 899px) {
  .su { padding: 0 20px 32px; display: block; }
  .su-header { height: 64px; padding: 0; }
  .su-header-login .su-header-q { display: none; }      /* header keeps just "Log in" */
  .su-header-login { font-size: 15px; }

  /* display: contents lets the form and the cards interleave in one column */
  .su-main { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
  .su-form { display: contents; }
  .su-eyebrow { order: 1; margin-top: 12px; font-size: 11px; }
  .su-title { order: 2; margin-top: 14px; font-size: 48px; }
  .su-products { order: 3; margin-top: 24px; flex-direction: column; gap: 12px; }
  .su-google { order: 4; margin-top: 24px; height: 58px; }
  .su-login { order: 5; margin-top: 18px; }
  .su-legal { order: 6; margin-top: 22px; text-align: center; }

  .su-card { width: 100%; aspect-ratio: auto; height: 180px; border-radius: 24px; }
  .su-card-name { font-size: 40px; }
  .su-card-line { max-width: 170px; }
  .su-touch-glow { left: auto; right: -40px; top: 50%; width: 260px; translate: 0 -50%; }
  .su-touch-ring { left: auto; right: 22px; bottom: 14px; display: block; }
  .su-touch-ring img { width: auto; height: 112px; filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .65)); }
  .su-bloo { left: auto; right: -46px; bottom: -6px; display: block; }
  .su-bloo-body { width: 184px; }
}

/* Keep showcase text clear of Bloo on compact phones. */
@media (max-width: 360px) {
  .su-card-line { max-width: 128px; font-size: 14px; }
  .su-bloo { right: -56px; }
  .su-bloo-body { width: 160px; }
}

/* Keep signup actions together and ahead of showcase cards on phones. */
.su-signup-actions{margin-top:28px}
.su-signup-actions .su-google{margin-top:20px}
.su button.su-link:focus-visible{outline:2px solid #7B2BFF;outline-offset:3px;border-radius:4px}
@media(max-width:899px){.su-signup-actions{order:3;margin-top:24px}.su-products{order:6}.su-login{order:4}.su-legal{order:5}}

/* Keep the optional field separate from consent and sign-in actions. */
.su #signup-invitation-code { margin-bottom: 20px; }