* {
  margin:0;
  padding:0
}
body {
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center
}
.page {
  width:100%;
  max-width:460px;
  padding:76px 28px 32px;
  display:flex;
  flex-direction:column;
  align-items:center
}
.dial-wrap {
  width:286px;
  height:286px;
  max-width:100%;
  margin-bottom:30px
}
.dial-wrap svg {
  width:100%;
  height:100%;
  display:block;
  overflow:visible
}
.dial-center {
  fill:var(--dial-face)
}
.dial-mark {
  fill:none;
  stroke:var(--accent);
  stroke-width:4.5;
  stroke-linecap:round
}
.dial-ticks {
  fill:none;
  stroke:var(--tertiary);
  stroke-width:1.65;
  stroke-linecap:round;
  opacity:.65
}
.dial-progress {
  fill:none;
  stroke:var(--accent);
  stroke-width:2.3;
  stroke-linecap:round
}
.dial-marker {
  fill:var(--accent)
}
.title {
  font-size:56px;
  font-weight:650;
  letter-spacing:-.06em;
  line-height:1.1;
  margin-bottom:14px
}
.tagline {
  font-size:17px;
  line-height:1.5;
  letter-spacing:-.025em;
  color:var(--secondary);
  text-align:center
}
.status {
  font-size:12px;
  letter-spacing:.015em;
  color:var(--tertiary);
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:14px;
  margin-bottom:38px
}
.status:before {
  content:'';
  width:5px;
  height:5px;
  background:var(--accent);
  border-radius:50%
}
.cta-area {
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:stretch
}
.form-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
  font-size:12px;
  color:var(--secondary);
  padding:0 4px
}
#stepCount {
  font-variant-numeric:tabular-nums;
  color:var(--tertiary);
  font-size:11px
}
.input-slot {
  position:relative;
  width:100%;
  min-height:62px
}
.input-row {
  position:absolute;
  inset:0;
  display:flex;
  align-items:stretch;
  padding:5px;
  gap:5px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:20px;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transition:border-color .16s ease
}
.input-row.active {
  visibility:visible;
  opacity:1;
  pointer-events:auto
}
.input-row:focus-within {
  border-color:var(--accent);
  outline:1px solid var(--accent);
  outline-offset:2px
}
.input-row input {
  min-width:0;
  width:100%;
  flex:1;
  background:none;
  border:0;
  outline:0;
  padding:10px 12px;
  color:var(--text);
  font-size:16px
}
.input-row input::placeholder {
  color:var(--tertiary)
}
.input-row button,.success-cta,.ios-install a {
  background:var(--primary);
  color:#fff;
  border:0;
  border-radius:15px;
  padding:0 22px;
  min-height:50px;
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
  cursor:pointer;
  transition:background .16s ease,transform .16s ease
}
.input-row button:hover,.success-cta:hover,.ios-install a:hover {
  background:var(--pressed)
}
.input-row button:active {
  transform:scale(.97)
}
.input-error {
  font-size:13px;
  line-height:1.5;
  color:var(--danger);
  margin-top:12px
}
.input-error:empty,.step-label:empty {
  display:none
}
.step-label {
  font-size:12px;
  color:var(--secondary);
  line-height:1.5;
  overflow-wrap:anywhere;
  margin-top:10px;
  text-align:center
}
.field-hint {
  font-size:12px;
  color:var(--secondary);
  line-height:1.5;
  margin-top:14px
}
.step-tools {
  display:flex;
  justify-content:space-between;
  margin-top:8px
}
.step-tools button {
  background:none;
  color:var(--secondary);
  border:0;
  min-height:44px;
  padding:0 4px;
  font-size:12px;
  cursor:pointer
}
.step-tools button:hover {
  color:var(--accent)
}
.success-msg {
  display:none;
  text-align:center;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:24px;
  padding:26px 20px
}
.success-msg .check {
  color:var(--success);
  font-size:26px;
  margin-bottom:12px
}
.success-msg p {
  font-size:17px;
  font-weight:550;
  line-height:1.5
}
.success-msg .success-sub {
  font-size:13px;
  font-weight:400;
  color:var(--secondary);
  margin-top:8px
}
.success-cta {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  margin-top:22px
}
.footer {
  margin-top:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  font-size:12px;
  color:var(--border)
}
.footer a {
  color:var(--tertiary);
  text-decoration:none;
  display:flex;
  align-items:center;
  min-height:44px
}
.footer a:hover {
  color:var(--accent)
}
.ios-install {
  display:none;
  width:100%;
  margin-bottom:20px
}
body.is-ios .ios-install {
  display:block
}
.ios-install a {
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none
}
.or-divider {
  font-size:12px;
  color:var(--secondary);
  text-align:center;
  margin-top:16px
}
.security-check {
  display:flex;
  justify-content:center;
  margin-top:16px
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
@media(max-width:480px) {
  .page {
    padding:76px 24px 28px
  }
  .dial-wrap {
    width:250px;
    height:250px;
    margin-bottom:28px
  }
  .title {
    font-size:48px
  }
  .tagline {
    font-size:16px
  }
  .status {
    margin-bottom:32px
  }
  .input-row button {
    padding:0 18px
  }
  .appearance {
    top:18px;
    right:20px
  }
  .footer {
    margin-top:26px
  }
}
@media(max-width:350px) {
  .page {
    padding-left:20px;
    padding-right:20px
  }
  .dial-wrap {
    width:220px;
    height:220px
  }
  .input-row button {
    padding:0 12px;
    font-size:12px
  }
  .input-row input {
    padding-left:8px
  }
  .tagline {
    font-size:14px
  }
}
@media(max-height:740px) and (min-width:481px) {
  .page {
    padding-top:60px
  }
  .dial-wrap {
    width:230px;
    height:230px;
    margin-bottom:20px
  }
  .status {
    margin-bottom:26px
  }
}

.signup-legal { max-width: 34rem; margin: 12px auto 0; font-size: 12px; line-height: 1.6; color: var(--secondary); text-align: center; }
.signup-legal a { color: inherit; text-underline-offset: 3px; }

/* App-aligned white landing: same centered composition as dyalapp.com. */
.page { max-width:460px; padding-top:48px; padding-bottom:24px; }
.dial-wrap { position:relative; flex-shrink:0; width:300px; height:300px; border:0; background:none; padding:0; margin-bottom:32px; cursor:pointer; border-radius:50%; }
.dial-wrap > svg { position:relative; z-index:1; }
.dial-center { fill:var(--dial-face); }
.dial-ticks { stroke:var(--strong); opacity:1; stroke-width:1.25; }
.dial-progress { stroke:var(--accent); stroke-width:2; }
.dial-marker { fill:var(--accent); }
.dial-logo { position:absolute; z-index:2; width:47%; height:51%; left:26.5%; top:24.5%; overflow:hidden; mix-blend-mode:multiply; pointer-events:none; }
.dial-logo img { position:absolute; width:403.18%; max-width:none; height:auto; left:-250%; top:-39.58%; filter:grayscale(1) contrast(8); }
.dial-shader { position:absolute; inset:0; width:100%; height:100%; opacity:0; pointer-events:none; }
.title { font-size:52px; font-weight:700; letter-spacing:-.055em; margin-bottom:10px; }
.tagline { font-size:18px; font-weight:400; letter-spacing:-.025em; }
.status { margin-top:12px; margin-bottom:32px; }
.form-heading { margin-bottom:10px; }
.input-row { border-color:var(--border); background:var(--surface); border-radius:22px; }
.input-row button { border-radius:17px; }
.footer { margin-top:24px; }
@media(max-width:480px) {
  .page { padding:40px 24px 20px; }
  .dial-wrap { width:260px; height:260px; margin-bottom:28px; }
  .title { font-size:46px; }
  .tagline { font-size:17px; }
  .status { margin-bottom:28px; }
}
@media(max-width:350px) {
  .page { padding-left:20px; padding-right:20px; }
  .dial-wrap { width:230px; height:230px; }
  .tagline { font-size:16px; }
}
@media(max-height:740px) and (min-width:481px) {
  .page { padding-top:28px; }
  .dial-wrap { width:240px; height:240px; margin-bottom:20px; }
}

/* The landing dial is an interactive, silent preview of Dyal's control. */
.dial-wrap { margin-bottom:12px; cursor:default; }
.dial-wrap > svg { pointer-events:none; }
.dial-scrubber { position:absolute; inset:0; z-index:3; border-radius:50%; cursor:grab; touch-action:none; }
.dial-scrubber:active { cursor:grabbing; }
.dial-scrubber:focus-visible { outline:2px solid var(--strong); outline-offset:6px; }
.dial-toggle { position:absolute; z-index:4; inset:18.125%; border-radius:50%; border:0; background:transparent; color:var(--dial-ink); display:grid; place-items:center; cursor:pointer; }
.dial-toggle:hover svg { opacity:.72; }
.dial-toggle svg { width:26px; height:26px; }
.pause-icon { stroke:currentColor; stroke-width:4; stroke-linecap:round; fill:none; }
.play-icon { fill:currentColor; display:none; }
.dial-wrap.is-paused .pause-icon { display:none; }
.dial-wrap.is-paused .play-icon { display:block; }
.dial-hint { color:var(--secondary); font-size:11px; margin-bottom:28px; text-align:center; }
.tagline { margin-bottom:32px; }

.dial-wrap { margin-bottom:32px; aspect-ratio:1; height:auto; }

.dial-wrap > svg { transition:transform .3s cubic-bezier(.2,.8,.3,1); }
.dial-wrap.is-scrubbing > svg { transform:scale(1.08); transition-duration:.25s; }
.dial-time { display:none; position:absolute; inset:0; place-items:center; font:600 30px ui-monospace,monospace; color:var(--dial-ink); pointer-events:none; z-index:4; }
.is-scrubbing .dial-time { display:grid; }
.is-scrubbing .dial-toggle { visibility:hidden; }