:root{
  --ink:        #EAF0EA;
  --muted:      #9DB0A2;
  --faint:      #6F8175;
  --ground:     #0E1512;
  --surface:    #16201A;
  --line:       #24312A;
  --leaf:       #46B877;
  --leaf-deep:  #1E7A43;
  --leaf-soft:  #16301F;
  --danger:     #EF6B5B;

  --r-card:  18px;
  --r-ctl:   12px;
  --r-pill:  999px;
}

*{ box-sizing: border-box }

html, body{
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a{ color: var(--leaf); text-underline-offset: 3px }

.wrap{ max-width: 460px; margin: 0 auto; padding: 28px 20px 64px }

.brand{ display:flex; align-items:center; gap:12px; margin-bottom: 26px }
.brand .mark{
  width:44px; height:44px; border-radius:14px; flex:0 0 44px;
  background: linear-gradient(150deg, var(--leaf), var(--leaf-deep));
  display:grid; place-items:center; font-size:22px;
}
.brand .kicker{ font-size:12.5px; color:var(--muted) }
.brand h1{ font-size:20px; margin:0; letter-spacing:-.2px }

h2{ font-size:22px; margin:0 0 6px; letter-spacing:-.3px }
.sub{ color:var(--muted); font-size:14px; margin:0 0 22px }

.card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 18px;
  margin-bottom: 14px;
}
.card.tint{ background: var(--leaf-soft); border-color: transparent }

label{ display:block; font-size:12px; letter-spacing:.06em;
       text-transform:uppercase; color:var(--muted); margin-bottom:7px }

input{
  width:100%; padding:13px 14px; font:inherit; font-size:15px;
  color:var(--ink); background:#101914;
  border:1px solid var(--line); border-radius: var(--r-ctl);
}
input:focus{ outline:none; border-color: var(--leaf);
             box-shadow: 0 0 0 3px rgba(70,184,119,.16) }
input::placeholder{ color:var(--faint) }

.btn{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; padding:15px 18px; margin-top:14px;
  font:inherit; font-size:15.5px; font-weight:600;
  border:0; border-radius: var(--r-ctl); cursor:pointer;
  background: var(--leaf); color:#08140C;
}
.btn:hover{ filter: brightness(1.06) }
.btn:disabled{ opacity:.55; cursor:default; filter:none }
.btn.ghost{ background:transparent; color:var(--leaf);
            border:1px solid var(--line) }

.link{ display:block; width:100%; margin-top:14px; padding:6px;
       background:none; border:0; color:var(--leaf); font:inherit;
       font-size:14.5px; cursor:pointer; text-align:center }

.day{ font-size:12px; letter-spacing:.08em; text-transform:uppercase;
      color:var(--muted); margin:18px 0 10px }
.slots{ display:flex; flex-wrap:wrap; gap:10px }
.slot{
  padding:13px 16px; min-width:112px; text-align:left; cursor:pointer;
  background: var(--surface); color:var(--ink);
  border:1px solid var(--line); border-radius:14px; font:inherit;
}
.slot:hover{ border-color: var(--leaf) }
.slot .t{ display:block; font-size:17px; font-weight:600 }
.slot .m{ display:block; font-size:12.5px; color:var(--muted); margin-top:2px }

.held{ display:flex; align-items:center; gap:8px;
       color:var(--leaf); font-size:14px; margin-top:10px }

.note{ color:var(--faint); font-size:12.5px; margin-top:12px }
.center{ text-align:center }

.err{
  background:#2A1714; border:1px solid #50251F; color:#F0A79B;
  border-radius: var(--r-ctl); padding:12px 14px; margin-bottom:16px;
  font-size:14px;
}

.done .tick{
  width:76px; height:76px; margin:34px auto 18px; border-radius:24px;
  background: var(--leaf-soft); display:grid; place-items:center;
  font-size:34px; color: var(--leaf);
}

.steps{ display:flex; gap:6px; margin-bottom:22px }
.steps i{ height:3px; flex:1; border-radius:2px; background:var(--line) }
.steps i.on{ background: var(--leaf) }

[hidden]{ display:none !important }

.doc{ max-width: 720px }
.doc h2{ margin-top:30px }
.doc h3{ font-size:16px; margin:24px 0 6px }
.doc p, .doc li{ color:#C8D4CB; font-size:15px }
.doc li{ margin-bottom:7px }
.doc .updated{ color:var(--faint); font-size:13px }
.doc table{ border-collapse:collapse; width:100%; margin:14px 0 }
.doc th, .doc td{ text-align:left; padding:10px 12px;
                  border-bottom:1px solid var(--line); font-size:14.5px }
.doc th{ color:var(--muted); font-weight:600 }

.foot{ margin-top:44px; padding-top:20px; border-top:1px solid var(--line);
       display:flex; flex-wrap:wrap; gap:14px; font-size:13.5px }
.foot a{ color:var(--muted); text-decoration:none }
.foot a:hover{ color:var(--leaf) }

.wrap.flow{
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-top: 22px;
  padding-bottom: 22px;
}

.wrap.flow .middle{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}

.wrap.flow .foot{ margin-top: 24px; border-top: 0; justify-content: center }

.brand.stack{
  flex-direction: column;
  gap: 10px;
  text-align: center;
  margin-bottom: 22px;
}
.brand.stack .mark{ width:56px; height:56px; flex-basis:56px;
                    border-radius:18px; font-size:27px }
.brand.stack h1{ font-size:26px; letter-spacing:-.4px }
.brand.stack .kicker{ font-size:13px }

.wrap.flow h2{ text-align:center; font-size:24px }
.wrap.flow .sub{ text-align:center }

.wrap.flow .steps{ margin-bottom: 26px }

.wrap.flow{ justify-content: flex-start }